From 8d5630e059391e5ff976694a2cc374be8faaf82c Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Tue, 23 Mar 2021 17:52:58 -0700
Subject: [PATCH] Adds css transitions to notification and unread statuses

---
 bookwyrm/static/css/format.css    | 23 +++++++++++++++++++++++
 bookwyrm/templates/feed/feed.html |  2 +-
 bookwyrm/templates/layout.html    |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index c68eb40d2..6a1167b26 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -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 {
diff --git a/bookwyrm/templates/feed/feed.html b/bookwyrm/templates/feed/feed.html
index 379bf9272..bc35d3b90 100644
--- a/bookwyrm/templates/feed/feed.html
+++ b/bookwyrm/templates/feed/feed.html
@@ -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>
 
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index d08b18202..4f6573582 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -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>