Merge pull request #1114 from maykinmedia/feature/2241-mijn-afspraken…

…-list-design 💄 [#2241] Make appointment list conform to design
maykinmedia · Mar 29, 2024 · 35b67e2 · 35b67e2
2 parents 4341c59 + 97a9c86
commit 35b67e2
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 44 deletions.
diff --git a/src/open_inwoner/accounts/tests/test_profile_views.py b/src/open_inwoner/accounts/tests/test_profile_views.py
@@ -1173,7 +1173,9 @@ def setUp(self):
                 name="Hoofdkantoor",
                 timeZone="Europe/Amsterdam",
                 addressCity="Amsterdam",
+                addressLine1="Hoofdkantoor",
                 addressLine2="Dam 1",
+                addressZip="1234 ZZ",
             ),
         )
         self.appointment_idcard = AppointmentFactory.build(
@@ -1184,7 +1186,9 @@ def setUp(self):
                 name="Hoofdkantoor",
                 timeZone="America/New_York",
                 addressCity="New York",
+                addressLine1="Hoofdkantoor",
                 addressLine2="Wall Street 1",
+                addressZip="1111 AA",
             ),
         )
 
@@ -1252,13 +1256,11 @@ def test_render_list_if_appointments_are_found(self, m):
         passport_appointment = PQ(cards[0]).find("ul").children()
 
         self.assertEqual(passport_appointment[0].text, "Aanvraag paspoort")
-        self.assertEqual(
-            PQ(passport_appointment[1]).text(), "woensdag 1 januari 2020 13:00"
-        )
-        self.assertEqual(PQ(passport_appointment[2]).text(), "foo")
+        self.assertEqual(PQ(passport_appointment[1]).text(), "Datum\n1 januari 2020")
+        self.assertEqual(PQ(passport_appointment[2]).text(), "Tijd\n13:00 uur")
         self.assertEqual(PQ(passport_appointment[3]).text(), "Locatie\nHoofdkantoor")
-        self.assertEqual(PQ(passport_appointment[4]).text(), "Amsterdam")
-        self.assertEqual(PQ(passport_appointment[5]).text(), "Dam 1")
+        self.assertEqual(PQ(passport_appointment[4]).text(), "Dam 1")
+        self.assertEqual(PQ(passport_appointment[5]).text(), "1234 ZZ Amsterdam")
         self.assertEqual(
             PQ(cards[0]).find("a").attr("href"),
             f"{self.config.booking_base_url}{self.appointment_passport.publicId}",
@@ -1267,13 +1269,11 @@ def test_render_list_if_appointments_are_found(self, m):
         id_card_appointment = PQ(cards[1]).find("ul").children()
 
         self.assertEqual(id_card_appointment[0].text, "Aanvraag ID kaart")
-        self.assertEqual(
-            PQ(id_card_appointment[1]).text(), "vrijdag 6 maart 2020 11:30"
-        )
-        self.assertEqual(PQ(id_card_appointment[2]).text(), "bar")
+        self.assertEqual(PQ(id_card_appointment[1]).text(), "Datum\n6 maart 2020")
+        self.assertEqual(PQ(id_card_appointment[2]).text(), "Tijd\n11:30 uur")
         self.assertEqual(PQ(id_card_appointment[3]).text(), "Locatie\nHoofdkantoor")
-        self.assertEqual(PQ(id_card_appointment[4]).text(), "New York")
-        self.assertEqual(PQ(id_card_appointment[5]).text(), "Wall Street 1")
+        self.assertEqual(PQ(id_card_appointment[4]).text(), "Wall Street 1")
+        self.assertEqual(PQ(id_card_appointment[5]).text(), "1111 AA New York")
         self.assertEqual(
             PQ(cards[1]).find("a").attr("href"),
             f"{self.config.booking_base_url}{self.appointment_idcard.publicId}",

diff --git a/src/open_inwoner/components/templates/components/List/ListItem.html b/src/open_inwoner/components/templates/components/List/ListItem.html
@@ -1,5 +1,5 @@
 {% load link_tags %}
-<li class="list-item{% if active %} list-item--active{% endif %}{% if compact %} list-item--compact{% endif %}">
+<li class="list-item{% if active %} list-item--active{% endif %}{% if compact %} list-item--compact{% endif %}{% if extra_compact %} list-item--extra-compact{% endif %}">
     {% if href %}<a class="link" href="{{ href }}">{% endif %}
     {% if caption %}<p class="p list-item__caption">{{ caption }}</p>{% endif %}
     {% if strong %}

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
@@ -16,6 +16,16 @@
     padding: 0.5em 0;
   }
 
+  &--extra-compact {
+    border-top: none;
+    border-bottom: none;
+    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
@@ -1,27 +1,30 @@
 {% extends 'master.html' %}
-{% load i18n tz form_tags anchor_menu_tags list_tags icon_tags grid_tags utils %}
+{% load i18n tz list_tags icon_tags grid_tags utils %}
 
 {% block content %}
 
-<h1 class="utrecht-heading-1" id="title">{% trans "Mijn afspraken" %}</h2>
+<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 %}
                 <div class="card card--compact card--stretch appointment-info">
                     <div class="card__body">
                         {% render_list %}
+                            {% with branch=appointment.branch %}
                             <h2 class="card__heading-2">{{ appointment.title }}</h2>
-                            {% timezone appointment.branch.timeZone %}
-                                {% list_item text=appointment.start|date:"l j F Y H:i" compact=True strong=False %}
+                            {% timezone branch.timeZone %}
+                                {% list_item text=appointment.start|date:"j F Y" caption=_("Datum") compact=True strong=False %}
+                                {% list_item text=appointment.start|date:"H:i"|add:" "|add:_("uur") caption=_("Tijd") compact=True strong=False %}
                             {% endtimezone %}
-                            {% list_item text=appointment.notes compact=True strong=False %}
-                            {% list_item text=appointment.branch.name caption=_("Locatie") compact=True strong=False %}
-                            {% list_item text=appointment.branch.addressCity compact=True strong=False %}
-                            {% list_item text=appointment.branch.addressLine2 compact=True strong=False %}
+                            {% list_item text=branch.addressLine1 caption=_("Locatie") extra_compact=True strong=False %}
+                            {% list_item text=branch.addressLine2 extra_compact=True strong=False %}
+                            {% list_item text=branch.addressZip|add:" "|add:branch.addressCity extra_compact=True strong=False %}
+                            {% endwith %}
                         {% endrender_list %}
 
                         <a href="{{ appointment.url }}" class="link link--icon link--secondary"
@@ -34,7 +37,7 @@ <h2 class="card__heading-2">{{ appointment.title }}</h2>
             {% endrender_column %}
         {% endfor %}
     {% endrender_grid %}
-    </section>
+    </div>
 {% else %}
     <p class="tabled__key">{% trans "Geen afspraken beschikbaar" %}</p>
 {% endif %}