From 1358d463729870da06aaf280ed63122747fd0d4d Mon Sep 17 00:00:00 2001
From: Steven Bal <steven@maykinmedia.nl>
Date: Mon, 25 Mar 2024 11:20:47 +0100
Subject: [PATCH] :lipstick: [#2241] Make appointment list conform to design

task: https://taiga.maykinmedia.nl/project/open-inwoner/task/2241
---
 .../templates/components/List/ListItem.html      |  2 +-
 .../scss/components/List/_ListItem.scss          |  6 ++++++
 .../templates/pages/profile/appointments.html    | 16 +++++++++-------
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/open_inwoner/components/templates/components/List/ListItem.html b/src/open_inwoner/components/templates/components/List/ListItem.html
index 39e56aff8c..419a8dac67 100644
--- 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/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss
index ab7959d343..7ef3fe873d 100644
--- a/src/open_inwoner/scss/components/List/_ListItem.scss
+++ b/src/open_inwoner/scss/components/List/_ListItem.scss
@@ -16,6 +16,12 @@
     padding: 0.5em 0;
   }
 
+  &--extra-compact {
+    border-top: none;
+    border-bottom: none;
+    padding: 0;
+  }
+
   &--compact:first-child {
     padding-top: 0;
   }
diff --git a/src/open_inwoner/templates/pages/profile/appointments.html b/src/open_inwoner/templates/pages/profile/appointments.html
index 4660ef9142..8f92cf5a80 100644
--- a/src/open_inwoner/templates/pages/profile/appointments.html
+++ b/src/open_inwoner/templates/pages/profile/appointments.html
@@ -3,7 +3,7 @@
 
 {% block content %}
 
-<h1 class="utrecht-heading-1" id="title">{% trans "Mijn afspraken" %}</h2>
+<h1 class="utrecht-heading-1" id="title">{% trans "Mijn balie-afspraken" %}</h2>
 
 {% if appointments %}
     <p class="tabled__key">{% trans "Een overzicht van uw afspraken" %}</p>
@@ -14,14 +14,16 @@ <h1 class="utrecht-heading-1" id="title">{% trans "Mijn afspraken" %}</h2>
                 <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"