Make the layout and style better for SaaS projects

epicserve · Sep 23, 2023 · b9a57cd · b9a57cd
1 parent ee1211f
commit b9a57cd
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 143 deletions.
diff --git a/apps/base/templates/account/base.html b/apps/base/templates/account/base.html
@@ -7,6 +7,10 @@
   {% endblock head_title %}
 {% endblock title %}
 
+{% block content_class %}
+  container--mw-md
+{% endblock content_class %}
+
 {% block content %}
   <h1>{% trans "Account Settings" %}</h1>
   <ul class="nav nav-tabs mb-4">

diff --git a/apps/base/templates/blocks/color_mode_picker.html b/apps/base/templates/blocks/color_mode_picker.html
@@ -1,8 +1,4 @@
 {# djlint:off H021 #}
-<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
-  <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
-  <hr class="d-lg-none my-2 text-white-50">
-</li>
 <li class="nav-item dropdown">
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="circle-half" viewBox="0 0 16 16">

diff --git a/apps/base/templates/blocks/nav.html b/apps/base/templates/blocks/nav.html
@@ -1,63 +1,60 @@
-<header>
-  <div class="container">
-    <nav class="navbar navbar-expand-lg navbar-light bg-faded">
-      <div class="container-fluid">
-        <a class="navbar-brand" href="{% url 'site_index' %}">{{ SITE_NAME }}</a>
-        <button class="navbar-toggler"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#navbarNav"
-                aria-controls="navbarNav"
-                aria-expanded="false"
-                aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-          <ul class="navbar-nav">
-            <li class="nav-item">
-              <a class="nav-link" href="{% url 'site_index' %}">Home <span class="visually-hidden">(current)</span></a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">About</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Contact</a>
-            </li>
-          </ul>
-        </div>
-        <div class="d-flex">
-          <ul class="navbar-nav">
-            {% if not user.is_authenticated %}
-              <li class="nav-item">
-                <a class="nav-link" href="{% url 'account_login' %}">Sign In</a>
+<header class="container-fluid border-bottom border-bottom-1 mb-4">
+  <nav class="navbar navbar-expand-lg navbar-light bg-faded mb-0">
+    <a class="navbar-brand" href="{% url 'site_index' %}">{{ SITE_NAME }}</a>
+    <button class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarNav"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'site_index' %}">Home <span class="visually-hidden">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">About</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Contact</a>
+        </li>
+      </ul>
+    </div>
+    <div class="d-flex">
+      <ul class="navbar-nav navbar-nav--user-nav align-items-center">
+        {% if not user.is_authenticated %}
+          <li class="nav-item">
+            <a class="nav-link" href="{% url 'account_login' %}">Sign In</a>
+          </li>
+        {% else %}
+          {% include "blocks/color_mode_picker.html" %}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle"
+               href="#"
+               id="navbarScrollingDropdown"
+               role="button"
+               data-bs-toggle="dropdown"
+               aria-expanded="false">{{ user.gravatar }}</a>
+            <ul class="dropdown-menu dropdown-menu-end"
+                aria-labelledby="navbarScrollingDropdown">
+              <li>
+                <a class="dropdown-item" href="{% url 'account_change_name' %}">Account Settings</a>
               </li>
-            {% else %}
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle"
-                   href="#"
-                   id="navbarScrollingDropdown"
-                   role="button"
-                   data-bs-toggle="dropdown"
-                   aria-expanded="false">{% firstof user.get_short_name user.get_username %}</a>
-                <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
-                  <li>
-                    <a class="dropdown-item" href="{% url 'account_change_name' %}">Account Settings</a>
-                  </li>
-                  {% if user.is_staff %}
-                    <li>
-                      <a class="dropdown-item" href="{% url 'admin:index' %}">Administration</a>
-                    </li>
-                  {% endif %}
-                  <li>
-                    <a class="dropdown-item" href="{% url 'account_logout' %}">Sign Out</a>
-                  </li>
-                </ul>
+              {% if user.is_staff %}
+                <li>
+                  <a class="dropdown-item" href="{% url 'admin:index' %}">Administration</a>
+                </li>
+              {% endif %}
+              <li>
+                <a class="dropdown-item" href="{% url 'account_logout' %}">Sign Out</a>
               </li>
-            {% endif %}
-            {% include "blocks/color_mode_picker.html" %}
-          </ul>
-        </div>
-      </div>
-    </nav>
-  </div>
+            </ul>
+          </li>
+        {% endif %}
+      </ul>
+    </div>
+  </nav>
 </header>
diff --git a/apps/base/templates/index.html b/apps/base/templates/index.html
@@ -4,15 +4,12 @@
 {% block title_tag %}<title>{{ SITE_NAME }}</title>{% endblock title_tag %}
 {# djlint:on #}
 {% block content %}
-  <div class="jumbotron">
-    <div class="container">
-      <h1>{{ SITE_NAME }}</h1>
-      <p>You've successfully set up a Django base site. Start Coding!</p>
-      <p>
-        <a href="https://django-base-site.readthedocs.org/en/latest/"
-           class="btn btn-primary btn-lg"
-           target="_blank">Read documentation »</a>
-      </p>
-    </div>
+  <div class="bg-body-secondary mt-5 w-25 p-5 rounded-3 m-auto text-center">
+    <p class="text-muted">You've successfully set up a Django base site!</p>
+    <p class="">
+      <a href="https://django-base-site.readthedocs.org/en/latest/"
+         class="btn btn-primary px-5"
+         target="_blank">Read Documentation</a>
+    </p>
   </div>
 {% endblock content %}
diff --git a/apps/base/templates/layouts/base.html b/apps/base/templates/layouts/base.html
@@ -9,6 +9,7 @@
     {% block title_tag %}
       <title>
         {% block title %}
+          {{ page_title }}
         {% endblock title %}
 
         {% if SITE_NAME %}- {{ SITE_NAME }}{% endif %}
@@ -32,28 +33,22 @@
       {% include "blocks/nav.html" %}
     {% endblock base_header %}
 
-    <main class="flex-shrink-0">
+    <main class="{% block content_class %}container-fluid{% endblock content_class %}
+       ">
       {% block breadcrumb %}
       {% endblock breadcrumb %}
 
       {% if messages %}
-        <div id="flash-message-container" class="container">
+        <div id="flash-message-container">
           {% for message in messages %}<p class="alert alert-{{ message.tags }}">{{ message }}</p>{% endfor %}
         </div>
       {% endif %}
-      {% block base_content %}
-        <div id="main-content" class="container">
-          {% block content %}
-          {% endblock content %}
-
-        </div>
-      {% endblock base_content %}
+      {% block content %}
+      {% endblock content %}
 
     </main>
-    <footer class="footer mt-auto">
-      <div class="container border-top py-3">
-        <p>© {{ SITE_NAME }} {% now "Y" %}</p>
-      </div>
+    <footer class="footer mt-auto container-fluid border-top border-top-1 pt-2">
+      <p>©{{ SITE_NAME }} {% now "Y" %}</p>
     </footer>
     {% block bottom_script %}
       {% vite_hmr_client %}

diff --git a/apps/base/templates/login.html b/apps/base/templates/login.html
diff --git a/src/config/stylelint.config.js b/src/config/stylelint.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  rules: {
+    'scss/at-extend-no-missing-placeholder': null,
+    'selector-class-pattern': '^[a-z0-9\\-]+$', // allow double hyphens
+  },
   extends: [
     // Use the Standard config as the base
     // https://github.com/stylelint/stylelint-config-standard

diff --git a/src/scss/_main_nav.scss b/src/scss/_main_nav.scss
@@ -0,0 +1,22 @@
+// User navigation menu
+.navbar-nav--user-nav {
+  // remove dropdown caret
+  .dropdown-toggle::after {
+   display: none;
+  }
+
+  .nav-link {
+    transition: opacity 0.4s ease;
+  }
+
+  .nav-link:hover {
+    opacity: 0.5;
+  }
+}
+
+// Medium max-width container
+.container--mw-md {
+  max-width: 1000px;
+
+  @extend .px-3;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,8 +1,3 @@
 @import "~bootstrap/scss/bootstrap";
-
-// color_mode_picker
+@import "main_nav";
 @import "color_mode_picker";
-
-.navbar {
-  margin-bottom: 20px;
-}