👌 [#2241] PR feedback

maykinmedia · Mar 28, 2024 · 97a9c86 · 97a9c86
1 parent 36aebc8
commit 97a9c86
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 22 deletions.
diff --git a/src/open_inwoner/scss/components/Card/CardGrid.scss b/src/open_inwoner/scss/components/Card/CardGrid.scss
@@ -0,0 +1,22 @@
+.card__grid {
+  & .grid {
+    grid-row-gap: var(--spacing-medium);
+    grid-column-gap: var(--spacing-extra-large);
+
+    // Tablets
+    @media (min-width: 500px) and (max-width: 767px) {
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      .column {
+        flex-basis: calc(50% - var(--spacing-large));
+      }
+    }
+
+    .column--start-4 {
+      @media (min-width: 768px) and (max-width: 900px) {
+        grid-column-start: 1;
+      }
+    }
+  }
+}
diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss
@@ -1,27 +1,6 @@
 .cases {
   margin-top: var(--spacing-giant);
 
-  &__grid .grid {
-    grid-row-gap: var(--spacing-medium);
-    grid-column-gap: var(--spacing-extra-large);
-
-    // Tablets
-    @media (min-width: 500px) and (max-width: 767px) {
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      .column {
-        flex-basis: calc(50% - var(--spacing-large));
-      }
-    }
-
-    .column--start-4 {
-      @media (min-width: 768px) and (max-width: 900px) {
-        grid-column-start: 1;
-      }
-    }
-  }
-
   /// cards on cases list
   .card {
     .cases__link {

diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss
@@ -22,6 +22,10 @@
     padding: 0;
   }
 
+  & .list-item__caption {
+    line-height: var(--font-line-height-body-small);
+  }
+
   &--compact:first-child {
     padding-top: 0;
   }

diff --git a/src/open_inwoner/scss/components/_index.scss b/src/open_inwoner/scss/components/_index.scss
@@ -4,6 +4,7 @@
 @import './Button/Button.scss';
 @import './Button/ButtonRow.scss';
 @import './Card/Card.scss';
+@import './Card/CardGrid.scss';
 @import './Card/LocationCardList.scss';
 @import './CardContainer/CardContainer.scss';
 @import './Cases/Cases.scss';

diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -3,7 +3,7 @@
 <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }})</h1>
 <p class="cases__title_text">{{ title_text }}</p>
 
-<div class="cases__grid">
+<div class="card__grid">
 {% render_grid %}
     {% if not cases %}
         <b>{% trans "U heeft op dit moment nog geen lopende aanvragen." %}</b>

diff --git a/src/open_inwoner/templates/pages/profile/appointments.html b/src/open_inwoner/templates/pages/profile/appointments.html
@@ -8,6 +8,7 @@ <h1 class="utrecht-heading-1" id="title">{% trans "Mijn balie-afspraken" %}</h1>
 {% if appointments %}
     <p class="tabled__key">{% trans "Een overzicht van uw afspraken" %}</p>
 
+    <div class="card__grid">
     {% render_grid %}
         {% for appointment in appointments %}
             {% render_column start=forloop.counter_0|multiply:4 span=4 %}
@@ -36,6 +37,7 @@ <h2 class="card__heading-2">{{ appointment.title }}</h2>
             {% endrender_column %}
         {% endfor %}
     {% endrender_grid %}
+    </div>
 {% else %}
     <p class="tabled__key">{% trans "Geen afspraken beschikbaar" %}</p>
 {% endif %}