mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-22 14:13:21 +00:00
core: great rework of the header bar
Signed-off-by: Skia <skia@libskia.so>
This commit is contained in:
Skia
parent
22151ef3b3
commit
5c709a5416
@ -66,42 +66,87 @@ a {
|
||||
|
||||
/*--------------------------------HEADER-------------------------------*/
|
||||
|
||||
#logo {
|
||||
margin-left: 5%;
|
||||
display: inline-block;
|
||||
width: 185px;
|
||||
height: 100px;
|
||||
#header_language_chooser {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
width: 5%;
|
||||
text-align: center;
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
form {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 2%;
|
||||
background-color: $secondary-light-color;
|
||||
margin: 0 10px;
|
||||
padding: 0 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
ul {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
||||
#header_logo {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 1em;
|
||||
&:hover {
|
||||
color: $primary-dark-color;
|
||||
flex: none;
|
||||
background-size: 100% 100%;
|
||||
padding: 0.2em;
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
form {
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
width: 150px;
|
||||
|
||||
#header_connect_links {
|
||||
margin: 0.6em 0.6em 0em auto;
|
||||
form {
|
||||
display: inline;
|
||||
width: 100%;
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: button;
|
||||
}
|
||||
}
|
||||
|
||||
#header_bar {
|
||||
background-color: $secondary-light-color;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
width: 80%;
|
||||
|
||||
#header_bars_infos {
|
||||
width: 35ch;
|
||||
flex: initial;
|
||||
list-style-type: none;
|
||||
margin: 0.2em 0.2em;
|
||||
}
|
||||
|
||||
#header_search {
|
||||
display: inline-block;
|
||||
flex: auto;
|
||||
margin: 0.8em 0em;
|
||||
}
|
||||
|
||||
#header_user_links {
|
||||
width: 120ch;
|
||||
flex: initial;
|
||||
text-align: right;
|
||||
margin: 1.2em 0em;
|
||||
a {
|
||||
text-decoration: none;
|
||||
margin: 0em 1em;
|
||||
color: $black-color;
|
||||
&:hover {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,18 +156,6 @@ header {
|
||||
padding: 0.3em 1%;
|
||||
}
|
||||
|
||||
#language_chooser {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
input {
|
||||
margin: 2px;
|
||||
width: 3em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
#notif {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@ -135,41 +168,35 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
#alert_box p, #info_box p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
#info_boxes {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#alert_box, #info_box {
|
||||
font-size: smaller;
|
||||
display: inline-block;
|
||||
flex: auto;
|
||||
vertical-align: top;
|
||||
padding: 2px;
|
||||
margin: 0.2em 1.5%;
|
||||
min-width: 10%;
|
||||
max-width: 46%;
|
||||
min-height: 20px;
|
||||
}
|
||||
#info_box {
|
||||
border: solid 1px $primary-neutral-light-color;
|
||||
background: $white-color;
|
||||
}
|
||||
#alert_box {
|
||||
border: solid 1px grey;
|
||||
background: gold;
|
||||
}
|
||||
}
|
||||
|
||||
#alert_box {
|
||||
font-size: smaller;
|
||||
display: inline-block;
|
||||
border: solid 1px grey;
|
||||
vertical-align: top;
|
||||
padding: 2px;
|
||||
margin: 4px;
|
||||
margin-top: 60px;
|
||||
min-width: 10%;
|
||||
max-width: 30%;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
#info_box {
|
||||
font-size: smaller;
|
||||
display: inline-block;
|
||||
border: solid 1px $primary-neutral-light-color;
|
||||
vertical-align: top;
|
||||
padding: 2px;
|
||||
margin: 4px;
|
||||
margin-top: 60px;
|
||||
min-width: 10%;
|
||||
max-width: 30%;
|
||||
min-height: 20px;
|
||||
background: $white-color;
|
||||
}
|
||||
|
||||
#alert_box {
|
||||
background: gold;
|
||||
}
|
||||
|
||||
/*---------------------------------NAV---------------------------------*/
|
||||
|
||||
|
||||
@ -14,69 +14,11 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- BEGIN HEADER -->
|
||||
{% block header %}
|
||||
{% if not popup %}
|
||||
<div id="logo" style="background-image: url('{{ static('core/img/logo.png') }}');">
|
||||
<a style="display: inline-block; width: 100%; height: 100%;" href="{{ url('core:index') }}"></a>
|
||||
</div>
|
||||
{% 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 %}
|
||||
<header>
|
||||
{% if not user.is_authenticated() %}
|
||||
<a href="{{ url('core:login') }}">{% trans %}Login{% endtrans %}</a>
|
||||
<a href="{{ url('core:register') }}">{% trans %}Register{% endtrans %}</a>
|
||||
{% else %}
|
||||
<ul>
|
||||
{% for bar in Counter.objects.filter(type="BAR").all() %}
|
||||
<li>
|
||||
<a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
|
||||
{% if bar.is_inactive(): %}
|
||||
<span style="color: orange">?</span>
|
||||
{% elif bar.is_open(): %}
|
||||
<span style="color: green">✓</span>
|
||||
{% else %}
|
||||
<span style="color: red">✗</span>
|
||||
{% endif %}
|
||||
{{ bar }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
|
||||
<a href="#" onclick="display_notif()">🔔 ({{ user.notifications.filter(viewed=False).count() }})</a>
|
||||
<ul id="notif">
|
||||
{% for n in user.notifications.filter(viewed=False).order_by('-id') %}
|
||||
<li><a href="{{ url("core:notification", notif_id=n.id) }}">
|
||||
<span style="font-size: small; ">{{ n.date|localtime|date(DATE_FORMAT) }} {{
|
||||
n.date|localtime|time(DATETIME_FORMAT) }}</span><br>
|
||||
{{ n }}</a></li>
|
||||
{% endfor %}
|
||||
<li><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></li>
|
||||
</ul>
|
||||
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
|
||||
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
|
||||
<form action="{{ url('core:search') }}" method="GET">
|
||||
<input type="text" placeholder="{% trans %}Search{% endtrans %}" name="query" id="search" />
|
||||
<input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
|
||||
</form>
|
||||
{% endif %}
|
||||
</header>
|
||||
{% else %}
|
||||
<div id="popupheader">{{ user.get_display_name() }}</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
<div id="language_chooser">
|
||||
<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" />
|
||||
@ -86,6 +28,91 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<header>
|
||||
{% if not user.is_authenticated() %}
|
||||
<div id="header_logo" style="background-image: url('{{
|
||||
static('core/img/logo.png') }}'); width: 185px; height: 100px;">
|
||||
<a href="{{ url('core:index') }}"></a>
|
||||
</div>
|
||||
<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>
|
||||
{% else %}
|
||||
<div id="header_logo" style="background-image: url('{{
|
||||
static('core/img/logo.png') }}'); width: 92px; height: 50px;">
|
||||
<a href="{{ url('core:index') }}"></a>
|
||||
</div>
|
||||
<div id="header_bar">
|
||||
<ul id="header_bars_infos">
|
||||
{% for bar in Counter.objects.filter(type="BAR").all() %}
|
||||
<li>
|
||||
<a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
|
||||
{% if bar.is_inactive(): %}
|
||||
<span style="color: orange">?</span>
|
||||
{% elif bar.is_open(): %}
|
||||
<span style="color: green">✓</span>
|
||||
{% else %}
|
||||
<span style="color: red">✗</span>
|
||||
{% endif %}
|
||||
{{ bar }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<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">
|
||||
<a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
|
||||
<a href="#" onclick="display_notif()">🔔 ({{ user.notifications.filter(viewed=False).count() }})</a>
|
||||
<ul id="notif">
|
||||
{% for n in user.notifications.filter(viewed=False).order_by('-id') %}
|
||||
<li><a href="{{ url("core:notification", notif_id=n.id) }}">
|
||||
<span style="font-size: small; ">{{ n.date|localtime|date(DATE_FORMAT) }} {{
|
||||
n.date|localtime|time(DATETIME_FORMAT) }}</span><br>
|
||||
{{ n }}</a></li>
|
||||
{% endfor %}
|
||||
<li><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></li>
|
||||
</ul>
|
||||
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
|
||||
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</header>
|
||||
|
||||
<div id="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 %}
|
||||
</div>
|
||||
|
||||
{% else %}{# if not popup #}
|
||||
<div id="popupheader">{{ user.get_display_name() }}</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% endblock %}
|
||||
<!-- END HEADER -->
|
||||
|
||||
{% block nav %}
|
||||
{% if not popup %}
|
||||
<nav>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user