mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-01 07:35:17 +00:00
rework of the main navbar
This commit is contained in:
Julien Constant
parent
0167afe38f
commit
45f167411e
BIN
core/static/core/img/logo_no_text.png
Normal file
BIN
core/static/core/img/logo_no_text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
@ -1,5 +1,3 @@
|
||||
console.log('Guy');
|
||||
|
||||
$( function() {
|
||||
buttons = $(".choose_file_button");
|
||||
popups = $(".choose_file_widget");
|
||||
|
||||
400
core/static/core/navbar.scss
Normal file
400
core/static/core/navbar.scss
Normal file
@ -0,0 +1,400 @@
|
||||
.header {
|
||||
box-sizing: border-box;
|
||||
background-color: #354a5f;
|
||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 580px) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 607px) {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-picture {
|
||||
height: 100%;
|
||||
width: 65px;
|
||||
display: flex;
|
||||
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
> span:first-child {
|
||||
font-size: 1.43em;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-lang {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
> form {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
> input[type=submit] {
|
||||
border-radius: 0;
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #354a5f;
|
||||
width: 45px;
|
||||
height: 25px;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #283747;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-disconnected {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 607px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> .button {
|
||||
box-sizing: border-box;
|
||||
height: 35px;
|
||||
background-color: transparent;
|
||||
font-weight: normal;
|
||||
padding: 5px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: .9em;
|
||||
width: 120px;
|
||||
|
||||
&:hover {
|
||||
background-color: #283747;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-disconnected ~ &-lang {
|
||||
@media (max-width: 662px) {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-connected {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@media (min-width: 400px) and (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
min-width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
> .right,
|
||||
> .left {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 400px) and (max-width: 1200px) {
|
||||
width: 100%;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .options,
|
||||
> .name {
|
||||
> a {
|
||||
color: white;
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .name {
|
||||
color: white;
|
||||
max-width: 250px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
> .options {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: flex-end;
|
||||
|
||||
> a {
|
||||
&:last-child {
|
||||
color: #eb2f06;
|
||||
|
||||
&:hover {
|
||||
color: #cc2804;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .notification {
|
||||
height: 100%;
|
||||
width: 55px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
color: white;
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
> span {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 5px;
|
||||
background-color: #eb2f06;
|
||||
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 #dfdfdf;
|
||||
|
||||
> ul {
|
||||
list-style-type: none;
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 120px;
|
||||
overflow-y: scroll;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
.datetime {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> a {
|
||||
color: black;
|
||||
padding: 5px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .left {
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
> form {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> input[type=text] {
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
font-size: .9em;
|
||||
margin: 0;
|
||||
background-color: #283747;
|
||||
padding: 0 10px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-connected ~ &-lang {
|
||||
@media (max-width: 1200px) {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bars {
|
||||
list-style-type: none;
|
||||
min-width: 120px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media(max-width: 1200px) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
> li > a {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -9,10 +9,13 @@
|
||||
<link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ static('ajax_select/css/ajax_select.css') }}">
|
||||
<link rel="stylesheet" href="{{ scss('core/style.scss') }}">
|
||||
<link rel="stylesheet" href="{{ scss('core/navbar.scss') }}">
|
||||
|
||||
{% block jquery_css %}
|
||||
{# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
|
||||
<link rel="stylesheet" href="{{ static('core/js/ui/jquery-ui.min.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
<link rel="preload" as="style" href="{{ static('core/font-awesome/css/font-awesome.min.css') }}" onload="this.onload=null;this.rel='stylesheet'">
|
||||
<noscript><link rel="stylesheet" href="{{ static('core/font-awesome/css/font-awesome.min.css') }}"></noscript>
|
||||
<script defer href="{{ static('core/font-awesome/js/fontawesone.min.js') }}"></script>
|
||||
@ -21,6 +24,7 @@
|
||||
<script src="{{ static('core/js/jquery-3.6.2.min.js') }}"></script>
|
||||
<!-- Put here to always have acces to those functions on django widgets -->
|
||||
<script src="{{ static('core/js/script.js') }}"></script>
|
||||
|
||||
{% block additional_css %}{% endblock %}
|
||||
{% block additional_js %}{% endblock %}
|
||||
{% endblock %}
|
||||
@ -34,106 +38,115 @@
|
||||
<!-- BEGIN HEADER -->
|
||||
{% block header %}
|
||||
{% if not popup %}
|
||||
<header>
|
||||
<div id="header_language_chooser">
|
||||
{% for language in LANGUAGES %}
|
||||
<form action="{{ url('set_language') }}" method="post">{% csrf_token %}
|
||||
<input name="next" value="{{ request.path }}" type="hidden" />
|
||||
<input name="language" value="{{ language[0] }}" type="hidden" />
|
||||
<input type="submit" value="{{ language[0]|upper }}" />
|
||||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="header_logo">
|
||||
<a href="{{ url('core:index') }}">
|
||||
<img src="{{ static('core/img/logo.png') }}" alt="AE logo">
|
||||
<header class="header">
|
||||
<div class="header-logo">
|
||||
<a class="header-logo-picture" href="{{ url('core:index') }}" style="background-image: url('{{ static('core/img/logo_no_text.png') }}')">
|
||||
|
||||
</a>
|
||||
<div class="header-logo-text">
|
||||
<span>Association des Étudiants</span>
|
||||
<span>de l'Université de Technologie de Belfort-Montbéliard</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if not user.is_authenticated %}
|
||||
<div id="header_connect_links">
|
||||
<form method="post" action="{{ url('core:login') }}">
|
||||
{% csrf_token %}
|
||||
<label for="id_username">{% trans %}Username{% endtrans %}</label>
|
||||
<input id="id_username" maxlength="254" name="username" type="text">
|
||||
<label for="id_password">{% trans %}Password{% endtrans %}</label>
|
||||
<input type="password" name="password" id="id_password">
|
||||
<input type="submit" value="{% trans %}Login{% endtrans %}">
|
||||
</form>
|
||||
<a href="{{ url('core:register') }}"><button type="button">{% trans %}Register{% endtrans %}</button></a>
|
||||
<div class="header-disconnected">
|
||||
<a class="button" href="{{ url('core:login') }}">{% trans %}Login{% endtrans %}</a>
|
||||
<a class="button" href="{{ url('core:register') }}">{% trans %}Register{% endtrans %}</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="header_bar">
|
||||
<ul id="header_bars_infos">
|
||||
{% cache 100 "counters_activity" %}
|
||||
<div class="header-connected">
|
||||
<div class="left">
|
||||
<form class="search" action="{{ url('core:search') }}" method="GET" id="header_search">
|
||||
<input class="header-input" type="text" placeholder="{% trans %}Search{% endtrans %}" name="query" id="search" />
|
||||
<input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
|
||||
</form>
|
||||
<ul class="bars">
|
||||
{% cache 0 "counters_activity" %}
|
||||
{% for bar in Counter.objects.annotate_has_barman(user).filter(type="BAR") %}
|
||||
<li>
|
||||
{# If the user is a barman, we redirect him directly to the barman page
|
||||
else we redirect him to the activity page #}
|
||||
{% if bar.has_annotated_barman %}
|
||||
<a href="{{ url('counter:details', counter_id=bar.id) }}" style="padding: 0">
|
||||
<a href="{{ url('counter:details', counter_id=bar.id) }}">
|
||||
{% else %}
|
||||
<a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0">
|
||||
<a href="{{ url('counter:activity', counter_id=bar.id) }}">
|
||||
{% endif %}
|
||||
{% if bar.is_inactive(): %}
|
||||
{% if bar.is_inactive() %}
|
||||
<i class="fa fa-question" style="color: #f39c12"></i>
|
||||
{% elif bar.is_open(): %}
|
||||
<i class="fa fa-check" style="color: #2ecc71"></i>
|
||||
{% else %}
|
||||
<i class="fa fa-times" style="color: #eb2f06"></i>
|
||||
{% endif %}
|
||||
{{ bar }}
|
||||
<span>{{ bar }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcache %}
|
||||
<form action="{{ url('core:search') }}" method="GET" id="header_search">
|
||||
<input type="text" placeholder="{% trans %}Search{% endtrans %}" name="query" id="search" />
|
||||
<input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
|
||||
</form>
|
||||
<div id="header_user_links">
|
||||
<div>
|
||||
<a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" onclick="display_notif()" style="white-space: nowrap;"><i class="fa fa-bell-o"></i> ({{ user.notifications.filter(viewed=False).count() }})</a>
|
||||
<ul id="header_notif">
|
||||
<div class="right">
|
||||
<div class="user">
|
||||
<a class="name" href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
|
||||
<div class="options">
|
||||
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
|
||||
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification">
|
||||
<a href="#" onclick="display_notif()">
|
||||
<i class="fa fa-bell-o"></i>
|
||||
<span>
|
||||
{% if user.notifications.filter(viewed=False).count() < 100 %}
|
||||
{{ user.notifications.filter(viewed=False).count() }}
|
||||
{% else %}
|
||||
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
<div id="header_notif">
|
||||
<ul>
|
||||
{% 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>
|
||||
<br>
|
||||
</div>
|
||||
<div class="reason">
|
||||
{{ n }}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li>
|
||||
<strong>
|
||||
</ul>
|
||||
<div class="options">
|
||||
<a href="{{ url('core:notification_list') }}">
|
||||
{% trans %}View more{% endtrans %}
|
||||
</a>
|
||||
<br />
|
||||
<a href="{{ url('core:notification_list') }}?see_all">
|
||||
{% trans %}Mark all as read{% endtrans %}
|
||||
</a>
|
||||
</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="header-lang">
|
||||
{% for language in LANGUAGES %}
|
||||
<form action="{{ url('set_language') }}" method="post">
|
||||
{% csrf_token %}
|
||||
<input name="next" value="{{ request.path }}" type="hidden" />
|
||||
<input name="language" value="{{ language[0] }}" type="hidden" />
|
||||
<input type="submit" value="{% if language[0] == 'en' %}🇬🇧{% else %}🇫🇷{% endif %}" />
|
||||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="info_boxes">
|
||||
@ -152,11 +165,10 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
{% else %}{# if not popup #}
|
||||
{% else %}
|
||||
<div id="popupheader">{{ user.get_display_name() }}</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% endblock %}
|
||||
<!-- END HEADER -->
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user