Notifications
This commit is contained in:
parent
0bea615b82
commit
767190e012
|
@ -1,9 +1,8 @@
|
||||||
/* --- ICONS --- */
|
/* --- ICONS --- */
|
||||||
.icon {
|
.icon {
|
||||||
color: black;
|
color: black;
|
||||||
text-decoration: none;
|
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
vertical-align: sub;
|
vertical-align: super;
|
||||||
}
|
}
|
||||||
.hidden-text {
|
.hidden-text {
|
||||||
height: 0;
|
height: 0;
|
||||||
|
@ -11,16 +10,16 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.icon .bubble {
|
.icon ~ .bubble {
|
||||||
background-color: #FF1654;
|
background-color: #FF1654;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 0.85rem;
|
font-size: 0.7rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
top: -0.65rem;
|
top: 0.8rem;
|
||||||
right: -0.5rem;
|
right: 0.3rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
}
|
}
|
||||||
|
@ -111,3 +110,23 @@ input.toggle-control:checked ~ .toggle-content {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- QUOTES --- */
|
||||||
|
.quote blockquote {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
.quote blockquote:before, .quote blockquote:after {
|
||||||
|
font-family: 'icomoon';
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.quote blockquote:before {
|
||||||
|
content: "\e904";
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.quote blockquote:after {
|
||||||
|
content: "\e903";
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
|
@ -9,9 +9,9 @@
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<div>
|
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||||
{% if prev %}
|
{% if prev %}
|
||||||
<p>
|
<p class="pagination-previous">
|
||||||
<a href="{{ prev }}">
|
<a href="{{ prev }}">
|
||||||
<span class="icon icon-arrow-left"></span>
|
<span class="icon icon-arrow-left"></span>
|
||||||
Previous
|
Previous
|
||||||
|
@ -20,13 +20,13 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if next %}
|
{% if next %}
|
||||||
<p class="next">
|
<p class="pagination-next">
|
||||||
<a href="{{ next }}">
|
<a href="{{ next }}">
|
||||||
Next
|
Next
|
||||||
<span class="icon icon-arrow-right"></span>
|
<span class="icon icon-arrow-right"></span>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -82,7 +82,9 @@
|
||||||
<span class="icon icon-bell">
|
<span class="icon icon-bell">
|
||||||
<span class="hidden-text">Notitications</span>
|
<span class="hidden-text">Notitications</span>
|
||||||
</span>
|
</span>
|
||||||
{% if request.user|notification_count %}<span class="count">{{ request.user | notification_count }}</span>{% endif %}
|
{% if request.user|notification_count %}
|
||||||
|
<span class="bubble">{{ request.user | notification_count }}</span>
|
||||||
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,20 +1,22 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'layout.html' %}
|
||||||
{% load humanize %}l
|
{% load humanize %}l
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="content-container">
|
<div class="block">
|
||||||
<h2>Notifications</h2>
|
<h2 class="title">Notifications</h2>
|
||||||
|
|
||||||
<form name="clear" action="/clear-notifications" method="POST">
|
<form name="clear" action="/clear-notifications" method="POST">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<button type="submit" class="secondary">Delete notifications</button>
|
<button class="button is-danger" type="submit" class="secondary">Delete notifications</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-container">
|
<div class="block">
|
||||||
{% for notification in notifications %}
|
{% for notification in notifications %}
|
||||||
<div class="notification{% if notification.id in unread %} unread{% endif %}">
|
<div class="notification level{% if notification.id in unread %} is-primary{% endif %}">
|
||||||
<small class="time-ago">{{ notification.created_date | naturaltime }}</small>
|
<div class="level-left">
|
||||||
|
<p>
|
||||||
{% if notification.related_user %}
|
{% if notification.related_user %}
|
||||||
|
{% include 'snippets/avatar.html' with user=notification.related_user %}
|
||||||
{% include 'snippets/username.html' with user=notification.related_user %}
|
{% include 'snippets/username.html' with user=notification.related_user %}
|
||||||
{% if notification.notification_type == 'FAVORITE' %}
|
{% if notification.notification_type == 'FAVORITE' %}
|
||||||
favorited your
|
favorited your
|
||||||
|
@ -41,6 +43,10 @@
|
||||||
your <a href="/import_status/{{ notification.related_import.id }}">import</a> completed.
|
your <a href="/import_status/{{ notification.related_import.id }}">import</a> completed.
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="level-right">{{ notification.created_date | naturaltime }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if not notifications %}
|
{% if not notifications %}
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if status.quote %}
|
{% if status.quote %}
|
||||||
<div class="quote">
|
<div class="quote block">
|
||||||
<blockquote>{{ status.quote }}</blockquote>
|
<blockquote>{{ status.quote }}</blockquote>
|
||||||
|
|
||||||
<p> — {% include 'snippets/book_titleby.html' with book=status.book %}</p>
|
<p> — {% include 'snippets/book_titleby.html' with book=status.book %}</p>
|
||||||
|
|
Loading…
Reference in New Issue