From acde9933527a41bf6c35a1731b0966ca1e5f711a Mon Sep 17 00:00:00 2001
From: Julien Constant <julienconstant190@gmail.com>
Date: Sat, 8 Apr 2023 00:59:16 +0200
Subject: [PATCH] Used icons instead of text & updated layout accordingly

---
 core/static/core/header.scss   | 301 +++++++++++++++++----------------
 core/templates/core/base.jinja |  94 +++++-----
 2 files changed, 199 insertions(+), 196 deletions(-)

diff --git a/core/static/core/header.scss b/core/static/core/header.scss
index 5888a965..bd7186b1 100644
--- a/core/static/core/header.scss
+++ b/core/static/core/header.scss
@@ -191,13 +191,157 @@ $hovered-red-text-color: #ff4d4d;
     >.right {
       flex: 1;
       justify-content: flex-end;
+      gap: 10px;
+
+      >.links {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: 40px;
+        gap: 10px;
+    
+        @media (max-width: 1200px) {
+          justify-content: flex-start;
+        }
+
+        @media (max-width: 375px) {
+          height: 30px; 
+        }
+
+        > * {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 30px;
+          height: 30px;
+          font-size: 20px;
+
+          > * {
+            font-size: 20px;
+          }
+        }
+
+        >.notification {
+          position: relative;
+      
+          >a {
+            color: $text-color;
+            position: relative;
+      
+            &:hover {
+              color: $hovered-text-color;
+            }
+      
+            >span {
+              color: $text-color;
+              font-size: 14px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 10px;
+              height: 10px;
+              padding: 5px;
+              background-color: $red-text-color;
+              border-radius: 50%;
+              position: absolute;
+              top: -50%;
+              right: -50%;
+            }
+          }
+      
+          >#header_notif {
+            box-sizing: border-box;
+            display: none;
+            position: absolute;
+            margin: 0;
+            background-color: whitesmoke;
+            top: calc(100% + 10px);
+            right: calc(50% - 30px);
+            width: 400px;
+            max-width: calc(100vw - 30px);
+            padding: 10px;
+            z-index: 100;
+            border-radius: 10px;
+            box-shadow: 3px 3px 3px 0 #767676;
+      
+            >ul {
+              list-style-type: none;
+              margin: 0;
+              display: flex;
+              flex-direction: column;
+              gap: 10px;
+              min-height: 20px;
+              max-height: 120px;
+              overflow-y: auto;
+      
+              >li {
+                >a {
+                  .datetime {
+                    display: flex;
+                    justify-content: flex-start;
+                    gap: 10px;
+                    font-style: italic;
+                    font-size: .8em;
+                  }
+                }
+      
+                &.empty-notification {
+                  text-align: center;
+                  font-style: italic;
+                }
+              }
+            }
+      
+            .options {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              margin-top: 10px;
+              gap: 5px;
+      
+              >a {
+                color: black;
+                padding: 5px;
+                width: 50%;
+                display: flex;
+                justify-content: center;
+                text-align: center;
+                align-items: center;
+                border-radius: 5px;
+                background-color: #ddd;
+      
+                &:hover {
+                  background-color: rgba(0, 0, 0, .2);
+                }
+              }
+            }
+          }
+        }
+    
+        >a {
+          text-align: right;
+          color: $text-color;
+    
+          &:hover {
+            color: $hovered-text-color;
+          }
+    
+          &:last-child {
+            color: $red-text-color;
+    
+            &:hover {
+              color: $hovered-red-text-color;
+            }
+          }
+        }
+      }
 
       >.user {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        gap: 15px;
+        gap: 10px;
 
         @media (max-width: 1200px) {
           width: 100%;
@@ -215,162 +359,27 @@ $hovered-red-text-color: #ff4d4d;
           background-repeat: no-repeat;
           background-color: $background-color;
         }
-
-        >.options {
+        
+        >.username {
           display: flex;
-          flex-direction: column;
+          justify-content: flex-end;
           gap: 5px;
 
-          >.username {
-            display: flex;
-            justify-content: flex-end;
-            gap: 5px;
-
-            @media (max-width: 500px) {
-              justify-content: flex-start;
-            }
-
-            >a {
-              color: $text-color;
-
-              &:hover {
-                color: $hovered-text-color;
-              }
-            }
+          @media (max-width: 500px) {
+            justify-content: flex-start;
           }
 
-          >.links {
-            width: 100%;
-            display: flex;
-            justify-content: flex-end;
-            gap: 15px;
-
-            @media (max-width: 1200px) {
-              justify-content: flex-start;
-            }
-
-            >a {
-              text-align: right;
-              color: $text-color;
-
-              &:hover {
-                color: $hovered-text-color;
-              }
-
-              &:last-child {
-                color: $red-text-color;
-
-                &:hover {
-                  color: $hovered-red-text-color;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      >.notification {
-        height: 100%;
-        width: 55px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-
-        >a {
-          color: $text-color;
-          position: relative;
-          font-size: 25px;
-
-          &:hover {
-            color: $hovered-text-color;
-          }
-
-          >span {
+          >a {
             color: $text-color;
-            font-size: 14px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 10px;
-            height: 10px;
-            padding: 5px;
-            background-color: $red-text-color;
-            border-radius: 50%;
-            position: absolute;
-            top: -50%;
-            right: -50%;
-          }
-        }
 
-        >#header_notif {
-          box-sizing: border-box;
-          display: none;
-          position: absolute;
-          margin: 0;
-          background-color: whitesmoke;
-          top: calc(100% + 10px);
-          right: calc(50% - 30px);
-          width: 400px;
-          max-width: calc(100vw - 30px);
-          padding: 10px;
-          z-index: 100;
-          border-radius: 10px;
-          box-shadow: 3px 3px 3px 0 #767676;
-
-          >ul {
-            list-style-type: none;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            min-height: 20px;
-            max-height: 120px;
-            overflow-y: auto;
-
-            >li {
-              >a {
-                .datetime {
-                  display: flex;
-                  justify-content: flex-start;
-                  gap: 10px;
-                  font-style: italic;
-                  font-size: .8em;
-                }
-              }
-
-              &.empty-notification {
-                text-align: center;
-                font-style: italic;
-              }
-            }
-          }
-
-          .options {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            margin-top: 10px;
-            gap: 5px;
-
-            >a {
-              color: black;
-              padding: 5px;
-              width: 50%;
-              display: flex;
-              justify-content: center;
-              text-align: center;
-              align-items: center;
-              border-radius: 5px;
-              background-color: #ddd;
-
-              &:hover {
-                background-color: rgba(0, 0, 0, .2);
-              }
+            &:hover {
+              color: $hovered-text-color;
             }
           }
         }
       }
+
+      
     }
 
     >.left {
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index ea610aa8..fcb7140e 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -87,14 +87,8 @@
                             </div>
                             <div class="right">
                                 <div class="user">
-                                    <div class="options">
-                                        <div class="username">
-                                            <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
-                                        </div>
-                                        <div class="links">
-                                            <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
-                                            <a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
-                                        </div>
+                                    <div class="username">
+                                        <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
                                     </div>
                                     <a 
                                         href="{{ url('core:user_profile', user_id=user.id) }}"
@@ -105,54 +99,54 @@
                                         {% endif %}                                  
                                     ></a>
                                 </div>
-                                <div class="notification">
-                                    <a href="#" onclick="display_notif()">
-                                        <i class="fa fa-bell-o"></i>
-                                        {% set notification_count = user.notifications.filter(viewed=False).count() %}
 
-                                        {% if notification_count > 0 %}
-                                        <span>
-                                            {% if notification_count < 100 %}
-                                                {{ notification_count }}
-                                            {% else %}
-                                                &nbsp;
-                                            {% endif %}
-                                        </span>
-                                        {% endif %}
-                                    </a>
-                                    <div id="header_notif">
-                                        <ul>
-                                            {% if user.notifications.filter(viewed=False).count() > 0 %}
+                                <div class="links">
+                                    <div class="notification">
+                                        <a href="#" onclick="display_notif()">
+                                            <i class="fa fa-bell-o"></i>
+                                            {% set notification_count = user.notifications.filter(viewed=False).count() %}
+                                    
+                                            {% if notification_count > 0 %}
+                                            <span>
+                                                {% if notification_count < 100 %} {{ notification_count }} {% else %} &nbsp; {% endif %} </span>
+                                                    {% endif %}
+                                        </a>
+                                        <div id="header_notif">
+                                            <ul>
+                                                {% if user.notifications.filter(viewed=False).count() > 0 %}
                                                 {% for n in user.notifications.filter(viewed=False).order_by('-date') %}
-                                                    <li>
-                                                        <a href="{{ url("core:notification", notif_id=n.id) }}">
-                                                            <div class="datetime">
-                                                                <span class="header_notif_date">
-                                                                    {{ n.date|localtime|date(DATE_FORMAT) }}
-                                                                </span>
-                                                                <span class="header_notif_time">
-                                                                    {{ n.date|localtime|time(DATETIME_FORMAT) }}
-                                                                </span>
-                                                            </div>
-                                                            <div class="reason">
-                                                                {{ n }}
-                                                            </div>
-                                                        </a>
-                                                    </li>
+                                                <li>
+                                                    <a href="{{ url(" core:notification", notif_id=n.id) }}">
+                                                        <div class="datetime">
+                                                            <span class="header_notif_date">
+                                                                {{ n.date|localtime|date(DATE_FORMAT) }}
+                                                            </span>
+                                                            <span class="header_notif_time">
+                                                                {{ n.date|localtime|time(DATETIME_FORMAT) }}
+                                                            </span>
+                                                        </div>
+                                                        <div class="reason">
+                                                            {{ n }}
+                                                        </div>
+                                                    </a>
+                                                </li>
                                                 {% endfor %}
-                                            {% else %}
+                                                {% else %}
                                                 <li class="empty-notification">{% trans %}You do not have any unread notification{% endtrans %}</li>
-                                            {% endif %}
-                                        </ul>
-                                        <div class="options">
-                                            <a href="{{ url('core:notification_list') }}">
-                                                {% trans %}View more{% endtrans %}
-                                            </a>
-                                            <a href="{{ url('core:notification_list') }}?see_all">
-                                                {% trans %}Mark all as read{% endtrans %}
-                                            </a>
+                                                {% endif %}
+                                            </ul>
+                                            <div class="options">
+                                                <a href="{{ url('core:notification_list') }}">
+                                                    {% trans %}View more{% endtrans %}
+                                                </a>
+                                                <a href="{{ url('core:notification_list') }}?see_all">
+                                                    {% trans %}Mark all as read{% endtrans %}
+                                                </a>
+                                            </div>
                                         </div>
                                     </div>
+                                    <a href="{{ url('core:user_tools') }}"><i class="fa fa-wrench" aria-hidden="true"></i></a>
+                                    <a href="{{ url('core:logout') }}"><i class="fa fa-sign-out"></i></a>
                                 </div>
                             </div>
                         </div>