klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-01 15:45:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework of the main navbar

Browse Source
This commit is contained in:
Julien Constant 2023-03-12 03:08:57 +01:00
parent 0167afe38f
commit 45f167411e
4 changed files with 553 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
core/static/core/img/logo_no_text.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

2
core/static/core/js/script.js
View File

@ -1,5 +1,3 @@
console.log('Guy');
$( function() { $( function() {
buttons = $(".choose_file_button"); buttons = $(".choose_file_button");
popups = $(".choose_file_widget"); popups = $(".choose_file_widget");

400
core/static/core/navbar.scss Normal file
View 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;
}
}
}

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

@ -2,27 +2,31 @@
<html lang="fr"> <html lang="fr">
<head> <head>
{% block head %} {% block head %}
<title>{% block title %}{% trans %}Welcome!{% endtrans %}{% endblock %} - Association des Étudiants UTBM</title> <title>{% block title %}{% trans %}Welcome!{% endtrans %}{% endblock %} - Association des Étudiants UTBM</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}"> <link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
<link rel="stylesheet" href="{{ static('core/base.css') }}"> <link rel="stylesheet" href="{{ static('core/base.css') }}">
<link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}"> <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="{{ static('ajax_select/css/ajax_select.css') }}">
<link rel="stylesheet" href="{{ scss('core/style.scss') }}"> <link rel="stylesheet" href="{{ scss('core/style.scss') }}">
{% block jquery_css %} <link rel="stylesheet" href="{{ scss('core/navbar.scss') }}">
{# 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>
<!-- Jquery declared here to be accessible in every django widgets --> {% block jquery_css %}
<script src="{{ static('core/js/jquery-3.6.2.min.js') }}"></script> {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
<!-- Put here to always have acces to those functions on django widgets --> <link rel="stylesheet" href="{{ static('core/js/ui/jquery-ui.min.css') }}">
<script src="{{ static('core/js/script.js') }}"></script> {% endblock %}
{% block additional_css %}{% endblock %}
{% block additional_js %}{% 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>
<!-- Jquery declared here to be accessible in every django widgets -->
<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 %} {% endblock %}
</head> </head>
@ -33,129 +37,137 @@
{% csrf_token %} {% csrf_token %}
<!-- BEGIN HEADER --> <!-- BEGIN HEADER -->
{% block header %} {% block header %}
{% if not popup %} {% if not popup %}
<header> <header class="header">
<div id="header_language_chooser"> <div class="header-logo">
{% for language in LANGUAGES %} <a class="header-logo-picture" href="{{ url('core:index') }}" style="background-image: url('{{ static('core/img/logo_no_text.png') }}')">
<form action="{{ url('set_language') }}" method="post">{% csrf_token %} &nbsp;
<input name="next" value="{{ request.path }}" type="hidden" /> </a>
<input name="language" value="{{ language[0] }}" type="hidden" /> <div class="header-logo-text">
<input type="submit" value="{{ language[0]|upper }}" /> <span>Association des Étudiants</span>
</form> <span>de l'Université de Technologie de Belfort-Montbéliard</span>
{% endfor %} </div>
</div> </div>
<div id="header_logo"> {% if not user.is_authenticated %}
<a href="{{ url('core:index') }}"> <div class="header-disconnected">
<img src="{{ static('core/img/logo.png') }}" alt="AE logo"> <a class="button" href="{{ url('core:login') }}">{% trans %}Login{% endtrans %}</a>
</a> <a class="button" href="{{ url('core:register') }}">{% trans %}Register{% endtrans %}</a>
</div> </div>
{% if not user.is_authenticated %} {% else %}
<div id="header_connect_links"> <div class="header-connected">
<form method="post" action="{{ url('core:login') }}"> <div class="left">
{% csrf_token %} <form class="search" action="{{ url('core:search') }}" method="GET" id="header_search">
<label for="id_username">{% trans %}Username{% endtrans %}</label> <input class="header-input" type="text" placeholder="{% trans %}Search{% endtrans %}" name="query" id="search" />
<input id="id_username" maxlength="254" name="username" type="text"> <input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
<label for="id_password">{% trans %}Password{% endtrans %}</label> </form>
<input type="password" name="password" id="id_password"> <ul class="bars">
<input type="submit" value="{% trans %}Login{% endtrans %}"> {% cache 0 "counters_activity" %}
</form> {% for bar in Counter.objects.annotate_has_barman(user).filter(type="BAR") %}
<a href="{{ url('core:register') }}"><button type="button">{% trans %}Register{% endtrans %}</button></a> <li>
</div> {# 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) }}">
{% else %}
<a href="{{ url('counter:activity', counter_id=bar.id) }}">
{% endif %}
{% 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 %}
<span>{{ bar }}</span>
</a>
</li>
{% endfor %}
{% endcache %}
</ul>
</div>
<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 %}
&nbsp;
{% 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>
</div>
<div class="reason">
{{ n }}
</div>
</a>
</li>
{% endfor %}
</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>
</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">
{% block info_boxes %}
{% set sith = get_sith() %}
{% if sith.alert_msg %}
<div id="alert_box">
{{ sith.alert_msg|markdown }}
</div>
{% endif %}
{% if sith.info_msg %}
<div id="info_box">
{{ sith.info_msg|markdown }}
</div>
{% endif %}
{% endblock %}
</div>
{% else %} {% else %}
<div id="header_bar"> <div id="popupheader">{{ user.get_display_name() }}</div>
<ul id="header_bars_infos">
{% cache 100 "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">
{% else %}
<a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0">
{% endif %}
{% 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 }}
</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>
</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">
{% for n in user.notifications.filter(viewed=False).order_by('-date') %}
<li>
<a href="{{ url("core:notification", notif_id=n.id) }}">
<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>
{{ n }}
</a>
</li>
{% endfor %}
<li>
<strong>
<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 %} {% endif %}
</header>
<div id="info_boxes">
{% block info_boxes %}
{% set sith = get_sith() %}
{% if sith.alert_msg %}
<div id="alert_box">
{{ sith.alert_msg|markdown }}
</div>
{% endif %}
{% if sith.info_msg %}
<div id="info_box">
{{ sith.info_msg|markdown }}
</div>
{% endif %}
{% endblock %}
</div>
{% else %}{# if not popup #}
<div id="popupheader">{{ user.get_display_name() }}</div>
{% endif %}
{% endblock %} {% endblock %}
<!-- END HEADER --> <!-- END HEADER -->