Accessibility improvements and simplification. Fix ticks.
This commit is contained in:
Greg Sarjeant
parent
a3677c5585
commit
9eafadde2f
@ -1,7 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-bg: white;
|
||||
--color-border: black;
|
||||
--color-delete-btn-bg: linen;
|
||||
@ -20,7 +19,6 @@
|
||||
--color-required: crimson;
|
||||
--color-text: black;
|
||||
|
||||
/* border styling */
|
||||
--border-width: 2px;
|
||||
--border-width-thin: 1px;
|
||||
--border-radius: 4px;
|
||||
@ -36,6 +34,7 @@ body {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/*a { font-weight: bold; } */
|
||||
a { font-weight: bold; }
|
||||
|
||||
legend, fieldset {
|
||||
@ -120,13 +119,13 @@ fieldset.emoji-group {
|
||||
}
|
||||
|
||||
/* Navbar styling */
|
||||
.navbar {
|
||||
nav {
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
nav a {
|
||||
color: var(--color-text);
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
@ -134,7 +133,7 @@ fieldset.emoji-group {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar > a:first-child {
|
||||
nav > a:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@ -144,12 +143,12 @@ fieldset.emoji-group {
|
||||
me to have semantically appropriate pure HTML dropdowms
|
||||
that work on mobile devices.
|
||||
*/
|
||||
.dropdown {
|
||||
details {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown summary {
|
||||
summary {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
color: var(--color-text);
|
||||
@ -160,23 +159,23 @@ fieldset.emoji-group {
|
||||
}
|
||||
|
||||
/* Remove the default details arrow on different browsers*/
|
||||
.dropdown summary::-webkit-details-marker,
|
||||
.dropdown summary::-moz-list-bullet {
|
||||
summary::-webkit-details-marker,
|
||||
summary::-moz-list-bullet {
|
||||
display: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* Add a downward-facing caret after the button label */
|
||||
.dropdown summary::after {
|
||||
summary::after {
|
||||
content: " ▼";
|
||||
font-size: 0.8em;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
/* Rotate the caret when opened */
|
||||
.dropdown[open] summary::after { content: " ▲"; }
|
||||
details[open] summary::after { content: " ▲"; }
|
||||
|
||||
.dropdown-content {
|
||||
.dropdown-items{
|
||||
position: absolute;
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
@ -187,7 +186,7 @@ fieldset.emoji-group {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
.dropdown-items a {
|
||||
float: none;
|
||||
color: var(--color-text);
|
||||
padding: 10px;
|
||||
@ -196,24 +195,15 @@ fieldset.emoji-group {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* navbar hover and focus styling */
|
||||
.navbar a:hover,
|
||||
.navbar a:focus,
|
||||
.dropdown summary:hover,
|
||||
.dropdown summary:focus,
|
||||
.dropdown-content a:hover,
|
||||
.dropdown-content a:focus {
|
||||
nav a:hover,
|
||||
nav a:focus,
|
||||
summary:hover,
|
||||
summary:focus,
|
||||
.dropdown-items a:hover,
|
||||
.dropdown-items a:focus {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/*
|
||||
The two common display options for responsive layouts are flex and grid.
|
||||
flex (aka Flexbox) aligns items either horizontally or vertically.
|
||||
grid can align items in two dimensions.
|
||||
grid also allows more precise positioning of elements, so I'm using that
|
||||
even though I only have one dimension.
|
||||
*/
|
||||
|
||||
.home-container { display: grid; }
|
||||
|
||||
.home-sidebar {
|
||||
@ -227,10 +217,8 @@ fieldset.emoji-group {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
/* Description list: description */
|
||||
.profile-data dd { margin: 0; }
|
||||
|
||||
/* Description list: term */
|
||||
/* Hidden from visual display - screen reader only class */
|
||||
/* https://www.sitelint.com/blog/hiding-a-text-but-making-it-accessible-to-a-screen-reader */
|
||||
.profile-data dt {
|
||||
@ -245,12 +233,7 @@ fieldset.emoji-group {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
Left-justify the greeting text,
|
||||
right-justify the Change Mood link
|
||||
*/
|
||||
|
||||
/* greeting text */
|
||||
/* container for greeting + mood emoji (wrapped in a <span>), and "change mood" link */
|
||||
.profile-greeting {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -265,19 +248,16 @@ fieldset.emoji-group {
|
||||
gap: 0.4em;
|
||||
}
|
||||
|
||||
/* define the profile "greeting" style */
|
||||
.profile-greeting-content-text {
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Style the Change Mood link */
|
||||
.change-mood {
|
||||
font-size: 0.9em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* define the profile "about" style */
|
||||
.profile-about {
|
||||
font-style: italic;
|
||||
font-size: 0.95em;
|
||||
@ -302,7 +282,6 @@ fieldset.emoji-group {
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
|
||||
/* Styling for flash messages */
|
||||
.flash-messages {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
@ -364,7 +343,7 @@ fieldset.emoji-group {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.tick-time {
|
||||
time {
|
||||
color: var(--color-text);
|
||||
font-size: 0.8em;
|
||||
margin-bottom: 0.4em;
|
||||
|
||||
@ -26,10 +26,10 @@ class HomeController extends Controller {
|
||||
// POST handler
|
||||
// Saves the tick and reloads the homepage
|
||||
public function handleTick(){
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST' and isset($_POST['tick'])) {
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST' and isset($_POST['new_tick'])) {
|
||||
// save the tick
|
||||
if (trim($_POST['tick'])){
|
||||
TickModel::save($_POST['tick']);
|
||||
if (trim($_POST['new_tick'])){
|
||||
TickModel::save($_POST['new_tick']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,20 +4,24 @@ class HomeView {
|
||||
ob_start();
|
||||
?>
|
||||
|
||||
<ul class="tick-feed">
|
||||
<ul class="tick-feed" role="feed" aria-label="Recent updates">
|
||||
<?php foreach ($ticks as $tick): ?>
|
||||
<li class="tick">
|
||||
<div class="tick-time"><?= Util::escape_html(Util::relative_time($tick['timestamp'])) ?></div>
|
||||
<span class="tick-text"><?= Util::linkify(Util::escape_html($tick['tick'])) ?></span>
|
||||
<?php
|
||||
$datetime = new DateTime($tick['timestamp'], new DateTimeZone('UTC'));
|
||||
$relativeTime = Util::relative_time($tick['timestamp']);
|
||||
?>
|
||||
<li class="tick" tabindex="0">
|
||||
<time datetime="<?php echo $datetime->format('c') ?>"><?php echo Util::escape_html($relativeTime) ?></time>
|
||||
<span class="tick-text"><?php echo Util::linkify(Util::escape_html($tick['tick'])) ?></span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<div class="tick-pagination">
|
||||
<?php if ($page > 1): ?>
|
||||
<a href="?page=<?= $page - 1 ?>">« Newer</a>
|
||||
<a href="?page=<?php echo $page - 1 ?>">« Newer</a>
|
||||
<?php endif; ?>
|
||||
<?php if (count($ticks) === $limit): ?>
|
||||
<a href="?page=<?= $page + 1 ?>">Older »</a>
|
||||
<a href="?page=<?php echo $page + 1 ?>">Older »</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
|
||||
@ -32,7 +32,8 @@
|
||||
<div class="profile-tick">
|
||||
<form class="profile-tick-form" method="post">
|
||||
<input type="hidden" name="csrf_token" value="<?= Util::escape_html($_SESSION['csrf_token']) ?>">
|
||||
<textarea placeholder="What's ticking?"
|
||||
<textarea name="new_tick"
|
||||
placeholder="What's ticking?"
|
||||
minlength="1"
|
||||
maxlength="200"
|
||||
rows="3"></textarea>
|
||||
@ -41,11 +42,10 @@
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</aside>
|
||||
<main id="ticks" class="home-main">
|
||||
<main id="ticks">
|
||||
<div class="home-header">
|
||||
<h1 class="site-description"><?= $config->siteDescription ?></h1>
|
||||
</div>
|
||||
<?php echo $tickList ?>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<?php /** @var ConfigModel $config */ ?>
|
||||
<?php /* https://www.w3schools.com/howto/howto_css_dropdown.asp */ ?>
|
||||
<div class="navbar">
|
||||
<nav aria-label="Main navigation">
|
||||
<a href="<?= $config->basePath ?>">home</a>
|
||||
<details class="dropdown">
|
||||
<summary>feeds</summary>
|
||||
<div class="dropdown-content">
|
||||
<details>
|
||||
<summary aria-haspopup="true">feeds</summary>
|
||||
<div class="dropdown-items">
|
||||
<a href="<?= $config->basePath ?>feed/rss">rss</a>
|
||||
<a href="<?= $config->basePath ?>feed/atom">atom</a>
|
||||
</div>
|
||||
@ -12,9 +12,9 @@
|
||||
<?php if (!Session::isLoggedIn()): ?>
|
||||
<a href="<?= $config->basePath ?>login">login</a>
|
||||
<?php else: ?>
|
||||
<details class="dropdown">
|
||||
<summary>admin</summary>
|
||||
<div class="dropdown-content">
|
||||
<details>
|
||||
<summary aria-haspopup="true">admin</summary>
|
||||
<div class="dropdown-items">
|
||||
<a href="<?= $config->basePath ?>admin">settings</a>
|
||||
<a href="<?= $config->basePath ?>admin/css">css</a>
|
||||
<a href="<?= $config->basePath ?>admin/emoji">emoji</a>
|
||||
@ -22,4 +22,4 @@
|
||||
</details>
|
||||
<a href="<?= $config->basePath ?>logout">logout</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
x
Reference in New Issue
Block a user