core: improve notification box

Signed-off-by: Skia <skia@libskia.so>
This commit is contained in:
Skia 2017-09-02 02:19:34 +02:00
parent 4ca3aebc77
commit 8b9c3fb5c6
4 changed files with 98 additions and 35 deletions

View File

@ -41,5 +41,5 @@ $( function() {
} ); } );
function display_notif() { function display_notif() {
$('#notif').toggle(); $('#header_notif').toggle().parent().toggleClass("white");
} }

View File

@ -134,10 +134,18 @@ header {
} }
#header_user_links { #header_user_links {
display: flex;
width: 120ch; width: 120ch;
flex: initial; flex: initial;
text-align: right; text-align: right;
margin: 1.2em 0em; margin: 0em;
div {
display: inline;
padding: 1.2em 0em;
&:first-child {
flex: auto;
}
}
a { a {
text-decoration: none; text-decoration: none;
margin: 0em 1em; margin: 0em 1em;
@ -146,6 +154,49 @@ header {
color: $secondary-color; color: $secondary-color;
} }
} }
.white {
background: $white-color;
}
#header_notif {
display: none;
position: absolute;
max-height: 20em;
width: 22em;
overflow: auto;
list-style-type: none;
box-shadow: black 1px 1px 5px;
background: white;
text-align: left;
font-size: 80%;
margin: 1.5em 0em 0em -14em;
.header_notif_date {
font-weight: bold;
}
.header_notif_time {
color: grey;
}
li {
padding: 0.2em;
&:hover {
background: #bcc;
}
}
li:last-child {
text-align: center;
a {
color: $primary-dark-color;
&:hover {
color: $primary-light-color;
}
}
}
a {
margin: 0em;
&:hover {
color: $primary-dark-color;
}
}
}
} }
} }
} }
@ -156,18 +207,6 @@ header {
padding: 0.3em 1%; padding: 0.3em 1%;
} }
#notif {
display: none;
position: absolute;
background: lightgrey;
text-align: center;
overflow: scroll;
max-height: 400px;
li:hover {
background: #bcc;
}
}
#info_boxes { #info_boxes {
display: flex; display: flex;
width: 90%; width: 90%;
@ -261,32 +300,32 @@ h1, h2, h3, h4, h5, h6 {
h1 { h1 {
font-size: 160%; font-size: 160%;
margin-left: 50px; margin-left: 0px;
} }
h2 { h2 {
font-size: 150%; font-size: 150%;
margin-left: 40px; margin-left: 10px;
} }
h3 { h3 {
font-size: 140%; font-size: 140%;
margin-left: 30px; margin-left: 20px;
} }
h4 { h4 {
font-size: 130%; font-size: 130%;
margin-left: 20px; margin-left: 30px;
} }
h5 { h5 {
font-size: 120%; font-size: 120%;
margin-left: 10px; margin-left: 40px;
} }
h6 { h6 {
font-size: 110%; font-size: 110%;
margin-left: 0px; margin-left: 50px;
} }
p, pre { p, pre {

View File

@ -72,20 +72,45 @@
<input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" /> <input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
</form> </form>
<div id="header_user_links"> <div id="header_user_links">
<a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a> <div>
<a href="#" onclick="display_notif()">&#x1f514; ({{ user.notifications.filter(viewed=False).count() }})</a> <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
<ul id="notif"> </div>
{% for n in user.notifications.filter(viewed=False).order_by('-id') %} <div>
<li><a href="{{ url("core:notification", notif_id=n.id) }}"> <a href="#" onclick="display_notif()">&#x1f514; ({{ user.notifications.filter(viewed=False).count() }})</a>
<span style="font-size: small; ">{{ n.date|localtime|date(DATE_FORMAT) }} {{ <ul id="header_notif">
n.date|localtime|time(DATETIME_FORMAT) }}</span><br> {% for n in user.notifications.filter(viewed=False).order_by('-id') %}
{{ n }}</a></li> <li>
{% endfor %} <a href="{{ url("core:notification", notif_id=n.id) }}">
<li><a href="{{ url('core:notification_list') }}">{% trans %}View more{% endtrans %}</a> <span class="header_notif_date">
<a href="{{ url('core:notification_list') }}?see_all">{% trans %}Mark all as read{% endtrans %}</a></li> {{ n.date|localtime|date(DATE_FORMAT) }}
</ul> </span>
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a> <span class="header_notif_time">
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a> {{ 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>
</div> </div>
{% endif %} {% endif %}

View File

@ -27,7 +27,6 @@
<h4>{% trans %}Counters{% endtrans %}</h4> <h4>{% trans %}Counters{% endtrans %}</h4>
<ul> <ul>
{% if user.is_in_group(settings.SITH_GROUP_COUNTER_ADMIN_ID) or user.is_root %} {% if user.is_in_group(settings.SITH_GROUP_COUNTER_ADMIN_ID) or user.is_root %}
<h5>{% trans %}General management{% endtrans %}</h5>
<li><a href="{{ url('counter:admin_list') }}">{% trans %}General counters management{% endtrans %}</a></li> <li><a href="{{ url('counter:admin_list') }}">{% trans %}General counters management{% endtrans %}</a></li>
<li><a href="{{ url('counter:product_list') }}">{% trans %}Products management{% endtrans %}</a></li> <li><a href="{{ url('counter:product_list') }}">{% trans %}Products management{% endtrans %}</a></li>
<li><a href="{{ url('counter:producttype_list') }}">{% trans %}Product types management{% endtrans %}</a></li> <li><a href="{{ url('counter:producttype_list') }}">{% trans %}Product types management{% endtrans %}</a></li>