From 82cd857e833f7733cde58eee8891f3f1662e2ecd Mon Sep 17 00:00:00 2001 From: Chrystal Griffiths Date: Thu, 6 Sep 2018 15:53:34 +0100 Subject: [PATCH 1/8] Set fixed height for portal titles --- services/web/public/stylesheets/app/templates-v2.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less index 1cdc054398..fe833efc53 100644 --- a/services/web/public/stylesheets/app/templates-v2.less +++ b/services/web/public/stylesheets/app/templates-v2.less @@ -74,6 +74,11 @@ } + .caption.caption--portals { + height: 50px; + overflow: hidden; + } + /* Media Queries */ @media (max-width: @screen-md-min) { .thumbnail { From 6576d95e27f9babe8c4e487b70f8f66324112d74 Mon Sep 17 00:00:00 2001 From: Chrystal Griffiths Date: Wed, 12 Sep 2018 11:48:49 +0100 Subject: [PATCH 2/8] Don't stretch images --- services/web/public/stylesheets/app/templates-v2.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less index fe833efc53..98e998714f 100644 --- a/services/web/public/stylesheets/app/templates-v2.less +++ b/services/web/public/stylesheets/app/templates-v2.less @@ -40,8 +40,8 @@ } img { + max-height: 100%; width: 100%; - height: 100%; } } @@ -76,7 +76,6 @@ .caption.caption--portals { height: 50px; - overflow: hidden; } /* Media Queries */ From 630f15e8ea620f98a7a1639eb14c661cfe627a21 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Thu, 13 Sep 2018 11:15:31 +0100 Subject: [PATCH 3/8] Fix flex links not overflowing correctly and refactor --- .../public/stylesheets/app/templates-v2.less | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less index 98e998714f..9d3fdbfd60 100644 --- a/services/web/public/stylesheets/app/templates-v2.less +++ b/services/web/public/stylesheets/app/templates-v2.less @@ -58,24 +58,20 @@ } .caption { - // Override ShareLatex template styles - background: none; - border: none; - + // Override ShareLatex template styles + background: none; + border: none; text-align: center; - - .description { - font-style: italic; - padding: 5px 0; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - .caption.caption--portals { - height: 50px; + .caption__description { + font-style: italic; + padding: 5px 0; + .text-overflow(); + + a { + display: inline; + } } /* Media Queries */ From ed7c5f32b0d3167ab1c6415e6af3de31e80597ec Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Thu, 13 Sep 2018 11:28:48 +0100 Subject: [PATCH 4/8] Move styles on element to class --- .../public/stylesheets/app/templates-v2.less | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less index 9d3fdbfd60..6b949892d9 100644 --- a/services/web/public/stylesheets/app/templates-v2.less +++ b/services/web/public/stylesheets/app/templates-v2.less @@ -34,6 +34,15 @@ -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1); height: 465px; margin: 5% 0; + padding:0px; + display: flex; + justify-content: center; + align-items: center; + + h3 { + color:@link-color; + margin: 10px 0px 10px 20px; + } &.thumbnail-tag { height: 100px; @@ -45,18 +54,6 @@ } } - a { - padding:0px; - h3 { - color:@link-color; - margin: 10px 0px 10px 20px; - } - - display: flex; - justify-content: center; - align-items: center; - } - .caption { // Override ShareLatex template styles background: none; From 6cbab69444b29c7fe40b3dc8ac4faf0278f55da6 Mon Sep 17 00:00:00 2001 From: Chrystal Griffiths Date: Thu, 13 Sep 2018 16:14:13 +0100 Subject: [PATCH 5/8] Remove style covered by autoprefixer --- services/web/public/stylesheets/app/templates-v2.less | 1 - 1 file changed, 1 deletion(-) diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less index 6b949892d9..24bebe745f 100644 --- a/services/web/public/stylesheets/app/templates-v2.less +++ b/services/web/public/stylesheets/app/templates-v2.less @@ -31,7 +31,6 @@ .thumbnail { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1); height: 465px; margin: 5% 0; padding:0px; From 89c381086bf11a978246659e6552275f427ffaf2 Mon Sep 17 00:00:00 2001 From: Jessica Lawshe Date: Tue, 18 Sep 2018 16:07:47 -0500 Subject: [PATCH 6/8] Remove fixed height and add masonry-based layout --- services/web/public/stylesheets/app/templates-v2.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less index 24bebe745f..dc44a70219 100644 --- a/services/web/public/stylesheets/app/templates-v2.less +++ b/services/web/public/stylesheets/app/templates-v2.less @@ -27,11 +27,17 @@ margin-right: @margin-xs; } -.template-thumbnail { +.templates-container { + column-count: 3; + column-gap: 1em; +} +.template-thumbnail { + display: inline-block; + margin: 0 0 1em; + width: 100%; .thumbnail { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - height: 465px; margin: 5% 0; padding:0px; display: flex; From bc1a8953a1fd1b0f7609faa7b62b9f74e70f395a Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Thu, 20 Sep 2018 14:53:07 +0100 Subject: [PATCH 7/8] Remove fixed heights, moving to masonry layout --- .../public/stylesheets/app/templates-v2.less | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less index dc44a70219..1f7fe8c5fc 100644 --- a/services/web/public/stylesheets/app/templates-v2.less +++ b/services/web/public/stylesheets/app/templates-v2.less @@ -43,6 +43,7 @@ display: flex; justify-content: center; align-items: center; + overflow: hidden; h3 { color:@link-color; @@ -52,11 +53,6 @@ &.thumbnail-tag { height: 100px; } - - img { - max-height: 100%; - width: 100%; - } } .caption { @@ -70,25 +66,14 @@ font-style: italic; padding: 5px 0; .text-overflow(); - - a { - display: inline; - } } /* Media Queries */ @media (max-width: @screen-md-min) { .thumbnail { - height: 400px; - width: 300px; - margin: 5% auto; } - img { - width: 90%; - } - .caption .description { padding: 5px 50px; } From 6f794c32e18c1ddf21b4ecbd547c305d9c8bb0a2 Mon Sep 17 00:00:00 2001 From: Alasdair Smith Date: Thu, 20 Sep 2018 14:53:23 +0100 Subject: [PATCH 8/8] Fix tab link hover styles applying to all children --- .../web/public/stylesheets/components/tabs.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/services/web/public/stylesheets/components/tabs.less b/services/web/public/stylesheets/components/tabs.less index 3fa4fb106c..0e1959e694 100644 --- a/services/web/public/stylesheets/components/tabs.less +++ b/services/web/public/stylesheets/components/tabs.less @@ -6,14 +6,14 @@ margin-top: -@line-height-computed; //- adjusted for portal-name padding: @padding-lg 0 @padding-md; text-align: center; - } - a { - color: @link-color; - &:hover { - background-color: transparent!important; - border: 0!important; - color: @link-hover-color!important; + a { + color: @link-color; + &:hover { + background-color: transparent!important; + border: 0!important; + color: @link-hover-color!important; + } } }