From d9221c7c8556680f10a4f619f4c3f99d220f4f30 Mon Sep 17 00:00:00 2001 From: Amolith Date: Mon, 6 Jun 2022 21:40:04 -0400 Subject: [PATCH] improve UX and un-break templates --- root.go | 2 +- templates/edit.html | 45 +++++++--------- templates/edit.html.license | 3 ++ templates/home_authenticated.html | 54 ++++++++++--------- templates/home_authenticated.html.license | 3 ++ templates/home_unauthenticated.html | 51 +++++++++--------- templates/home_unauthenticated.html.license | 3 ++ templates/login.html | 60 ++++++++++++++------- templates/login.html.license | 3 ++ 9 files changed, 127 insertions(+), 97 deletions(-) create mode 100644 templates/edit.html.license create mode 100644 templates/home_authenticated.html.license create mode 100644 templates/home_unauthenticated.html.license create mode 100644 templates/login.html.license diff --git a/root.go b/root.go index 1d4a32c223cbc3a1de853f020350b4b74c1fe926..174ecf384a75a97f55c669d7254fa2a91ea3cf2e 100644 --- a/root.go +++ b/root.go @@ -142,7 +142,7 @@ func (m model) genTable() string { table = table + fmt.Sprintf(`

%s

%s

- EditDelete + EditDelete `, k, v, k, url.QueryEscape(string(v)), k) return nil }) diff --git a/templates/edit.html b/templates/edit.html index 6fc71d5547eb641ddc5ebd56882ad62affe079da..91f7007e9b4b101f9da0826d4f6c19fb0c47f149 100644 --- a/templates/edit.html +++ b/templates/edit.html @@ -1,9 +1,3 @@ - - @@ -20,21 +14,23 @@ SPDX-License-Identifier: BSD-2-Clause height: 100%; margin: 0 auto; } + html * { + font-size: 16px; + } body { min-height: 100%; padding: 0; margin: 0 auto; display: flex; flex-direction: column; - justify-content: center; - max-width: 450px; + max-width: 580px; } .title { font-size: 50px; } form { margin: 0 auto; - width: min(300px, calc(70% + 100px)); + width: min(350px, calc(70% + 100px)); text-align: left; display: flex; justify-content: center; @@ -54,22 +50,21 @@ SPDX-License-Identifier: BSD-2-Clause display: flex; justify-content: space-between; } - details { - margin: 20px 0; - } - .link_info { - text-align: left; - } - table { - text-align: center; - } - tr:nth-child(even) { - background-color: #2B2B2B; - } td > p { - font-family: monospace; + .button { + background: #1C1C1C; + color: #DCDCDC; + border: solid 2px #DCDCDC; + border-radius: 5px; + padding: 7px; + margin: 8px; + text-decoration: none; + transition-duration: 0.2s; + cursor: pointer; } - td { - padding: 10px; + .button:hover { + background: #DCDCDC; + color: #1C1C1C; + border-color: #DCDCDC; } @@ -86,7 +81,7 @@ SPDX-License-Identifier: BSD-2-Clause - + diff --git a/templates/edit.html.license b/templates/edit.html.license new file mode 100644 index 0000000000000000000000000000000000000000..22d2ade25875cd632034e8039c69db50bd80bed7 --- /dev/null +++ b/templates/edit.html.license @@ -0,0 +1,3 @@ +SPDX-FileCopyrightText: 2022 Amolith + +SPDX-License-Identifier: CC0-1.0 diff --git a/templates/home_authenticated.html b/templates/home_authenticated.html index 9a79a5da78509339b419df48932642bbeab2aba1..0d2bf07af5afdd854453fcc6c8dfa0ea8e6fabea 100644 --- a/templates/home_authenticated.html +++ b/templates/home_authenticated.html @@ -1,9 +1,3 @@ - - @@ -20,21 +14,23 @@ SPDX-License-Identifier: BSD-2-Clause height: 100%; margin: 0 auto; } + html * { + font-size: 16px; + } body { min-height: 100%; padding: 0; margin: 0 auto; display: flex; flex-direction: column; - justify-content: center; - max-width: 450px; + max-width: 580px; } .title { font-size: 50px; } form { margin: 0 auto; - width: min(300px, calc(70% + 100px)); + width: min(350px, calc(70% + 100px)); text-align: left; display: flex; justify-content: center; @@ -54,14 +50,27 @@ SPDX-License-Identifier: BSD-2-Clause display: flex; justify-content: space-between; } - details { - margin: 20px 0; + .button { + background: #1C1C1C; + color: #DCDCDC; + border: solid 2px #DCDCDC; + border-radius: 5px; + padding: 7px; + margin: 8px; + text-decoration: none; + transition-duration: 0.2s; + cursor: pointer; } - .link_info { - text-align: left; + .button:hover { + background: #DCDCDC; + color: #1C1C1C; + border-color: #DCDCDC; } table { + margin-top: 50px; text-align: center; + overflow-x: scroll; + display: block; } tr:nth-child(even) { background-color: #2B2B2B; @@ -85,18 +94,13 @@ SPDX-License-Identifier: BSD-2-Clause - + -
- Shortened URLs - -
+ + + + + {{ . }} +
Short linkLong linkActions
diff --git a/templates/home_authenticated.html.license b/templates/home_authenticated.html.license new file mode 100644 index 0000000000000000000000000000000000000000..22d2ade25875cd632034e8039c69db50bd80bed7 --- /dev/null +++ b/templates/home_authenticated.html.license @@ -0,0 +1,3 @@ +SPDX-FileCopyrightText: 2022 Amolith + +SPDX-License-Identifier: CC0-1.0 diff --git a/templates/home_unauthenticated.html b/templates/home_unauthenticated.html index 273d4719873aeb29e7a8df28abd1ad06a732a950..1399e32753b332501691be787950a160ffe93258 100644 --- a/templates/home_unauthenticated.html +++ b/templates/home_unauthenticated.html @@ -1,9 +1,3 @@ - - @@ -12,29 +6,32 @@ SPDX-License-Identifier: BSD-2-Clause -

umu

+

umu

diff --git a/templates/home_unauthenticated.html.license b/templates/home_unauthenticated.html.license new file mode 100644 index 0000000000000000000000000000000000000000..22d2ade25875cd632034e8039c69db50bd80bed7 --- /dev/null +++ b/templates/home_unauthenticated.html.license @@ -0,0 +1,3 @@ +SPDX-FileCopyrightText: 2022 Amolith + +SPDX-License-Identifier: CC0-1.0 diff --git a/templates/login.html b/templates/login.html index 4b280e4f0087df37b6144f2cb7a08058cc2f82d6..22716b965fd71e1f6549ee3623b85bfedd78761d 100644 --- a/templates/login.html +++ b/templates/login.html @@ -1,9 +1,3 @@ - - @@ -14,46 +8,74 @@ SPDX-License-Identifier: BSD-2-Clause -

umu

+

umu

- - - +
Access token: + +
+
diff --git a/templates/login.html.license b/templates/login.html.license new file mode 100644 index 0000000000000000000000000000000000000000..22d2ade25875cd632034e8039c69db50bd80bed7 --- /dev/null +++ b/templates/login.html.license @@ -0,0 +1,3 @@ +SPDX-FileCopyrightText: 2022 Amolith + +SPDX-License-Identifier: CC0-1.0