klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-26 19:14:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

core: great rework of the header bar

Browse Source 
Signed-off-by: Skia <skia@libskia.so>
This commit is contained in:
Skia 2017-09-01 18:31:48 +02:00
parent 22151ef3b3
commit 5c709a5416
2 changed files with 190 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
core/static/core/style.scss
View File

@ -66,42 +66,87 @@ a {
/*--------------------------------HEADER-------------------------------*/ /*--------------------------------HEADER-------------------------------*/
#logo { #header_language_chooser {
margin-left: 5%; position: absolute;
display: inline-block; top: 1em;
width: 185px; width: 5%;
height: 100px; text-align: center;
input {
display: block;
width: 100%;
padding: 0px;
margin: 0px;
}
form {
display: block;
}
} }
header { header {
display: block; width: 90%;
position: absolute; margin: 0 auto;
top: 0px; display: flex;
right: 2%;
background-color: $secondary-light-color; #header_logo {
margin: 0 10px;
padding: 0 10px;
border-radius: 0 0 10px 10px;
ul {
display: inline-block; display: inline-block;
list-style-type: none; flex: none;
margin: 0px; background-size: 100% 100%;
padding-right: 3px; padding: 0.2em;
vertical-align: middle;
}
a { a {
display: inline-block; display: inline-block;
color: inherit; margin: 0px;
text-decoration: none; width: 100%;
padding: 1em; height: 100%;
&:hover {
color: $primary-dark-color;
} }
} }
#header_connect_links {
margin: 0.6em 0.6em 0em auto;
form { 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; display: inline-block;
padding: 1em; flex: auto;
width: 150px; 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%; padding: 0.3em 1%;
} }
#language_chooser {
position: absolute;
text-align: center;
left: 5px;
top: 5px;
input {
margin: 2px;
width: 3em;
height: 2em;
}
}
#notif { #notif {
display: none; display: none;
position: absolute; position: absolute;
@ -135,41 +168,35 @@ header {
} }
} }
#alert_box p, #info_box p { #info_boxes {
display: flex;
width: 90%;
margin: 0 auto;
p {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
#alert_box, #info_box {
#alert_box {
font-size: smaller; font-size: smaller;
display: inline-block; display: inline-block;
border: solid 1px grey; flex: auto;
vertical-align: top; vertical-align: top;
padding: 2px; padding: 2px;
margin: 4px; margin: 0.2em 1.5%;
margin-top: 60px;
min-width: 10%; min-width: 10%;
max-width: 30%; max-width: 46%;
min-height: 20px; min-height: 20px;
} }
#info_box { #info_box {
font-size: smaller;
display: inline-block;
border: solid 1px $primary-neutral-light-color; 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; background: $white-color;
} }
#alert_box { #alert_box {
border: solid 1px grey;
background: gold; background: gold;
} }
}
/*---------------------------------NAV---------------------------------*/ /*---------------------------------NAV---------------------------------*/

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

@ -14,28 +14,44 @@
</head> </head>
<body> <body>
<!-- BEGIN HEADER -->
{% block header %} {% block header %}
{% if not popup %} {% if not popup %}
<div id="logo" style="background-image: url('{{ static('core/img/logo.png') }}');"> <div id="header_language_chooser">
<a style="display: inline-block; width: 100%; height: 100%;" href="{{ url('core:index') }}"></a> {% 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>
{% 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> <header>
{% if not user.is_authenticated() %} {% if not user.is_authenticated() %}
<a href="{{ url('core:login') }}">{% trans %}Login{% endtrans %}</a> <div id="header_logo" style="background-image: url('{{
<a href="{{ url('core:register') }}">{% trans %}Register{% endtrans %}</a> 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 %} {% else %}
<ul> <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() %} {% for bar in Counter.objects.filter(type="BAR").all() %}
<li> <li>
<a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px"> <a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
@ -51,6 +67,11 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </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="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
<a href="#" onclick="display_notif()">&#x1f514; ({{ user.notifications.filter(viewed=False).count() }})</a> <a href="#" onclick="display_notif()">&#x1f514; ({{ user.notifications.filter(viewed=False).count() }})</a>
<ul id="notif"> <ul id="notif">
@ -65,26 +86,32 @@
</ul> </ul>
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a> <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a> <a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
<form action="{{ url('core:search') }}" method="GET"> </div>
<input type="text" placeholder="{% trans %}Search{% endtrans %}" name="query" id="search" /> </div>
<input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
</form>
{% endif %} {% endif %}
</header> </header>
{% else %}
<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> <div id="popupheader">{{ user.get_display_name() }}</div>
{% endif %} {% endif %}
{% endblock %}
<div id="language_chooser">
{% for language in LANGUAGES %} {% endblock %}
<form action="{{ url('set_language') }}" method="post">{% csrf_token %} <!-- END HEADER -->
<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>
{% block nav %} {% block nav %}
{% if not popup %} {% if not popup %}