Highlight current questionnaire step in sidebar

GSA-TTS · Jan 20, 2024 · cc16976 · cc16976
1 parent a066ff1
commit cc16976
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/_includes/sidenav.html b/_includes/sidenav.html
@@ -10,16 +10,16 @@
         <a href="/">Home</a>
       </li>
       <li class="usa-sidenav__item">
-        <a href="/location/" class="usa-current">Assistance Questionnaire</a>
+        <a href="/location/">Assistance Questionnaire</a>
         <ul class="usa-sidenav__sublist">
           <li class="usa-sidenav__item">
-            <a href="/location/">Location</a>
+            <a id="a-location">Location</a>
           </li>
           <li class="usa-sidenav__item">
-            <a href="/disaster-info/">Disaster info</a>
+            <a id="a-disaster">Disaster info</a>
           </li>
           <li class="usa-sidenav__item">
-            <a href="">Results</a>
+            <a>Results</a>
           </li>
         </ul>
       </li>

diff --git a/pages/disaster-info.md b/pages/disaster-info.md
@@ -4,9 +4,7 @@ permalink: /disaster-info/
 layout: layouts/page
 sidenav: true
 ---
-
 <h1 style="font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-weight: normal; color: #005288; width: 400px;">{% image "./_img/disaster-info.png" "illustration" %} <span style="position: relative; bottom: 40px;">Questionnaire</h1>
-
 <h3>Disaster damage</h3>
 
 <label>Primary disaster type</label>
@@ -45,3 +43,7 @@ sidenav: true
   const disasterState = urlParams.get('state')
   document.getElementById("results").action = "{{ '/posts/' | url }}"+disasterState;
 </script>
+
+<style>
+  #a-disaster {background-color: #005288; color: white;}
+</style>
diff --git a/pages/location.md b/pages/location.md
@@ -4,23 +4,24 @@ permalink: /location/
 layout: layouts/page
 sidenav: true
 ---
-
 <h1 style="font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-weight: normal; color: #005288; width: 400px;">{% image "./_img/location.png" "illustration" %} <span style="position: relative; bottom: 40px;">Questionnaire</h1>
-
+<h3>Location</h3>
 <form action="{{ '/disaster-info/' | url }}">
-
-<label for="state">What is the primary location of the disaster event?</label>
-<select name="state">
-  <option value="AK">Alaska</option>
-  <option value="AL">Alabama</option>
-  <option value="AR">Arkansas</option>
-  <option value="AS">American Samoa</option>
-  <option value="CA">California</option>
-
+  <label for="state">What is the primary location of the disaster event?</label>
+  <select name="state">
+    <option value="AK">Alaska</option>
+    <option value="AL">Alabama</option>
+    <option value="AR">Arkansas</option>
+    <option value="AS">American Samoa</option>
+    <option value="CA">California</option>
 </select>
 
 <label>Describe the extent and location of the disaster</label>
 <textarea></textarea>
 
 <button class="usa-button" style="margin: 50px 0 50px 0;">Continue</button>
 </form>
+
+<style>
+  #a-location {background-color: #005288; color: white;}
+</style>