From c4cfe77ecfffc330c7f92a5104683248cbe16b7a Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Mon, 26 Jun 2023 16:30:55 +0200 Subject: [PATCH 1/3] :lipstick: [#1574] Create dynamic custom Tab Panel tag --- .../components/TabPanel/TabPanel.html | 39 +++++++ .../components/templatetags/tab_panel_tags.py | 40 +++++++ src/open_inwoner/js/components/index.js | 2 + .../js/components/tab-panels/index.js | 47 ++++++++ .../scss/components/TabPanel/TabPanel.scss | 106 ++++++++++++++++++ src/open_inwoner/scss/components/_index.scss | 1 + src/open_inwoner/scss/views/App.scss | 1 + .../templates/pages/ssd/list-all.html | 47 ++++++++ .../templates/pages/ssd/list-monthly.html | 36 ++++++ .../templates/pages/ssd/list-yearly.html | 36 ++++++ 10 files changed, 355 insertions(+) create mode 100644 src/open_inwoner/components/templates/components/TabPanel/TabPanel.html create mode 100644 src/open_inwoner/components/templatetags/tab_panel_tags.py create mode 100644 src/open_inwoner/js/components/tab-panels/index.js create mode 100644 src/open_inwoner/scss/components/TabPanel/TabPanel.scss create mode 100644 src/open_inwoner/templates/pages/ssd/list-all.html create mode 100644 src/open_inwoner/templates/pages/ssd/list-monthly.html create mode 100644 src/open_inwoner/templates/pages/ssd/list-yearly.html diff --git a/src/open_inwoner/components/templates/components/TabPanel/TabPanel.html b/src/open_inwoner/components/templates/components/TabPanel/TabPanel.html new file mode 100644 index 0000000000..a8ed79a2a5 --- /dev/null +++ b/src/open_inwoner/components/templates/components/TabPanel/TabPanel.html @@ -0,0 +1,39 @@ +{% load i18n %} + +{# *** STATIC tab panel template Start - copy this if you just need two tabs/panels *** #} +{#
#} +{#
#} +{# #} +{##} +{#
#} +{#
#} +{#

Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.

#} +{#
#} +{#
#} +{#

Dolor sit amet consectetur adipisicing elit. Recusandae sint nostrum laborum voluptatem est quod fugiat dolor odio aspernatur error, aperiam quibusdam distinctio, blanditiis eum sed natus, sequi ipsam modi panel.

#} +{#
#} +{#
#} +{#
#} +{#
#} +{# *** STATIC tab panel template End *** #} + +
+
+ + +
+ {% for tab in get_tabs %} +
+

{{ tab.content }}

+
+ {% endfor %} +
+
+
diff --git a/src/open_inwoner/components/templatetags/tab_panel_tags.py b/src/open_inwoner/components/templatetags/tab_panel_tags.py new file mode 100644 index 0000000000..8300af1257 --- /dev/null +++ b/src/open_inwoner/components/templatetags/tab_panel_tags.py @@ -0,0 +1,40 @@ +from django import template +from django.db.models import QuerySet + +register = template.Library() + + +@register.inclusion_tag("components/TabPanel/TabPanel.html") +def render_tabs_panel(get_tabs: QuerySet, content, title, **kwargs): + """ + Renders a tabbed navigation where content-panels are shown when clicking the tab title. + + Usages: + {% load tabs_panel_tags %} + {% render_tabs_panel title=title content=content get_tabs=get_tabs %} + + Variables: + + get_tabs: array | this is the list of tabs that need to be rendered. + + id: string | The id of the tab list-item. + + title: string | The clickable or tabbable tab title. + + content: string | The panel content that is displayed when the tab title is clicked. + """ + get_tabs = [ + { + "id": "tab1", + "title": "Uitkeringsspecificaties", + "content": "Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.", + }, + { + "id": "tab2", + "title": "Jaaropgaven", + "content": "Here is the content of Tab 2.", + }, + # Add more tabs if needed + ] + return { + **kwargs, + "get_tabs": get_tabs, + "content": content, + "title": title, + } diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js index cd869d0fea..f1cde5ae0c 100644 --- a/src/open_inwoner/js/components/index.js +++ b/src/open_inwoner/js/components/index.js @@ -24,6 +24,7 @@ import './plans' import './preview' import './questionnaire' import './search' +import { TabPanel } from './tab-panels' import './toggle' import './upload-document' import { ShowInfo } from './upload-document/show-file-info' @@ -48,6 +49,7 @@ const elementWrappers = [ [FileInputError.selector, (elt) => new FileInputError(elt)], [Notification.selector, (elt) => new Notification(elt)], [AnchorMobile.selector, (elt) => new AnchorMobile(elt)], + [TabPanel.selector, (elt) => new TabPanel(elt)], // add more when needed ] diff --git a/src/open_inwoner/js/components/tab-panels/index.js b/src/open_inwoner/js/components/tab-panels/index.js new file mode 100644 index 0000000000..6f0b79fd0f --- /dev/null +++ b/src/open_inwoner/js/components/tab-panels/index.js @@ -0,0 +1,47 @@ +export class TabPanel { + static selector = '.tab--container' + + constructor(node) { + this.node = node + this.tabHeadersRow = node.querySelector('.tabs__headers') + this.tabHeaders = node.querySelectorAll('.tab__header') + this.tabContent = node.querySelectorAll('.tab__content') + + this.hideContent() + this.showContent() + + this.tabHeadersRow.addEventListener('click', (e) => { + const target = e.target + if (target.classList.contains('tab__header')) { + console.log('there is a tabheader') + this.tabHeaders.forEach((item, i) => { + if (target == item) { + this.hideContent() + this.showContent(i) + } + }) + } + }) + } + + hideContent() { + console.log('Hide tab...') + this.tabContent.forEach((item) => { + item.classList.add('hide') + item.classList.remove('active') + }) + this.tabHeaders.forEach((item) => { + item.classList.remove('active') + }) + } + + showContent(i = 0) { + console.log('Show tab...') + this.tabContent[i].classList.add('active') + this.tabContent[i].classList.remove('hide') + this.tabHeaders[i].classList.add('active') + } +} + +const tabpanels = document.querySelectorAll(TabPanel.selector) +;[...tabpanels].forEach((tabpanel) => new TabPanel(tabpanel)) diff --git a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss new file mode 100644 index 0000000000..ea75cb6f0e --- /dev/null +++ b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss @@ -0,0 +1,106 @@ +.tab--container { + position: relative; + margin: 0 auto; + display: flex; + max-width: 100%; + width: 100%; +} + +.tabs { + background: #fff; + overflow: initial; + width: 100%; + + @media (min-width: 500px) { + overflow: hidden; + } +} + +.list.tabs__headers { + display: block; + align-items: center; + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 0; + position: relative; + + &::before { + left: 0; + right: 0; + bottom: 0px; + height: 0; + border-bottom: 2px solid var(--color-gray-light); + content: ''; + top: auto; + display: block; + position: absolute; + } + + &::after { + clear: both; + display: block; + content: ''; + } + + @media (min-width: 500px) { + display: flex; + } +} + +.list-item.tab__header--item { + max-width: 200px; + border: none; + display: block; + float: left; + padding: 0; + border: 0; + margin-right: -1px; + position: relative; +} + +.link.tab__header { + box-sizing: border-box; + color: var(--color-gray-lighter); + display: inline-block; + cursor: pointer; + width: 100%; + padding: var(--spacing-large); + transition: 0.3s; + + &:target { + scroll-margin-top: 150px; + } + &:target::before { + scroll-margin-top: 150px; + } + + &.active { + border-bottom: 2px solid var(--color-primary); + color: var(--font-color-body); + font-weight: bold; + margin: 0; + } +} + +.tabs__body { + padding: 0; +} + +.tab__content, +.tab__content.active { + margin: 1em; + scroll-margin-top: 150px; + + p { + padding: 0; + } +} + +.active { + display: block; +} + +.hide { + display: none; +} diff --git a/src/open_inwoner/scss/components/_index.scss b/src/open_inwoner/scss/components/_index.scss index 726aa4a28d..e9a74f1fff 100644 --- a/src/open_inwoner/scss/components/_index.scss +++ b/src/open_inwoner/scss/components/_index.scss @@ -81,6 +81,7 @@ @import './Sticky/Sticky.scss'; @import './Table/Table.scss'; @import './Table/Tabled.scss'; +@import './TabPanel/TabPanel.scss'; @import './Tags/Tag.scss'; @import './Tags/TagList.scss'; @import './Typography/H1.scss'; diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss index d9e1ee4d43..4f7392719e 100644 --- a/src/open_inwoner/scss/views/App.scss +++ b/src/open_inwoner/scss/views/App.scss @@ -227,6 +227,7 @@ --row-height: 40px; --row-height-small: 24px; --row-height-big: 48px; + --row-height-giant: 57px; --gutter-width: 32px; --spacing-tiny: 2px; diff --git a/src/open_inwoner/templates/pages/ssd/list-all.html b/src/open_inwoner/templates/pages/ssd/list-all.html new file mode 100644 index 0000000000..ed71881dee --- /dev/null +++ b/src/open_inwoner/templates/pages/ssd/list-all.html @@ -0,0 +1,47 @@ +{% extends 'master.html' %} +{% load i18n grid_tags %} + +{% block content %} + {% render_grid %} + {% render_column span=9 %} +

+ {% trans "Mijn uitkeringen" %} +

+ + {# *** STATIC tab panel template Start for all content on 1 page - contains two tabs/panels *** #} +
+
+ + +
+
+

Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.

+
    + {% for report in monthly_benefits %} +
  • + {{ report }} +
    • + {% endfor %} +
+
+
+

Dolor sit amet consectetur adipisicing elit. Recusandae sint nostrum laborum voluptatem est quod fugiat dolor odio aspernatur error, aperiam quibusdam distinctio, blanditiis eum sed natus, sequi ipsam modi panel.

+
    + {% for report in yearly_benefits %} +
  • + {{ report }} +
    • + {% endfor %} +
+
+
+
+
+ {# *** STATIC tab panel template End *** #} + + {% endrender_column %} + {% endrender_grid %} +{% endblock content %} diff --git a/src/open_inwoner/templates/pages/ssd/list-monthly.html b/src/open_inwoner/templates/pages/ssd/list-monthly.html new file mode 100644 index 0000000000..b7bda3e6ba --- /dev/null +++ b/src/open_inwoner/templates/pages/ssd/list-monthly.html @@ -0,0 +1,36 @@ +{% extends 'master.html' %} +{% load i18n grid_tags %} + +{% block content %} + {% render_grid %} + {% render_column span=9 %} +

+ {% trans "Mijn uitkeringen" %} +

+ + {# *** STATIC tab panel template Start for all content on 1 page - contains two tabs/panels *** #} +
+
+ + +
+
+

Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.

+
    + {% for report in monthly_benefits %} +
  • + {{ report }} +
    • + {% endfor %} +
+
+
+
+
+ {# *** STATIC tab panel template End *** #} + + {% endrender_column %} + {% endrender_grid %} +{% endblock content %} diff --git a/src/open_inwoner/templates/pages/ssd/list-yearly.html b/src/open_inwoner/templates/pages/ssd/list-yearly.html new file mode 100644 index 0000000000..9487f35594 --- /dev/null +++ b/src/open_inwoner/templates/pages/ssd/list-yearly.html @@ -0,0 +1,36 @@ +{% extends 'master.html' %} +{% load i18n grid_tags %} + +{% block content %} + {% render_grid %} + {% render_column span=9 %} +

+ {% trans "Mijn uitkeringen" %} +

+ + {# *** STATIC tab panel template Start for all content on 1 page - contains two tabs/panels *** #} +
+
+ + +
+
+

Dolor sit amet consectetur adipisicing elit. Recusandae sint nostrum laborum voluptatem est quod fugiat dolor odio aspernatur error, aperiam quibusdam distinctio, blanditiis eum sed natus, sequi ipsam modi panel.

+
    + {% for report in yearly_benefits %} +
  • + {{ report }} +
    • + {% endfor %} +
+
+
+
+
+ {# *** STATIC tab panel template End *** #} + + {% endrender_column %} + {% endrender_grid %} +{% endblock content %} From 01ba1641cae768706a46bfbcc3c6af9b7a8ffa64 Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Tue, 4 Jul 2023 11:13:30 +0200 Subject: [PATCH 2/3] :lipstick: [#1574] Add static HTML for Tab navigation --- .../components/TabPanel/TabPanel.html | 39 --------------- .../components/templatetags/tab_panel_tags.py | 40 ---------------- src/open_inwoner/js/components/index.js | 2 - .../js/components/tab-panels/index.js | 47 ------------------- .../scss/components/TabPanel/TabPanel.scss | 14 +++--- .../templates/pages/ssd/list-all.html | 47 ------------------- .../templates/pages/ssd/list-monthly.html | 36 -------------- .../pages/ssd/monthly_reports_list.html | 36 ++++++++++++++ ...t-yearly.html => yearly_reports_list.html} | 12 ++--- 9 files changed, 50 insertions(+), 223 deletions(-) delete mode 100644 src/open_inwoner/components/templates/components/TabPanel/TabPanel.html delete mode 100644 src/open_inwoner/components/templatetags/tab_panel_tags.py delete mode 100644 src/open_inwoner/js/components/tab-panels/index.js delete mode 100644 src/open_inwoner/templates/pages/ssd/list-all.html delete mode 100644 src/open_inwoner/templates/pages/ssd/list-monthly.html create mode 100644 src/open_inwoner/templates/pages/ssd/monthly_reports_list.html rename src/open_inwoner/templates/pages/ssd/{list-yearly.html => yearly_reports_list.html} (55%) diff --git a/src/open_inwoner/components/templates/components/TabPanel/TabPanel.html b/src/open_inwoner/components/templates/components/TabPanel/TabPanel.html deleted file mode 100644 index a8ed79a2a5..0000000000 --- a/src/open_inwoner/components/templates/components/TabPanel/TabPanel.html +++ /dev/null @@ -1,39 +0,0 @@ -{% load i18n %} - -{# *** STATIC tab panel template Start - copy this if you just need two tabs/panels *** #} -{#
#} -{#
#} -{# #} -{##} -{#
#} -{#
#} -{#

Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.

#} -{#
#} -{#
#} -{#

Dolor sit amet consectetur adipisicing elit. Recusandae sint nostrum laborum voluptatem est quod fugiat dolor odio aspernatur error, aperiam quibusdam distinctio, blanditiis eum sed natus, sequi ipsam modi panel.

#} -{#
#} -{#
#} -{#
#} -{#
#} -{# *** STATIC tab panel template End *** #} - -
-
- - -
- {% for tab in get_tabs %} -
-

{{ tab.content }}

-
- {% endfor %} -
-
-
diff --git a/src/open_inwoner/components/templatetags/tab_panel_tags.py b/src/open_inwoner/components/templatetags/tab_panel_tags.py deleted file mode 100644 index 8300af1257..0000000000 --- a/src/open_inwoner/components/templatetags/tab_panel_tags.py +++ /dev/null @@ -1,40 +0,0 @@ -from django import template -from django.db.models import QuerySet - -register = template.Library() - - -@register.inclusion_tag("components/TabPanel/TabPanel.html") -def render_tabs_panel(get_tabs: QuerySet, content, title, **kwargs): - """ - Renders a tabbed navigation where content-panels are shown when clicking the tab title. - - Usages: - {% load tabs_panel_tags %} - {% render_tabs_panel title=title content=content get_tabs=get_tabs %} - - Variables: - + get_tabs: array | this is the list of tabs that need to be rendered. - + id: string | The id of the tab list-item. - + title: string | The clickable or tabbable tab title. - + content: string | The panel content that is displayed when the tab title is clicked. - """ - get_tabs = [ - { - "id": "tab1", - "title": "Uitkeringsspecificaties", - "content": "Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.", - }, - { - "id": "tab2", - "title": "Jaaropgaven", - "content": "Here is the content of Tab 2.", - }, - # Add more tabs if needed - ] - return { - **kwargs, - "get_tabs": get_tabs, - "content": content, - "title": title, - } diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js index f1cde5ae0c..cd869d0fea 100644 --- a/src/open_inwoner/js/components/index.js +++ b/src/open_inwoner/js/components/index.js @@ -24,7 +24,6 @@ import './plans' import './preview' import './questionnaire' import './search' -import { TabPanel } from './tab-panels' import './toggle' import './upload-document' import { ShowInfo } from './upload-document/show-file-info' @@ -49,7 +48,6 @@ const elementWrappers = [ [FileInputError.selector, (elt) => new FileInputError(elt)], [Notification.selector, (elt) => new Notification(elt)], [AnchorMobile.selector, (elt) => new AnchorMobile(elt)], - [TabPanel.selector, (elt) => new TabPanel(elt)], // add more when needed ] diff --git a/src/open_inwoner/js/components/tab-panels/index.js b/src/open_inwoner/js/components/tab-panels/index.js deleted file mode 100644 index 6f0b79fd0f..0000000000 --- a/src/open_inwoner/js/components/tab-panels/index.js +++ /dev/null @@ -1,47 +0,0 @@ -export class TabPanel { - static selector = '.tab--container' - - constructor(node) { - this.node = node - this.tabHeadersRow = node.querySelector('.tabs__headers') - this.tabHeaders = node.querySelectorAll('.tab__header') - this.tabContent = node.querySelectorAll('.tab__content') - - this.hideContent() - this.showContent() - - this.tabHeadersRow.addEventListener('click', (e) => { - const target = e.target - if (target.classList.contains('tab__header')) { - console.log('there is a tabheader') - this.tabHeaders.forEach((item, i) => { - if (target == item) { - this.hideContent() - this.showContent(i) - } - }) - } - }) - } - - hideContent() { - console.log('Hide tab...') - this.tabContent.forEach((item) => { - item.classList.add('hide') - item.classList.remove('active') - }) - this.tabHeaders.forEach((item) => { - item.classList.remove('active') - }) - } - - showContent(i = 0) { - console.log('Show tab...') - this.tabContent[i].classList.add('active') - this.tabContent[i].classList.remove('hide') - this.tabHeaders[i].classList.add('active') - } -} - -const tabpanels = document.querySelectorAll(TabPanel.selector) -;[...tabpanels].forEach((tabpanel) => new TabPanel(tabpanel)) diff --git a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss index ea75cb6f0e..418beec1ad 100644 --- a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss +++ b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss @@ -22,6 +22,7 @@ box-sizing: border-box; width: 100%; margin: 0; + overflow: hidden; padding: 0; position: relative; @@ -42,21 +43,22 @@ display: block; content: ''; } - - @media (min-width: 500px) { - display: flex; - } } .list-item.tab__header--item { - max-width: 200px; + max-width: var(--mobile-xs-width); border: none; display: block; - float: left; + float: none; padding: 0; border: 0; margin-right: -1px; position: relative; + + @media (min-width: 360px) { + max-width: 200px; + float: left; + } } .link.tab__header { diff --git a/src/open_inwoner/templates/pages/ssd/list-all.html b/src/open_inwoner/templates/pages/ssd/list-all.html deleted file mode 100644 index ed71881dee..0000000000 --- a/src/open_inwoner/templates/pages/ssd/list-all.html +++ /dev/null @@ -1,47 +0,0 @@ -{% extends 'master.html' %} -{% load i18n grid_tags %} - -{% block content %} - {% render_grid %} - {% render_column span=9 %} -

- {% trans "Mijn uitkeringen" %} -

- - {# *** STATIC tab panel template Start for all content on 1 page - contains two tabs/panels *** #} -
-
- - -
-
-

Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.

-
    - {% for report in monthly_benefits %} -
  • - {{ report }} -
    • - {% endfor %} -
-
-
-

Dolor sit amet consectetur adipisicing elit. Recusandae sint nostrum laborum voluptatem est quod fugiat dolor odio aspernatur error, aperiam quibusdam distinctio, blanditiis eum sed natus, sequi ipsam modi panel.

-
    - {% for report in yearly_benefits %} -
  • - {{ report }} -
    • - {% endfor %} -
-
-
-
-
- {# *** STATIC tab panel template End *** #} - - {% endrender_column %} - {% endrender_grid %} -{% endblock content %} diff --git a/src/open_inwoner/templates/pages/ssd/list-monthly.html b/src/open_inwoner/templates/pages/ssd/list-monthly.html deleted file mode 100644 index b7bda3e6ba..0000000000 --- a/src/open_inwoner/templates/pages/ssd/list-monthly.html +++ /dev/null @@ -1,36 +0,0 @@ -{% extends 'master.html' %} -{% load i18n grid_tags %} - -{% block content %} - {% render_grid %} - {% render_column span=9 %} -

- {% trans "Mijn uitkeringen" %} -

- - {# *** STATIC tab panel template Start for all content on 1 page - contains two tabs/panels *** #} -
-
- - -
-
-

Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen.

-
    - {% for report in monthly_benefits %} -
  • - {{ report }} -
    • - {% endfor %} -
-
-
-
-
- {# *** STATIC tab panel template End *** #} - - {% endrender_column %} - {% endrender_grid %} -{% endblock content %} diff --git a/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html b/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html new file mode 100644 index 0000000000..42fbcc7de2 --- /dev/null +++ b/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html @@ -0,0 +1,36 @@ +{% extends 'master.html' %} +{% load i18n grid_tags %} + +{% block content %} + {% render_grid %} + {% render_column span=9 %} +

+ {% trans "Mijn uitkeringen" %} +

+

{% trans "Bekijk en download hier uw maandelijkse/jaarlijkse uitkeringsspecificaties om direct inzicht te krijgen in uw financiële situatie." %}

+ +
+
+ + +
+
+

{% trans "Selecteer de maand die u wilt downloaden. Let op: de huidige maand is pas vanaf de 25ste zichtbaar. Deze uitkeringsspecificatie is een momentopname van de aan u uitbetaalde uitkering. Aan deze specificatie kunt u geen rechten ontlenen." %}

+
    + {% for report in monthly_benefits %} +
  • + {{ report }} +
    • + {% endfor %} +
+
+
+
+
+ + {% endrender_column %} + {% endrender_grid %} +{% endblock content %} diff --git a/src/open_inwoner/templates/pages/ssd/list-yearly.html b/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html similarity index 55% rename from src/open_inwoner/templates/pages/ssd/list-yearly.html rename to src/open_inwoner/templates/pages/ssd/yearly_reports_list.html index 9487f35594..6aa4b3e205 100644 --- a/src/open_inwoner/templates/pages/ssd/list-yearly.html +++ b/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html @@ -1,5 +1,5 @@ {% extends 'master.html' %} -{% load i18n grid_tags %} +{% load i18n grid_tags icon_tags %} {% block content %} {% render_grid %} @@ -7,21 +7,22 @@

{% trans "Mijn uitkeringen" %}

+

{% trans "Bekijk en download hier uw maandelijkse/jaarlijkse uitkeringsspecificaties om direct inzicht te krijgen in uw financiële situatie." %}

- {# *** STATIC tab panel template Start for all content on 1 page - contains two tabs/panels *** #}
-

Dolor sit amet consectetur adipisicing elit. Recusandae sint nostrum laborum voluptatem est quod fugiat dolor odio aspernatur error, aperiam quibusdam distinctio, blanditiis eum sed natus, sequi ipsam modi panel.

+

{% trans "Selecteer het jaar dat u wilt downloaden. Aan deze jaaropgaven kunt u geen rechten ontlenen." %}

@@ -29,7 +30,6 @@

- {# *** STATIC tab panel template End *** #} {% endrender_column %} {% endrender_grid %} From 81276ba09bc18b31b3aea73b1e51bc4b7a6fc4cd Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Mon, 17 Jul 2023 17:38:12 +0200 Subject: [PATCH 3/3] :lipstick: [#1574] Remove unnecessary link --- src/open_inwoner/templates/pages/ssd/monthly_reports_list.html | 2 +- src/open_inwoner/templates/pages/ssd/yearly_reports_list.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html b/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html index 42fbcc7de2..795c9ccb2a 100644 --- a/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html +++ b/src/open_inwoner/templates/pages/ssd/monthly_reports_list.html @@ -12,7 +12,7 @@

diff --git a/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html b/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html index 6aa4b3e205..9af77afaf9 100644 --- a/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html +++ b/src/open_inwoner/templates/pages/ssd/yearly_reports_list.html @@ -13,7 +13,7 @@