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

💄 [#2799] Final hackathon berichten-design #1434

Merged
merged 11 commits into from
Oct 10, 2024
Merged

💄 [#2799] Final hackathon berichten-design #1434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
22f3abe
Add objects-api-client-django pinned to Hackathon branch
swrichards Oct 8, 2024
61abd02
Connect Berichten views to Objects API
swrichards Oct 8, 2024
a6bd263
[#2799] Improved template for detailbericht + added menu items
jiromaykin Oct 8, 2024
d0826c2
Merge branch 'mijn-services-hackathon-2024' into issue/2799-design-mi…
jiromaykin Oct 9, 2024
df3bdce
[#2799] Improved list template
jiromaykin Oct 9, 2024
9db01c0
[#2799] Adjusted breadcrumb
jiromaykin Oct 9, 2024
4c6f3fb
[#2799] Cleaned-up code and margins
jiromaykin Oct 9, 2024
c717882
Update bericht opened status upon accessing detail page
swrichards Oct 9, 2024
e466df9
Add a URL to mark a bericht as unread
swrichards Oct 9, 2024
ade2fc3
[#2799] Improved template for detailbericht + added menu items
jiromaykin Oct 8, 2024
f4b3beb
Merge branch 'mijn-services-hackathon-2024' into issue/2799-final-hac…
jiromaykin Oct 10, 2024
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
1 change: 0 additions & 1 deletion requirements/base.in
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,6 @@ zgw-consumers-oas
notifications-api-common
git+/~https://github.com/maykinmedia/objects-api-client-django.git@f499caf#egg=objects-api-client-django


# 2FA SMS verification
oath
messagebird
2 changes: 1 addition & 1 deletion src/open_inwoner/berichten/views/bericht_detail.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class BerichtDetailView(
def crumbs(self):
return [
(_("Mijn berichten"), reverse("berichten:list")),
(_("Overzicht"), reverse("berichten:detail", kwargs=self.kwargs)),
(_("Bericht"), reverse("berichten:detail", kwargs=self.kwargs)),
]

def page_title(self):
Expand Down
22 changes: 22 additions & 0 deletions src/open_inwoner/scss/components/Berichten/BerichtDetail.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@
margin-left: var(--spacing-medium);
padding: var(--spacing-small) var(--spacing-medium);
}

.handelingstermijn {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
align-content: baseline;
justify-items: baseline;
justify-content: space-between;
}
}

&__heading {
Expand All @@ -33,7 +43,19 @@
font-weight: bold;
}

.utrecht-heading-2 {
margin-top: var(--spacing-large);
}

.button--transparent {
padding: var(--spacing-medium) 0 0 0;
}

&__bijlagen {
.file__name {
// Reverse ellipsis: only show last part of URL
direction: rtl;
text-align: left;
}
}
}
17 changes: 15 additions & 2 deletions src/open_inwoner/scss/components/Berichten/BerichtenList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,27 @@
text-align: center;
}
}
&.nohover:hover {
text-decoration: none !important;
&.nohover {
width: 100%;
justify-content: space-between;

&:hover {
text-decoration: none;
}

.button {
padding-right: 0;
}
}
}

&__table {
display: grid;

.table {
border-collapse: separate;
}

&-row:hover th,
&-row:hover td {
background-color: var(--color-gray-lightest);
Expand Down
38 changes: 18 additions & 20 deletions src/open_inwoner/templates/pages/berichten/detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,15 @@ <h1 class="utrecht-heading-1" id="title">{{ bericht.onderwerp }}</h1>
<span class="dashboard__item-label">Bericht type: </span> {{ bericht.bericht_type }}</p>
</li>
<li class="dashboard__list-item">
<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
<span class="dashboard__item-label">{% if bericht.einddatum_handelingstermijn %}<span aria-hidden="true" class="material-icons-outlined icon--alert">warning</span>{% endif %}
Deadline: </span> {{ bericht.einddatum_handelingstermijn }}
<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact handelingstermijn">
{# Icon only if deadline exists #}
{% if bericht.einddatum_handelingstermijn %}
{% icon icon="warning_amber" icon_position="after" extra_classes="icon--danger" outlined=True %}
{% endif %}
<span class="dashboard__item-label">
<span> Einddatum: </span>
</span>
<span>{{ bericht.einddatum_handelingstermijn }}</span>
<span class="dashboard__item-label"><span id="remainingDays" class="utrecht-paragraph table__item--notification-danger"></span> <!-- Placeholder for remaining days --></span>
</p>
</li>
Expand All @@ -30,12 +36,14 @@ <h1 class="utrecht-heading-1" id="title">{{ bericht.onderwerp }}</h1>

{% render_grid %}
{% render_column start=4 span=6 %}

{# Handeling #}
<section class="bericht__userfeed plugin userfeed">
<div class="card-container card-container--columns-1 plugin-card">
<a href="#handelingsperspectief" class="card card--status card--status--info ">
<div class="userfeed__marker userfeed__marker--info"></div>
<div class="card__body card__body--tabled">
<h3 class="utrecht-heading-3 userfeed__title">Actie</h3>
<h2 class="utrecht-heading-3 userfeed__title">Actie</h2>
<p class="userfeed-card__description">
{% if bericht.handelingsperspectief %}
<span class="status">{{ bericht.handelingsperspectief }}</span>
Expand All @@ -44,7 +52,7 @@ <h3 class="utrecht-heading-3 userfeed__title">Actie</h3>
{% endif %}
</p>
<span class="button button--icon-before button--transparent">
<span aria-hidden="true" class="material-icons-outlined ">east</span>
{% icon "east" %}
</span>
</div>
</a>
Expand All @@ -54,22 +62,15 @@ <h3 class="utrecht-heading-3 userfeed__title">Actie</h3>

<section class="bericht">
<div>
<h3 class="utrecht-heading-2" id="title">{{ bericht.onderwerp }}</h3>
<p class="bericht__text">{{ bericht.bericht_tekst|linebreaks }}</p>
</div>


<div>
<a href="/hackathon/berichten/" class="button button--primary bericht__actions" id="handelingsperspectief">
{% icon "arrow_backward" %}Terug naar mijn berichten
</a>
</div>
{% if destination %}
<div>
<a href="{{ destination.url }}" id="destination_link" class="button button--transparent bericht__actions">
<span>{{ destination.label }}</span>{% icon "arrow_forward" %}
</a>
</div>
{% endif %}
</section>

{% if bericht.bijlages %}
Expand All @@ -85,17 +86,14 @@ <h2 class="utrecht-heading-2 " id="documents">Bijlagen</h2>
<div class="file__container ">
<div class="file__file">
<div class="file__symbol">
<span aria-hidden="true" class="material-icons-outlined ">image</span>
{% icon "insert_drive_file" outlined=True %}
</div>
<div class="file__data">
<span class="file__name">
{{ attachment }}
(PDF)
</span>
<span class="file__name">{{ attachment }} (PDF)</span>
<span class="file__date">{{ bericht.publicatiedatum }}</span>
</div>
<a href="https://www.maykinmedia.nl/media/filer_public/94/50/9450f9e9-70d1-4d00-99e4-08bc49fb3dc7/2194530_nl_2019.pdf" download="" class="link link--icon link--icon-position-before file__download link--primary file__download" aria-label="Download namefile" title="Download dit bestand">
<span aria-hidden="true" class="material-icons-outlined ">download</span>
<a href="https://www.maykinmedia.nl/media/filer_public/94/50/9450f9e9-70d1-4d00-99e4-08bc49fb3dc7/2194530_nl_2019.pdf" download="" class="link link--icon link--icon-position-before file__download link--primary file__download" aria-label="Download namefile" title="Download dit bestand" target="_blank">
{% icon "download" outlined=True %}
</a>
</div>
</div>
Expand Down
108 changes: 55 additions & 53 deletions src/open_inwoner/templates/pages/berichten/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends 'master.html' %}
{% load i18n button_tags card_tags map_tags utils icon_tags file_tags action_tags dropdown_tags anchor_menu_tags file_tags %}
{% load i18n button_tags card_tags utils icon_tags grid_tags %}

{% block content %}

Expand All @@ -9,61 +9,63 @@ <h1 class="utrecht-heading-1" id="title">
</h1>
<p class="utrecht-paragraph">Welkom in uw berichtencentrum. Hier vindt u een overzicht van uw notificaties.</p>

<div class="berichtenlist__table">
<table class="table">
<thead class="table__heading">
<tr>
<td class="table__item berichtenlist__table-item--wide">Onderwerp</td>
<td class="table__item">Einddatum</td>
<td class="table__item">Status</td>
<td class="table__item">Bericht type</td>
</tr>
</thead>
<tbody>
{% if not berichten %}
<b>{% trans "U heeft op dit moment nog geen berichten." %}</b>
{% endif %}
{% render_grid %}
{% render_column start=0 span=10 %}
<div class="berichtenlist__table">
<table class="table">
<thead class="table__heading">
<tr>
<td class="table__item berichtenlist__table-item--wide">Onderwerp</td>
<td class="table__item">Einddatum</td>
<td class="table__item">Status</td>
<td class="table__item">Bericht type</td>
</tr>
</thead>
<tbody>
{% if not berichten %}
<b>{% trans "U heeft op dit moment nog geen berichten." %}</b>
{% endif %}

{% for bericht in berichten %}
<tr class="berichtenlist__table-row">
<td class="table__header berichtenlist__table-item--wide">
<a href="{{ bericht.object_uuid }}" class="link" aria-label="{{ bericht.berichtTekst }} " title="{{ bericht.berichtTekst }} ">
<span class="link__text {% if not bericht.geopend %}berichtenlist--unread{% endif %}">{{ bericht.onderwerp }}</span>
</a>
</td>
<td class="table__item table__item--no-lb">
<a href="{{ bericht.object_uuid }}" class="link">
{{ bericht.publicatiedatum }}</a></td>
<td class="table__item">
<a href="{{ bericht.object_uuid }}" class="link">
{% if bericht.geopend %}
<div class="table__item--notification-success">
Geopend
</div>
{% else %}
<div class="table__item--notification-danger">
Niet geopend
</div>
{% endif %}
</a>
</td>
<td class="table__item berichtenlist__table-item--flex">
<a href="{{ bericht.object_uuid }}" class="link nohover">
{{ bericht.bericht_type }}
{% for bericht in berichten %}
<tr class="berichtenlist__table-row">
<td class="table__header berichtenlist__table-item--wide">
<a href="{{ bericht.object_uuid }}" class="link" aria-label="{{ bericht.berichtTekst }} " title="{{ bericht.berichtTekst }} ">
<span class="link__text {% if not bericht.geopend %}berichtenlist--unread{% endif %}">{{ bericht.onderwerp }}</span>
</a>
</td>
<td class="table__item table__item--no-lb">
<a href="{{ bericht.object_uuid }}" class="link">
{{ bericht.publicatiedatum }}</a></td>
<td class="table__item">
<a href="{{ bericht.object_uuid }}" class="link">
{% if bericht.geopend %}
<div class="table__item--notification-success">
Geopend
</div>
{% else %}
<div class="table__item--notification-danger">
Niet geopend
</div>
{% endif %}
</a>
</td>
<td class="table__item berichtenlist__table-item--flex">
<a href="{{ bericht.object_uuid }}" class="link nohover">
{{ bericht.bericht_type }}

<span class="button button--icon-before button--transparent button--secondary">
<span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
</span>
</a>
</td>
</tr>
{% endfor %}
<span class="button button--icon-before button--transparent button--secondary">
{% icon "arrow_forward" %}
</span>
</a>
</td>
</tr>
{% endfor %}

</tbody>
</table>

{# end service list#}
</div>
</tbody>
</table>
</div>
{% endrender_column %}
{% endrender_grid %}

</div>
{% endblock %}
Loading