diff --git a/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html b/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html index cfda1c7f3b..2e6c897efa 100644 --- a/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html +++ b/src/open_inwoner/components/templates/components/Dashboard/Dashboard.html @@ -4,9 +4,7 @@ diff --git a/src/open_inwoner/components/templatetags/dashboard_tags.py b/src/open_inwoner/components/templatetags/dashboard_tags.py index 5544c7f5d7..b246867bf5 100644 --- 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,7 +27,7 @@ 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. @@ -35,24 +35,16 @@ def case_dashboard(case: dict, **kwargs) -> dict: 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 index 1d8426765f..da43614f62 100644 --- 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 index 1f81fe57d0..5484f65a19 100644 --- 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 index 59804b3356..c32180d34c 100644 --- 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 index 4b99d72ca7..4428933e7e 100644 --- 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 index 27c2cdab26..be258b6ca6 100644 --- a/src/open_inwoner/templates/pages/cases/status_inner.html +++ b/src/open_inwoner/templates/pages/cases/status_inner.html @@ -10,21 +10,16 @@ {% notifications messages %} -{# Anchor menu-desktop #} -
- {% anchor_menu anchors desktop=True %} -
- {% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %} {% if case %} {% render_grid %} - {% render_column span=9 %} - + {% render_column span=12 %} {# Title/dashboard. #}

{{ case.description }}

{% case_dashboard case %} - {% case_table case %} + {% endrender_column %} + {% render_column start=4 span=6 %} {# Status history. #} {% if case.statuses %} @@ -32,14 +27,43 @@

{% trans 'Status' %}

{% endif %} @@ -51,7 +75,7 @@

{% trans 'Documenten' %}

{% endif %} {% if case.internal_upload_enabled %} -

{% trans "Document uploaden" %}

+

{% trans "Document uploaden" %}

{% if case.case_type_config_description %}

{{ case.case_type_config_description }}

{% else %} diff --git a/src/open_inwoner/templates/pages/cases/status_outer.html b/src/open_inwoner/templates/pages/cases/status_outer.html index ed7b79a8da..6482f690cf 100644 --- 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 %} -
-{% endblock mobile_anchors %} - {% block notifications %}
{% endblock notifications %} -{% block sidebar_content %} -
-{% endblock sidebar_content %} - {% block content %}