From ac690f2fb2b7efd6072c2651256a46bd1e6ff24e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 21:09:18 +0200 Subject: [PATCH] WIP --- view/static/main.css | 82 +++++++++++++++++++++++++++++++++++---- view/templates/index.html | 63 +++++++++++++++--------------- 2 files changed, 106 insertions(+), 39 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index a508865..962dd81 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -1,6 +1,12 @@ :root { - --border-color: hsl(0 0% 90%); - --accent-color: red; + --border-color: hsl(0 0% 80%); + --accent-color: blue; + --color-muted: hsl(0 0% 50%); + --radius-m: 0.5em; + --font-size-m: 1rem; + --font-size-s: 0.85rem; + --font-size-xs: 0.75rem; + --font-size-l: 1.25rem; } html { @@ -68,6 +74,10 @@ body { padding: 0 2rem; } +ins { + background-color: green; +} + table, th, tr, @@ -79,13 +89,71 @@ td { list-style-type: none; padding: 0; display: flex; + + & .page-link { + display: block; + padding: 0.5em 1em; + } + + & .page-item.active { + background-color: var(--accent-color); + } } -.page-link { - display: block; - padding: 0.5em 1em; +.changeset { + padding: 1rem 1.5rem; + border: 1px solid var(--border-color); + border-radius: var(--radius-m); + margin-bottom: 1rem; + box-shadow: 0 2px 0 hsl(0 0% 50% / 20%); } -.page-item.active { - background-color: var(--accent-color); +.changeset-actions { + display: flex; + gap: 1rem; + margin-bottom: 0.75rem; +} + +.changeset-feed-name, +.changeset-time, +.changeset-action { + font-weight: 500; + font-size: var(--font-size-s); +} + +.changeset-feed-name, +.changeset-time { + /* color: var(--color-muted); */ +} + +.changeset-action { + display: inline-flex; + align-items: center; + gap: 0.5em; + font-weight: 500; + color: var(--color-muted); + text-decoration: none; + transition: color 200ms; +} + +.changeset-action:first-of-type { + margin-left: 0.5em; +} + +.changeset-action:hover { + color: var(--accent-color); +} + +.changeset-title { + font-size: var(--font-size-l); +} + +.changeset svg { + display: inline-block; + fill: currentColor; + width: 1.25em; +} + +.changeset details[open] summary { + margin-bottom: 1rem; } diff --git a/view/templates/index.html b/view/templates/index.html index a9012d5..f056ee1 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -18,38 +18,37 @@ >Hledat -
- - - - - - - - - - - - {% for diff in diffs %} - - - - - - - - {% endfor %} - -
Detection timeSourceDiffOriginalChanged
{{ diff.diff_time }} - {{ diff.feed_name }} - {{ diff.diff_html|safe }} - {{ diff.title_orig }} - - {{ diff.title_new}} -
-
+ + {% for diff in diffs %} +
+

+ {{ diff.feed_name }} + + + + Display article + + + + Show change history + +

+
+ + {{ diff.diff_html|safe }} + +

+ Old: + {{ diff.title_orig }} +

+

+ New: + {{ diff.title_new }} +

+
+
+ {% endfor %} + {{ pagination.links }} {{ pagination.info }}