Skip to content

Commit 8c573e9

Browse files
jiromaykinjiromaykin
committed
[#1951] Added userfeed frontend component
1 parent c14479b commit 8c573e9

File tree

7 files changed

+173
-9
lines changed

7 files changed

+173
-9
lines changed

‎src/open_inwoner/components/templates/components/UserFeed/UserFeed.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{% load i18n icon_tags %}
2+
3+
{# if userfeed data is true then show component #}
4+
<section class="userfeed">
5+
<h2 class="h2 {# if userfeed true #}indicator{# endif #}">
6+
{% trans "Aanvragen updates" %}
7+
</h2>
8+
<div class="userfeed__summary">
9+
<ul class="userfeed__list">
10+
<li class="userfeed__list-item">
11+
<p class="userfeed__list-paragraph">
12+
Bij <span>{# num actions #}</span> aanvra(a)g(en) is uw actie nodig
13+
</p>
14+
</li>
15+
<li class="userfeed__list-item">
16+
<p class="userfeed__list-paragraph">
17+
Bij <span>{# num statuses #}</span> aanvra(a)g(en) is de status gewijzigd
18+
</p>
19+
</li>
20+
<li class="userfeed__list-item">
21+
<p class="userfeed__list-paragraph">
22+
Bij <span>{# num statuses #}</span> aanvra(a)g(en) is de status gewijzigd
23+
</p>
24+
</li>
25+
<li class="userfeed__list-item">
26+
<p class="userfeed__list-paragraph">
27+
Bij <span>{# num statuses #}</span> aanvra(a)g(en) is de status gewijzigd
28+
</p>
29+
</li>
30+
</ul>
31+
</div>
32+
<div class="card-container card-container--columns-2">
33+
<a href="{{ userfeedbackend }}" class="card {# if action-needed true #}card--status{# endif #}">
34+
<div class="card__body card__body--tabled">
35+
<p class="p tabled__value">Bijzondere bijstand aanvragen</p>
36+
<h2 class="userfeed__heading">
37+
<span class="">Status gewijzigd naar &lsquo;<span class="status">Documenten nodig</span>&rsquo;</span>
38+
</h2>
39+
<span class="button button--icon-before button--transparent button--secondary">
40+
{% icon icon="east" icon_position="after" primary=True outlined=True %}
41+
</span>
42+
</div>
43+
</a>
44+
{# Example of card without action status #}
45+
<a href="{{ userfeedbackend }}" class="card">
46+
<div class="card__body card__body--tabled">
47+
<p class="p tabled__value">Bijzondere bijstand aanvragen</p>
48+
<h2 class="userfeed__heading">
49+
<span class="">Status gewijzigd naar &lsquo;<span class="status">in behandeling</span>&rsquo;</span>
50+
</h2>
51+
<span class="button button--icon-before button--transparent button--secondary">
52+
{% icon icon="east" icon_position="after" primary=True outlined=True %}
53+
</span>
54+
</div>
55+
</a>
56+
</div>
57+
</section>
58+
{# endif - if userfeed data is false then hide component #}

‎src/open_inwoner/scss/components/File/File.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.file {
22
&__container {
33
&--recent {
4-
border-left: var(--border-width-thin) solid var(--color-red);
4+
border-left: var(--border-width-thin) solid var(--color-red-notification);
55
}
66
}
77

@@ -84,7 +84,7 @@
8484
}
8585

8686
&__file--recent {
87-
color: var(--color-red);
87+
color: var(--color-red-notification);
8888
font-size: var(--font-size-body-extra-small);
8989
vertical-align: middle;
9090
}

‎src/open_inwoner/scss/components/Status/_Status.scss

-3
This file was deleted.

‎src/open_inwoner/scss/components/Typography/H2.scss

+18
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,24 @@
2323
&.cms-plugin {
2424
margin-top: var(--gutter-width);
2525
}
26+
27+
&.indicator {
28+
display: inline-block;
29+
overflow: visible;
30+
position: relative;
31+
32+
&:after {
33+
content: '';
34+
background-color: var(--color-red-notification);
35+
border-radius: 100px;
36+
display: inline-block;
37+
height: 8px;
38+
position: absolute;
39+
right: -12px;
40+
top: 6px;
41+
width: 8px;
42+
}
43+
}
2644
}
2745

2846
///

‎src/open_inwoner/scss/components/UserFeed/UserFeed.scss

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.userfeed {
2+
position: relative;
3+
4+
&__summary {
5+
background-color: var(--color-white);
6+
color: var(--color-red-notification);
7+
display: block;
8+
line-height: var(--font-line-height-body);
9+
position: relative;
10+
}
11+
12+
&__list {
13+
column-gap: var(--spacing-medium);
14+
list-style: none;
15+
display: block;
16+
flex-direction: row;
17+
margin: 0;
18+
padding: 0 0 var(--spacing-large) 0;
19+
20+
@media (min-width: 768px) {
21+
display: flex;
22+
}
23+
24+
&-item {
25+
position: relative;
26+
padding: 0;
27+
28+
&:after {
29+
content: ' ';
30+
position: absolute;
31+
border-right: 1px solid var(--color-red-notification);
32+
right: -4px;
33+
top: 2px;
34+
height: 16px;
35+
}
36+
37+
&:first-child {
38+
padding-left: 0;
39+
}
40+
41+
&:last-child {
42+
padding-right: 0;
43+
44+
&:after {
45+
border-right: none;
46+
}
47+
}
48+
}
49+
50+
&-paragraph {
51+
font-size: var(--font-size-body-small);
52+
margin: 0;
53+
padding: 0;
54+
}
55+
}
56+
57+
&__heading {
58+
color: var(--font-color-heading);
59+
font-family: var(--font-family-heading);
60+
font-size: var(--font-size-body);
61+
line-height: var(--font-line-height-body);
62+
padding: var(--spacing-large) 0 0 0;
63+
margin: 0;
64+
}
65+
66+
.card--status {
67+
padding-top: 5px;
68+
background-color: var(--color-danger-lightest);
69+
}
70+
71+
.card__body {
72+
background-color: #fff;
73+
padding-right: var(--row-height);
74+
75+
.tabled__value {
76+
color: var(--color-gray-dark);
77+
font-size: var(--font-size-body-small);
78+
margin: 0;
79+
padding: 0;
80+
}
81+
82+
span.button:last-child {
83+
bottom: 20px;
84+
}
85+
}
86+
}
87+
88+
/// Contextual
89+
.userfeed + h2 {
90+
margin-top: var(--row-height);
91+
}

‎src/open_inwoner/scss/components/_index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@
6464
@import './Notification/Notification.scss';
6565
@import './Notification/Notifications.scss';
6666
@import './Pagination/Pagination.scss';
67+
@import './Profile/personal-information';
68+
@import './Profile/personal-overview';
6769
@import './Plan/PlanContact.scss';
6870
@import './Plan/PlanCreate.scss';
6971
@import './Plan/PlanEdit.scss';
@@ -82,7 +84,6 @@
8284
@import './Social/Social.scss';
8385
@import './Spinner/Spinner.scss';
8486
@import './Status/StatusList.scss';
85-
@import './Status/Status.scss';
8687
@import './Step/StepIndicator.scss';
8788
@import './Sticky/Sticky.scss';
8889
@import './Table/Table.scss';
@@ -98,10 +99,9 @@
9899
@import './Typography/Link.scss';
99100
@import './Typography/LinkList.scss';
100101
@import './Typography/P.scss';
102+
@import './UserFeed/UserFeed.scss';
101103
@import './Video/Video.scss';
102104
@import './modal/modal';
103105
@import './Emoji/Emoji.scss';
104-
@import './Profile/personal-information';
105-
@import './Profile/personal-overview';
106106
@import './Profile/edit.scss';
107107
@import './WarningHeader/WarningHeader.scss';

‎src/open_inwoner/templates/pages/cases/status_inner.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h2 class="h2" id="documents-upload">{% trans "Document toevoegen" %}</h2>
5656

5757
{# Documents. #}
5858
{% if case.documents %}
59-
<h2 class="h2" id="documents">{% trans 'Documenten' %}{% if case.new_docs %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %}</h2>
59+
<h2 class="h2 {% if case.new_docs %}indicator{% endif %}">{% trans 'Documenten' %}</h2>
6060
{% case_document_list case.documents %}
6161
{% endif %}
6262

0 commit comments

Comments
 (0)