Skip to content

Commit

Permalink
[#6951]scss/modal: styling modal to match design (depending on a4)
Browse files Browse the repository at this point in the history
  • Loading branch information
Kha committed Feb 2, 2023
1 parent bf24d53 commit 7cb4651
Show file tree
Hide file tree
Showing 10 changed files with 174 additions and 77 deletions.
37 changes: 35 additions & 2 deletions meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
View file
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,7 +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 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 Down Expand Up @@ -98,6 +114,23 @@ export const BudgetingProposalList = (props) => {
inactiveClass="btn btn--full btn--light u-spacer-bottom btn--huge"
counter={meta?.token_info.num_votes_left}
/>
<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}
/>
</div>
</div>
</div>}
Expand All @@ -110,7 +143,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
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
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">
<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 %}
<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
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
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
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
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
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
9 changes: 7 additions & 2 deletions meinberlin/templates/a4dashboard/includes/nav_modules_item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,20 @@
</div>

<div class="modal" tabindex="-1" role="dialog" id="delete-modal{{ module_menu.module.pk }}" aria-labelledby="delete-modal-label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title u-first-heading" id="delete-modal-label">{% translate "Are you sure you want to delete your module?" %}</h2>
<h1 class="modal-title u-first-heading" id="delete-modal-label">{% translate 'Delete' %}</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="{% translate 'Close'%}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="u-spacer-bottom">
{% translate "Are you sure you want to delete your module?" %}
</div>
</div>
<div class="modal-footer">
<div class="u-spacer-bottom">
<form enctype="multipart/form-data" action="{% url 'a4dashboard:module-delete' slug=module_menu.module.slug %}" method="post" class="u-inline">
{% csrf_token %}
Expand Down
Loading

0 comments on commit 7cb4651

Please sign in to comment.