klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-26 11:04:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Used icons instead of text & updated layout accordingly

Browse Source
This commit is contained in:
Julien Constant 2023-04-08 00:59:16 +02:00
parent 8852ef990e
commit acde993352
2 changed files with 199 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
core/static/core/header.scss
View File

@ -191,96 +191,42 @@ $hovered-red-text-color: #ff4d4d;
>.right { >.right {
flex: 1; flex: 1;
justify-content: flex-end; justify-content: flex-end;
gap: 10px;
>.user {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 15px;
@media (max-width: 1200px) {
width: 100%;
flex-direction: row-reverse;
justify-content: flex-end;
}
> a {
display: block;
min-width: 40px;
height: 40px;
border-radius: 50%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: $background-color;
}
>.options {
display: flex;
flex-direction: column;
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;
}
}
}
>.links { >.links {
width: 100%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 15px; align-items: center;
height: 40px;
gap: 10px;
@media (max-width: 1200px) { @media (max-width: 1200px) {
justify-content: flex-start; justify-content: flex-start;
} }
>a { @media (max-width: 375px) {
text-align: right; height: 30px;
color: $text-color;
&:hover {
color: $hovered-text-color;
} }
&:last-child { > * {
color: $red-text-color; display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
font-size: 20px;
&:hover { > * {
color: $hovered-red-text-color; font-size: 20px;
}
}
}
}
} }
} }
>.notification { >.notification {
height: 100%;
width: 55px;
display: flex;
justify-content: center;
align-items: center;
position: relative; position: relative;
>a { >a {
color: $text-color; color: $text-color;
position: relative; position: relative;
font-size: 25px;
&:hover { &:hover {
color: $hovered-text-color; color: $hovered-text-color;
@ -371,6 +317,69 @@ $hovered-red-text-color: #ff4d4d;
} }
} }
} }
>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: 10px;
@media (max-width: 1200px) {
width: 100%;
flex-direction: row-reverse;
justify-content: flex-end;
}
> a {
display: block;
min-width: 40px;
height: 40px;
border-radius: 50%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: $background-color;
}
>.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;
}
}
}
}
} }
>.left { >.left {

20
core/templates/core/base.jinja
View File

@ -87,15 +87,9 @@
</div> </div>
<div class="right"> <div class="right">
<div class="user"> <div class="user">
<div class="options">
<div class="username"> <div class="username">
<a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a> <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
</div> </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>
<a <a
href="{{ url('core:user_profile', user_id=user.id) }}" href="{{ url('core:user_profile', user_id=user.id) }}"
{% if user.profile_pict %} {% if user.profile_pict %}
@ -105,6 +99,8 @@
{% endif %} {% endif %}
></a> ></a>
</div> </div>
<div class="links">
<div class="notification"> <div class="notification">
<a href="#" onclick="display_notif()"> <a href="#" onclick="display_notif()">
<i class="fa fa-bell-o"></i> <i class="fa fa-bell-o"></i>
@ -112,12 +108,7 @@
{% if notification_count > 0 %} {% if notification_count > 0 %}
<span> <span>
{% if notification_count < 100 %} {% if notification_count < 100 %} {{ notification_count }} {% else %} &nbsp; {% endif %} </span>
{{ notification_count }}
{% else %}
&nbsp;
{% endif %}
</span>
{% endif %} {% endif %}
</a> </a>
<div id="header_notif"> <div id="header_notif">
@ -125,7 +116,7 @@
{% if user.notifications.filter(viewed=False).count() > 0 %} {% if user.notifications.filter(viewed=False).count() > 0 %}
{% for n in user.notifications.filter(viewed=False).order_by('-date') %} {% for n in user.notifications.filter(viewed=False).order_by('-date') %}
<li> <li>
<a href="{{ url("core:notification", notif_id=n.id) }}"> <a href="{{ url(" core:notification", notif_id=n.id) }}">
<div class="datetime"> <div class="datetime">
<span class="header_notif_date"> <span class="header_notif_date">
{{ n.date|localtime|date(DATE_FORMAT) }} {{ n.date|localtime|date(DATE_FORMAT) }}
@ -154,6 +145,9 @@
</div> </div>
</div> </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>
</div> </div>
{% endif %} {% endif %}