Commit bfac87dd authored by Emma's avatar Emma 🏳🌈

redesigned alerts

parent 5d320a2c
Pipeline #60843745 passed with stages
in 8 minutes and 10 seconds
.site-alerts {
position: fixed;
bottom: 1rem;
bottom: 0;
left: 1rem;
margin-right: 1rem;
z-index: 42069;
position: fixed;
z-index: 100000;
&__alert {
align-items: center;
box-shadow: 1px 1px 2px var(--border);
display: flex;
padding: 0 !important;
&:last-child {
margin-bottom: 0;
}
&:focus-within {
box-shadow: 1px 1px 2px 1px var(--border);
......@@ -30,27 +23,9 @@
transform: translateX(calc(-100% - 1rem));
}
&__text {
padding: 1rem 0 1rem 1rem;
}
&__dismiss {
opacity: 0;
padding: 1rem calc(0.5rem - 0.5ch);
&:focus {
opacity: 1;
outline: none;
}
}
.no-js &__dismiss {
display: none;
}
.no-js &__text {
padding-right: 1rem;
}
}
@keyframes site-alerts-slide {
......
.alert {
align-items: center;
display: flex;
margin-bottom: 1rem;
overflow: auto;
padding: 1rem 1rem 0;
padding: 0.5rem 1rem;
transform: translate(0); // disable margin weirdness
&--notice {
background: var(--bg-blue);
&__icon {
font-size: 1.5rem;
margin-right: 1rem;
}
&--success {
background: var(--bg-green);
}
&--warn {
background: var(--bg-orange);
}
&--error {
background: var(--bg-red);
&__text {
margin-bottom: -1rem;
}
}
@import '../_variables';
each(@background-colors, .(@color, @name) {
.bg-@{name} {
background-color: @color;
}
});
each(@foreground-colors, .(@color, @name) {
.fg-@{name} {
color: @color;
}
});
.fg-text {
color: var(--text);
}
.fg-muted {
color: var(--text-muted);
}
.fg-primary {
color: var(--primary);
}
.fg-accent {
color: var(--accent);
}
.fg-red {
color: var(--fg-red);
}
.fg-orange {
color: var(--fg-orange);
}
.fg-green {
color: var(--fg-green);
}
.fg-blue {
color: var(--fg-blue);
}
.fg-grey {
color: var(--fg-grey);
}
.fg-inherit {
color: inherit;
}
@max-content-width: 1100px;
@desktop-min-width: 768px;
@nav-font-size: 16px;
@background-colors: {
red: var(--bg-red);
orange: var(--bg-orange);
yellow: var(--bg-yellow);
green: var(--bg-green);
blue: var(--bg-blue);
}
@foreground-colors: {
text: var(--text);
muted: var(--text-muted);
primary: var(--primary);
accent: var(--accent);
red: var(--fg-red);
orange: var(--fg-orange);
yellow: var(--fg-yellow);
green: var(--fg-green);
blue: var(--fg-blue);
grey: var(--fg-grey);
inherit: inherit;
};
......@@ -59,7 +59,7 @@
// overriding modifier classes
@import '_utilities/break-text';
@import '_utilities/fg';
@import '_utilities/colors';
@import '_utilities/inline';
@import '_utilities/no-desktop';
@import '_utilities/no-margin';
......
......@@ -13,6 +13,7 @@
--bg-content: #161616;
--bg-red: #660000;
--bg-orange: #663500;
--bg-yellow: #505000;
--bg-green: #004200;
--bg-blue: #003666;
--bg-grey: #424242;
......@@ -23,6 +24,7 @@
--fg-broken: #cfcfcf;
--fg-red: #f00;
--fg-orange: #fa4;
--fg-yellow: #ffff80;
--fg-green: #8f8;
--fg-blue: #4af;
--fg-grey: #777;
......
......@@ -13,7 +13,8 @@
--bg-page: #fafafa;
--bg-content: #fff;
--bg-red: #fdd;
--bg-orange: #fed;
--bg-orange: #ffe8d0;
--bg-yellow: #ffffd0;
--bg-green: #dfd;
--bg-blue: #def;
--bg-grey: #efefef;
......@@ -24,6 +25,7 @@
--fg-broken: #222;
--fg-red: #f00;
--fg-orange: #f80;
--fg-yellow: #808000;
--fg-green: #080;
--fg-blue: #08f;
--fg-grey: #888;
......
......@@ -20,6 +20,7 @@
--bg-content: #faf4fa;
--bg-red: #fdd;
--bg-orange: #fed;
--bg-yellow: #ffffd0;
--bg-green: #dfd;
--bg-blue: #def;
--bg-grey: #efefef;
......@@ -30,6 +31,7 @@
--fg-broken: #222;
--fg-red: #f00;
--fg-orange: #f80;
--fg-yellow: #808000;
--fg-green: #080;
--fg-blue: #08f;
--fg-grey: #988;
......
......@@ -20,6 +20,7 @@
--bg-content: #000;
--bg-red: #660000;
--bg-orange: #663500;
--bg-yellow: #505000;
--bg-green: #004200;
--bg-blue: #003666;
--bg-grey: #424242;
......@@ -30,6 +31,7 @@
--fg-broken: #cfcfcf;
--fg-red: #f00;
--fg-orange: #fa4;
--fg-yellow: #ffff80;
--fg-green: #8f8;
--fg-blue: #4af;
--fg-grey: #807078;
......
......@@ -19,6 +19,7 @@
--bg-content: transparent;
--bg-red: #fdd;
--bg-orange: #fed;
--bg-yellow: #ffffd0;
--bg-green: #dfd;
--bg-blue: #def;
--bg-grey: #efefef;
......@@ -29,6 +30,7 @@
--fg-broken: #222;
--fg-red: #f00;
--fg-orange: #f80;
--fg-yellow: #808000;
--fg-green: #080;
--fg-blue: #08f;
--fg-grey: #888;
......
......@@ -19,6 +19,7 @@
--bg-content: transparent;
--bg-red: #660000;
--bg-orange: #663500;
--bg-yellow: #505000;
--bg-green: #004200;
--bg-blue: #003666;
--bg-grey: #424242;
......@@ -29,6 +30,7 @@
--fg-broken: #cfcfcf;
--fg-red: #f00;
--fg-orange: #fa4;
--fg-yellow: #ffff80;
--fg-green: #8f8;
--fg-blue: #4af;
--fg-grey: #777;
......
......@@ -84,12 +84,6 @@
"code": 59393,
"src": "iconic"
},
{
"uid": "5408be43f7c42bccee419c6be53fdef5",
"css": "text",
"code": 61686,
"src": "fontawesome"
},
{
"uid": "p57wgnf4glngbchbucdi029iptu8oxb8",
"css": "pin",
......@@ -144,18 +138,6 @@
"code": 59392,
"src": "fontawesome"
},
{
"uid": "3d39c828009c04ddb6764c0b04cd2439",
"css": "forward",
"code": 59407,
"src": "fontawesome"
},
{
"uid": "85528017f1e6053b2253785c31047f44",
"css": "comment",
"code": 59408,
"src": "fontawesome"
},
{
"uid": "c76b7947c957c9b78b11741173c8349b",
"css": "attention",
......@@ -233,6 +215,30 @@
"css": "cancel",
"code": 59415,
"src": "fontawesome"
},
{
"uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
"css": "info-circled",
"code": 59407,
"src": "fontawesome"
},
{
"uid": "17ebadd1e3f274ff0205601eef7b9cc4",
"css": "help-circled",
"code": 59408,
"src": "fontawesome"
},
{
"uid": "43ab845088317bd348dee1d975700c48",
"css": "ok-circled",
"code": 59417,
"src": "fontawesome"
},
{
"uid": "0f4cae16f34ae243a6144c18a003f2d8",
"css": "cancel-circled",
"code": 59418,
"src": "fontawesome"
}
]
}
\ No newline at end of file
}
This diff is collapsed.
......@@ -2,7 +2,7 @@
import $ from 'jquery';
$(document).on('click', '.site-alerts__alert', function () {
$(document).on('click', '.site-alerts__alert', function () {
const $alert = $(this);
$alert
......
......@@ -147,7 +147,7 @@ final class SubmissionController extends AbstractController {
$this->entityManager->flush();
$this->addFlash('notice', 'flash.submission_edited');
$this->addFlash('success', 'flash.submission_edited');
$event = new EntityModifiedEvent($before, $submission);
$this->eventDispatcher->dispatch(Events::EDIT_SUBMISSION, $event);
......@@ -189,7 +189,7 @@ final class SubmissionController extends AbstractController {
$this->entityManager->flush();
$this->addFlash('notice', 'flash.submission_deleted');
$this->addFlash('success', 'flash.submission_deleted');
return $this->redirectToRoute('forum', [
'forum_name' => $forum->getName(),
......@@ -219,7 +219,7 @@ final class SubmissionController extends AbstractController {
$this->entityManager->flush();
$this->addFlash('notice', 'flash.submission_deleted');
$this->addFlash('success', 'flash.submission_deleted');
if ($request->headers->has('Referer')) {
return $this->redirect($request->headers->get('Referer'));
......@@ -269,9 +269,9 @@ final class SubmissionController extends AbstractController {
$this->entityManager->flush();
if ($pin) {
$this->addFlash('notice', 'flash.submission_pinned');
$this->addFlash('success', 'flash.submission_pinned');
} else {
$this->addFlash('notice', 'flash.submission_unpinned');
$this->addFlash('success', 'flash.submission_unpinned');
}
if ($request->headers->has('Referer')) {
......
......@@ -197,6 +197,8 @@ final class UserController extends AbstractController {
$em->flush();
$this->addFlash('success', 'flash.user_settings_updated');
return $this->redirectToRoute('edit_user', [
'username' => $user->getUsername(),
]);
......
{% set colors = {
error: 'red',
warn: 'orange',
info: 'yellow',
success: 'green',
notice: 'blue',
} %}
{% set icons = {
error: 'cancel-circled',
warn: 'attention',
info: 'help-circled',
notice: 'info-circled',
success: 'ok-circled',
} %}
{% set type = block('alert_type') is defined ? block('alert_type') : 'notice' %}
{% from '_macros/icon.html.twig' import icon %}
<div class="alert bg-{{ colors[type] }} {% block alert_classes '' %}"
{% block alert_attributes '' %}>
<div class="alert__icon fg-{{ colors[type] }}" aria-hidden="true">
{{ icon(icons[type]) }}
</div>
<div class="alert__text">
{% block alert_text %}
<p>{% block alert_paragraph '' %}</p>
{% endblock alert_text %}
</div>
</div>
......@@ -31,12 +31,18 @@
{%- if app.request.previousSession -%}
{%- for type, notices in app.flashes -%}
{%- for notice in notices -%}
<div class="alert alert--{{ type }} site-alerts__alert" role="alert">
<p class="no-margin site-alerts__text">{{ notice|trans }}</p>
<button class="site-alerts__dismiss unbuttonize fg-inherit no-underline"
aria-label="{{ 'action.dismiss'|trans }}"
type="button">&times;</button>
</div>
{% embed '_layouts/alert.html.twig' with { notice: notice, type: type } only %}
{% block alert_classes 'site-alerts__alert' %}
{% block alert_type type %}
{% block alert_text %}
<p>
{{- notice|trans ~}}
<button class="site-alerts__dismiss unbuttonize"
aria-label="{{ 'action.dismiss'|trans }}"></button>
</p>
{% endblock alert_text %}
{% block alert_attributes 'role="alert"' %}
{% endembed %}
{%- endfor -%}
{%- endfor -%}
{%- endif -%}
......
......@@ -16,9 +16,10 @@
{% macro comment_form(submission, parent) %}
{% if submission.locked and not is_granted('ROLE_ADMIN') %}
<div class="alert alert--notice submission-locked-notice">
<p>{{ 'flash.submission_is_locked'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_classes 'submission-locked-notice' %}
{% block alert_paragraph 'flash.submission_is_locked'|trans %}
{% endembed %}
{% elseif is_granted('ROLE_USER') %}
{{ render(controller('App\\Controller\\CommentController::commentForm', {
forumName: submission.forum.name,
......@@ -26,8 +27,8 @@
commentId: parent.id ?? null
})) }}
{% else %}
<div class="alert alert--notice">
<p>{{ 'comments.not_logged_in'|trans({
{% embed '_layouts/alert.html.twig' %}
{% block alert_paragraph 'comments.not_logged_in'|trans({
'%login_link%': '<a href="%s">%s</a>'|format(
path('login'),
'comments.not_logged_in_login_link_label'|trans
......@@ -36,7 +37,7 @@
path('registration'),
'comments.not_logged_in_register_link_label'|trans
),
})|raw }}</p>
</div>
})|raw %}
{% endembed %}
{% endif %}
{% endmacro comment_form %}
......@@ -3,9 +3,9 @@
{% block front_alerts %}
{% if is_granted('ROLE_USER') %}
{% if app.user.frontPage == 'subscribed' and app.user.subscriptions|length == 0 %}
<div class="alert alert--notice">
<p>{{ 'front.no_subscriptions'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_paragraph 'front.no_subscriptions'|trans %}
{% endembed %}
{% endif %}
{% endif %}
{% endblock %}
......
......@@ -2,9 +2,9 @@
{% block body %}
{% if forums is empty %}
<div class="alert alert--notice">
<p>{{ 'flash.no_moderated_forums'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_paragraph 'flash.no_moderated_forums'|trans %}
{% endembed %}
{% endif %}
{{ parent() }}
......
......@@ -7,8 +7,13 @@
{% block body %}
<h1 class="page-heading">{{ block('title') }}</h1>
<p>{{ 'request_password_reset.no_confirmation_notice'|trans }}</p>
<p>{{ 'request_password_reset.multiple_accounts_notice'|trans }}</p>
{% embed '_layouts/alert.html.twig' %}
{% block alert_paragraph 'request_password_reset.no_confirmation_notice'|trans %}
{% endembed %}
{% embed '_layouts/alert.html.twig' %}
{% block alert_paragraph 'request_password_reset.multiple_accounts_notice'|trans %}
{% endembed %}
{{ form(form) }}
{% endblock %}
......@@ -12,9 +12,10 @@
is_granted('IS_AUTHENTICATED_REMEMBERED') and
not is_granted('IS_AUTHENTICATED_FULLY')
%}
<div class="alert alert--notice" role="alert">
<p>{{ 'flash.you_must_reauthenticate'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_attributes 'role="alert"' %}
{% block alert_paragraph 'flash.you_must_reauthenticate'|trans %}
{% endembed %}
{% endif %}
<form action="{{ path('login_check') }}" method="POST" class="form form--login">
......
......@@ -8,14 +8,15 @@
{{ submission(submission) }}
<div class="alert alert--notice single-comment-alert">
<p>
{% embed '_layouts/alert.html.twig' %}
{% block alert_classes 'single-comment-alert' %}
{% block alert_paragraph %}
{{ 'comments.viewing_thread'|trans }}
<a href="{{ path('submission', {forum_name: forum.name, submission_id: submission.id, slug: submission.title|slugify}) }}">
{{- 'comments.thread_return'|trans -}}
</a>
</p>
</div>
{% endblock alert_paragraph %}
{% endembed %}
{{ comment(comment, {recurse: true, show_form: true}) }}
{% endblock %}
......@@ -10,9 +10,9 @@
{{ form_label(form.verification) }}
{{ form_errors(form.verification) }}
{% if not app.request.hasPreviousSession %}
<div class="alert alert--notice">
<p>{{ 'flash.no_cookies_verification'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_paragraph 'flash.no_cookies_verification'|trans %}
{% endembed %}
{% endif %}
{{ form_widget(form.verification) }}
</div>
......
......@@ -10,9 +10,12 @@
})|raw }}
</h1>
<div class="alert alert--notice">
<p>{{ 'help.block_users'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_type 'info' %}
{% block alert_text %}
<p>{{ 'help.block_users'|trans }}</p>
{% endblock alert_text %}
{% endembed %}
{{ form(form) }}
{% endblock %}
......@@ -6,9 +6,10 @@
{% block body %}
<h1 class="page-heading">{{ block('title') }}</h1>
<div class="alert alert--notice">
<p>{{ 'help.block_users'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_type 'info' %}
{% block alert_paragraph 'help.block_users'|trans %}
{% endembed %}
{% embed '_layouts/table_pagination.html.twig' with { items: blocks } %}
{% block header %}
......
......@@ -9,14 +9,11 @@
<h1 class="page-heading break-text">{{ block('title') }}</h1>
{% if app.user != user %}
<div class="alert alert--warn">
<p>
<span class="fg-orange">{{ icon('attention') }}</span>
{{ 'flash.editing_credentials_of_other_user'|trans }}
</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_type 'warn' %}
{% block alert_paragraph 'flash.editing_credentials_of_other_user'|trans %}
{% endembed %}
{% endif %}
{% include 'user/_form.html.twig' %}
{{ include('user/_form.html.twig', { form: form }, with_context=false) }}
{% endblock %}
......@@ -11,10 +11,13 @@
{% block body %}
<h1 class="page-heading">{{ 'title.hidden_forums'|trans }}</h1>
<div class="alert alert--notice">
<p>{{ 'help.hidden_forums'|trans }}</p>
<p>{{ 'help.hidden_forums_no_comment_hiding'|trans }}</p>
</div>
{% embed '_layouts/alert.html.twig' %}
{% block alert_type 'info' %}
{% block alert_text %}
<p>{{ 'help.hidden_forums'|trans }}</p>
<p>{{ 'help.hidden_forums_no_comment_hiding'|trans }}</p>
{% endblock alert_text %}
{% endembed %}
{% embed '_layouts/table_pagination.html.twig' with { items: forums } %}
{% block header %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment