Make mood picker tab-navigable. Other cleanup.

This commit is contained in:
Greg Sarjeant 2025-06-23 11:33:37 -04:00
parent b8e77a492f
commit 4712aa8da6
5 changed files with 25 additions and 9 deletions

View File

@ -4,7 +4,7 @@
--color-bg: white;
--color-border: black;
--color-delete-btn-bg: linen;
--color-delete-btn: crimson;
--color-delete-btn: #721c24;
--color-delete-btn-border: lightcoral;
--color-flash-error: #721c24;
--color-flash-error-bg: mistyrose;
@ -373,7 +373,15 @@ time {
}
/* Mood selection page */
.mood-option input { display: none; }
.mood-option input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.mood-option span {
font-size: 1.4em;
@ -384,6 +392,12 @@ time {
.mood-option:hover span { background-color: var(--color-mood-hover); }
.mood-option input:focus + span {
background-color: var(--color-mood-hover);
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.mood-option input:checked + span {
background-color: var(--color-mood-selected);
outline: var(--border-width) solid var(--color-mood-border);

View File

@ -43,4 +43,4 @@ class MoodView {
return ob_get_clean();
}
}
?>
?>

View File

@ -1,7 +1,7 @@
<?php /** @var ConfigModel $config */ ?>
<?php /** @var Array $customCss */ ?>
<h1>CSS Management</h1>
<div>
<main>
<form action="<?= $config->basePath ?>admin/css" method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?= Util::escape_html($_SESSION['csrf_token']) ?>">
<fieldset>
@ -59,4 +59,4 @@
</div>
</fieldset>
</form>
</div>
</main>

View File

@ -1,7 +1,7 @@
<?php /** @var ConfigModel $config */ ?>
<?php /** @var array $emojiList */ ?>
<h1>Emoji Management</h1>
<div>
<main>
<form action="<?= $config->basePath ?>admin/emoji" method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?= Util::escape_html($_SESSION['csrf_token']) ?>">
<fieldset>
@ -46,4 +46,4 @@
</fieldset>
<?php endif; ?>
</form>
</div>
</main>

View File

@ -1,3 +1,5 @@
<?php /** @var string $moodPicker */ ?>
<h2>How are you feeling?</h2>
<?php echo $moodPicker; ?>
<h1>How are you feeling?</h1>
<main>
<?php echo $moodPicker; ?>
</main>