diff options
| author | winter | 2024-12-23 21:03:21 +0000 |
|---|---|---|
| committer | winter | 2024-12-23 21:03:21 +0000 |
| commit | 8f1f84d92cabf3a606585bc79eba14e63c149b60 (patch) | |
| tree | 04852c50d2f037769471b24027ba9114967146b4 | |
| parent | 505d25e29f1c13403bfbfe7cd9d1ab125be87a4b (diff) | |
improve timelines
| -rw-r--r-- | static/style.css | 26 | ||||
| -rw-r--r-- | templates/global_timeline.php | 2 | ||||
| -rw-r--r-- | templates/local_timeline.php | 2 | ||||
| -rw-r--r-- | templates/note.php | 29 | ||||
| -rw-r--r-- | templates/skeleton.php | 1 |
5 files changed, 48 insertions, 12 deletions
diff --git a/static/style.css b/static/style.css index d8a8ff8..95244cb 100644 --- a/static/style.css +++ b/static/style.css @@ -59,6 +59,11 @@ main { width: min(800px, 100vw); } +h1 { + margin: 32px 16px; + padding: 0; +} + article.note { background: #fee4; border: 1px solid #3b005e44; @@ -67,15 +72,30 @@ article.note { padding: 16px; display: grid; grid-template-columns: max-content 1fr; - gap: 8px; + gap: 16px; img.authorAvatar { width: 64px; aspect-ratio: 1; } - .authorName { - font-weight: bold; + .infoLine { + display: grid; + grid-auto-columns: max-content 1fr max-content; + grid-auto-flow: column; + align-items: baseline; + margin-bottom: 4px; + gap: 8px; + + .authorName { + font-weight: bold; + } + .authorHandle, + .timestamp { + font-size: 10pt; + text-overflow: ellipsis; + overflow: hidden; + } } } diff --git a/templates/global_timeline.php b/templates/global_timeline.php index cdaac5e..bf91df0 100644 --- a/templates/global_timeline.php +++ b/templates/global_timeline.php @@ -2,7 +2,7 @@ global $notes; call_template('alertbox', [ 'variety' => 'info', - 'message' => 'This timeline shows all known public indexable notes' + 'message' => 'This timeline shows all known public indexable notes.' ]); foreach ($notes as $n) { call_template('note', ['note' => $n]); diff --git a/templates/local_timeline.php b/templates/local_timeline.php index a4624b5..f93300a 100644 --- a/templates/local_timeline.php +++ b/templates/local_timeline.php @@ -2,7 +2,7 @@ global $notes; call_template('alertbox', [ 'variety' => 'info', - 'message' => 'This timeline shows all public indexable notes posted by users on this server' + 'message' => 'This timeline shows all public indexable notes posted by users on this server.' ]); foreach ($notes as $n) { call_template('note', ['note' => $n]); diff --git a/templates/note.php b/templates/note.php index 93a22fd..9c4f609 100644 --- a/templates/note.php +++ b/templates/note.php @@ -1,12 +1,27 @@ +<?php +$fullHandle = $note->author->handle . ($note->author->isLocal ? '' : '@' . hostname_from_uri($note->author->uri)); +?> <article class="note"> - <picture> - <source srcset="<?= $note->author->avatar ?>"> - <img class="authorAvatar" src="/static/default-avatar.svg"> - </picture> + <a href="/@/<?= $fullHandle ?>"> + <picture> + <source srcset="<?= $note->author->avatar ?>"> + <img class="authorAvatar" src="/static/default-avatar.svg"> + </picture> + </a> <div> - <a class="authorName" <?= isset($note->author->homepage) ? 'href="' . $note->author->homepage . '"' : '' ?>> - <?= $note->author->displayName ?> - </a> + <div class="infoLine"> + <span class="authorName"><?= $note->author->displayName ?></span> + <span class="authorHandle">@<?= $fullHandle ?></span> + <span class="timestamp"> + <?= + $note->created->format('Y-m-d \a\t H:i') + . (isset($note->modified) && $note->modified != $note->created + ? ' (edited ' . $note->modified->format('Y-m-d \a\t H:i') . ')' + : '' + ) + ?> + </span> + </div> <div class="postContent"> <?= $note->getFormattedContent('text/html') ?? htmlspecialchars($note->plainContent) ?> </div> diff --git a/templates/skeleton.php b/templates/skeleton.php index 5e181b6..8a7fdf1 100644 --- a/templates/skeleton.php +++ b/templates/skeleton.php @@ -4,6 +4,7 @@ <head> <title><?= $pageTitle ?></title> <link rel="stylesheet" href="/static/style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> |