mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-06-02 12:42:02 +00:00
Code Issues Projects Releases Wiki Activity

Adds css transitions to notification and unread statuses

Browse source
This commit is contained in:
Mouse Reeve 2021-03-23 17:52:58 -07:00
parent 701487c526
commit 8d5630e059
3 changed files with 25 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
bookwyrm/static/css/format.css
View file

@ -34,6 +34,29 @@ html {
.hidden {
display: none !important;
}
.hidden.transition-y, .hidden.transition-x {
display: block !important;
visibility: hidden !important;
height: 0;
width: 0;
margin: 0;
padding: 0;
}
.transition-y {
transition-property: height, margin-top, margin-bottom, padding-top, padding-bottom;
transition-duration: 0.5s;
transition-timing-function: ease;
}
.transition-x {
transition-property: width, margin-left, margin-right, padding-left, padding-right;
transition-duration: 0.5s;
transition-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
.transition-x, .transition-y {
transition-duration: 0.001ms !important;
}
}
/* --- STARS --- */
.rate-stars button.icon {

2
bookwyrm/templates/feed/feed.html
View file

@ -28,7 +28,7 @@
{# announcements and system messages #}
{% if not activities.number > 1 %}
<a href="{{ request.path }}" class="hidden notification is-primary is-block" data-poll-wrapper>
<a href="{{ request.path }}" class="transition-y hidden notification is-primary is-block" data-poll-wrapper>
{% blocktrans %}load <span data-poll="stream/{{ tab }}">0</span> unread status(es){% endblocktrans %}
</a>

2
bookwyrm/templates/layout.html
View file

@ -139,7 +139,7 @@
<span class="is-sr-only">{% trans "Notifications" %}</span>
</span>
</span>
<span class="{% if not request.user|notification_count %}hidden {% endif %}tag is-danger is-medium" data-poll-wrapper>
<span class="{% if not request.user|notification_count %}hidden {% endif %}tag is-danger is-medium transition-x" data-poll-wrapper>
<span data-poll="notifications">{{ request.user | notification_count }}</span>
</span>
</a>