From 9a3301a48225465ee7250fccc17d30eace23d710 Mon Sep 17 00:00:00 2001
From: bullmoose20 <12549033+bullmoose20@users.noreply.github.com.>
Date: Thu, 13 Feb 2025 17:44:51 -0500
Subject: [PATCH] Tweaks to navmenu for smaller screens

---
 static/css/styles.css         | 167 ++++++++++++++++++++++++++--------
 templates/001-navigation.html | 114 +++++++++++------------
 2 files changed, 187 insertions(+), 94 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index bff322b..7724a90 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -20,7 +20,8 @@ code {
     background-color: #181818 !important;
 }
 
-.form-control, .form-select {
+.form-control,
+.form-select {
     background-color: hsl(225deg 8.87% 10.98%);
 }
 
@@ -48,7 +49,8 @@ header.fixed-top {
 
 /* Ensure content is not hidden under the fixed header */
 .content-wrapper {
-    margin-top: 80px; /* Adjust based on header height */
+    margin-top: 80px;
+    /* Adjust based on header height */
 }
 
 /* -------------------- */
@@ -125,7 +127,8 @@ header.fixed-top {
 /* FORM STYLES          */
 /* -------------------- */
 
-form, #final-form {
+form,
+#final-form {
     max-width: 900px;
     margin: auto;
     padding: 20px;
@@ -152,12 +155,19 @@ label {
 }
 
 .dropdown {
-    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+.dropdown .btn {
+    min-width: 180px;
+    text-align: center;
 }
 
-/* Ensure the dropdown items use the same green color */
 .dropdown-menu {
-    background-color: #212529; /* Dark background */
+    min-width: 180px;
+    left: 50%;
+    text-align: left;
 }
 
 /* Hover color */
@@ -167,7 +177,8 @@ label {
 }
 
 /* Active (selected) item color */
-.dropdown-item.active, .dropdown-item:active {
+.dropdown-item.active,
+.dropdown-item:active {
     background-color: #019c75 !important;
     color: white !important;
 }
@@ -175,6 +186,7 @@ label {
 .text-info {
     color: rgb(0 152 183) !important;
 }
+
 /* -------------------- */
 /* FORM COMPONENTS      */
 /* -------------------- */
@@ -184,13 +196,9 @@ label {
     border-bottom: 1px solid #3a3a3a;
 }
 
-.accordion {
-    --bs-accordion-bg: #191d20;
-}
-
 .accordion-body,
 .card-group {
-    background-color: #212529;
+    background-color: #343a40;
     padding-top: 10px;
     padding-bottom: 10px;
 }
@@ -205,22 +213,26 @@ label {
 
 .accordion-body,
 .card-group {
-    background-color: #212529;
+    background-color: #343a40;
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
 /* ✅ Add a green left border when an accordion has selected items */
 .accordion-header.selected {
-    border-left: 4px solid #00bc8c !important; /* Bright green left border */
-    padding-left: 10px !important; /* Space text from border */
+    border-left: 4px solid #00bc8c !important;
+    /* Bright green left border */
+    padding-left: 10px !important;
+    /* Space text from border */
 }
 
 /* ✅ Ensure expanded accordion does NOT fill with green */
 .accordion-button:not(.collapsed) {
-    background-color: transparent !important; /* No background fill */
+    background-color: transparent !important;
+    /* No background fill */
     color: white !important;
-    border-color: #343a40 !important; /* Keep border subtle */
+    border-color: #343a40 !important;
+    /* Keep border subtle */
 }
 
 /* ✅ Prevent hover/focus from changing colors too much */
@@ -254,13 +266,16 @@ label {
     opacity: 0.6;
 }
 
-.btn.disabled, .btn:disabled, fieldset:disabled .btn {
+.btn.disabled,
+.btn:disabled,
+fieldset:disabled .btn {
     color: #6c757d;
     pointer-events: none;
     background-color: #181818;
     border-color: #495057;
     opacity: var(--bs-btn-disabled-opacity);
 }
+
 /* -------------------- */
 /* INPUT STYLES         */
 /* -------------------- */
@@ -344,30 +359,13 @@ div#loading {
     margin-top: 0 !important;
 }
 
-.nav-button {
-    background-color: #343a40 !important; /* Dark background */
-    color: white !important;
-    border-color: #343a40 !important;
-    transition: background-color 0.3s, color 0.3s;
-}
-
-.nav-button:hover {
-    background-color: #019c75 !important; /* Green hover */
-    border-color: #019c75 !important;
-    color: white !important; /* Keep text white */
-}
-
-
 .form-check-input:checked {
     background-color: #00bc8c;
     border-color: #0f5132;
 }
 
-.accordion-button:not(.collapsed) {
-    background-color: transparent;
-}
-
-.sponsor-btn, .discord-btn {
+.sponsor-btn,
+.discord-btn {
     background-color: #24292e;
     color: white;
     border: none;
@@ -402,3 +400,98 @@ div#loading {
 .img-fluid {
     max-height: 500px;
 }
+
+
+/* -------------------- */
+/* NAVBAR STYLES        */
+/* -------------------- */
+.nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 8px 12px;
+    border: 2px solid #019c75;
+    background-color: #343a40 !important;
+    color: white !important;
+    border-color: #343a40 !important;
+    transition: all 0.3s ease-in-out;
+}
+
+.nav-button:hover {
+    background-color: #019c75 !important;
+    border-color: #019c75 !important;
+    color: white !important;
+}
+
+/* Dropdown Styling */
+.dropdown-menu {
+    background-color: #343a40;
+    border: 1px solid #019c75;
+}
+
+.dropdown-menu .dropdown-item {
+    color: white;
+    transition: background-color 0.3s ease-in-out;
+}
+
+.dropdown-menu .dropdown-item:hover {
+    background-color: #019c75;
+}
+
+.dropdown-menu .dropdown-item.active {
+    background-color: #019c75 !important;
+    color: white !important;
+}
+
+/* Center Dropdown on Narrow Screens. 767.98 ensures that 768 exactly is not a problem */
+@media (max-width: 767.98px) {
+    .container-fluid.d-flex {
+        justify-content: center !important; /* Ensures dropdown stays centered */
+    }
+
+    .dropdown {
+        display: flex;
+        justify-content: center;
+        width: auto;
+    }
+
+    .dropdown .btn {
+        min-width: 180px;
+        text-align: center;
+    }
+
+    .dropdown-menu {
+        min-width: 180px;
+        left: 50%;
+        /* transform: translateX(-50%); */
+        text-align: left;
+    }
+}
+
+/* Progress Bar Styling Inside Dropdown */
+.progress-container {
+    padding: 8px 12px;
+}
+
+.progress {
+    background-color: #555;
+}
+
+.progress-bar {
+    background-color: #019c75;
+}
+
+/* Properly align icons inside navigation buttons */
+.nav-button i {
+    vertical-align: middle;
+    line-height: 1;
+    font-size: 1rem;
+    /* Adjust size if needed */
+}
+
+.nav-button:hover {
+    background-color: #019c75 !important;
+    border-color: #019c75 !important;
+    color: white !important;
+}
diff --git a/templates/001-navigation.html b/templates/001-navigation.html
index f1fdfe0..8a02309 100644
--- a/templates/001-navigation.html
+++ b/templates/001-navigation.html
@@ -7,67 +7,67 @@ <h2 class="fw-bold text-white">{{ page_info['title'] }}</h2>
     </div>
 
     <!-- Navigation Bar -->
-    <div class="container text-center mt-3">
-      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container-fluid d-flex justify-content-between align-items-center">
-
-          <!-- Previous Button (Hide on Start Page) -->
-          {% if page_info['prev_page'] and page_info['template_name'] != "001-start" %}
-            <button type="submit" class="btn nav-button"
-              onclick="loading('previous')"
-              title="Previous Step: {{ page_info.get('prev_page_name', 'Previous') }}"
-              formaction="/step/{{ page_info['prev_page'] }}">
-              <i class="fa fa-arrow-left"></i> Previous
-            </button>
-          {% else %}
-            <div></div>  <!-- Empty div for alignment -->
-          {% endif %}
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="container-fluid d-flex justify-content-between align-items-center">
 
-          <!-- Step Progress Indicator -->
-          <div class="text-center">
-            <span class="text-white fw-bold">{{ page_info['progress'] }}% Completed</span>
-            <div class="progress" style="width: 200px; height: 5px;">
-              <div class="progress-bar bg-success" style="width: {{ page_info['progress'] }}%;"></div>
-            </div>
-          </div>
+        <!-- Previous Button (Hidden on Start Page) -->
+        {% if page_info['template_name'] != '001-start' %}
+          <button type="submit" class="btn nav-button d-none d-md-inline-flex" onclick="loading('previous')"
+            title="Previous Step: {{ page_info['prev_page_name'] }}"
+            formaction="/step/{{ page_info['prev_page'] }}">
+            <i class="fa fa-arrow-left"></i> Previous
+          </button>
+        {% endif %}
 
-          <!-- Page Title Dropdown for Jump-To -->
-          <div class="dropdown">
-            <button class="btn nav-button dropdown-toggle" id="stepDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-              <i class="fa fa-list"></i> Jump to: {{ page_info['title'] }}
-            </button>
-            <ul class="dropdown-menu">
-              {% for file, name in template_list %}
-                {% if name == 'Final Validation' %}
-                  <li><hr class="dropdown-divider"></li>
-                {% endif %}
-                <li>
-                  <a class="dropdown-item" href="javascript:void(0);" onclick="jumpTo('{{ file.rsplit('.', 1)[0] }}')">
-                    {{ name }}
-                  </a>
-                </li>
-                {% if name == 'Start' %}
-                  <li><hr class="dropdown-divider"></li>
-                {% endif %}
-              {% endfor %}
-            </ul>
-          </div>
+        <!-- Jump-To Dropdown -->
+        <div class="dropdown">
+          <button class="btn nav-button dropdown-toggle" id="stepDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="fa fa-list"></i>
+            Jump to: {% if page_info['template_name'] == '900-final' %}
+              {{ page_info['prev_page_name'] }}
+            {% else %}
+              {{ page_info['next_page_name'] }}
+            {% endif %}
+          </button>
 
-          <!-- Next Button (Hide on Final Page) -->
-          {% if page_info['next_page'] and page_info['template_name'] != "900-final" %}
-            <button type="submit" class="btn nav-button"
-              onclick="loading('next')"
-              title="Next Step: {{ page_info.get('next_page_name', 'Next') }}"
-              formaction="/step/{{ page_info['next_page'] }}">
-              Next <i class="fa fa-arrow-right"></i>
-            </button>
-          {% else %}
-            <div></div>  <!-- Empty div for alignment -->
-          {% endif %}
+          <ul class="dropdown-menu dropdown-menu-end text-center">
+            <!-- Progress Bar Inside Dropdown -->
+            <li class="dropdown-item progress-container">
+              <div class="progress" style="height: 5px;">
+                <div class="progress-bar bg-success" style="width: {{ page_info['progress'] }}%;"></div>
+              </div>
+              <small class="text-muted">{{ page_info['progress'] }}% Completed</small>
+            </li>
+            <li><hr class="dropdown-divider"></li>
 
+            <!-- Navigation Items -->
+            {% for file, name in template_list %}
+              {% if name == 'Final Validation' %}
+                <li><hr class="dropdown-divider"></li>
+              {% endif %}
+              <li>
+                <a class="dropdown-item {% if file.rsplit('.', 1)[0] == page_info['template_name'] %} active {% endif %}"
+                   href="javascript:void(0);" onclick="jumpTo('{{ file.rsplit('.', 1)[0] }}')">
+                  {{ name }}
+                </a>
+              </li>
+              {% if name == 'Start' %}
+                <li><hr class="dropdown-divider"></li>
+              {% endif %}
+            {% endfor %}
+          </ul>
         </div>
-      </nav>
 
-    </div>
+        <!-- Next Button (Hidden on Final Page) -->
+        {% if page_info['template_name'] != '900-final' %}
+          <button type="submit" class="btn nav-button d-none d-md-inline-flex" onclick="loading('next')"
+            title="Next Step: {{ page_info['next_page_name'] }}"
+            formaction="/step/{{ page_info['next_page'] }}">
+            Next <i class="fa fa-arrow-right"></i>
+          </button>
+        {% endif %}
+
+      </div>
+    </nav>
 
-    <hr class="hr">
+<hr class="hr">