From c311d1f3976ff628e9cc6c7d4168ab6d64b8dddc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Wed, 22 Nov 2017 15:15:53 +0100
Subject: [PATCH] details loading animation

---
 src/c3nav/site/static/site/css/c3nav.css | 37 ++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css
index 85e22a27..d59aca8b 100644
--- a/src/c3nav/site/static/site/css/c3nav.css
+++ b/src/c3nav/site/static/site/css/c3nav.css
@@ -141,21 +141,52 @@ section.details > * {
     flex-grow: 0;
 }
 section.details > .details-head {
-    padding: 11px 10px 9px;
+    padding: 11px 10px 8px;
 }
 .details-head > button {
     margin: 0;
+    transition: none;
 }
 #sidebar section.details > .details-body {
     border: 0;
-    padding-top: 0;
     overflow: auto;
     flex-grow: 1;
     flex-shrink: 1;
 }
 
+section.details {
+    /*noinspection CssUnknownTarget*/
+    background: url('../../img/loader.gif') no-repeat right 4px top 3px;
+}
+#sidebar section.details.loading > .details-head {
+    background-color: rgba(255, 255, 255, 0);
+}
+#sidebar section.details.loading > .details-head button {
+    pointer-events: none;
+    opacity: 0;
+}
+#sidebar section.details.loading > .details-body {
+    max-height: 0;
+    opacity: 0;
+}
+#sidebar section.details:not(.loading) > .details-head {
+    transition: background-color 50ms;
+    background-color: rgba(255, 255, 255, 1);
+}
+#sidebar section.details:not(.loading) > .details-head button {
+    transition: opacity 150ms;
+    pointer-events: auto;
+    opacity: 1;
+}
+#sidebar section.details:not(.loading) > div.details-body {
+    max-height: 100vh;
+    transition: max-height 150ms, opacity 50ms;
+    transition-timing-function: ease-in;
+    opacity: 1;
+}
+
 #location-details .details-body {
-    padding: 0 10px 5px;
+    padding: 0 10px;
 }
 #location-details dl {
     display: flex;