Fix compatibility conflict - popper vs bootstrap

tomik-z-cech · Feb 5, 2024 · ee66e4f · ee66e4f
1 parent 9ff4801
commit ee66e4f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 42 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -154,17 +154,23 @@ header {
     height: 60%;
 }
 
+.dropdown-menu {
+    left: -10vw!important;
+    width: 15vw!important;
+    top: 120%!important;
+}
+
 .header-link {
-    color: var(--white);
-    font-size: 150%;
-    text-decoration: none;
-    font-family: var(--header-font);
-    text-shadow: 2px 2px 4px var(--black);
+    color: var(--white)!important;
+    font-size: 150%!important;
+    text-decoration: none!important;
+    font-family: var(--header-font)!important;
+    text-shadow: 2px 2px 4px var(--black)!important;
     transition: color 0.5s;
 }
 
 .header-link:hover {
-    color: var(--light-gold);
+    color: var(--light-gold)!important;
 }
 
 @media screen and (max-width: 991px) {

diff --git a/templates/base.html b/templates/base.html
@@ -18,8 +18,7 @@
     <!-- Block for core CSS styles -->
     {% block core_css %} 
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
-            integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
         <link rel="stylesheet" href="{% static 'css/styles.css' %}">
     {% endblock %}
 
@@ -29,8 +28,7 @@
     <!-- Block for core JS scripts -->
     {% block core_js %}
     <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
         <script type="text/javascript">
             $('.toast').toast('show');
         </script>

diff --git a/templates/header.html b/templates/header.html
@@ -21,38 +21,50 @@
       Vault
     </div>
     <div class="col-4 col-lg-1">
-      <div class="dropdown d-flex justify-content-center align-items-center">
-        <a href="#" id="user-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="text-center header-link shadow-none">
-          <i class="bi bi-person-circle"></i>
-          <br>
-          <span class="hide-less-991px">
-            Account
-          </span>
-        </a>
-        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-          {% if user.is_authenticated %}
-            {% if user.is_superuser %}
-            <a class="dropdown-item" href="{% url 'owner' %}" aria-label="Admin Tools">
-              <i class="bi bi-journals"></i>
-              Admin Tools
-            </a>
-            {% endif %}
-            <a class="dropdown-item" href="{% url 'account_logout' %}" aria-label="Logout">
-              <i class="bi bi-box-arrow-right"></i>
-              Logout
-            </a>
-          {% else %}
-          <a class="dropdown-item" href="{% url 'account_signup' %}" aria-label="Register">
-            <i class="bi bi-key-fill"></i>
-            Register
-            </a>
-          <a class="dropdown-item" href="{% url 'account_login' %}" aria-label="Login">
-            <i class="bi bi-house-lock-fill"></i>
-            Login
-          </a>
-          {% endif %}
-        </div>
-      </div>
+      <nav class="navbar navbar-expand-lg">
+          <div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
+                <a class="nav-link header-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <i class="bi bi-person-circle"></i>
+                  <br>
+                  <span class="hide-less-991px">
+                    Account
+                  </span>
+                </a>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                  {% if user.is_authenticated %}
+                    {% if user.is_superuser %}
+                    <li>
+                      <a class="dropdown-item" href="{% url 'owner' %}" aria-label="Admin Tools">
+                        <i class="bi bi-journals"></i>
+                        Admin Tools
+                      </a>
+                    </li>
+                    {% endif %}
+                    <li class="dropdown-divider">
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="{% url 'account_logout' %}" aria-label="Logout">
+                        <i class="bi bi-box-arrow-right"></i>
+                        Logout
+                      </a>
+                    </li>
+                  {% else %}
+                    <li>
+                      <a class="dropdown-item" href="{% url 'account_signup' %}" aria-label="Register">
+                        <i class="bi bi-key-fill"></i>
+                        Register
+                      </a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" href="{% url 'account_login' %}" aria-label="Login">
+                        <i class="bi bi-house-lock-fill"></i>
+                        Login
+                      </a>
+                    </li>
+                  {% endif %}
+                </ul>
+          </div>
+      </nav>
     </div>
   </div>
 </header>