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

[#6951]scss/modal: styling modal to match design (depending on a4) #4871

Merged
merged 2 commits into from
Feb 6, 2023
Merged

[#6951]scss/modal: styling modal to match design (depending on a4) #4871

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
71cdebb
[#6951]scss/modal: styling modal to match design (depending on a4)
Jan 19, 2023
be1da37
deps: update a4 hash
philli-m Feb 3, 2023
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
44 changes: 37 additions & 7 deletions meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Pagination } from './Pagination'
import { CountDown } from '../../contrib/assets/CountDown'
import { ControlBar } from './ControlBar'
import { useLocation, useSearchParams } from 'react-router-dom'
import Modal from 'adhocracy4/adhocracy4/static/Modal'

export const BudgetingProposalList = (props) => {
const [data, setData] = useState([])
Expand All @@ -15,8 +16,22 @@ export const BudgetingProposalList = (props) => {
const countText = django.ngettext('you have 1 vote left.', 'you have %s votes left.', votes)
return django.interpolate(countText, [votes])
}
const noResults = django.gettext('Nothing to show')
const endSessionString = django.gettext('Are you ready? End session')

const translations = {
noResults: django.gettext('Nothing to show'),
finished: django.gettext('Are you finished?'),
endSession: django.gettext('End session'),
modalDescription: django.gettext('To save your votes you do not need to do anything else. End the session to enter a new code. If you want to change the votes you have already cast, you can re-enter your code as long as the voting phase is running. '),
modalBodyQuestion: django.gettext('Do you want to end the session?'),
modalCancel: django.gettext('Cancel')
}

const modalPartials = {
title: translations.endSession,
description: translations.modalDescription,
abort: translations.modalCancel
}

const scrolledRef = useRef(false)

const fetchProposals = () => {
Expand All @@ -42,7 +57,7 @@ export const BudgetingProposalList = (props) => {
.catch(error => console.log(error))
}

const endSession = () => {
const handleEndSession = () => {
const endSessionUrl = props.end_session_url
fetch(endSessionUrl)
.then(() => window.location.reload(true))
Expand Down Expand Up @@ -106,9 +121,24 @@ export const BudgetingProposalList = (props) => {
inactiveClass="btn btn--full btn--light u-spacer-bottom btn--huge"
counter={meta?.token_info.num_votes_left}
/>
<button className="btn" onClick={endSession}>
{endSessionString}
</button>
<div className="u-spacer-bottom u-align-center">
<span>{translations.finished} </span>
<a
className="btn--link"
href="something"
data-bs-toggle="modal"
data-bs-target="#end-session_modal"
>
{translations.endSession}
</a>
</div>
<Modal
name="end-session_modal"
abort={translations.modalCancel}
action={translations.endSession}
partials={modalPartials}
handleSubmit={handleEndSession}
/>
</div>
</div>
</div>}
Expand All @@ -121,7 +151,7 @@ export const BudgetingProposalList = (props) => {
<div className="offset-lg-2 col-lg-8">
{Object.keys(data).length > 0
? renderList(data)
: noResults}
: translations.noResults}
</div>
</div>
</div>
Expand Down
115 changes: 71 additions & 44 deletions meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@
<li class="dashboard-nav__page">
<a href="#cl-moderation-info" class="dashboard-nav__item dashboard-nav__item--interactive">Item Detail: Moderation Info</a>
</li>
<li class="dashboard-nav__page">
<a href="#cl-modal" class="dashboard-nav__item dashboard-nav__item--interactive">Modal</a>
</li>
<li class="dashboard-nav__page">
<a href="#cl-module" class="dashboard-nav__item dashboard-nav__item--interactive">Module</a>
</li>
Expand Down Expand Up @@ -638,7 +641,7 @@ <h2 id="cl-category_formset">Category Formset</h2>
</div>
</div>

<h2 id="cl-commenting">Comments</h2>
<h2 id="cl-comments">Comments</h2>

<div class="cl-example">
<div>
Expand Down Expand Up @@ -684,49 +687,6 @@ <h2 id="cl-commenting">Comments</h2>
<div>
<div>
<div class="a4-comments__comment a4-comments__comment-owner"><a class="a4-comments__anchor" id="comment_20" href="./?comment=20">Comment 20</a>
<div class="modal fade" id="report_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button class="close" aria-label="Abbrechen" data-bs-dismiss="modal"><i class="fa fa-times"></i></button></div>
<div class="modal-body undefined">
<h3 class="modal-title u-first-heading">Sie möchten diesen Beitrag melden? Ihre Nachricht wird an die Moderation weitergeleitet. Diese prüft den gemeldeten Beitrag. Er wird gelöscht, wenn er
nicht unseren
Diskussionsregeln (Netiquette) entspricht.</h3>
<div class="form-group"><textarea rows="5" class="form-control report-message" placeholder="Ihre Nachricht"></textarea></div>
</div>
<div class="modal-footer">
<div class="row"><button class="submit-button" data-bs-dismiss="false">Meldung senden</button></div>
<div class="row"><button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button></div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="share_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button class="close" aria-label="Abbrechen" data-bs-dismiss="modal"><i class="fa fa-times"></i></button></div>
<div class="modal-body undefined">
<h3 class="modal-title u-first-heading"></h3>
<div class="input-group"><input id="share-url-20" type="text" class="form-control" readonly="" value="http://localhost:8003/budgeting/2022-00012/?comment=20"><button
class="btn btn--light input-group-append modal-url-bar-button" data-bs-toggle="button" aria-pressed="false" autocomplete="off">Kopieren</button></div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="comment_delete_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button class="close" aria-label="Abbrechen" data-bs-dismiss="modal"><i class="fa fa-times"></i></button></div>
<div class="modal-body undefined">
<h3 class="modal-title u-first-heading">Möchten Sie diesen Kommentar wirklich löschen?</h3>
</div>
<div class="modal-footer">
<div class="row"><button class="submit-button" data-bs-dismiss="modal">Löschen</button></div>
<div class="row"><button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button></div>
</div>
</div>
</div>
</div>
<div class="a4-comments__box">
<div class="a4-comments__box--user">
<div class="row">
Expand Down Expand Up @@ -1798,6 +1758,73 @@ <h3 class="detail-info__section-title">Remark</h3>
</div>
</div>

<h2 id="cl-modal">Modal</h2>

<button class="btn btn--default" data-bs-toggle="modal" data-bs-target="#report_comment_20">Open Report Modal</button>
<div class="modal fade" id="report_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="u-no-margin-bottom u-spacer-top-one-half">Send Report</h2>
<button class="close" aria-label="Abbrechen" data-bs-dismiss="modal">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">Sie möchten diesen Beitrag melden? Ihre Nachricht wird an die Moderation weitergeleitet. Diese prüft den gemeldeten Beitrag. Er wird gelöscht, wenn er
nicht unseren
Diskussionsregeln (Netiquette) entspricht.</div>
<div class="form-group"><textarea rows="5" class="form-control report-message" placeholder="Ihre Nachricht"></textarea></div>
</div>
<div class="modal-footer">
<button class="submit-button" data-bs-dismiss="false">Meldung senden</button>
<button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>

<button class="btn btn--default" data-bs-toggle="modal" data-bs-target="#share_comment_20">Open Url Modal</button>
<div class="modal fade" id="share_comment_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="u-no-margin-bottom u-spacer-top-one-half">Share</h2>
<button class="close" aria-label="Abbrechen" data-bs-dismiss="modal">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="input-group"><input id="share-url-20" type="text" class="form-control" readonly="" value="http://localhost:8003/budgeting/2022-00012/?comment=20"><button
class="btn btn--primary input-group-append" data-bs-toggle="button" aria-pressed="false" autocomplete="off">Kopieren</button></div>
</div>
</div>
</div>
</div>

<button class="btn btn--default" data-bs-toggle="modal" data-bs-target="#comment_delete_20">Open Delete Modal</button>
<div class="modal fade" id="comment_delete_20" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="u-no-margin-bottom u-spacer-top-one-half">Delete</h2>
<button class="close" aria-label="Abbrechen" data-bs-dismiss="modal">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">
Möchten Sie diesen Kommentar wirklich löschen?
</div>
</div>
<div class="modal-footer">
<button class="submit-button" data-bs-dismiss="modal">Löschen</button>
<button class="cancel-button" data-bs-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>

<h2 id="cl-module">Module</h2>

<div class="cl-example">
Expand Down
29 changes: 18 additions & 11 deletions meinberlin/apps/plans/templates/meinberlin_plans/plan_update_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,26 +90,33 @@ <h1 class="u-first-heading">{% translate 'Edit plan' %}</h1>
</div>

<div class="modal" tabindex="-1" role="dialog" id="plan-publish-modal" aria-labelledby="plan-publish-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
philli-m marked this conversation as resolved.
Show resolved Hide resolved
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title u-first-heading" id="plan-publish-label">{% translate "Are you sure you want to publish your plan?" %}</h2>
{% if plan.is_draft %}
<h2 class="u-no-margin-bottom u-spacer-top-one-half">{% translate 'Publish' %}</h2>
{% else %}
<h2 class="u-no-margin-bottom u-spacer-top-one-half">{% translate 'Unpublish' %}</h2>
{% endif %}
khamui marked this conversation as resolved.
Show resolved Hide resolved
<button type="button" class="close" data-bs-dismiss="modal" aria-label="{% translate 'Close'%}">
<span aria-hidden="true">&times;</span>
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">
<form action="{% url 'a4dashboard:plan-publish' pk=plan.pk %}" method="post" data-ignore-submit="true" class="u-inline">
{% csrf_token %}
<button name="action" value="publish" class="btn btn--primary">
{% translate 'Publish' %}
</button>
</form>
<button type="button" data-bs-dismiss="modal" class="btn btn--light">{% translate 'Cancel'%}
</button>
{% translate "Are you sure you want to publish your plan?" %}
</div>
</div>
<div class="modal-footer">
<form action="{% url 'a4dashboard:plan-publish' pk=plan.pk %}" method="post" data-ignore-submit="true" class="u-inline">
{% csrf_token %}
<button name="action" value="publish" class="submit-button">
{% translate 'Publish' %}
</button>
</form>
<button type="button" data-bs-dismiss="modal" class="cancel-button">{% translate 'Cancel'%}
</button>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion meinberlin/assets/scss/_shame.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ input[type="search"] {
}

.cancel-button {
@extend %button-base;
@extend .btn;
@extend .btn--light;
}

Expand Down
5 changes: 5 additions & 0 deletions meinberlin/assets/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,3 +86,8 @@ $input-padding-x: 0.6rem !default;

$form-select-border-radius: (0.3 * $spacer) !default;

// set bootstrap modal variables
$modal-inner-padding: 1.5 * $spacer !default;
$modal-content-border-radius: 0 !default;
$modal-header-padding-y: 0 !default;
$modal-footer-margin-between: .5rem !default;
1 change: 1 addition & 0 deletions meinberlin/assets/scss/components/_filter_bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,7 @@ $divider-margin: 1.25rem;
}

.filter-secondary__modal-header {
margin-top: (1.5 * $spacer);
border-bottom: none;
padding-bottom: 0;
}
Expand Down
12 changes: 12 additions & 0 deletions meinberlin/assets/scss/utility.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
margin-top: $spacer;
}

.u-spacer-top-one-half {
margin-top: ($spacer * 1.5);
}

.u-spacer-top-half {
margin-top: ($spacer * 0.5);
}
Expand All @@ -43,6 +47,10 @@
margin-bottom: ($spacer * 2);
}

.u-spacer-bottom-triple {
margin-bottom: ($spacer * 3);
}

.u--bg-secondary {
background-color: $bg-secondary;
}
Expand Down Expand Up @@ -145,6 +153,10 @@
margin: 0;
}

.u-no-margin-bottom {
margin-bottom: 0;
}

.u-no-padding {
padding: 0;
}
Expand Down
8 changes: 4 additions & 4 deletions meinberlin/templates/a4dashboard/includes/nav_modules.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ <h4 class="dashboard-nav__header">

<div class="modal" tabindex="-1" role="dialog" id="module-blueprint-list">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-content modal-content--rounded modal-content--padding">
<div class="modal-header">
<h2 class="modal-title u-first-heading">{% translate "Choose Participation Module" %}</h2>
<button type="button" class="close btn--close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
<span aria-hidden="true">&times;</span>
<h2 class="u-no-margin-bottom u-spacer-top-one-half">{% translate "Choose Participation Module" %}</h2>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
Expand Down
Loading