Merge pull request #375 from xtine/homepage-mobile-nav-trigger

Mobile Nav Update
18F · Jun 10, 2016 · 1f5ebbd · 1f5ebbd
2 parents 9af0ac7 + 46896d7
commit 1f5ebbd
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git a/notice_and_comment/static/regulations/css/less/module/header-custom.less b/notice_and_comment/static/regulations/css/less/module/header-custom.less
@@ -47,6 +47,21 @@ Site Title
   }
 }
 
+// mobile nav list items
+.app-nav-list {
+  display: none;
+
+  li {
+    margin: 0 10px;
+    padding: 10px 0;
+
+    &:last-child {
+      margin: 0;
+      padding: 10px;
+    }
+  }
+}
+
 .app-nav-list-text {
   font-size: 0.8em;
 }
@@ -55,6 +70,11 @@ Site Title
 Big Screens
 */
 @media only screen and ( min-width: 880px ) {
+
+  .app-nav-list.open {
+    display: block;
+  }
+
   .app-nav-list-item {
     .logo {
       margin: 8px 0 0 8px;
@@ -78,7 +98,16 @@ Smaller Screens
     top: 56px;
   }
 
-  .app-nav-list-text {
-    display: none;
+  .app-nav-list-item {
+    padding: 20px 15px;
+
+    a {
+      color: @dark_field;
+      padding: 0;
+    }
+
+    &:last-child {
+      border-bottom: 2px solid @dark_gray;
+    }
   }
 }
diff --git a/notice_and_comment/static/regulations/css/less/module/nc-homepage-custom.less b/notice_and_comment/static/regulations/css/less/module/nc-homepage-custom.less
@@ -5,6 +5,9 @@
  */
 
 .nc-homepage-header {
+  height: auto;
+  position: relative;
+
   .main-head {
     .font-regular;
     position: relative;

diff --git a/notice_and_comment/templates/regulations/main-header.html b/notice_and_comment/templates/regulations/main-header.html
@@ -20,9 +20,10 @@ <h2 class="reg-title">
              <span class="icon-text">Mobile navigation</span>
         </a>
         <ul class="app-nav-list">
-            <li class="app-nav-list-item"><span class="app-nav-list-text">Partnership between</span></li>
-            <li class="app-nav-list-item org-title">{% include "regulations/org-title.html" %}</li>
-            <li class="app-nav-list-item logo-list-item">{% include "regulations/logo.html" %}</li>
+            <li class="app-nav-list-item"><span class="app-nav-list-text">Partnership between:</span></li>
+            <li class="app-nav-list-item"><span class="app-nav-list-text"><a href="http://www.epa.gov">epa.gov <span class="cf-icon cf-icon-external-link"></span></a></span></li>
+            <li class="app-nav-list-item"><span class="app-nav-list-text"><a href="http://18f.gsa.gov">18f.gsa.gov <span class="cf-icon cf-icon-external-link"></span></a></span></li>
+            <li class="app-nav-list-item"><span class="app-nav-list-text"><a href="http://www.gsa.gov">gsa.gov <span class="cf-icon cf-icon-external-link"></span></a></span></li>
         </ul>
     </nav>
 </div>
diff --git a/notice_and_comment/templates/regulations/nc-homepage.html b/notice_and_comment/templates/regulations/nc-homepage.html
@@ -9,7 +9,7 @@
 
   <div id="content-body">
 
-    <header id="site-header" class="nc-homepage-header" role="banner">
+    <header id="site-header" class="reg-header nc-homepage-header" role="banner">
     {% include "regulations/main-header.html" %}
     </header>
 
@@ -210,7 +210,7 @@ <h2>About this tool</h2>
         </div>
 
         <div class="feedback">
-          <h4>We want to hear from you!</h4>
+          <h3>We want to hear from you!</h3>
           <p>To give feedback on this tool, <a href="https://github.com/eregs/notice-and-comment/issues/new" target="_blank">open a new issue in this repository <span class="cf-icon cf-icon-external-link"></span></a> (requires a free login).
         </div>
 

diff --git a/notice_and_comment/templates/regulations/org-title.html b/notice_and_comment/templates/regulations/org-title.html