Skip to content

Commit

Permalink
Merge pull request #1432 from maykinmedia/issue/2799-design-mijnberic…
Browse files Browse the repository at this point in the history 
…hten

💄 [#2799] Improve berichten template styles
  • Loading branch information
@swrichards
swrichards authored Oct 9, 2024
2 parents 0f97264 + a426754 commit dbfc2e3
Show file tree
Hide file tree
Showing 8 changed files with 232 additions and 106 deletions.
4 changes: 4 additions & 0 deletions src/open_inwoner/components/templates/components/Header/Header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@

{{ rendered_cms_menu__home }}

<li class="primary-navigation__list-item">
{% link text='Omnichannel berichten' href='/hackathon/berichten/' icon="move_to_inbox" icon_position="before" icon_outlined=True %}
</li>

{% if has_general_faq_questions %}
<li class="primary-navigation__list-item">
{% link text=_('FAQ') href='general_faq' icon="help_outline" icon_position="before" icon_outlined=True %}
Expand Down
5 changes: 4 additions & 1 deletion src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@
</li>
{% endif %}

<li class="header__list-item">
<li class="primary-navigation__list-item">
{% link text='Omnichannel berichten' href='/hackathon/berichten/' icon="move_to_inbox" icon_position="before" icon_outlined=True %}
</li>
<li class="header__list-item">
{% trans "Logout" as logout %}
{% link text=logout href=request.user.get_logout_url icon="logout" icon_position="before" primary=True %}
</li>
Expand Down
20 changes: 20 additions & 0 deletions src/open_inwoner/js/components/berichten/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Get the end date from the Django context
const einddatum = new Date('{{ bericht.einddatum_handelingstermijn }}')
const today = new Date()

// Calculate the remaining days
const remainingTime = einddatum - today // in milliseconds
const remainingDays = Math.ceil(remainingTime / (1000 * 60 * 60 * 24)) // convert to days

// Display the result
const remainingDaysElement = document.getElementById('remainingDays')
if (remainingDaysElement) {
console.log('ELEMNT {{ bericht.publicatiedatum }} BESTAAT')
if (remainingDays > 0) {
remainingDaysElement.textContent = `Er zijn nog ${remainingDays} dagen tot de einddatum.`
} else if (remainingDays === 0) {
remainingDaysElement.textContent = 'Vandaag is de einddatum.'
} else {
remainingDaysElement.textContent = 'De einddatum is verstreken.'
}
}
1 change: 1 addition & 0 deletions src/open_inwoner/js/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CreateGumshoe } from './anchor-menu/anchor-menu'
import './autocomplete-search'
import './autocomplete'
import './autosumbit'
import './berichten'
import './cases'
import { DisableContactFormButton } from './form/DisableContactFormButton'
import { DisableSubmitButton } from './cases/document_upload'
Expand Down
51 changes: 34 additions & 17 deletions src/open_inwoner/scss/components/Berichten/BerichtDetail.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,38 @@
display: grid;
}

.denhaag-file {
align-items: normal;
background: none;
border-color: gray;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: flex;
font-family: inherit;
font-size: inherit;
line-height: inherit;
padding: 0;
text-align: inherit;
text-decoration: inherit;
width: 100%;
.bericht {
margin-bottom: var(--spacing-extra-large);

&__dashboard {
.table__item--notification-danger {
margin-left: var(--spacing-medium);
padding: var(--spacing-small) var(--spacing-medium);
}
}

&__heading {
margin: 0 0 var(--spacing-large) 0;
line-height: var(--font-line-height-heading-3);
font-family: var(--font-family-heading);
font-size: var(--font-size-heading-3);
font-weight: var(--font-weight-heading-3);
}

&__text {
margin: 0 0 var(--row-height) 0;
line-height: var(--font-line-height-body);
font-family: var(--font-family-body);
font-size: var(--font-size-body);
font-weight: normal;
color: var(--font-color-body);
}

&__actions {
font-weight: bold;
}

.button--transparent {
padding: var(--spacing-medium) 0 0 0;
}
}
46 changes: 44 additions & 2 deletions src/open_inwoner/scss/components/Berichten/BerichtenList.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,59 @@
.berichtenlist {
display: grid;

.link {
.table__item {
&--notification-danger {
padding: var(--spacing-small) var(--spacing-medium);
}

&--notification-success {
background-color: var(--color-success-lighter);
border-radius: var(--border-radius-large);
color: var(--color-success);
font-size: var(--font-size-body);
padding: var(--spacing-small) var(--spacing-medium);
text-align: center;
}
}
&.nohover:hover {
text-decoration: none !important;
}
}

&__table {
display: grid;

&-row:hover th,
&-row:hover td {
background-color: var(--color-gray-lightest);
}

&-item {
&--wide {
min-width: 250px;
min-width: 100px;

@media (min-width: 768px) {
min-width: 250px;
}
}

&--flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}

.table__heading .table__item {
color: var(--color-black);
font-weight: bold;
}
}

&--unread {
color: var(--color-secondary);
color: var(--color-body);
font-weight: bold;
}
}
185 changes: 108 additions & 77 deletions src/open_inwoner/templates/pages/berichten/detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,118 @@
{% extends 'master.html' %}
{% load i18n button_tags utils icon_tags anchor_menu_tags %}
{% load i18n grid_tags button_tags icon_tags %}

{% block content %}
{% if bericht %}
{% render_grid %}
{% render_column span=12 %}
<h1 class="utrecht-heading-1" id="title">{{ bericht.onderwerp }}</h1>
<aside class="bericht__dashboard dashboard" aria-label="{% trans "Dashboard" %}">
<ul class="dashboard__list">
<li class="dashboard__list-item">
<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
<span class="dashboard__item-label">Ontvangstdatum:</span> {{ bericht.publicatiedatum }}</p>
</li>
<li class="dashboard__list-item">
<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--oip-compact">
<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 }}
<span class="dashboard__item-label"><span id="remainingDays" class="utrecht-paragraph table__item--notification-danger"></span> <!-- Placeholder for remaining days --></span>
</p>
</li>
</ul>
</aside>
{% endrender_column %}
{% endrender_grid %}

<div class="berichtdetail column column--start-0 column--span-8">
<div class="denhaag-page-content__header">
<h1 class="utrecht-heading-1" id="title">
onderwerp: {{ bericht.onderwerp }}
</h1>
<p class="utrecht-paragraph"> Bericht ontvangen op publicatiedatum: {{ bericht.publicatiedatum }}</p>
</div>
<div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
<div class="denhaag-action__content">~</div>
<div class="denhaag-action__details">
<div class="denhaag-action__date denhaag-action__date--warning">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21" class="denhaag-action__warning-icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#alert-triangle-filled_svg__a)">
<path fill="#E15601" stroke="#E15601" d="M8.575 3.717 1.516 15.5A1.667 1.667 0 0 0 2.941 18h14.117a1.665 1.665 0 0 0 1.425-2.5L11.425 3.717a1.667 1.667 0 0 0-2.85 0"></path>
<path stroke="#fff" d="M10 14.667h.008M10 8v3.333"></path>
</g>
<defs>
<clipPath id="alert-triangle-filled_svg__a">
<path fill="#fff" d="M0 .5h20v20H0z"></path>
</clipPath>
</defs>
</svg>
<time datetime="2024-09-30T19:47:36.593Z">einddatumHandelingstermijn {{ bericht.einddatumHandelingstermijn }}</time>
<p id="remainingDays" class="utrecht-paragraph"></p> <!-- Placeholder for remaining days -->

<hr>

</div>
<div class="denhaag-action__actions"><a href="#handelen" class="utrecht-button-link utrecht-button-link--html-a utrecht-button-link--external" rel="external noopener noreferrer">handelingsperspectief: {{ bericht.handelingsperspectief }}</a></div>
</div>
</div>
<p class="utrecht-paragraph denhaag-page-content__message">berichtTekst: <br>
<span>{{ bericht.bericht_tekst|linebreaks }}</span></p>
<div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
<div class="denhaag-action__content">handelingsperspectief: {{ bericht.handelingsperspectief }}</div>
<div>
<h2>Bijlagen</h2>
{% for attachment in bericht.bijlages %}
<a href="{{ attachment }}" download="Example" class="denhaag-file" aria-labelledby="name" aria-describedby="description">
<div class="denhaag-file__left">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 25" class="denhaag-icon denhaag-file__icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 3.5H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 10.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M21 15.5l-5-5-11 11"></path>
</svg>
</div>
<div class="denhaag-file__right">
<div class="denhaag-file__label"><span id="name">Example </span><span id="description">({{ attachment }})</span></div>
<div class="denhaag-file__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="denhaag-icon denhaag-file__link__icon" focusable="false" aria-hidden="true" shape-rendering="auto">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13v4a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-4M5 8l5 5 5-5M10 13V1"></path>
</svg>
<div class="utrecht-link" tabindex="-1">Download</div>
{% render_grid %}
{% render_column start=4 span=6 %}
<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>
<p class="userfeed-card__description">
{% if bericht.handelingsperspectief %}
<span class="status">{{ bericht.handelingsperspectief }}</span>
{% else %}
<span class="status">{% trans "Geen verdere acties nodig. U hoeft niets te doen." %}</span>
{% endif %}
</p>
<span class="button button--icon-before button--transparent">
<span aria-hidden="true" class="material-icons-outlined ">east</span>
</span>
</div>
</div>
</a>
{% endfor %}
</a>
</div>
</section>
{# End of handelingsperspectief alert #}

</div>
<section class="bericht">
<div>
<p class="bericht__text">{{ bericht.bericht_tekst|linebreaks }}</p>
</div>

</div>
</div>

<script>
// Get the end date from the Django context
const einddatum = new Date("{{ bericht.einddatum_handelingstermijn }}");
const today = new Date();
<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 %}
<section class="bericht__bijlagen case-detail__documents">
<div class="heading-2__indicator">
<h2 class="utrecht-heading-2 " id="documents">Bijlagen</h2>
</div>
<div class="file-list">
<ul class="file-list__list">
{% for attachment in bericht.bijlages %}
<li class="file-list__list-item">
<aside class="file">
<div class="file__container ">
<div class="file__file">
<div class="file__symbol">
<span aria-hidden="true" class="material-icons-outlined ">image</span>
</div>
<div class="file__data">
<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>
</div>
</div>
</aside>
</li>
{% endfor %}
</ul>
</div>
</section>
{% else %}
<h2 class="utrecht-heading-2">{% trans 'Er zijn geen bijlagen bij dit bericht.' %}</h2>
{% endif %}

// Calculate the remaining days
const remainingTime = einddatum - today; // in milliseconds
const remainingDays = Math.ceil(remainingTime / (1000 * 60 * 60 * 24)); // convert to days
{% endrender_column %}
{% endrender_grid %}

// Display the result
const remainingDaysElement = document.getElementById("remainingDays");
if (remainingDays > 0) {
remainingDaysElement.textContent = `Er zijn nog ${remainingDays} dagen tot de einddatum.`;
} else if (remainingDays === 0) {
remainingDaysElement.textContent = "Vandaag is de einddatum.";
} else {
remainingDaysElement.textContent = "De einddatum is verstreken.";
}
</script>
{% endblock %}
{% else %}
<h2 class="utrecht-heading-2">{% trans 'Dit bericht is momenteel niet beschikbaar.' %}</h2>
{% endif %}
{% endblock content %}
Loading

0 comments on commit dbfc2e3

Please sign in to comment.