mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-26 11:04:20 +00:00
Used icons instead of text & updated layout accordingly
This commit is contained in:
Julien Constant
parent
8852ef990e
commit
acde993352
@ -191,13 +191,157 @@ $hovered-red-text-color: #ff4d4d;
|
|||||||
>.right {
|
>.right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
justify-content: flex-end;
|
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 {
|
>.user {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 15px;
|
gap: 10px;
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -215,162 +359,27 @@ $hovered-red-text-color: #ff4d4d;
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
>.options {
|
>.username {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: flex-end;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
|
|
||||||
>.username {
|
@media (max-width: 500px) {
|
||||||
display: flex;
|
justify-content: flex-start;
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 5px;
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
>a {
|
|
||||||
color: $text-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $hovered-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
>.links {
|
>a {
|
||||||
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 {
|
|
||||||
color: $text-color;
|
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 {
|
&:hover {
|
||||||
box-sizing: border-box;
|
color: $hovered-text-color;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
>.left {
|
>.left {
|
||||||
|
|||||||
@ -87,14 +87,8 @@
|
|||||||
</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 class="links">
|
|
||||||
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
|
|
||||||
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
href="{{ url('core:user_profile', user_id=user.id) }}"
|
href="{{ url('core:user_profile', user_id=user.id) }}"
|
||||||
@ -105,54 +99,54 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
></a>
|
></a>
|
||||||
</div>
|
</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 %}
|
<div class="links">
|
||||||
<span>
|
<div class="notification">
|
||||||
{% if notification_count < 100 %}
|
<a href="#" onclick="display_notif()">
|
||||||
{{ notification_count }}
|
<i class="fa fa-bell-o"></i>
|
||||||
{% else %}
|
{% set notification_count = user.notifications.filter(viewed=False).count() %}
|
||||||
|
|
||||||
{% endif %}
|
{% if notification_count > 0 %}
|
||||||
</span>
|
<span>
|
||||||
{% endif %}
|
{% if notification_count < 100 %} {{ notification_count }} {% else %} {% endif %} </span>
|
||||||
</a>
|
{% endif %}
|
||||||
<div id="header_notif">
|
</a>
|
||||||
<ul>
|
<div id="header_notif">
|
||||||
{% if user.notifications.filter(viewed=False).count() > 0 %}
|
<ul>
|
||||||
|
{% 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) }}
|
||||||
</span>
|
</span>
|
||||||
<span class="header_notif_time">
|
<span class="header_notif_time">
|
||||||
{{ n.date|localtime|time(DATETIME_FORMAT) }}
|
{{ n.date|localtime|time(DATETIME_FORMAT) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="reason">
|
<div class="reason">
|
||||||
{{ n }}
|
{{ n }}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<li class="empty-notification">{% trans %}You do not have any unread notification{% endtrans %}</li>
|
<li class="empty-notification">{% trans %}You do not have any unread notification{% endtrans %}</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
<div class="options">
|
<div class="options">
|
||||||
<a href="{{ url('core:notification_list') }}">
|
<a href="{{ url('core:notification_list') }}">
|
||||||
{% trans %}View more{% endtrans %}
|
{% trans %}View more{% endtrans %}
|
||||||
</a>
|
</a>
|
||||||
<a href="{{ url('core:notification_list') }}?see_all">
|
<a href="{{ url('core:notification_list') }}?see_all">
|
||||||
{% trans %}Mark all as read{% endtrans %}
|
{% trans %}Mark all as read{% endtrans %}
|
||||||
</a>
|
</a>
|
||||||
|
</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>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user