klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-29 20:44:24 +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 {
flex: 1;
justify-content: flex-end;
>.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;
}
}
}
gap: 10px;
>.links {
width: 100%;
display: flex;
justify-content: flex-end;
gap: 15px;
align-items: center;
height: 40px;
gap: 10px;
@media (max-width: 1200px) {
justify-content: flex-start;
}
>a {
text-align: right;
color: $text-color;
&:hover {
color: $hovered-text-color;
@media (max-width: 375px) {
height: 30px;
}
&: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 {
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;
@ -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 {

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

@ -87,15 +87,9 @@
</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>
<a
href="{{ url('core:user_profile', user_id=user.id) }}"
{% if user.profile_pict %}
@ -105,6 +99,8 @@
{% endif %}
></a>
</div>
<div class="links">
<div class="notification">
<a href="#" onclick="display_notif()">
<i class="fa fa-bell-o"></i>
@ -112,12 +108,7 @@
{% if notification_count > 0 %}
<span>
{% if notification_count < 100 %}
{{ notification_count }}
{% else %}
&nbsp;
{% endif %}
</span>
{% if notification_count < 100 %} {{ notification_count }} {% else %} &nbsp; {% endif %} </span>
{% endif %}
</a>
<div id="header_notif">
@ -154,6 +145,9 @@
</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>
{% endif %}