[#1791] Starting design update of case detail

maykinmedia · Oct 23, 2023 · a913f0f · a913f0f
1 parent 1f96b51
commit a913f0f
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 57 deletions.
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,7 @@
 
 
 class Metric(TypedDict):
-    icon: str
+    # icon: str
     label: str
     value: Optional[str]
 
@@ -27,32 +27,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,17 +72,14 @@ def contactmoment_dashboard(kcm: KCMDict, **kwargs) -> dict:
     config: DashboardConfig = {
         "metrics": [
             {
-                "icon": "calendar_today",
                 "label": _("Ontvangstdatum"),
                 "value": kcm.get("registered_date"),
             },
             {
-                "icon": "inventory_2",
                 "label": _("Contactwijze"),
                 "value": kcm.get("channel"),
             },
             {
-                "icon": "task_alt",
                 "label": _("Status"),
                 "value": kcm.get("status"),
             },

diff --git a/src/open_inwoner/components/templatetags/table_tags.py b/src/open_inwoner/components/templatetags/table_tags.py
@@ -39,7 +39,7 @@ def case_table(case: dict, **kwargs) -> dict:
         {% case_table 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:
         + table: TableConfig | The configuration of the table.

diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss
@@ -11,6 +11,10 @@
   a:hover {
     cursor: pointer;
   }
+
+  &__detail {
+    box-sizing: border-box;
+  }
 }
 
 #document-upload {

diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss
@@ -9,26 +9,68 @@
     position: relative;
   }
 
-  &__list:before {
-    content: '';
-    background-color: var(--color-success);
-    display: block;
-    height: calc(100% - 1.5em);
-    left: 11px;
-    position: absolute;
-    top: 0.75em;
-    width: 2px;
-    z-index: -1;
-  }
-
   &__list-item {
     display: flex;
     gap: var(--spacing-large);
+
+    h3 {
+      display: inline-block;
+      width: calc(100% - 2em);
+    }
+
+    .material-icons,
+    .material-icons-outlined {
+      box-sizing: border-box;
+      color: var(--color-success);
+      position: relative;
+      width: var(--spacing-extra-large);
+      z-index: 3;
+
+      &::before {
+        content: '';
+        background-color: white;
+        border-radius: 50%;
+        top: 2px;
+        left: 2px;
+        height: 20px;
+        width: 20px;
+        position: absolute;
+        z-index: -1;
+      }
+    }
+
+    &--info {
+      background-color: var(--color-info-lighter);
+
+      .material-icons,
+      .material-icons-outlined {
+        color: var(--color-info-darker);
+
+        &::before {
+          background-color: transparent;
+        }
+      }
+    }
   }
 
-  [class*='icon'] {
-    color: var(--color-success);
-    background-color: var(--color-white);
+  &__notification {
+    padding: var(--spacing-extra-large);
+    &-content {
+      margin-left: 2em;
+
+      &::before {
+        content: '';
+        background-color: var(--color-success);
+        display: block;
+        height: calc(100% - 4.3em);
+        left: 11px;
+        margin-left: var(--spacing-extra-large);
+        position: absolute;
+        top: 1.3em;
+        width: 2px;
+        z-index: 1;
+      }
+    }
   }
 }
 

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
@@ -10,36 +10,60 @@
     {% 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 %}
 
 {% 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>
 
                 <aside class="status-list" aria-label="{% trans "Status lijst" %}">
                     <ul class="status-list__list">
-                        {% for status in case.statuses %}
+                        {# {% if case.statuses has a specific start-status %}#}
                         <li class="status-list__list-item">
-                            {% icon icon="task_alt" %}
-                            <p class="p p--compact">{{ status.date|date }}</p>
-                            <p class="p p--compact">{{ status.label }}</p>
+                            <div class="status-list__notification">
+                                {% icon icon="task_alt" icon_position="before" outlined=True %}
+                                <h3><a href="#" class="link toggle link--bold link--icon link--secondary">Aanvraag ontvangen</a>{% icon icon="expand_more" icon_position="after" outlined=True %}</h3>
+                                <div class="status-list__notification-content">
+                                    <p class="p p--compact">Aanvraag ontvangen.</p>
+                                </div>
+                            </div>
+                        </li>
+                        {# {% endif %}#}
+                        {% for status in case.statuses %}
+                        <li class="status-list__list-item status-list__list-item--info">
+                            <div class="status-list__notification status-list__notification--info">
+                                {% icon icon="circle" icon_position="before" outlined=False primary=True %}
+                                <h3><a href="#" class="link toggle link--bold link--icon link--secondary">{{ status.label }}</a>{% icon icon="expand_more" icon_position="after" outlined=True %}</h3>
+                                <div class="status-list__notification-content">
+                                    <p class="p p--compact">Uw aanvraag kan pas verder in behandeling worden genomen nadat u de benodigde documenten hebt geüpload. Voeg de gegevens toe voor <strong>30 september 2020</strong>.</p>
+                                    <p class="p p--compact">{{ status.date|date }}</p>
+                                </div>
+                            </div>
                         </li>
                         {% endfor %}
+                        {# {% if case.statuses has a specific end-status %}#}
+                        <li class="status-list__list-item">
+                            <div class="status-list__notification">
+                                {% icon icon="circle_outlined" icon_position="before" outlined=True %}
+                                <h3><a href="#" class="link toggle link--bold link--icon link--secondary">Aanvraag afgerond</a>{% icon icon="expand_more" icon_position="after" outlined=True %}</h3>
+                                <div class="status-list__notification-content">
+                                    <p class="p p--compact">Aanvraag afgerond.</p>
+                                </div>
+                            </div>
+                        </li>
+                        {# {% endif %}#}
                     </ul>
+
+
                 </aside>
 
             {% endif %}
@@ -51,7 +75,7 @@ <h2 class="h2" id="documents">{% trans 'Documenten' %}</h2>
             {% endif %}
 
             {% if case.internal_upload_enabled %}
-                <h2 class="h2" id=>{% trans "Document uploaden" %}</h2>
+                <h2 class="h2" id="documents">{% trans "Document uploaden" %}</h2>
                 {% if case.case_type_config_description %}
                     <p class="p">{{ case.case_type_config_description }}</p>
                 {% else %}

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>