UI update

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "liveSassCompile.settings.includeItems": ["**/static/css/style.scss"]
 }

static/css/style.scss

@@ -1302,11 +1302,28 @@ a {
     z-index: -1;
     border-radius: 1px;
     background-color: rgba(83, 126, 226, 0.2);
+    animation: lineAnim 1s ease-in forwards;
   }
   i {
     margin-right: 8px;
   }
 }
+
+@keyframes lineAnim {
+  0% {
+    width: 0px;
+    height: 4px;
+  }
+  60% {
+    width: 50%;
+    height: 4px;
+  }
+  100% {
+    width: 50%;
+    height: 15px;
+  }
+}
+
 .title-line {
   width: 30px;
   height: 5px;

templates/accounts/lecturer_list.html

@@ -6,11 +6,12 @@
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> Lecturers</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'add_lecturer' %}"><i class="fas fa-plus"></i>Add Lecturer</a>
+<div class="manage-wrap">
+    <a class="btn btn-primary" href="{% url 'add_lecturer' %}"><i class="fas fa-plus"></i>Add Lecturer</a>
+</div>
 {% endif %}
 
-<p class="title-1"><i class="fas fa-chalkboard-teacher"></i>Lecturers List</p>
+<p class="title-1"><i class="fas fa-chalkboard-teacher"></i>Lecturers</p>
-<div class="title-line"></div>
 
 {% if messages %}
     {% for message in messages %}
@@ -27,7 +28,7 @@
 {% endif %}
 
 <div class="content-center">
-    <form class="search-form" action="" method="POST">{% csrf_token %}
+    <form class="search-form" action="" method="get">
         <input class="au-input" type="text" name="id_no" placeholder="ID No." value="{{ request.GET.id_no }}"/>
         <input class="au-input" type="text" name="name" placeholder="Name" value="{{ request.GET.name }}"/>
         <input class="au-input" type="text" name="email" placeholder="Email" value="{{ request.GET.email }}"/>
@@ -80,7 +81,7 @@
                   <td></td>
                   <td>
                   <span class="text-danger">
-                    <i class="far fa-frown"></i>No Lecturer(s).
+                    No Lecturer(s).
                     {% if request.user.is_superuser %}
                     <a href="{% url 'add_lecturer' %}">
                     <i class="primary" style="font-size: 22px;">

templates/accounts/student_list.html

@@ -6,11 +6,12 @@
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> Students</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'add_student' %}"><i class="fas fa-plus"></i>Add Student</a>
+<div class="manage-wrap">
+    <a class="btn btn-primary" href="{% url 'add_student' %}"><i class="fas fa-plus"></i>Add Student</a>
+</div>
 {% endif %}
 
-<div class="title-1"><i class="fas fa-user-graduate"></i>Students List</div>
+<div class="title-1"><i class="fas fa-user-graduate"></i>Students</div>
-<div class="title-line"></div>
 
 {% if messages %}
     {% for message in messages %}
@@ -27,7 +28,7 @@
 {% endif %}
 
 <div class="content-center">
-    <form class="search-form" action="" method="GET">
+    <form class="search-form" action="" method="get">
         <input class="au-input" type="text" id="student_id" name="student_id" placeholder="ID No." value="{{ request.GET.student_id }}"/>
         <input class="au-input" type="text" name="name" placeholder="Name" value="{{ request.GET.name }}"/>
         <input class="au-input" type="text" name="department" placeholder="Department" value="{{ request.GET.department }}"/>

templates/app/index.html

@@ -4,6 +4,30 @@
 
 {% block content %}
 
+<style>
+    .color-indicator {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 2px;
+    }
+
+    .bg-purple {
+        background-color: #6f42c1;
+    }
+
+    .card-header-ne {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .card-header-ne .title {
+        vertical-align: middle;
+    }
+</style>
+
 <div class="container">
     <div id="input-nav" class="p-2">Home</div>
 
@@ -27,20 +51,7 @@
     {% endfor %}
     {% endif %}
 
-    <style>
+    <div class="title-1">News &amp; Events</div>
-        .color-indicator {
-            display: inline-block;
-            width: 10px;
-            height: 10px;
-            border-radius: 2px;
-        }
-
-        .bg-purple {
-            background-color: #6f42c1;
-        }
-    </style>
-
-    <div class="title-1">News & Events</div>
 
     <ul class="col-md-2 ml-auto d-flex">
         <li class="mr-3">
@@ -50,18 +61,6 @@
             <span class="color-indicator bg-purple"></span> Events
         </li>
     </ul>
-    <style>
-        .card-header-ne {
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .card-header-ne .title {
-            vertical-align: middle;
-        }
-    </style>
     {% if items %}
     <div class="row">
         {% for item in items %}
@@ -100,9 +99,9 @@
     </div>
 
     {% else %}
-    <p>
+    <h4 class="text-center mt-5 text-muted">
-        <i class="far fa-frown fa-2x"></i>So empty.
+        <i class="far fa-frown me-2"></i> So empty
-    </p>
+    </h4>
 
     {% endif %}
 

templates/app/semester_list.html

@@ -6,11 +6,12 @@
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> Semester list</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'add_semester' %}"><i class="fas fa-plus"></i>Add New Semester</a>
+<div class="manage-wrap">
+    <a class="btn btn-primary" href="{% url 'add_semester' %}"><i class="fas fa-plus"></i>Add New Semester</a>
+</div>
 {% endif %}
 
 <div class="title-1"><i class="fas fa-calendar-alt"></i>Semester List</div>
-<div class="title-line"></div>
 
 {% if messages %}
 {% for message in messages %}
@@ -73,7 +74,7 @@
                 <td></td>
                 <td>
                     <span class="text-danger">
-                        <i class="far fa-frown"></i>No Semester.
+                        No Semester.
                         {% if request.user.is_superuser %}
                         <a href="{% url 'add_semester' %}">
                             <i class="primary" style="font-size: 22px;">

templates/app/session_list.html

@@ -6,11 +6,12 @@
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> Session list</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'add_session' %}"><i class="fas fa-plus"></i>Add New Session</a>
+<div class="manage-wrap">
+    <a class="btn btn-primary" href="{% url 'add_session' %}"><i class="fas fa-plus"></i>Add New Session</a>
+</div>
 {% endif %}
 
 <div class="title-1"><i class="fas fa-calendar-week"></i>Session List</div>
-<div class="title-line"></div>
 
 {% if messages %}
     {% for message in messages %}
@@ -67,7 +68,7 @@
                   <td></td>
                   <td>
                   <span class="text-danger">
-                    <i class="far fa-frown"></i>No Session.
+                    No Session.
                     {% if request.user.is_superuser %}
                     <a href="{% url 'add_session' %}">
                     <i class="primary" style="font-size: 22px;">

templates/course/course_allocation_view.html

@@ -5,11 +5,12 @@
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> Allocation list</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'course_allocation' %}"><i class="fas fa-plus"></i>Allocate Now</a>
+<div class="manage-wrap">
+    <a class="btn btn-primary" href="{% url 'course_allocation' %}"><i class="fas fa-plus"></i>Allocate Now</a>
+</div>
 {% endif %}
 
-<div class="title-1"><i class="fas fa-tasks"></i>Course Allocation List</div>
+<div class="title-1"><i class="fas fa-tasks"></i>Course Allocations</div>
-<div class="title-line"></div>
 
 {% if messages %}
     {% for message in messages %}
@@ -73,7 +74,7 @@
               <td></td>
               <td></td>
               <td>
-              <span class="text-danger"><i class="far fa-frown"></i>No Course Allocated.
+                <span class="text-danger">No Course Allocated.
                     {% if request.user.is_superuser %}
                     <a href="{% url 'course_allocation' %}">
                     <i class="primary" style="font-size: 22px;">
@@ -83,6 +84,7 @@
                     </a>
                 </span>
                 </td>
+              <td></td>
             </tr>
 
         </tbody>

templates/course/program_list.html

@@ -5,11 +5,12 @@
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> Programs</div>
 
 {% if request.user.is_superuser %}
-<a class="add-button" href="{% url 'add_program' %}"><i class="fas fa-plus"></i>Add Program</a>
+<div class="manage-wrap">
+    <a class="btn btn-primary" href="{% url 'add_program' %}"><i class="fas fa-plus"></i>Add Program</a>
+</div>
 {% endif %}
 
 <div class="title-1"><i class="fas fa-book-open"></i>Program List</div>
-<div class="title-line"></div>
 
 {% if messages %}
 {% for message in messages %}

templates/progress.html

@@ -86,7 +86,7 @@
 </div>
   {% endif %}
   {% if not cat_scores and not exams %}
- 	<div class="col-12 p-4 text-center"><h3><i class="far fa-frown"></i></h3> No recordes yet. to get a good recorde, try to do some quizzes in your course.</div> 
+ 	<div class="col-12 p-4 text-center"><h3><i class="far fa-frown"></i></h3> No recordes yet. Try to do some quizzes in your course.</div> 
   {% endif %}
 
 {% endblock %}

templates/quiz/sitting_list.html

@@ -6,8 +6,7 @@
 <div class="container">
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a> Complete Exams</div>
 
-<div class="header-title-xl text-center">{% trans "List of complete exams" %}</div>
+<div class="title-1"><i class="fas fa-calendar-alt"></i>{% trans "List of complete exams" %}</div>
-<div class="title-line"></div>
 
 {% for student in students %}<h3>{{ student.student.user.get_full_name }}</h3>{% endfor %}
 {% for marking in marking_list %}<h3>{{ marking }} <small>{{ forloop.counter }}</small></h3>{% endfor %}