From 65aac63eeb4d6fc35f4a9a568dbfc638e2b3faf2 Mon Sep 17 00:00:00 2001 From: hacki Date: Mon, 26 Feb 2024 01:24:05 +0100 Subject: [PATCH] made UI more consistent, fixed a bug --- .env | 2 +- front/_colors.scss | 4 +-- front/style.scss | 6 ++--- static/app.js | 2 +- static/index.html | 64 ++++++++++++++++++++++++++++++++++++++++++++++ static/style.css | 31 +++++++++++----------- 6 files changed, 87 insertions(+), 22 deletions(-) create mode 100644 static/index.html diff --git a/.env b/.env index a7c0978..c92e397 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ -PLAKKEN_LISTEN=:3000 +PLAKKEN_LISTEN=:5000 PLAKKEN_REDIS_ADDRESS=localhost:6379 PLAKKEN_REDIS_USER= PLAKKEN_REDIS_PASSWORD= diff --git a/front/_colors.scss b/front/_colors.scss index 6a09684..573d933 100644 --- a/front/_colors.scss +++ b/front/_colors.scss @@ -1,5 +1,5 @@ $accent: #d30f45; -$background: #09090b; +$background: #0f0f0f; $border: #363636; -$text: #f2f2f7; +$text: #e5e5e7; $placeholder: #888; \ No newline at end of file diff --git a/front/style.scss b/front/style.scss index 9397f15..3df0cd7 100644 --- a/front/style.scss +++ b/front/style.scss @@ -21,7 +21,7 @@ body { #line-numbers, #content { - font: 400 15px/1.6 "JetBrains Mono", monospace; + font: 400 14px/1.6 "JetBrains Mono", monospace; } #line-numbers { @@ -83,6 +83,7 @@ select { select { padding: 8px 10px; + width: fit-content; } select:focus { @@ -107,5 +108,4 @@ textarea { margin: 0; outline: none; resize: none; -} - +} \ No newline at end of file diff --git a/static/app.js b/static/app.js index 0e89f6a..1e7da49 100644 --- a/static/app.js +++ b/static/app.js @@ -11,7 +11,7 @@ function updateLn() { } function updateTitle() { - document.title = filenameSelector.value == '' ? 'New paste' : ` *${filenameSelector.value} - Plakken`; + document.title = filenameSelector.value == '' ? 'New paste' : ` ${filenameSelector.value} (Unsaved) - Plakken`; } function getRecentPlaksFromStorage() { diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..5c03c25 --- /dev/null +++ b/static/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + New paste + + + + + +
+
1
+ +
+
+ + + + + +
+
+
+

Recent plaks

+ + + +
+
+ + + \ No newline at end of file diff --git a/static/style.css b/static/style.css index 41531dd..c8031a4 100644 --- a/static/style.css +++ b/static/style.css @@ -36,7 +36,7 @@ section#recent-plaks .recent-plak svg { cursor: pointer; height: 22px; padding: 5px; - stroke: #f2f2f7; + stroke: #e5e5e7; stroke-width: 2.25; width: 22px; transition: 0.1s ease-in-out; @@ -58,7 +58,7 @@ h3 { ::selection { background-color: #d30f45; - color: #f2f2f7; + color: #e5e5e7; } ::-webkit-scrollbar { @@ -66,7 +66,7 @@ h3 { } ::-webkit-scrollbar-track { - background-color: #09090b; + background-color: #0f0f0f; } ::-webkit-scrollbar-thumb { @@ -75,12 +75,12 @@ h3 { } ::-webkit-scrollbar-thumb:hover { - background-color: #f2f2f7; + background-color: #e5e5e7; } body { - background-color: #09090b; - color: #f2f2f7; + background-color: #0f0f0f; + color: #e5e5e7; font: 400 16px/2 "Inter", "system-ui", sans-serif; margin: 0; overflow-x: hidden; @@ -93,7 +93,7 @@ body { #line-numbers, #content { - font: 400 15px/1.6 "JetBrains Mono", monospace; + font: 400 14px/1.6 "JetBrains Mono", monospace; } #line-numbers { @@ -105,7 +105,7 @@ body { } #content { - color: #f2f2f7; + color: #e5e5e7; height: 100%; min-height: 90vh; padding: 16px 16px 0 16px; @@ -123,16 +123,16 @@ body { height: 24px; fill: none; margin-bottom: -6px; - stroke: #f2f2f7; + stroke: #e5e5e7; stroke-width: 2; width: 24px; } input, select { - background-color: #09090b; + background-color: #0f0f0f; border: 2px solid #363636; - color: #f2f2f7; + color: #e5e5e7; font: 500 14px/2 "Inter", "system-ui", sans-serif; outline: none; padding: 3px 10px; @@ -154,20 +154,21 @@ select:focus-visible { select { padding: 8px 10px; + width: fit-content; } select:focus { - background-color: #09090b; + background-color: #0f0f0f; transition: none; } option { - background-color: #09090b; - color: #f2f2f7; + background-color: #0f0f0f; + color: #e5e5e7; } option:focus { background-color: #d30f45; - color: #09090b; + color: #0f0f0f; } button,