[#1793] Fixed case tablet grid

maykinmedia · Oct 27, 2023 · c59f354 · c59f354
1 parent a4d3612
commit c59f354
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss
@@ -4,12 +4,14 @@
   &__grid .grid {
     grid-row-gap: var(--spacing-medium);
     grid-column-gap: var(--spacing-extra-large);
-    @media (max-width: 900px) {
+
+    // Tablets
+    @media (min-width: 768px) and (max-width: 900px) {
       grid-template-columns: 1fr;
     }
 
     .column--start-4 {
-      @media (max-width: 900px) {
+      @media (min-width: 768px) and (max-width: 900px) {
         grid-column-start: 1;
       }
     }

diff --git a/src/open_inwoner/scss/components/Container/Container.scss b/src/open_inwoner/scss/components/Container/Container.scss
@@ -14,10 +14,9 @@
   }
 
   @media (min-width: 768px) {
-    $hm: max(
-      calc(((100vw - var(--container-width)) / 2) - 7px),
-      var(--spacing-large)
-    );
+    // $hm has a minimum of var(--spacing-large), and a maximum of $hlargest
+    $hlargest: calc(((100vw - var(--container-width)) / 2) - 7px);
+    $hm: max($hlargest, var(--spacing-large));
     margin: var(--spacing-extra-large) $hm calc(var(--row-height) * 2);
 
     &--no-margin {

diff --git a/src/open_inwoner/scss/components/Spinner/Spinner.scss b/src/open_inwoner/scss/components/Spinner/Spinner.scss
@@ -20,6 +20,11 @@
     align-items: flex-start;
     height: 70vh;
     margin: 100px 0 0 200px;
+
+    &.case__spinner-container {
+      justify-content: center;
+      margin: 100px 0 0 0;
+    }
   }
 
   .spinner {

diff --git a/src/open_inwoner/templates/pages/cases/status_outer.html b/src/open_inwoner/templates/pages/cases/status_outer.html
@@ -8,7 +8,7 @@
 {% block content %}
     <div class="cases__detail" id="cases-detail-content"><div>
 
-    <div class="loader-container" id="spinner-container">
+    <div class="case__spinner-container loader-container" id="spinner-container">
         <div class="spinner" id="spinner-id" hx-get="{{ hxget }}" hx-trigger="load" hx-target="#cases-detail-content">
             {% icon icon="rotate_right" extra_classes="spinner-icon rotate" %}
             <div class="spinner__content">{% trans "Gegevens laden..." %}</div>