Remove heading, style updates (#181)

* Remove unneeded heading fixes #177 * Add yarn to .tool-versions and misc. gemfile.lock changes, essentially the things I needed to do to get the app running locally in my environment. * Fix site name in mobile display It was showing as "LTR," left over from the leave and travel requests example. * Narrow main-content area to stay inside header / footer width * Remove library footer from containing div * Stick footer to bottom of page Used flexbox strategy outlined here https://css-tricks.com/couple-takes-sticky-footer/ * Style card image list
pulibrary · Oct 9, 2023 · ffd6597 · ffd6597
1 parent b3d6955
commit ffd6597
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 14 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -1,2 +1,3 @@
 ruby 3.2.0
-awscli 2.11.24
+awscli 2.11.24
+yarn 1.22.10
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -173,6 +173,8 @@ GEM
     nio4r (2.5.9)
     nokogiri (1.15.4-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.15.4-x86_64-darwin)
+      racc (~> 1.4)
     nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     parallel (1.22.1)
@@ -324,6 +326,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-21
+  x86_64-darwin-20
   x86_64-linux
 
 DEPENDENCIES
@@ -363,4 +366,4 @@ RUBY VERSION
    ruby 3.2.0p0
 
 BUNDLED WITH
-   2.4.8
+   2.4.1
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -13,12 +13,39 @@
  *= require_tree .
  *= require_self
  */
+
+html, body, div.lux {
+  height: 100%;
+}
+
 body {
     margin: 0;
 }
 
+/* wraps main content to make lux work */
+/* styled to ensure sticky footer */
+div.lux {
+  display: flex;
+  flex-direction: column;
+}
+
+.homepage-img {
+  margin-top: 1em;
+}
+
 #main-content {
-    margin: 20px 100px;
+  flex: 1 0 auto; /* part of the sticky footer setup */
+  margin: 20px 20px;
+  /* ensure content stays within boundaries of header / footer, which have
+   * default max-width of 1170, see
+   * https://pulibrary.github.io/lux/docs/#/Patterns/LibraryHeader
+   * and https://github.com/pulibrary/lux/issues/397
+   */
+  padding: 0 calc(calc(calc(100% - 1170px) / 2));
+}
+
+.lux-library-footer {
+  flex-shrink: 0; /* part of sticky footer */
 }
 
 #list_header {
@@ -34,6 +61,14 @@ body {
     font-size: 20px;
 }
 
+#card_image_list {
+  list-style: none;
+  li img {
+    border: 2px solid;
+    margin: 10px;
+  }
+}
+
 .pagination {
     display: flex;
     list-style: none;
@@ -104,4 +139,4 @@ body {
     cursor:auto;
     background-color:#ffffff;
     border-color:#dee2e6
-}
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -24,14 +24,12 @@
 
   <body>
     <div class="lux">
-      <library-header app-name="Supplementary Catalog" abbr-name="LTR" app-url="<%= root_path %>" theme="dark">
+      <library-header app-name="Supplementary Catalog" abbr-name="Supplementary" app-url="<%= root_path %>" theme="dark">
       </library-header>
       <div id="main-content"> 
         <%= yield %>
       </div>
-      <div>
-       <library-footer></library-footer>
-      </div>
+      <library-footer></library-footer>
     </div>
   </body>
-</html>
+</html>
diff --git a/app/views/shared/_card_image_list.html.erb b/app/views/shared/_card_image_list.html.erb
@@ -6,9 +6,9 @@
     <% p = (params[:page] || 1).to_i 
       i = index + 1
       number = ((p - 1) * 10) + i %>
-    <li><%= "Card #{number} of #{@total_cards}" %>
+    <li><%= "Card #{number} of #{@total_cards}" %><br />
     <%= image_tag(image.iiif_url, alt: "Catalog Card") %></li>
   <% end %>
 </ul> 
 
-<%= paginate @card_images %>
+<%= paginate @card_images %>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
@@ -1,6 +1,5 @@
-<h1>Formerly known as the Electronic Card Catalog</h1>
 <td>
-<%= image_tag("cardcatalog.gif", alt: "card catalog image") %>
+<%= image_tag("cardcatalog.gif", class: "homepage-img", alt: "card catalog image") %>
 <td>
 
 <p>This dictionary catalog contains records for items cataloged before 1980.</p>
@@ -16,4 +15,4 @@
 <hr>
 <p><%= link_to("Filing rules", filing_rules_path) %></p>
 <hr>
-<p>Send any comments or questions about Electronic Card Catalog here: <%= link_to("Email Us", "https://library.princeton.edu/help/email-us") %></p>
+<p>Send any comments or questions about Electronic Card Catalog here: <%= link_to("Email Us", "https://library.princeton.edu/help/email-us") %></p>