[#1979] Changed date captions and design for caselist

maykinmedia · Jan 18, 2024 · 5d03d30 · 5d03d30
1 parent 443973e
commit 5d03d30
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 28 deletions.
diff --git a/src/open_inwoner/cms/cases/tests/test_htmx.py b/src/open_inwoner/cms/cases/tests/test_htmx.py
@@ -423,7 +423,7 @@ def test_cases(self, m):
         page.goto(self.live_reverse("cases:index"))
 
         # case title
-        case_title = page.get_by_role("link", name=self.zaaktype["omschrijving"])
+        case_title = page.get_by_text("Coffee zaaktype")
         expect(case_title).to_be_visible()
 
         # go to case-detail page

diff --git a/src/open_inwoner/components/templates/components/Card/RenderCard.html b/src/open_inwoner/components/templates/components/Card/RenderCard.html
@@ -10,7 +10,7 @@
         </span>
     {% endif %}
 
-    <div class="card__body{% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
+    <div class="card__body--compact {% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
         {% if title %}
             <p class="{% if compact %}h4{% else %}h3{% endif %}">
                 <span class="link link__text">{{ title }}</span>

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
@@ -4,6 +4,8 @@
   --card-size-border: var(--border-width-thin);
   --card-size-dog-ear: var(--gutter-width);
   --card-spacing: var(--spacing-large);
+  --card-spacing-vertical: var(--spacing-giant);
+  --card-spacing-horizontal: var(--spacing-extra-large);
 
   background-color: var(--card-color-background);
   border: var(--card-size-border) solid var(--card-color-border);
@@ -98,8 +100,26 @@
     object-fit: contain;
   }
 
+  &__caption {
+    color: var(--color-gray-dark-900);
+    margin: 0;
+  }
+
+  &__text--small {
+    font-size: var(--font-size-body-small);
+  }
+
+  &__text--dark {
+    color: var(--font-color-body);
+    padding-left: var(--spacing-medium);
+  }
+
   &__body {
-    padding: var(--card-spacing);
+    padding: var(--card-spacing-vertical) var(--card-spacing-horizontal);
+
+    &--compact {
+      padding: var(--card-spacing);
+    }
 
     &--tabled {
       display: flex;
@@ -223,6 +243,16 @@
     font-size: var(--font-size-heading-card);
   }
 
+  &__heading--h4,
+  &__heading--h4 .link {
+    color: var(--color-black);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-heading-card);
+    font-weight: var(--font-weight-heading-4);
+    line-height: var(--font-line-height-heading-4);
+    margin: 0;
+  }
+
   &--product {
     padding: 20px;
     align-items: end;
@@ -255,7 +285,7 @@
   span.button:last-child {
     bottom: 0;
     right: 0;
-    padding-bottom: var(--card-spacing);
+    padding-bottom: var(--card-spacing-vertical);
     position: absolute;
   }
 
@@ -283,7 +313,7 @@
 
   &--stretch .list + .link:first-of-type:last-of-type,
   &--stretch .profile-card__button {
-    bottom: var(--card-spacing);
+    bottom: var(--card-spacing-vertical);
     position: static;
 
     @media (min-width: 768px) {

diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss
@@ -39,7 +39,7 @@
         @extend .button--disabled;
         background-color: var(--color-gray);
         border-color: var(--color-gray);
-        color: var(--color-gray-90);
+        color: var(--color-gray-dark-900);
         cursor: default;
         font-weight: bold;
         justify-content: center;
@@ -52,7 +52,7 @@
       @extend .button--disabled;
       background-color: var(--color-gray);
       border-color: var(--color-gray);
-      color: var(--color-gray-90);
+      color: var(--color-gray-dark-900);
       cursor: default;
       font-weight: bold;
       justify-content: center;

diff --git a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss
@@ -49,7 +49,7 @@
   }
 
   &__item-label {
-    color: var(--color-gray-90);
+    color: var(--color-gray-dark-900);
   }
 
   .h4 {

diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -88,7 +88,7 @@
       border-color: var(--color-red-notification);
 
       .p {
-        color: var(--color-gray-90);
+        color: var(--color-gray-dark-900);
       }
 
       [class*='icon'] {

diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss
@@ -21,7 +21,8 @@
   }
 
   & &__caption {
-    color: var(--color-gray-lighter);
+    color: var(--color-gray-dark-900);
+    font-size: var(--font-size-body-small);
     margin-top: 0;
   }
 

diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss
@@ -51,7 +51,7 @@
     }
 
     .link-future {
-      color: var(--color-gray-90);
+      color: var(--color-gray-dark-900);
     }
 
     .p-date {

diff --git a/src/open_inwoner/scss/components/Table/Tabled.scss b/src/open_inwoner/scss/components/Table/Tabled.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
 
   &__key {
-    color: var(--color-gray-90);
+    color: var(--color-gray-dark-900);
   }
   &__value {
     color: var(--color-gray-dark);

diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -25,8 +25,8 @@
   --color-black: #000;
   --color-blue: #1261a3;
   --color-gray: #d2d2d2;
-  --color-gray-90: #676767;
-  --color-gray-dark: #4b4b4b;
+  --color-gray-dark: rgba(75, 75, 75, 1);
+  --color-gray-dark-900: rgba(75, 75, 75, 0.9);
   --color-gray-lighter: #7a7a7a;
   --color-gray-light: #d2d2d2;
   --color-gray-lightest: #f3f3f3;

diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html
@@ -16,38 +16,41 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
             <div class="card__body">
                 <!-- submission cases -->
                 {% if case.case_type == "OpenSubmission" %}
-                    <a href="{{ case.vervolg_link }}"  class="cases__link">
-                    <p class="h4"><span class="link link__text">{{ case.naam }}</span></p>
+                    <a href="{{ case.vervolg_link }}" class="cases__link" aria-label="{% trans "Bekijk aanvraag" %}" title="{% trans "Bekijk aanvraag" %}">
+                    <h4 class="card__heading--h4"><span class="link link__text">{{ case.naam }}</span></h4>
                     {% render_list %}
                     <span class="case-list">
+                        <li class="list-item list-item--compact">
+                            {% with end_date=case.eind_datum_geldigheid|default:"Geen" %}
+                            <p class="card__caption card__text--small"><span>{% trans "Aanvraag verloopt op:" %}</span><span class="card__text--dark">{{ end_date|date }}</span></p>
+                            {% endwith %}
+                        </li>
                         {% list_item text="Openstaande aanvraag" caption=_("Status") compact=True strong=False %}
-                        {% list_item text=case.datum_laatste_wijziging caption=_("Laatste wijziging") compact=True strong=False %}
-                        {% with end_date=case.eind_datum_geldigheid|default:"Geen" %}
-                            {% list_item text=end_date caption=_("Verloopt op") compact=True strong=False%}
-                        {% endwith %}
                     </span>
                     {% endrender_list %}
-                    <span class="link link--icon link--secondary" aria-label="{% trans "Bekijk aanvraag" %}" title="{% trans "Bekijk aanvraag" %}">
-                        <span class="link__text">{% trans "Bekijk aanvraag" %}</span>
+                    <span class="link link--icon link--secondary">
+                        <span class="link__text">{% trans "Voltooi aanvraag" %}</span>
                         {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
                     </span>
                     </a>
                 <!-- other cases -->
                 {% else %}
-                    <a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link">
-                    <p class="h4"><span class="link link__text">{{ case.description }}</span></p>
+                    <a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link" aria-label="{% trans "Bekijk aanvraag" %}" title="{% trans "Bekijk aanvraag" %}">
+                    <h4 class="card__heading--h4"><span class="link link__text">{{ case.description }}</span></h4>
                     {% render_list %}
                         <span class="case-list">
+                        <li class="list-item list-item--compact">
+                            <p class="card__caption card__text--small"><span>{% trans "Aanvraag ingediend op:" %}</span><span class="card__text--dark">{{ case.start_date }}</span></p>
+                        </li>
                         {% if case.current_status %}
                             {% list_item case.current_status caption=_("Status") compact=True strong=False %}
                         {% else %}
                             {% list_item "No status" caption=_("Status") compact=True strong=False %}
                         {% endif%}
-                        {% list_item case.start_date caption=_("Ontvangstdatum") compact=True strong=False %}
                         {% list_item case.identification caption=_("Zaaknummer") compact=True strong=False %}
                         </span>
                     {% endrender_list %}
-                    <span class="link link--icon link--secondary" aria-label="{% trans "Bekijk aanvraag" %}" title="{% trans "Bekijk aanvraag" %}">
+                    <span class="link link--icon link--secondary">
                         <span class="link__text">{% trans "Bekijk aanvraag" %}</span>
                         {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
                     </span>

diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html
@@ -2,7 +2,7 @@
 {% load i18n l10n link_tags file_tags card_tags grid_tags list_tags button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %}
 
 {% block sidebar_content %}
-    {% anchor_menu anchors desktop=True %}
+    {% anchor_menu anchors=anchors desktop=True %}
 {% endblock sidebar_content %}
 
 {% block content %}
@@ -87,7 +87,7 @@ <h2 class="h2 title" id="personal-overview">{% trans "Persoonlijke gegevens" %}
     {# Notifications #}
     <section class="tabled tabled--flexible profile-section profile-section--bordered" id="profile-notifications">
         <div class="tabled__section">
-            <h2 class="h2 title" id="overview">{% trans "Voorkeuren voor meldingen" %}
+            <h2 class="h2 title" id="notifications">{% trans "Voorkeuren voor meldingen" %}
                 <div class="tabled__item--force-right tabled__item--mobile-big">
                     {% button href="profile:notifications" text=_("Bewerk") icon="edit" transparent=True icon_outlined=True %}
                 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ @@
       }
       &__item-label {
-        color: var(--color-gray-90);
+        color: var(--color-gray-dark-900);
       }
       .h4 {
@@ Expand Down @@