Skip to content

Commit

Permalink
Merge pull request #1434 from maykinmedia/issue/2799-final-hackathon-…
Browse files Browse the repository at this point in the history 
…berichten-design

💄 [#2799] Final hackathon berichten-design
  • Loading branch information
@swrichards
swrichards authored Oct 10, 2024
2 parents dbfc2e3 + f4b3beb commit 5cb9706
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 77 deletions.
1 change: 0 additions & 1 deletion requirements/base.in
View file
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
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
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
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
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
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 %}

0 comments on commit 5cb9706

Please sign in to comment.