styling minutae

GSA · Aug 22, 2024 · 532e88e · 532e88e
1 parent 28a6fe7
commit 532e88e
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 55 deletions.
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -165,7 +165,7 @@ aria-label="Official website of the United States government"
         <% end %>  
       </section>
       <!-- mobile search and login area --> 
-      <section class="desktop:display-none order-3 flex-align-self-end">
+      <section class="desktop:display-none order-3">
         <section aria-label="Search component">
           <form class="usa-search usa-search--small margin-y-1" role="search">
             <label class="usa-sr-only" for="search-field">Search</label>
@@ -174,7 +174,7 @@ aria-label="Official website of the United States government"
               id="search-field"
               type="search"
               name="search"
-              style="width: 140px"
+              style="width: 170px"
             />
             <button class="usa-button" type="submit">
               <img
@@ -185,6 +185,11 @@ aria-label="Official website of the United States government"
             </button>
           </form>
         </section>
+        <% if logged_in? %>
+          <div class="text-primary font-body-2xs margin-y-1 padding-top-1">
+            <%= current_user.email %>
+          </div>  
+        <% end %>
         <% if logged_in? %>
           <%= button_to("Logout", session_path, method: :delete, class: "usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-full", type: "button") %>
         <% else %>
@@ -198,56 +203,4 @@ aria-label="Official website of the United States government"
       </section>
     </nav>
   </div>
-</header>
-<!-- Utility Menu -->
-<% if logged_in? %>
-  <div class="bg-primary-darker w-full display-flex flex-justify-center desktop:flex-justify-end padding-1 font-body-2xs text-white">
-    <div class="display-flex flex-align-center margin-x-1">
-      <%= image_tag('images/usa-icons/grid_view.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Dashboard") %>
-      <a href="/dashboard" class="text-white margin-top-1">
-        Dashboard
-      </a>
-    </div>
-    <% if current_user.role == "challenge_manager" %>
-      <div class="display-flex flex-align-center margin-x-1">
-        <%= image_tag('images/usa-icons/emoji_events.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Challenges") %>    
-        <a href="/user-guide" class="usa-nav-link text-white margin-top-1">
-          Challenges
-        </a>
-      </div>
-    <% end %>
-    <% if current_user.role == "challenge_manager" || current_user.role == "solver" %>
-      <div class="display-flex flex-align-center margin-x-1">
-        <%= image_tag('images/usa-icons/folder_open.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Submissions") %>    
-        <a href="/submissions" class="usa-nav-link text-white margin-top-1">
-          Submissions
-        </a>
-      </div>
-    <% end %>
-    <% if current_user.role == "challenge_manager" || current_user.role == "evaluator" %>
-      <div class="display-flex flex-align-center margin-x-1">
-        <%= image_tag('images/usa-icons/content_copy.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Evaluations") %>    
-        <a href="/user-guide" class="usa-nav-link text-white margin-top-1">
-          Evaluations
-        </a>
-      </div>
-    <% end %>  
-    <div class="display-flex flex-align-center margin-x-1">
-      <%= image_tag('images/usa-icons/map.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "User Guides") %>    
-      <a href="/user-guide" class="usa-nav-link text-white margin-top-1">
-        User Guides
-      </a>
-    </div>
-    <div class="display-flex flex-align-center margin-x-1">
-      <%= image_tag('images/usa-icons/support_agent.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Help") %>    
-      <a href="/federal-agency-faqs" class="usa-nav-link text-white margin-top-1">
-        Help
-      </a>
-    </div>
-    <div class="display-flex flex-align-center margin-x-1 margin-top-1">
-      |
-      <%= image_tag('images/usa-icons/account_circle.svg', class: "usa-icon--size-3 icon-white margin-x-1", alt: "Help") %>    
-      <%= current_user.email %>
-    </div>
-  </div>
-<% end %>
+</header>
diff --git a/app/views/layouts/_utility_menu.erb b/app/views/layouts/_utility_menu.erb
@@ -0,0 +1,95 @@
+<!-- Desktop Utility Menu -->
+<div class="bg-primary-darker w-full display-none desktop:display-flex flex-justify-end padding-1 font-body-2xs text-white">
+    <div class="display-flex flex-align-center margin-x-1">
+        <%= image_tag('images/usa-icons/grid_view.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Dashboard") %>
+        <a href="/dashboard" class="text-white margin-top-1">
+        Dashboard
+        </a>
+    </div>
+    <% if current_user.role == "challenge_manager" %>
+        <div class="display-flex flex-align-center margin-x-1">
+        <%= image_tag('images/usa-icons/emoji_events.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Challenges") %>    
+        <a href="/user-guide" class="usa-nav-link text-white margin-top-1">
+            Challenges
+        </a>
+        </div>
+    <% end %>
+    <% if current_user.role == "challenge_manager" || current_user.role == "solver" %>
+        <div class="display-flex flex-align-center margin-x-1">
+        <%= image_tag('images/usa-icons/folder_open.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Submissions") %>    
+        <a href="/submissions" class="usa-nav-link text-white margin-top-1">
+            Submissions
+        </a>
+        </div>
+    <% end %>
+    <% if current_user.role == "challenge_manager" || current_user.role == "evaluator" %>
+        <div class="display-flex flex-align-center margin-x-1">
+        <%= image_tag('images/usa-icons/content_copy.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Evaluations") %>    
+        <a href="/user-guide" class="usa-nav-link text-white margin-top-1">
+            Evaluations
+        </a>
+        </div>
+    <% end %>  
+    <div class="display-flex flex-align-center margin-x-1">
+        <%= image_tag('images/usa-icons/map.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "User Guides") %>    
+        <a href="/user-guide" class="usa-nav-link text-white margin-top-1">
+        User Guides
+        </a>
+    </div>
+    <div class="display-flex flex-align-center margin-x-1">
+        <%= image_tag('images/usa-icons/support_agent.svg', class: "usa-icon--size-3 icon-white margin-top-1 margin-right-1", alt: "Help") %>    
+        <a href="/federal-agency-faqs" class="usa-nav-link text-white margin-top-1">
+        Help
+        </a>
+    </div>
+    <div class="display-flex flex-align-center margin-x-1 margin-top-1">
+        |
+        <%= image_tag('images/usa-icons/account_circle.svg', class: "usa-icon--size-3 icon-white margin-x-1", alt: "Help") %>    
+        <%= current_user.email %>
+    </div>
+</div>
+<!-- Mobile Utility Menu -->
+<div class="bg-primary-darker w-full display-flex desktop:display-none flex-justify-center desktop:flex-justify-end padding-1 text-white">
+    <div class="margin-x-1">
+        <a href="/dashboard" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;">
+        <%= image_tag('images/usa-icons/grid_view.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Dashboard") %>
+        Dashboard
+        </a>
+    </div>
+    <% if current_user.role == "challenge_manager" %>
+        <div class="margin-x-1">
+            <a href="/user-guide" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;">
+            <%= image_tag('images/usa-icons/emoji_events.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Challenges") %>
+            Challenges
+            </a>
+        </div>
+    <% end %>
+    <% if current_user.role == "challenge_manager" || current_user.role == "solver" %>
+        <div class="margin-x-1">
+            <a href="/submissions" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;">
+            <%= image_tag('images/usa-icons/folder_open.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Submissions") %>
+            Submissions
+            </a>
+        </div>
+    <% end %>
+    <% if current_user.role == "challenge_manager" || current_user.role == "evaluator" %>
+        <div class="margin-x-1">
+            <a href="/user-guide" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;">
+            <%= image_tag('images/usa-icons/content_copy.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Evaluations") %>
+            Evaluations
+            </a>
+        </div>
+    <% end %>  
+    <div class="margin-x-1">
+        <a href="/user-guide" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;">
+        <%= image_tag('images/usa-icons/map.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "User Guides") %>
+        User Guides
+        </a>
+    </div>
+    <div class="margin-x-1">
+        <a href="/federal-agency-faqs" class="text-white display-flex flex-column flex-align-center" style="font-size: .7rem; text-decoration: none;">
+        <%= image_tag('images/usa-icons/support_agent.svg', class: "usa-icon--size-4 icon-white margin-bottom-05", alt: "Help") %>
+        Help
+        </a>
+    </div>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -15,6 +15,9 @@
 
   <body>
     <%= render "layouts/header" %>
+    <% if logged_in? %>
+      <%= render "layouts/utility_menu" %>
+    <% end %>  
     <%= yield %>
     <%= render "layouts/footer" %>
   </body>