[#1794] Redesigned dashboard header, updated grid, removed anchormenu…

… in cases
maykinmedia · Oct 24, 2023 · d60e7df · d60e7df
1 parent 3dfa94a
commit d60e7df
Show file tree

Hide file tree

Showing 13 changed files with 106 additions and 72 deletions.
diff --git a/src/open_inwoner/cms/cases/tests/test_htmx.py b/src/open_inwoner/cms/cases/tests/test_htmx.py
@@ -390,15 +390,6 @@ def test_cases(self, m):
         # check case is visible
         expect(page.get_by_text(self.zaak["identificatie"])).to_be_visible()
 
-        # out-of-band anchor menu
-        menu_items = page.get_by_role(
-            "complementary", name=_("Secundaire paginanavigatie")
-        ).get_by_role("listitem")
-
-        expect(menu_items.get_by_role("link", name=_("Gegevens"))).to_be_visible()
-        expect(menu_items.get_by_role("link", name=_("Status"))).to_be_visible()
-        expect(menu_items.get_by_role("link", name=_("Documenten"))).to_be_visible()
-
         # check documents show
         documents = page.locator(".file-list").get_by_role("listitem")
 

diff --git a/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html b/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html
@@ -4,9 +4,7 @@
     <ul class="dashboard__list">
         {% for metric in config.metrics %}
             <li class="dashboard__list-item">
-                {% icon metric.icon outlined=True %}
-                <h4 class="h4">{{ metric.label }}</h4>
-                <p class="p p--compact">{{ metric.value|default:'-' }}</p>
+                <p class="p p--compact"><span class="dashboard__item-label">{{ metric.label }}</span> {{ metric.value|default:'-' }}</p>
             </li>
         {% endfor %}
     </ul>

diff --git a/src/open_inwoner/components/templatetags/dashboard_tags.py b/src/open_inwoner/components/templatetags/dashboard_tags.py
@@ -9,7 +9,6 @@
 
 
 class Metric(TypedDict):
-    icon: str
     label: str
     value: Optional[str]
 
@@ -27,32 +26,24 @@ def case_dashboard(case: dict, **kwargs) -> dict:
         {% case_dashboard case %}
 
     Variables:
-        + case: dict | The case to be able to build the dashboard, fetching the documents and statusses of the case.
+        + case: dict | The case to be able to build the dashboard, fetching the documents and statuses of the case.
 
     Extra context:
         + config: DashboardConfig | The configuration of the dashboard.
     """
     config: DashboardConfig = {
         "metrics": [
             {
-                "icon": "inventory_2",
-                "label": _("Aanvraag"),
+                "label": _("Zaaknummer:"),
                 "value": case.get("identification"),
             },
             {
-                "icon": "calendar_today",
-                "label": _("Datum"),
+                "label": _("Aanvraag ingediend op:"),
                 "value": case.get("start_date"),
             },
             {
-                "icon": "task_alt",
-                "label": _("Status"),
-                "value": case.get("current_status"),
-            },
-            {
-                "icon": "description",
-                "label": _("Documenten"),
-                "value": len(case.get("documents")),
+                "label": _("Verwachte uitslag:"),
+                "value": case.get("end_date_legal"),
             },
         ]
     }
@@ -80,18 +71,15 @@ def contactmoment_dashboard(kcm: KCMDict, **kwargs) -> dict:
     config: DashboardConfig = {
         "metrics": [
             {
-                "icon": "calendar_today",
-                "label": _("Ontvangstdatum"),
+                "label": _("Ontvangstdatum: "),
                 "value": kcm.get("registered_date"),
             },
             {
-                "icon": "inventory_2",
-                "label": _("Contactwijze"),
+                "label": _("Contactwijze: "),
                 "value": kcm.get("channel"),
             },
             {
-                "icon": "task_alt",
-                "label": _("Status"),
+                "label": _("Status: "),
                 "value": kcm.get("status"),
             },
         ]

diff --git a/src/open_inwoner/openzaak/tests/test_case_detail.py b/src/open_inwoner/openzaak/tests/test_case_detail.py
@@ -405,8 +405,6 @@ def test_page_displays_expected_data(self, m):
         self.assertContains(response, "Coffee zaaktype")
         self.assertContains(response, "Finish")
         self.assertContains(response, "uploaded_document_title")
-        self.assertContains(response, "Foo Bar van der Bazz")
-        self.assertContains(response, "resultaat toelichting")
 
     def test_page_reformats_zaak_identificatie(self, m):
         self._setUpMocks(m)

diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss
@@ -1,6 +1,20 @@
 .cases {
   margin-top: var(--spacing-giant);
 
+  &__grid .grid {
+    grid-row-gap: var(--spacing-medium);
+    grid-column-gap: var(--spacing-extra-large);
+    @media (max-width: 900px) {
+      grid-template-columns: 1fr;
+    }
+
+    .column--start-4 {
+      @media (max-width: 900px) {
+        grid-column-start: 1;
+      }
+    }
+  }
+
   /// cards on cases page
   .card {
     .cases__link {

diff --git a/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss b/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss
@@ -8,3 +8,28 @@
     }
   }
 }
+
+.contactmoment {
+  &__details {
+    // Set table width for word-break
+    table {
+      margin-top: 0;
+      overflow-x: auto;
+      table-layout: fixed;
+      width: 100%;
+      @media (min-width: 767px) {
+        width: var(--mobile-ms-width);
+      }
+    }
+    table th {
+      width: 100px;
+      white-space: nowrap;
+    }
+    table td {
+      width: 300px;
+      overflow: hidden;
+      word-break: break-word;
+      white-space: normal;
+    }
+  }
+}
diff --git a/src/open_inwoner/scss/components/Container/Container.scss b/src/open_inwoner/scss/components/Container/Container.scss
@@ -14,7 +14,10 @@
   }
 
   @media (min-width: 768px) {
-    $hm: max(calc((100vw - var(--container-width)) / 2), var(--spacing-large));
+    $hm: max(
+      calc(((100vw - var(--container-width)) / 2) - 7px),
+      var(--spacing-large)
+    );
     margin: var(--spacing-extra-large) $hm calc(var(--row-height) * 2);
 
     &--no-margin {

diff --git a/src/open_inwoner/scss/components/Dashboard/Dashboard.scss b/src/open_inwoner/scss/components/Dashboard/Dashboard.scss
@@ -1,28 +1,57 @@
 .dashboard {
+  margin-bottom: var(--spacing-mega);
+
   &__list {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--spacing-large) var(--spacing-medium);
-    justify-content: space-between;
+    display: block;
     list-style: none;
     margin: 0;
     padding: 0;
+    border-bottom: var(--border-width-thin) solid var(--color-gray);
 
-    @media (min-width: 768px) {
+    @media (min-width: 900px) {
       display: flex;
-      gap: var(--spacing-medium);
+      gap: 0;
+      border-top: var(--border-width-thin) solid var(--color-gray);
     }
   }
 
   &__list-item {
+    padding: var(--spacing-large) 0;
+    color: var(--color-gray-dark);
     white-space: nowrap;
-    text-align: center;
+    border-top: var(--border-width-thin) solid var(--color-gray);
+    @media (min-width: 900px) {
+      border-top: none;
+      margin-left: var(--spacing-extra-large);
+    }
 
-    @media (min-width: 768px) {
+    &:first-child {
+      margin-left: 0;
+    }
+
+    p::after {
+      color: var(--color-gray);
+      @media (min-width: 900px) {
+        content: '|';
+        margin-left: var(--spacing-extra-large);
+      }
+    }
+
+    &:last-child p::after {
+      @media (min-width: 900px) {
+        content: none;
+      }
+    }
+
+    @media (min-width: 900px) {
       text-align: start;
     }
   }
 
+  &__item-label {
+    color: var(--color-gray-90);
+  }
+
   .h4 {
     @media (min-width: 768px) {
       margin-top: var(--spacing-large);

diff --git a/src/open_inwoner/scss/components/Grid/Grid.scss b/src/open_inwoner/scss/components/Grid/Grid.scss
@@ -18,7 +18,8 @@
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: 1fr;
-    gap: var(--gutter-width);
+    grid-row-gap: var(--spacing-extra-large);
+    grid-column-gap: var(--gutter-width);
   }
 
   /// Layout.

diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -25,6 +25,7 @@
   --color-black: #000;
   --color-blue: #1261a3;
   --color-gray: #d2d2d2;
+  --color-gray-90: #676767;
   --color-gray-dark: #4b4b4b;
   --color-gray-lighter: #7a7a7a;
   --color-gray-light: #d2d2d2;
@@ -244,6 +245,7 @@
   --spacing-large: 16px;
   --spacing-extra-large: 24px;
   --spacing-giant: 32px;
+  --spacing-mega: 80px;
 
   /// Common widths
   --form-width: 500px;

diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html
@@ -1,31 +1,22 @@
 {% load i18n anchor_menu_tags card_tags dashboard_tags file_tags grid_tags table_tags solo_tags button_tags icon_tags notification_tags %}
 
-{# Anchor menu-mobile #}
-<div id="cases-status-anchors-oob-mobile" hx-swap-oob="true">
-    {% anchor_menu anchors=anchors desktop=False %}
-</div>
-
 {# Messages #}
 <div class="container container--no-margin" id="cases-status-messages-oob" hx-swap-oob="true">
     {% notifications messages %}
 </div>
 
-{# Anchor menu-desktop #}
-<div id="cases-status-anchors-oob" hx-swap-oob="true">
-    {% anchor_menu anchors desktop=True %}
-</div>
-
 {% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %}
 
+<div class="cases__grid">
 {% if case %}
     {% render_grid %}
-        {% render_column span=9 %}
-
+        {% render_column span=12 %}
             {# Title/dashboard. #}
             <h1 class="h1" id="title">{{ case.description }}</h1>
             {% case_dashboard case %}
-            {% case_table case %}
+        {% endrender_column %}
 
+        {% render_column start=4 span=6 %}
             {#  Status history. #}
             {% if case.statuses %}
                 <h2 class="h2" id="statuses">{% trans 'Status' %}</h2>
@@ -93,3 +84,4 @@ <h2 class="h2">{% trans "Document toevoegen" %}</h2>
 {% else %}
     <h2 class="h2">{% trans 'There is no available data at the moment.' %}</h2>
 {% endif %}
+</div>
diff --git a/src/open_inwoner/templates/pages/cases/status_outer.html b/src/open_inwoner/templates/pages/cases/status_outer.html
@@ -1,18 +1,10 @@
 {% extends 'master.html' %}
 {% load i18n icon_tags %}
 
-{% block mobile_anchors %}
-    <div id="cases-status-anchors-oob-mobile"></div>
-{% endblock mobile_anchors %}
-
 {% block notifications %}
     <div id="cases-status-messages-oob"></div>
 {% endblock notifications %}
 
-{% block sidebar_content %}
-    <div id="cases-status-anchors-oob"></div>
-{% endblock sidebar_content %}
-
 {% block content %}
     <div class="cases__detail" id="cases-detail-content"><div>
 

diff --git a/src/open_inwoner/templates/pages/contactmoment/detail.html b/src/open_inwoner/templates/pages/contactmoment/detail.html
@@ -1,18 +1,19 @@
 {% extends 'master.html' %}
 {% load i18n anchor_menu_tags card_tags dashboard_tags file_tags grid_tags table_tags solo_tags form_tags button_tags %}
 
-{% block sidebar_content %}
-    {% if contactmoment %}
-        {% anchor_menu anchors desktop=True %}
-    {% endif %}
-{% endblock sidebar_content %}
-
 {% block content %}
     {% if contactmoment %}
         {% render_grid %}
-            {% render_column span=9 %}
+            {% render_column span=12 %}
+                {# Contactmoment/dashboard. #}
+                <h1 class="h1" id="title">{{ page_title }}</h1>
                 {% contactmoment_dashboard contactmoment %}
+            {% endrender_column %}
+            {% render_column start=4 span=6 %}
+
+                <div class="contactmoment__details">
                 {% contactmoment_table contactmoment %}
+                </div>
             {% endrender_column %}
         {% endrender_grid %}
     {% else %}