💄 [#2241] Make appointment list conform to design

task: https://taiga.maykinmedia.nl/project/open-inwoner/task/2241
maykinmedia · Mar 25, 2024 · 1358d46 · 1358d46
1 parent 1385366
commit 1358d46
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
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/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
@@ -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"