This commit is contained in:
aymm 2021-04-17 13:39:45 +02:00
parent 620db83def
commit 8e6b0d3687
Signed by: phlaym
GPG Key ID: A06651BAB6777237
4 changed files with 24 additions and 11 deletions

View File

@ -80,3 +80,13 @@ function get_source_set($user, int $base_size, int $max_scale = 3): string
} }
return implode(', ', $srcset_entries); return implode(', ', $srcset_entries);
} }
function make_banner(string $type, string $content): string
{
return '<div class="banner-wrapper">'
. ' <div class="'
. $type
. ' banner"><span>✓</span>'
. $content
. '</div></div>';
}

View File

@ -3,7 +3,7 @@ window.addEventListener('DOMContentLoaded', () => {
for (const el of document.querySelectorAll('.option input[type=checkbox], .option input[type=radio]')) { for (const el of document.querySelectorAll('.option input[type=checkbox], .option input[type=radio]')) {
el.onclick = updateVotesRemaining; el.onclick = updateVotesRemaining;
} }
const banner = document.querySelector('.success-banner'); const banner = document.querySelector('.banner');
if (banner) { if (banner) {
banner.onclick = hideBanner; banner.onclick = hideBanner;
} }

View File

@ -7,7 +7,8 @@
--disabled-color: gray; --disabled-color: gray;
--green: green; --green: green;
--default-shadow: 3px 3px 10px 1px var(--secondary-bg-color); --default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
--error-color: rgba(255, 0, 0, 0.3); --error-color-translucent: rgba(255, 0, 0, 0.3);
--error-color: rgba(255, 0, 0);
} }
@supports (color: color(display-p3 1 1 1)) { @supports (color: color(display-p3 1 1 1)) {
:root { :root {
@ -161,14 +162,20 @@ datewrapper time {
box-sizing: border-box; box-sizing: border-box;
} }
.success-banner { .banner {
background-color: var(--green);
padding: 8px; padding: 8px;
display: inline-block; display: inline-block;
margin-bottom: 8px; margin-bottom: 8px;
box-shadow: var(--default-shadow); box-shadow: var(--default-shadow);
} }
.banner.success {
background-color: var(--green);
}
.banner.error {
background-color: var(--error-color);
}
.banner-wrapper.hiding { .banner-wrapper.hiding {
transform: translateX(-200%); transform: translateX(-200%);
} }
@ -240,7 +247,7 @@ datewrapper time {
.create-poll .error { .create-poll .error {
grid-column: 1/3; grid-column: 1/3;
grid-row: 7; grid-row: 7;
background-color: var(--error-color); background-color: var(--error-color-translucent);
} }
.create-poll .error:not(:empty) { .create-poll .error:not(:empty) {
margin: 8px; margin: 8px;

View File

@ -62,14 +62,10 @@ $data_can_vote = $poll->canVote() ? 'true' : 'false';
$disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled'; $disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled';
if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?> if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?>
<div class="banner-wrapper"> <?= make_banner('success', 'Your vote has been saved, thank you!') ?>
<div class="success-banner"><span></span> Your vote has been saved, thank you!</div>
</div>
<?php } <?php }
if (array_key_exists('poll_created', $_GET) && $_GET['poll_created'] == 1) { ?> if (array_key_exists('poll_created', $_GET) && $_GET['poll_created'] == 1) { ?>
<div class="banner-wrapper"> <?= make_banner('success', 'Your poll and post have been created, thank you!') ?>
<div class="success-banner"><span></span> Your poll and post have been created, thank you!</div>
</div>
<?php } ?> <?php } ?>
<div class="poll"> <div class="poll">
<div class="header"> <div class="header">