Procházet zdrojové kódy

Improving navbar width

JoostSijm před 6 roky
rodič
revize
d7656858cd

+ 24 - 22
app/modules/backend/templates/layout/backend.j2

@@ -6,28 +6,30 @@
 </head>
 <body>
     <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-        <a class="navbar-brand" href="/backend"><img src="/static/uploads/logo.png" style="height: 27px"></a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarsDefault">
-            <ul class="navbar-nav mr-auto">
-                {%- for item in current_menu.children recursive -%}
-                <li class="nav-item {{ 'active' if item.active }}" data-toggle="tooltip" data-placement="right" title="{{ item.text }}">
-                    <a class="nav-link" href="{{ item.url}}">
-                        <span class="nav-link-text">{{ item.text }}</span>
-                    </a>
-                </li>
-                {%- endfor -%}
-            </ul>
-            <ul class="navbar-nav">
-                <li class="nav-item text-nowrap">
-                      <a class="nav-link" href="/">Public</a>
-                </li>
-                <li class="nav-item text-nowrap">
-                      <a class="nav-link" href="/logout">Logout</a>
-                </li>
-            </ul>
+        <div class="container">
+            <a class="navbar-brand" href="/backend"><img src="/static/uploads/logo.png" style="height: 27px"></a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarsDefault">
+                <ul class="navbar-nav mr-auto">
+                    {%- for item in current_menu.children recursive -%}
+                    <li class="nav-item {{ 'active' if item.active }}" data-toggle="tooltip" data-placement="right" title="{{ item.text }}">
+                        <a class="nav-link" href="{{ item.url}}">
+                            <span class="nav-link-text">{{ item.text }}</span>
+                        </a>
+                    </li>
+                    {%- endfor -%}
+                </ul>
+                <ul class="navbar-nav">
+                    <li class="nav-item text-nowrap">
+                          <a class="nav-link" href="/">Public</a>
+                    </li>
+                    <li class="nav-item text-nowrap">
+                          <a class="nav-link" href="/logout">Logout</a>
+                    </li>
+                </ul>
+            </div>
         </div>
     </nav>
     <main class="container mt-3">

+ 9 - 7
app/modules/backend/templates/layout/public.j2

@@ -6,13 +6,15 @@
     <script src="/static/js/main.js"></script>
 </head>
 <body class="vh-100" style="background: url('https://cdn.discordapp.com/attachments/542637680626761728/547533790264688641/unknown.png') no-repeat center center fixed; background-size: cover">
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <a class="navbar-brand" href="/"><img src="/static/uploads/logo.png" style="height: 27px"></a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            {% block nav %}{% endblock %}
+    <nav class="navbar row navbar-expand-lg navbar-dark bg-dark">
+        <div class="container">
+            <a class="navbar-brand" href="/"><img src="/static/uploads/logo.png" style="height: 27px"></a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                {% block nav %}{% endblock %}
+            </div>
         </div>
     </nav>
     <div class="container p-3 bg-white min-h-75">