From 3fcb100199d6e17cd49a300cad7c82cb6c7f9820 Mon Sep 17 00:00:00 2001 From: Elias Schriefer Date: Mon, 8 Jul 2024 01:25:07 +0200 Subject: [PATCH] Add common button styling --- src/main/resources/static/add.css | 45 +---------- src/main/resources/static/buttons.css | 106 +++++++++++++++++++++++++ src/main/resources/static/details.css | 40 +--------- src/main/resources/static/details.html | 12 +-- src/main/resources/static/details.js | 59 +++++++------- src/main/resources/static/index.html | 14 ++-- src/main/resources/static/main.css | 74 ++++++----------- 7 files changed, 174 insertions(+), 176 deletions(-) create mode 100644 src/main/resources/static/buttons.css diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css index ffdc542..07fe2cb 100644 --- a/src/main/resources/static/add.css +++ b/src/main/resources/static/add.css @@ -43,7 +43,7 @@ form :is(input[type=text], input[type=url], textarea) { outline: 2px solid var(--accent-color); } -.btn, #is-dataset-toggle { +#is-dataset-toggle { transition: outline ease-in 100ms; } @@ -150,51 +150,10 @@ form :has(#url) { } /* button styling */ -.btn { - padding: .5lh 1lh; - border: none; - border-radius: .5lh; - --btn-color: var(--fg-color); - background-color: var(--btn-color); - color: var(--text-color); - font-weight: bold; - font-size: 1rem; - transition: background-color 100ms, filter 200ms; - transition-timing-function: ease-out; - --drop-shadow-opacity: .5; - --drop-shadow-offset-y: 0; - --drop-shadow-blur: .25rem; - --drop-shadow: drop-shadow( - rgba(0, 0, 0, var(--drop-shadow-opacity)) - 0 var(--drop-shadow-offset-y) var(--drop-shadow-blur) - ); - filter: var(--drop-shadow); -} - -.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle { +#is-dataset:focus-visible + #is-dataset-toggle { outline-offset: 2px; } -.btn:not(:disabled):hover { - background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color)); - --drop-shadow-opacity: .8; - --drop-shadow-offset-y: .25rem; - --drop-shadow-blur: .4rem; -} - -.btn.suggested { - --btn-color: var(--accent-color); -} - -.btn:disabled { - filter: var(--drop-shadow) grayscale(.5) brightness(.5); -} - -.btn.full-width { - width: -moz-available; - width: -webkit-fill-available; -} - #category[value="new"] { display: none; } diff --git a/src/main/resources/static/buttons.css b/src/main/resources/static/buttons.css new file mode 100644 index 0000000..a01cbd8 --- /dev/null +++ b/src/main/resources/static/buttons.css @@ -0,0 +1,106 @@ +.btn { + padding: .5lh 1lh; + border: none; + border-radius: .5lh; + + --btn-color: var(--fg-color); + /* color: var(--text-color); */ + background-color: var(--btn-color); + + font-weight: bold; + font-size: 1rem; + + --transition-duration-short: 50ms; + --transition-duration-medium: 100ms; + --transition-duration-long: 200ms; + --transition-duration-bg-color: var(--transition-duration-medium); + --transition-duration-filter: var(--transition-duration-long); + --transition-duration-outline: var(--transition-duration-medium); + transition: + background-color ease-out var(--transition-duration-bg-color), + filter ease-out var(--transition-duration-filter), + outline ease-in var(--transition-duration-outline); + + --drop-shadow-opacity: .5; + --drop-shadow-offset-y: 0; + --drop-shadow-blur: .25rem; + filter: var(--filter); + --filter: + brightness(var(--brightness, 1)) + grayscale(var(--grayscale, 0)); + cursor: pointer; + + &:not(.flat) { + --drop-shadow: drop-shadow( + rgba(0, 0, 0, var(--drop-shadow-opacity)) + 0 var(--drop-shadow-offset-y) var(--drop-shadow-blur) + ); + + @supports (color: rgb(from black r g b / 0.5)) { + --drop-shadow: drop-shadow( + rgba(from var(--bg-color) r g b / var(--drop-shadow-opacity)) + 0 var(--drop-shadow-offset-y) var(--drop-shadow-blur) + ); + } + + filter: var(--filter) var(--drop-shadow); + } + + &:not(:disabled):not(.flat):hover { + background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color)); + --drop-shadow-opacity: .8; + --drop-shadow-offset-y: .25rem; + --drop-shadow-blur: .4rem; + } + + &:where(:disabled) { + --brightness: .5; + --grayscale: .5; + } + + &.suggested:not(.destructive) { + --btn-color: var(--accent-color); + } + + &.destructive:not(.suggested) { + --btn-color: #861c1c; + } + + &:focus-visible { + outline-offset: 2px; + } + + &.icon { + --text-color: transparent; + background: var(--icon-url) no-repeat; + background-size: contain; + overflow: hidden; + width: var(--icon-size, 1rem); + height: var(--icon-size, 1rem); + } + + &.flat { + border-radius: 0; + padding: 0; + --transition-duration-filter: var(--transition-duration-short); + + &:not(:disabled) { + &:hover, &:focus-visible { + --brightness: 1.5; + } + + &:active { + --brightness: 1.75; + } + } + } + + /* + This class is just a hint, so this is on a best-effort basis. + If it works, it works, if not, then not. + */ + &.full-width { + width: -moz-available; + width: -webkit-fill-available; + } +} diff --git a/src/main/resources/static/details.css b/src/main/resources/static/details.css index 92d1372..18f1083 100644 --- a/src/main/resources/static/details.css +++ b/src/main/resources/static/details.css @@ -1,4 +1,4 @@ -@import url("./main.css"); +@import url("main.css"); @import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap'); :root { @@ -226,44 +226,6 @@ a { display: flex; } -#delete-btn { - background: #861c1c; -} - -/* button styling to be revisited */ -.btn { - padding: .5lh 1lh; - border: none; - border-radius: .5lh; - --btn-color: var(--fg-color); - background-color: var(--btn-color); - color: var(--text-color); - font-weight: bold; - font-size: 1rem; - transition: background-color 100ms, filter 200ms; - transition-timing-function: ease-out; - --drop-shadow-opacity: .5; - --drop-shadow-offset-y: 0; - --drop-shadow-blur: .25rem; - --drop-shadow: drop-shadow( - rgba(0, 0, 0, var(--drop-shadow-opacity)) - 0 var(--drop-shadow-offset-y) var(--drop-shadow-blur) - ); - filter: var(--drop-shadow); -} - -.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle { - outline-offset: 2px; -} - -.btn:not(:disabled):hover { - background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color)); - --drop-shadow-opacity: .8; - --drop-shadow-offset-y: .25rem; - --drop-shadow-blur: .4rem; -} - - #nothing-found-bg { background-position-x: calc(50% + 3cqh); } diff --git a/src/main/resources/static/details.html b/src/main/resources/static/details.html index ff27926..9d14c0b 100644 --- a/src/main/resources/static/details.html +++ b/src/main/resources/static/details.html @@ -13,9 +13,9 @@ @@ -29,9 +29,9 @@ https://example.com/dataset @@ -60,8 +60,8 @@

- - + +
diff --git a/src/main/resources/static/details.js b/src/main/resources/static/details.js index 3f80529..9a5cc97 100644 --- a/src/main/resources/static/details.js +++ b/src/main/resources/static/details.js @@ -18,25 +18,20 @@ const deleteButton = document.getElementById("delete-btn"); let dataset = null; let currentRating = 0; -let isRated = false; const currentLocation = new URL(location.href); if (currentLocation.searchParams.has("id")) { const id = currentLocation.searchParams.get("id"); - const response = await fetch(`${currentLocation.origin}/api/v1/datasets/id/${id}`); + const response = await fetch(`/api/v1/datasets/id/${id}`); if (response.ok) { const data = await response.json(); dataset = new Dataset(data); const upvoteComponent = dataset.createUpvoteComponent(); - console.log(dataset.storageGet()); - debugger if (dataset.storageGetKey("created-locally", false)) { deleteButton.classList.remove("hidden"); } - isRated = dataset.storageGetKey("is-rated", false) - title.innerText = dataset.title; title.dataset.type = dataset.type.toLowerCase(); @@ -74,20 +69,21 @@ backButton.addEventListener("click", () => { window.location.href = location.origin; }) -deleteButton.addEventListener("click", () => { +deleteButton.addEventListener("click", async () => { if (dataset != null) { - fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id, { - method: 'DELETE' - }).then(resp => { - if (resp.ok) { - window.location.href = location.origin; - } - }); + const response = await fetch( + `/api/v1/datasets/id/${dataset.id}`, + { method: 'DELETE' } + ); + + if (response.ok) { + window.location.href = location.origin; + } } }); rating.addEventListener("mousemove", (event) => { - if (!isRated) { + if (!dataset.storageGetKey("is-rated", false)) { let bounds = rating.getBoundingClientRect(); currentRating = Math.round(((event.clientX - bounds.left) / bounds.width) * 5); console.log(currentRating); @@ -100,22 +96,21 @@ rating.addEventListener("mouseleave", () => { rating.value = dataset.rating; }); -rating.addEventListener("click", () => { - if (!isRated) { - fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id + "/stars?stars=" + currentRating, { - method: 'PUT' - }).then(resp => { - if (resp.ok) { - dataset.storageSetKey("is-rated", true); - isRated = true; - fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id) - .then(resp => resp.json()) - .then((data) => { - dataset = new Dataset(data); - ratingText.innerText = parseFloat(dataset.rating).toFixed(1); - rating.value = dataset.rating; - }); - } - }); +rating.addEventListener("click", async () => { + if (!dataset.storageGetKey("is-rated", false)) { + const starsResponse = await fetch( + `/api/v1/datasets/id/${dataset.id}/stars?stars=${currentRating}`, + { method: 'PUT' } + ); + + if (starsResponse.ok) { + dataset.storageSetKey("is-rated", true); + const response = await fetch(`/api/v1/datasets/id/${dataset.id}`); + const data = await response.json(); + + dataset = new Dataset(data); + ratingText.innerText = parseFloat(dataset.rating).toFixed(1); + rating.value = dataset.rating; + } } }) diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html index 88979c4..07cd93d 100644 --- a/src/main/resources/static/index.html +++ b/src/main/resources/static/index.html @@ -13,7 +13,7 @@ -
+

Welcome to DataDash

@@ -29,16 +29,16 @@
- - Sort by @@ -51,7 +51,7 @@
- Filter @@ -61,7 +61,7 @@ - +
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/main.css index a642afd..e755baf 100644 --- a/src/main/resources/static/main.css +++ b/src/main/resources/static/main.css @@ -1,3 +1,5 @@ +@import url("buttons.css"); + :root { --bg-color: #222; --fg-color: #555; @@ -13,11 +15,17 @@ --corner-radius: 1rem; font-size: 12pt; font-family: sans-serif; + scrollbar-gutter: stable both-edges; + scrollbar-color: var(--fg-color) var(--bg-color); +} + +* { + color: var(--text-color, white); } body { background-color: var(--bg-color, black); - color: var(--text-color, white); + /* color: var(--text-color, white); */ margin: 0; } @@ -34,18 +42,22 @@ header { } #add-btn { - width: 7rem; - height: 7rem; + --icon-size: 7rem; + --icon-url: linear-gradient(135deg, pink, darkblue); content: url("add-button-mask.svg"); - background: linear-gradient(135deg, pink, darkblue); clip-path: polygon(0% 0%, 100% 0%, 0% 100%); - - cursor: pointer; - position: fixed; top: 0; left: 0; z-index: 1; + + &:hover, &:focus-visible { + --brightness: 1.2; + } + + &:active { + --brightness: 1.3; + } } #tool-bar { @@ -131,29 +143,13 @@ header { } /* Buttons */ -.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn { - background: var(--icon-url) no-repeat; - background-size: contain; - border: none; - width: var(--icon-size); - height: var(--icon-size); - padding: 0; - overflow: hidden; - color: transparent; - cursor: pointer; -} - -.downvote-btn, .upvote-btn{ +.downvote-btn, .upvote-btn { --icon-url: url(triangle.svg); --icon-size: 2rem; -} -:is(.downvote-btn, .upvote-btn):disabled { - filter: brightness(1.75); -} - -:is(.downvote-btn, .upvote-btn).isVoted { - filter: brightness(1.1); + &:disabled { + --brightness: 1.75; + } } .downvote-btn { @@ -162,22 +158,18 @@ header { #search-btn { --icon-url: url(looking-glass.svg); - --icon-size: 1rem; } #filter-btn { --icon-url: url(filter.svg); - --icon-size: 1rem; } #reset-tools-btn { --icon-url: url(reset.svg); - --icon-size: 1rem; } #sort-btn { --icon-url: url(sort.svg); - --icon-size: 1rem; } .divider { @@ -186,24 +178,8 @@ header { background-color: var(--bg-color); } -#add-btn:is(:hover, :focus-visible) { - filter: brightness(1.2); -} - -#add-btn:active { - filter: brightness(1.3); -} - -.btn.flat { - transition: filter ease-out 50ms; -} - -.btn.flat:is(:hover, :focus-visible):not(:disabled) { - filter: brightness(1.5); -} - -.btn.flat:active:not(:disabled){ - filter: brightness(1.75); +:is(.upvote-btn, .downvote-btn).isVoted { + --brightness: 1.1; } select * {