Footer: approximate new web style guide examples (#29)

Fixes #7
umass-gis · Mar 19, 2021 · 9bc756c · 9bc756c
1 parent 83cc9bf
commit 9bc756c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/app/assets/stylesheets/modules/_footer.scss b/app/assets/stylesheets/modules/_footer.scss
@@ -8,7 +8,9 @@ footer {
   font-size: 0.9rem;
 
   img.app-footer-logo {
-    margin-top:1rem;
+    margin-top:0rem;
+    position:relative;
+    right:1rem;
   }
 
   hr {
@@ -27,4 +29,33 @@ footer {
     font-weight: 800 !important;
     color: $umass-light-gray;
   }
+
+  ul.list-unstyled {
+    li {
+      a.nav-link {
+        padding-left:0;
+      }
+    }
+  }
+
+  #footer-campus-links {
+    display:inline;
+    li.nav-item {
+      display: inline-block;
+    }
+
+    .nav-link {
+      padding: 0 1rem;
+    }
+
+    .nav-link.first {
+      padding: 0 1rem 0 0;
+    }
+
+    li.nav-item:not(:last-child) .nav-link {
+      border-right: 1px solid $umass-medium-gray;
+    }
+
+    a.nav-link:hover { text-decoration: underline; }
+  }
 }
diff --git a/app/views/shared/_umass_footer.html.erb b/app/views/shared/_umass_footer.html.erb
@@ -1,8 +1,8 @@
 <footer>
   <div class="container">
     <div class="row">
-      <div class="col-md-4">
-        <%= image_tag('UMass_logo_white.png', alt: 'UMass Amherst', class: 'app-footer-logo', height: '120px') %>
+      <div class="col-md-5">
+        <%= image_tag('UMass_logo_white.png', alt: 'UMass Amherst', class: 'app-footer-logo', height: '150px') %>
       </div>
       <div class="col-md-3 mt-4">
         <h3 class="h6">GeoData</h3>
@@ -12,7 +12,7 @@
           <li><%=link_to('Contact', 'https://gis.library.umass.edu/learning-gis/consultations/', {class: 'nav-link'})%></li>
         </ul>
       </div>
-      <div class="col-md-3 mt-4">
+      <div class="col-md-4 mt-4">
         <h3 class="h6">Libraries</h3>
         <ul class="list-unstyled">
           <li><%=link_to('Homepage', 'https://www.library.umass.edu/', {class: 'nav-link'})%></li>
@@ -22,7 +22,22 @@
       </div>
     </div>
     <hr/>
-    <a href="https://www.umass.edu/" title="University of Massachusetts Amherst" id="umass--global--footer-wordmark"></a>
-    <div id="umass--global--footer--links">©2021 <a href="https://www.umass.edu/" id="umass--global--footer-home">University of Massachusetts Amherst</a> · <a href="https://www.umass.edu/site-policies" id="umass--global--footer-policies">Site&nbsp;Policies</a> · <a href="https://www.umass.edu/accessibility/" id="umass--global--footer-accessibility">Accessibility</a></div>
+    <div class="row">
+      <div class="col-md-5">
+        ©2021 <a href="https://www.umass.edu/" id="umass--global--footer-home">University of Massachusetts Amherst</a>
+      </div>
+
+      <div class="col-md-7">
+        <ul id="footer-campus-links" class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link first" href="https://www.umass.edu/site-policies" id="umass--global--footer-policies">Site&nbsp;Policies</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="https://www.umass.edu/accessibility/" id="umass--global--footer-accessibility">Accessibility</a>
+          </li>
+        </ul>
+      </div>
+
+    </div>
  </div>
 </footer>