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

💄 [#2272] Position indicator dot headings #1134

Merged
merged 2 commits into from
Apr 19, 2024
Merged

💄 [#2272] Position indicator dot headings #1134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06a0c9f
[#2272] Added unique grid, fixed ellipsis for file-list
jiromaykin Apr 4, 2024
fc9a009
[#2272] Removed typo
jiromaykin Apr 18, 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
6 changes: 3 additions & 3 deletions src/open_inwoner/components/templates/components/File/File.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{% endif %}
</p>

<p class="p file__data">
<p class="file__data">
{% if recently_added %}
<span class="file__file--recent">{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% trans "Nieuw" %}</span>
{% endif %}
Expand All @@ -37,7 +37,7 @@
</div>
{% if show_download %}
<div class="dropdown__item">
{% button icon="file_download" text=_("Download") href=url icon_outlined=True transparent=True %}
{% button icon="download" text=_("Download") href=url icon_outlined=True transparent=True %}
</div>
{% endif %}
<div class="dropdown__item">
Expand All @@ -50,7 +50,7 @@
{% enddropdown %}
{% elif show_download %}
{% trans "Download" as download %}
{% link href=url text=download secondary=True download=True hide_text=True icon="file_download" icon_outlined=True icon_position="before" %}
{% link href=url text=download primary=True download=True hide_text=True extra_classes="file__download" icon="download" icon_outlined=True icon_position="before" %}
{% endif %}
{% if description %}<p class="p p--small">{{ description }}</p>{% endif %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/File/FileTable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<td class="table__item">{{ file.name }}</td>
<td class="table__item">{{ file.owner.get_full_name }}</td>
<td class="table__item">{{ file.created_on }}</td>
<td class="table__item">{% link icon="download" text=_("Download bestand") hide_text=True href=download_url|default:file.file.url download=True %}</td>
<td class="table__item">{% link icon="file_download" text=_("Download bestand") icon_outlined=True hide_text=True href=download_url|default:file.file.url download=True %}</td>
</tr>
{% endfor %}
</table>
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Form/FileInput.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div class="form__control file-input" aria-live="polite">
{% render_card direction="vertical" %}
{% icon icon="upload" icon_position="before" outlined=True %}
{% icon icon="upload" icon_position="before" outlined=True extra_classes="icon--large" %}
<input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file"{% if field.field.required %} required{% endif %}{% if multiple %} multiple{% endif %} data-max-size="{{ max_upload_size }}" data-file-types="{{ allowed_file_extensions }}">
<label class="button button--primary file-input__label-empty" for="{{ field.auto_id }}">
{% if multiple %}{% trans 'Sleep of selecteer bestanden' %}{% else %}{% trans 'Sleep of selecteer bestand' %}{% endif %}
Expand Down
4 changes: 2 additions & 2 deletions src/open_inwoner/js/components/form/FileInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,10 +298,10 @@ export class FileInput extends Component {
type.match('image') ? 'image' : 'description'
}</span>
</p>
<p class="p file__data">
<p class="file__data">
<span class="file__name">${name} (${ext}, ${sizeMB}MB)</span>
</p>
<a class="link link--primary" href="#document-upload" role="button" aria-label="${labelDelete}">
<a class="link link--primary file__download" href="#document-upload" role="button" aria-label="${labelDelete}">
<span aria-hidden="true" class="material-icons-outlined">delete</span>
</a>
</div>
Expand Down
47 changes: 46 additions & 1 deletion src/open_inwoner/scss/components/Cases/CaseDetail.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,40 @@
.cases__detail {
.case-detail {
box-sizing: border-box;

&__documents {
.heading-2__indicator {
display: flex;
flex-direction: row;

// breaking-text fix
@media (min-width: 315px) {
display: grid;
grid-template-columns: 232px 10px;
}

@media (min-width: 440px) {
display: flex;
flex-direction: row;
}

@media (min-width: 768px) {
display: grid;
grid-template-columns: 232px 10px;
}

@media (min-width: 840px) {
display: flex;
flex-direction: row;
}
}

.h2.indicator {
display: inline;
font-size: var(--font-size-heading-2);
margin-bottom: var(--spacing-extra-large);
}
}

.documents-upload__h3 {
margin: var(--spacing-extra-large) 0;
}
Expand Down Expand Up @@ -95,4 +131,13 @@
#cases-contact-form-content > h2 {
margin-top: var(--spacing-extra-large);
}

.contactmomenten {
margin: 0;
}

.textarea {
height: var(--header-height);
width: 100%;
}
}
4 changes: 0 additions & 4 deletions src/open_inwoner/scss/components/Cases/Cases.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,4 @@
padding-top: var(--spacing-medium);
padding-bottom: var(--spacing-extra-large);
}

&__detail {
box-sizing: border-box;
}
}
24 changes: 15 additions & 9 deletions src/open_inwoner/scss/components/File/File.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,17 @@
&__data {
display: flex;
flex-direction: column;
font-family: var(--font-family-body);
line-height: var(--spacing-extra-large);
padding: var(--spacing-large);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;

> * {
.file__name {
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Expand All @@ -45,19 +54,15 @@
box-sizing: border-box;
}

.file__download {
margin-left: auto;
}

&__file .link:hover {
color: var(--font-color-body);
text-decoration: none;
}

&__file .file__data {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: var(--spacing-extra-large);
}

&__file .link__text {
display: none;

Expand All @@ -75,6 +80,7 @@
}

&__file + .file__data {
background-color: greenyellow;
margin-top: var(--spacing-small);
}

Expand Down
4 changes: 4 additions & 0 deletions src/open_inwoner/scss/components/File/FileList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
margin-bottom: 0;
}
}

&__heading {
display: flex;
}
}

///
Expand Down
8 changes: 4 additions & 4 deletions src/open_inwoner/scss/components/Form/FileInput.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
pointer-events: none;
}

.icon--large[class*='icon'] {
font-size: 40px;
}

.card__body {
box-sizing: border-box;
padding: var(--row-height);
Expand Down Expand Up @@ -83,10 +87,6 @@
& .file-list {
margin-bottom: var(--spacing-large) !important;

&__list-item {
}
margin-bottom: var(--spacing-large);

// upload-error styles
.file__file.error {
border-color: var(--color-red-notification);
Expand Down
6 changes: 5 additions & 1 deletion src/open_inwoner/scss/components/Grid/Grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@
}

&__main {
display: grid;
display: block;

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

/// Home grid

Expand Down
18 changes: 6 additions & 12 deletions src/open_inwoner/scss/components/Typography/H2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,17 @@

&.indicator {
display: inline-block;
justify-content: flex-start;
overflow: visible;
position: relative;

&:after {
content: '';
background-color: var(--color-red-notification);
border-radius: 100px;
display: inline-block;
height: 8px;
position: absolute;
right: -12px;
top: 6px;
width: 8px;
}
}
}

.heading-2__indicator {
display: flex;
flex-direction: row;
}

///
/// Contextual.
///
Expand Down
6 changes: 5 additions & 1 deletion src/open_inwoner/scss/components/UserFeed/UserFeed.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,14 @@
&:after {
content: ' ';
position: absolute;
border-right: 1px solid var(--color-red-notification);
border-right: none;
right: -4px;
top: 2px;
height: 16px;

@media (min-width: 768px) {
border-right: 1px solid var(--color-red-notification);
}
}

&:first-child {
Expand Down
10 changes: 7 additions & 3 deletions src/open_inwoner/templates/cms/plugins/userfeed/userfeed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@

{% if userfeed %}
<section class="plugin userfeed">
<h2 class="h2 {% if userfeed.action_required %}indicator{% endif %}">
{{ instance.title }}
</h2>
<div class="heading-2__indicator">
<h2 class="h2 {% if userfeed.action_required %}indicator{% endif %}">
{{ instance.title }}
</h2>
{% if userfeed.action_required %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %}
</div>

<div class="userfeed__summary">
<ul class="userfeed__list">
{% for line in userfeed.summary %}
Expand Down
9 changes: 7 additions & 2 deletions src/open_inwoner/templates/pages/cases/status_inner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,13 @@ <h2 class="h2" id="documents-upload">{% trans "Document toevoegen" %}</h2>

{# Documents #}
{% if case.documents %}
<h2 class="h2 {% if case.new_docs %}indicator{% endif %}" id="documents">{% trans 'Eerder toegevoegde documenten' %}</h2>
{% case_document_list case.documents %}
<section class="case-detail__documents">
<div class="heading-2__indicator">
<h2 class="h2 {% if case.new_docs %}indicator{% endif %}" id="documents">{% trans 'Eerder toegevoegde documenten' %}</h2>
{% if case.new_docs %}{% icon icon="fiber_manual_record" outlined=False extra_classes="file__file--recent" %}{% endif %}
</div>
{% case_document_list case.documents %}
</section>
{% endif %}

{# Questions/contactmomenten #}
Expand Down
2 changes: 1 addition & 1 deletion src/open_inwoner/templates/pages/cases/status_outer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endblock notifications %}

{% block content %}
<div class="cases__detail" id="cases-detail-content"><div>
<div class="case-detail" id="cases-detail-content"><div>

<div class="loader-container" id="spinner-container">
<div class="spinner" id="spinner-id" hx-get="{{ hxget }}" hx-trigger="load" hx-target="#cases-detail-content">
Expand Down
4 changes: 1 addition & 3 deletions src/open_inwoner/templates/pages/cases/statuses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
{% load i18n button_tags icon_tags %}

{# WILL BE UPDATED WHEN status_inner IS FINISHED #}

{% if case.statuses %}
<h2 class="h3 h2-statuses" id="statuses">{% trans 'Status' %}</h2>
<h2 class="h2 h2-statuses" id="statuses">{% trans 'Status' %}</h2>

<aside class="status-list" aria-label="{% trans "Status lijst" %}">
<ul class="status-list__list">
Expand Down
Loading