Merge pull request #735 from maykinmedia/feature/1662-customizable-sp…

…inner 💄 [#1649] Improving spinner styling
maykinmedia · Aug 22, 2023 · 0f356b4 · 0f356b4
2 parents e321c89 + f08e947
commit 0f356b4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/open_inwoner/scss/components/Spinner/Spinner.scss b/src/open_inwoner/scss/components/Spinner/Spinner.scss
@@ -8,6 +8,32 @@
 }
 
 .loader-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 65vh;
+  margin: 0;
+  text-align: center;
+
+  @media (min-width: 500px) {
+    justify-content: flex-start;
+    align-items: flex-start;
+    height: 70vh;
+    margin: 100px 0 0 200px;
+  }
+
+  .spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--font-color-body);
+    font-size: var(--font-size-body);
+
+    &__content {
+      margin-top: var(--spacing-large);
+    }
+  }
+
   &--hide {
     display: none;
   }
@@ -24,7 +50,7 @@
   .spinner-icon {
     display: inline-block;
     font-size: 50px;
-    color: var(--color-primary);
+    color: var(--color-gray-dark);
     width: 50px;
     height: 50px;
   }

diff --git a/src/open_inwoner/templates/pages/cases/list_outer.html b/src/open_inwoner/templates/pages/cases/list_outer.html
@@ -7,13 +7,12 @@
 
 
 {% block content %}
-    <h1 class="h1" id="title">{% trans "Mijn aanvragen" %}</h1>
-
     <div class="cases" id="cases-content"></div>
-    
+
     <div class="loader-container" id="spinner-container">
         <div class="spinner" id="spinner-id" hx-get="{{ hxget }}" hx-trigger="load" hx-target="#cases-content">
-            {% icon icon="autorenew" extra_classes="spinner-icon rotate" %}
+            {% icon icon="rotate_right" extra_classes="spinner-icon rotate" %}
+            <div class="spinner__content">{% trans "Gegevens laden..." %}</div>
         </div>
     </div>
 {% endblock content %}
diff --git a/src/open_inwoner/templates/pages/cases/status_outer.html b/src/open_inwoner/templates/pages/cases/status_outer.html
@@ -15,11 +15,11 @@
 
 {% block content %}
     <div class="cases__detail" id="cases-detail-content"><div>
-    
+
     <div class="loader-container" id="spinner-container">
-        <h1 class="h1" id="title">{% trans "Status" %}</h1>
         <div class="spinner" id="spinner-id" hx-get="{{ hxget }}" hx-trigger="load" hx-target="#cases-detail-content">
-            {% icon icon="autorenew" extra_classes="spinner-icon rotate" %}
+            {% icon icon="rotate_right" extra_classes="spinner-icon rotate" %}
+            <div class="spinner__content">{% trans "Gegevens laden..." %}</div>
         </div>
     </div>
 {% endblock content %}