From 22a7ae948f5ec558a776df9fb336aa3d1a8a5d67 Mon Sep 17 00:00:00 2001
From: Greg Sarjeant <1686767+gsarjeant@users.noreply.github.com>
Date: Sat, 31 May 2025 10:56:08 -0400
Subject: [PATCH] refine index layout. prep for user-specified timezones.
---
.gitignore | 4 +-
tkr/lib/ticks.php | 27 +++++++----
tkr/public/css/tkr.css | 101 ++++++++++++++++++++++++++++++++-------
tkr/public/index.php | 72 ++++++++++++++++------------
tkr/public/rss/index.php | 4 +-
5 files changed, 150 insertions(+), 58 deletions(-)
diff --git a/.gitignore b/.gitignore
index f894088..ba19952 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
+.vscode
+
*.sqlite
-*.txt
\ No newline at end of file
+*.txt
diff --git a/tkr/lib/ticks.php b/tkr/lib/ticks.php
index 5e84713..6ba3b85 100644
--- a/tkr/lib/ticks.php
+++ b/tkr/lib/ticks.php
@@ -3,12 +3,12 @@ require_once __DIR__ . '/../bootstrap.php';
function save_tick(string $tick): void {
// build the tick path and filename from the current time
- $date = new DateTime();
+ $now = new DateTime('now', new DateTimeZone('UTC'));
- $year = $date->format('Y');
- $month = $date->format('m');
- $day = $date->format('d');
- $time = $date->format('H:i:s');
+ $year = $now->format('Y');
+ $month = $now->format('m');
+ $day = $now->format('d');
+ $time = $now->format('H:i:s');
// build the full path to the tick file
$dir = TICKS_DIR . "/$year/$month";
@@ -39,10 +39,16 @@ function stream_ticks(int $limit, int $offset = 0): Generator {
file($file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES)
);
+ // split the path to the current file into the date components
$pathParts = explode('/', str_replace('\\', '/', $file));
- $date = $pathParts[count($pathParts) - 3] . '-' .
- $pathParts[count($pathParts) - 2] . '-' .
- pathinfo($pathParts[count($pathParts) - 1], PATHINFO_FILENAME);
+
+ // assign the different components to the appropriate part of the date
+ $year = $pathParts[count($pathParts) - 3];
+ $month = $pathParts[count($pathParts) - 2];
+ $day = pathinfo($pathParts[count($pathParts) - 1], PATHINFO_FILENAME);
+ // $date = $pathParts[count($pathParts) - 3] . '-' .
+ // $pathParts[count($pathParts) - 2] . '-' .
+ // pathinfo($pathParts[count($pathParts) - 1], PATHINFO_FILENAME);
foreach ($lines as $line) {
// just keep skipping ticks until we get to the starting point
@@ -57,8 +63,11 @@ function stream_ticks(int $limit, int $offset = 0): Generator {
$time = $tickParts[0];
$tick = $tickParts[1];
+ // Build the timestamp from the date and time
+ // Ticks are always stored in UTC
+ $timestampUTC = "$year-$month-$day $time";
yield [
- 'timestamp' => $date . ' ' . $time,
+ 'timestamp' => $timestampUTC,
'tick' => $tick,
];
diff --git a/tkr/public/css/tkr.css b/tkr/public/css/tkr.css
index d4bea56..78dea3c 100644
--- a/tkr/public/css/tkr.css
+++ b/tkr/public/css/tkr.css
@@ -1,34 +1,103 @@
@charset "UTF-8";
+body {
+ max-width: 940px;
+ margin: 0 auto;
+ padding: 1em;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ background-color: whitesmoke;
+ color: black;
+}
-body { font-family: sans-serif; margin: 2em; }
+/*
+ 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.
+*/
+.container {
+ display: grid;
+}
-.flex-container {
+/*
+ Responsive layout - adjusts from 1 to 2 columns based on screen width
+ min-width makes the mobile (stacked) view the default
+ 600px covers most mobile devices in portrait mode
+ Once the width exceeds that (e.g. desktops), it will convert to horizontal alignment
+*/
+@media (min-width: 600px) {
+ .container {
+ grid-template-columns: 1fr 2fr;
+ grid-gap: 2em;
+ }
+}
+
+.profile-row {
display: flex;
+ width: 100%;
+ gap: 0.5em;
}
-/* Responsive layout - makes a one column layout instead of a two-column layout */
-@media (max-width: 800px) {
- .flex-container {
+.tick-form {
+ display: flex;
flex-direction: column;
- }
+ width: 100%;
+ gap: 0.5em;
}
-.profile {
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 200px;
- order: 1;
+.tick-form textarea {
+ width: 100%;
+ box-sizing: border-box;
+ resize: none;
+ padding: 0.5em;
+ font-family: inherit;
+ font-size: 1em;
}
-.ticks {
- order: 2;
+.tick-form button {
+ align-self: flex-end;
}
-.tick { margin-bottom: 1em; }
+.mood-bar {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0.5em;
+}
-.ticktime { color: gray; font-size: 0.9em; }
+.admin-bar {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ box-sizing: border-box;
+ padding-top: 1em;
+ gap: 0.5em;
+}
-.ticktext {color: black; font-size: 1.0em; }
+.admin-right {
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+}
+
+.admin-bar a,
+.admin-bar span {
+ white-space: nowrap;
+}
+
+.tick {
+ margin-bottom: 1em;
+}
+
+.tick-time {
+ color: gray; font-size: 0.8em;
+}
+
+.tick-text {
+ color: black;
+ font-size: 1.0em;
+}
.pagination a { margin: 0 5px; text-decoration: none; }
diff --git a/tkr/public/index.php b/tkr/public/index.php
index 794779a..0baa4a5 100644
--- a/tkr/public/index.php
+++ b/tkr/public/index.php
@@ -28,47 +28,59 @@ $ticks = iterator_to_array(stream_ticks($limit, $offset));
- siteDescription ?>
-
-
-
+
+
-
+
+
+ siteDescription ?>
-
-
-
-
+
+
+
+
-
-
-
+