text line limits and centering in recent documents

gwu-libraries · Mar 7, 2024 · d67a7a2 · d67a7a2
1 parent 1b4e8eb
commit d67a7a2
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 17 deletions.
diff --git a/app/assets/stylesheets/scholarspace/components/_homepage.scss b/app/assets/stylesheets/scholarspace/components/_homepage.scss
@@ -201,18 +201,18 @@
           height: 100%;
 
           #recent_docs {
-            height: 100%;
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-            align-items: center;
+            align-items: baseline;
+            padding-top: 0.5em;
 
             .recent-work {
               width: 12vw;
               margin: 0.5em 0.5em;
               display: flex;
               align-items: baseline;
-              height: 18.5vw;
+              min-height: 18.5vw;
 
               .image-wrapper {
                 position: relative;
@@ -258,18 +258,49 @@
                   align-items: center;
                   justify-content: center;
                   background-color: $gw-light-blue;
-
-                  h3 {
-                    font-size: 1em;
-                    text-decoration: underline;
 
-                    &:hover {
-                      color: $gw-hover-buff;
+                  .title-wrapper {
+                    -webkit-box-orient: vertical;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 4;
+                    padding: 0 1em;
+                    overflow: hidden;
+                    max-width: 100%;
+                    text-align: center;
+
+                    h3 {
+                      font-size: 1em;
+                      text-decoration: underline;
+                      --max-lines: 4;
+                      --line-height: 1.2;
+                      max-height: calc(var(--max-lines) * 1em * var(--line-height));
+                      line-height: var(--line-height);
+                      position: relative;
+
+                      &:hover {
+                        color: $gw-hover-buff;
+                      }
                     }
                   }
                 }
               }
 
+              .keyword-wrapper {
+                -webkit-box-orient: vertical;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                max-width: 100%;
+
+                .recent-field {
+                  --max-lines: 2;
+                  --line-height: 1.4;
+                  height: calc(var(--max-lines) * 1em * var(--line-height));
+                  line-height: var(--line-height);
+                  position: relative;
+                }
+              }
+
               @media (max-width: 1300px) {
                 width: 14vw;
 
@@ -305,10 +336,14 @@
 
             @media (max-width: $mobile-max) {
               flex-direction: column;
+              width: 80%;
+              align-items: center;
 
               .recent-work {
-                width: 100%;
                 margin: 2em 0;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
 
                 .image-wrapper {
                   height: 90.5vw;
@@ -453,4 +488,4 @@
         }
       }
     }
-}
+}
diff --git a/app/views/hyrax/homepage/_recent_document.html.erb b/app/views/hyrax/homepage/_recent_document.html.erb
@@ -7,14 +7,18 @@
                 <%= render_thumbnail_tag(recent_document, {alt: "#{recent_document} #{ t('hyrax.homepage.admin_sets.thumbnail')}" }, {suppress_link: true}) %>
             </div>
             <div class="recent-title">
-              <h3>
-                  <%= recent_document %>
-              </h3>
+              <div class="title-wrapper">
+                <h3>
+                    <%= recent_document %>
+                </h3>
+              </div>
             </div>
           <% end %>
         </div>
-        <p class="recent-field">
-          <span class="recent-label"><%= t('hyrax.homepage.recently_uploaded.document.keyword_label') %>:</span> <%= link_to_facet_list(recent_document.keyword, 'keyword', t('hyrax.homepage.recently_uploaded.document.keyword_missing')).html_safe %>
-        </p>
+        <div class="keyword-wrapper">
+          <p class="recent-field">
+            <span class="recent-label"><%= t('hyrax.homepage.recently_uploaded.document.keyword_label') %>:</span> <%= link_to_facet_list(recent_document.keyword, 'keyword', t('hyrax.homepage.recently_uploaded.document.keyword_missing')).html_safe %>
+          </p>
+        </div>
     </div>
 </div>