Merge pull request #144 from mmoomocow/DCS-032

DCS-032 Responsive front end design
mmoomocow · May 18, 2023 · 96805be · 96805be
2 parents 760bec8 + 01f9ada
commit 96805be
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 110 deletions.
diff --git a/home/static/css/base.css b/home/static/css/base.css
@@ -39,15 +39,19 @@ body {
     line-height: 1.5;
     background-color: var(--color-grey-light);
     color: var(--color-grey-dark);
-    min-height: 100vh;
     max-width: 100vw;
     overflow-x: hidden;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
 main {
     width: 80vw;
     margin-left: 10vw;
+    margin-bottom: 5vh;
+    flex: 1;
 }
 
 footer {
@@ -56,9 +60,9 @@ footer {
     background-color: var(--color-green);
     padding: 1.5vh 1vw;
     color: var(--color-gold);
-    position: absolute;
-    bottom: 0;
     width: 100vw;
+    text-align: center;
+    font-size: small;
 
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -69,6 +73,19 @@ footer a {
     color: var(--color-gold);
 }
 
+footer ul {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+footer a {
+    color: var(--color-gold);
+}
+
 footer li {
     list-style: none;
 }
@@ -165,4 +182,129 @@ h5 {
 h6 {
     font-family: 'Oswald', sans-serif;
     font-size: 0.8rem;
+}
+
+
+nav {
+    background-color: var(--color-green);
+    color: var(--color-gold);
+    overflow: hidden;
+}
+
+nav a {
+    float: left;
+    color: var(--color-gold);
+    text-align: center;
+    padding: 5px 10px;
+    text-decoration: none;
+    font-size: 1.2rem;
+    margin: 0px;
+}
+
+nav .icon {
+    display: none;
+}
+
+.dropdown {
+    float: left;
+    overflow: hidden;
+}
+
+.dropdown .dropbtn {
+    font-size: 1.2rem;
+    border: none;
+    outline: none;
+    color: var(--color-gold);
+    padding: 5px 10px;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+
+    /* Make button same height as the A tags that are slightly larger */
+    height: 2.425rem;
+}
+
+.dropbtn::after {
+    content: " \25bc";
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: var(--color-green);
+    min-width: 160px;
+    z-index: 1;
+}
+
+.dropdown-content a {
+    float: none;
+    color: var(--color-gold);
+    padding: 5px 10px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+nav a:hover,
+.dropdown:hover .dropbtn {
+    background-color: var(--color-gold);
+    color: var(--color-green);
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+@media screen and (max-width: 600px) {
+
+    nav a:not(:first-child),
+    .dropbtn {
+        display: none;
+    }
+
+    nav a.icon {
+        float: right;
+        display: block;
+    }
+}
+
+
+@media screen and (max-width: 600px) {
+    nav.responsive {
+        position: relative;
+    }
+
+    nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    nav.responsive a {
+        float: none;
+        display: block;
+        text-align: left;
+    }
+
+    nav.responsive .dropdown {
+        float: none;
+    }
+
+    nav.responsive .dropdown-content {
+        position: relative;
+    }
+
+    nav.responsive .dropdown-content a {
+        margin-left: 25px;
+    }
+
+    nav.responsive .dropdown .dropbtn {
+        display: block;
+        width: 100%;
+        text-align: left;
+    }
+
+    nav.responsive .right {
+        float: none;
+    }
 }
diff --git a/home/static/css/base.min.css b/home/static/css/base.min.css
diff --git a/home/static/css/nav.css b/home/static/css/nav.css
diff --git a/home/static/css/nav.min.css b/home/static/css/nav.min.css
diff --git a/home/static/js/base.js b/home/static/js/base.js
@@ -6,25 +6,21 @@ function hideSelf(element) {
     }, 300);
 }
 
+function toggleNavResponsive() {
+    // Toggle the responsive navigation bar
+    // Get nav tag
+    let nav = document.getElementsByTagName("nav")[0];
+    if (nav.className === "responsive") {
+        nav.className = "";
+    } else {
+        nav.className = "responsive";
+    }
+}
+
 // hide all messages after 15 seconds
 setTimeout(() => {
     let messages = document.getElementsByClassName("message");
     for (let i = 0; i < messages.length; i++) {
         hideSelf(messages[i]);
     }
-}, 15000);
-
-// Add the correct padding to the bottom of the main content
-// so that the content is not hidden behind the footer
-
-function setMainPadding() {
-    let footerHeight = document.getElementsByTagName("footer")[0].offsetHeight;
-    let mainContent = document.getElementsByTagName("main")[0];
-    let margin = footerHeight + 50;
-    mainContent.style.marginBottom = margin + "px";
-}
-
-// Deferring the execution of the function until the page is loaded
-window.onload = function () {
-    setMainPadding();
-};
+}, 15000);
diff --git a/home/static/js/base.min.js b/home/static/js/base.min.js
diff --git a/home/templates/base.html b/home/templates/base.html
@@ -12,7 +12,6 @@
         <meta name="description" content="{% block description %}{% endblock description %}">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="{% static 'css/base.min.css' %}">
-        <link rel="stylesheet" href="{% static 'css/nav.min.css' %}">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
         <script src="{% static 'js/base.min.js' %}"></script>
         {% block head %}
@@ -37,27 +36,32 @@
             <nav>
                 <a href="/about">About</a>
                 <a href="/contact">Contact</a>
+
                 {% if request.user.is_authenticated %}
+
                     {% if request.user.is_teacher %}
-                    <div class="dropdown">
-                        <span class="dropbtn">Teachers</span>
-                        <div class="dropdown-content">
-                            <a href="/teachers/">Teachers Home</a>
-                            <a href="/commendations/award/">Award Commendation</a>
-                            {% if request.user.teacher.is_management %}
-                                <a href="/students/">View Students</a>
-                                <a href="/commendations/spirit/">Award spirit badges</a>
-                            {% endif %}
+                        <div class="dropdown">
+                            <button class="dropbtn">Teachers</button>
+                            <div class="dropdown-content">
+                                <a href="/teachers/">Teachers Home</a>
+                                <a href="/commendations/award/">Award Commendation</a>
+                                {% if request.user.teacher.is_management %}
+                                    <a href="/students/">View Students</a>
+                                    <a href="/commendations/spirit/">Award spirit badges</a>
+                                {% endif %}
+                            </div>
                         </div>
-                    </div>
                     {% endif %}
-                    <a class="right" href="/logout">Logout</a>
+
+                    <a href="/logout" class="right">Logout</a>
                     {% if request.user.is_staff %}
-                    <a class="right" href="/admin/">Admin Site</a>
+                        <a href="/admin/" class="right">Admin Site</a>
                     {% endif %}
-                {% else %}
-                    <a class="right" href="/login">Login</a>
+
+                    {% else %}
+                    <a href="/login" class="right">Login</a>
                 {% endif %}
+                <a href="javascript:void(0);" class="icon" onclick="toggleNavResponsive()">&#9776;</a>
             </nav>
         </header>
         <main>

diff --git a/students/static/students/students.css b/students/static/students/students.css
@@ -1,6 +1,6 @@
 .allStudents {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(250px, 2fr));
 }
 
 .student {

diff --git a/students/static/students/students.min.css b/students/static/students/students.min.css
diff --git a/students/templates/students/list_students.html b/students/templates/students/list_students.html
@@ -31,7 +31,8 @@
 <div class="allStudents">
     {% for student in students %}
         <article class="student">
-            <a href="/students/{{ student.id }}"><h2 style="font-family: 'Comfortaa', sans-serif;">{{ student.user.first_name }} {{ student.user.last_name }} ({{ student.id }})</h2></a>
+            <a href="/students/{{ student.id }}"><h2 style="font-family: 'Comfortaa', sans-serif;">{{ student.user.first_name }} {{ student.user.last_name }}</h2></a>
+            ID: {{ student.id }}<br>
             Email: <a href="mailto:{{ student.user.email }}">{{ student.user.email }}</a>
             {% if student.commendations_set.count == "1" %}
             <p class="commendationCount">1 commendation</p>