Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#1794] Redesign case detail-page header #824

Merged
merged 2 commits into from
Nov 1, 2023
Merged

[#1794] Redesign case detail-page header #824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4d3612
[#1794] Redesigned dashboard header, updated grid, removed anchormenu…
jiromaykin Oct 23, 2023
c59f354
[#1793] Fixed case tablet grid
jiromaykin Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions src/open_inwoner/cms/cases/tests/test_htmx.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,15 +375,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")

Expand Down
4 changes: 1 addition & 3 deletions src/open_inwoner/components/templates/components/Dashboard/Dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 8 additions & 20 deletions src/open_inwoner/components/templatetags/dashboard_tags.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@


class Metric(TypedDict):
icon: str
label: str
value: Optional[str]

Expand All @@ -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"),
},
]
}
Expand Down Expand Up @@ -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"),
},
]
Expand Down
2 changes: 0 additions & 2 deletions src/open_inwoner/openzaak/tests/test_case_detail.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,8 +406,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)
Expand Down
16 changes: 16 additions & 0 deletions src/open_inwoner/scss/components/Cases/Cases.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
.cases {
margin-top: var(--spacing-giant);

&__grid .grid {
grid-row-gap: var(--spacing-medium);
grid-column-gap: var(--spacing-extra-large);

// Tablets
@media (min-width: 768px) and (max-width: 900px) {
grid-template-columns: 1fr;
}
jiromaykin marked this conversation as resolved.
Show resolved Hide resolved

.column--start-4 {
@media (min-width: 768px) and (max-width: 900px) {
grid-column-start: 1;
}
}
}

/// cards on cases page
.card {
.cases__link {
Expand Down
25 changes: 25 additions & 0 deletions src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
4 changes: 3 additions & 1 deletion src/open_inwoner/scss/components/Container/Container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
}

@media (min-width: 768px) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure about these magic numbers as breakpoints? I see @media (min-width: 768px) { here but in the file above there is @media (min-width: 767px) {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah: min-width should be 768px everywhere, but max-width should be 767px

$hm: max(calc((100vw - var(--container-width)) / 2), var(--spacing-large));
// $hm has a minimum of var(--spacing-large), and a maximum of $hlargest
$hlargest: calc(((100vw - var(--container-width)) / 2) - 7px);
$hm: max($hlargest, var(--spacing-large));
margin: var(--spacing-extra-large) $hm calc(var(--row-height) * 2);

&--no-margin {
Expand Down
45 changes: 37 additions & 8 deletions src/open_inwoner/scss/components/Dashboard/Dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
3 changes: 2 additions & 1 deletion src/open_inwoner/scss/components/Grid/Grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 5 additions & 0 deletions src/open_inwoner/scss/components/Spinner/Spinner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
align-items: flex-start;
height: 70vh;
margin: 100px 0 0 200px;

&.case__spinner-container {
justify-content: center;
margin: 100px 0 0 0;
}
}

.spinner {
Expand Down
2 changes: 2 additions & 0 deletions src/open_inwoner/scss/views/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -244,6 +245,7 @@
--spacing-large: 16px;
--spacing-extra-large: 24px;
--spacing-giant: 32px;
--spacing-mega: 80px;

/// Common widths
--form-width: 500px;
Expand Down
18 changes: 5 additions & 13 deletions src/open_inwoner/templates/pages/cases/status_inner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,22 @@
{% load i18n ssd_tags 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>
Expand Down Expand Up @@ -104,3 +95,4 @@ <h2 class="h2">{% trans "Document toevoegen" %}</h2>
{% else %}
<h2 class="h2">{% trans 'There is no available data at the moment.' %}</h2>
{% endif %}
</div>
10 changes: 1 addition & 9 deletions src/open_inwoner/templates/pages/cases/status_outer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,14 @@
{% 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>

<div class="loader-container" id="spinner-container">
<div class="case__spinner-container loader-container" id="spinner-container">
<div class="spinner" id="spinner-id" hx-get="{{ hxget }}" hx-trigger="load" hx-target="#cases-detail-content">
{% icon icon="rotate_right" extra_classes="spinner-icon rotate" %}
<div class="spinner__content">{% trans "Gegevens laden..." %}</div>
Expand Down
15 changes: 8 additions & 7 deletions src/open_inwoner/templates/pages/contactmoment/detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down
Loading