From 1d3fcc9d1dfca86c375f98c4e0e3e21bf1947d85 Mon Sep 17 00:00:00 2001 From: Prospector Date: Mon, 7 Mar 2022 21:39:14 -0800 Subject: [PATCH 1/8] Redo gallery controls --- pages/_type/_id/gallery.vue | 146 +++++++++++++++++++++++------------- 1 file changed, 95 insertions(+), 51 deletions(-) diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index b02beb71a7..7b6f8b0770 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -6,10 +6,6 @@ @click="expandedGalleryItem = null" >
- - -
-
-

- {{ expandedGalleryItem.title }} -

-

- {{ expandedGalleryItem.description }} -

-
- -
- - +
+

+ {{ expandedGalleryItem.title }} +

+
+
+ + + + + +
@@ -222,6 +231,7 @@ import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?inline' import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg?inline' import EditIcon from '~/assets/images/utils/edit.svg?inline' import CheckIcon from '~/assets/images/utils/check.svg?inline' +import ExternalIcon from '~/assets/images/utils/external.svg?inline' import SmartFileInput from '~/components/ui/SmartFileInput' import Checkbox from '~/components/ui/Checkbox' @@ -238,6 +248,7 @@ export default { CrossIcon, RightArrowIcon, LeftArrowIcon, + ExternalIcon, }, auth: false, beforeRouteLeave(to, from, next) { @@ -272,6 +283,22 @@ export default { fetch() { this.gallery = JSON.parse(JSON.stringify(this.project.gallery)) }, + mounted() { + this._keyListener = function (e) { + if (this.expandedGalleryItem) { + e.preventDefault() + if (e.key === 'Escape') { + this.expandedGalleryItem = null + } else if (e.key === 'ArrowLeft') { + this.previousImage() + } else if (e.key === 'ArrowRight') { + this.nextImage() + } + } + } + + document.addEventListener('keydown', this._keyListener.bind(this)) + }, methods: { showPreviewImage(files, index) { const reader = new FileReader() @@ -399,44 +426,20 @@ export default { .content { position: relative; - width: auto; - height: auto; - max-height: 96vh; - max-width: 96vw; - background-color: var(--color-raised-bg); - overflow: auto; - border-radius: var(--size-rounded-card); - display: flex; - flex-direction: column; - - .close { - position: absolute; - top: 0.5rem; - right: 0.5rem; - } - - .next { - top: 20rem; - right: 0.5rem; - } - - .previous { - top: 20rem; - left: 0.5rem; - } + width: calc(100vw - 2 * var(--spacing-card-lg)); + height: calc(100vh - 2 * var(--spacing-card-lg)); .circle-button { padding: 0.5rem; line-height: 1; display: flex; max-width: 2rem; - background-color: var(--color-raised-bg); + background-color: var(--color-button-bg); border-radius: var(--size-rounded-max); margin: 0 0.5rem 0 0; box-shadow: inset 0px -1px 1px rgb(17 24 39 / 10%); - &:hover, - &:active { + &:hover { background-color: var(--color-button-bg-hover) !important; svg { @@ -444,6 +447,14 @@ export default { } } + &:active { + background-color: var(--color-button-bg-active) !important; + + svg { + color: var(--color-button-text-active) !important; + } + } + svg { height: 1rem; width: 1rem; @@ -451,12 +462,45 @@ export default { } .image { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); object-fit: contain; - max-height: 80vh; - max-width: 80vw; + max-width: calc(100vw - 2 * var(--spacing-card-lg)); + max-height: calc(100vh - 2 * var(--spacing-card-lg)); + border-radius: var(--size-rounded-card); + overflow: hidden; + } + + .floating { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + bottom: var(--spacing-card-md); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-card-sm); + + h2 { + margin-bottom: 0.25rem; + font-size: 1.25rem; + text-shadow: 1px 1px 10px #000000d4; + } + .controls { + background-color: var(--color-raised-bg); + padding: var(--spacing-card-md); + border-radius: var(--size-rounded-card); + } } .footer { + position: absolute; + left: calc(var(--spacing-card-lg)); + top: calc(var(--spacing-card-lg)); + width: calc(100vh - 2 * var(--spacing-card-lg)); + z-index: 100; display: flex; flex-direction: row; margin: 0.5rem 0.75rem 0.75rem 0.75rem; From 733f8925467b72c0260c04c2e59e708a724bddea Mon Sep 17 00:00:00 2001 From: Prospector Date: Mon, 7 Mar 2022 21:41:15 -0800 Subject: [PATCH 2/8] Remove old css --- pages/_type/_id/gallery.vue | 37 ------------------------------------- 1 file changed, 37 deletions(-) diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index 7b6f8b0770..3664bfe08f 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -494,43 +494,6 @@ export default { border-radius: var(--size-rounded-card); } } - - .footer { - position: absolute; - left: calc(var(--spacing-card-lg)); - top: calc(var(--spacing-card-lg)); - width: calc(100vh - 2 * var(--spacing-card-lg)); - z-index: 100; - display: flex; - flex-direction: row; - margin: 0.5rem 0.75rem 0.75rem 0.75rem; - - .buttons { - display: flex; - flex-direction: row; - flex-grow: 0; - align-items: center; - - .circle-button { - background-color: var(--color-button-bg); - } - } - - .description { - flex-grow: 1; - width: min-content; - - h2 { - margin-bottom: 0.25rem; - font-size: 1.25rem; - } - - p { - margin: 0; - font-size: 1rem; - } - } - } } } From c689710e79584306110f83d83dd5b44fc2479501 Mon Sep 17 00:00:00 2001 From: Prospector Date: Mon, 7 Mar 2022 22:36:36 -0800 Subject: [PATCH 3/8] Geo's fixes to the gallery --- pages/_type/_id/gallery.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index 3664bfe08f..3ed3bb2fcc 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -466,11 +466,9 @@ export default { left: 50%; top: 50%; transform: translate(-50%, -50%); - object-fit: contain; - max-width: calc(100vw - 2 * var(--spacing-card-lg)); - max-height: calc(100vh - 2 * var(--spacing-card-lg)); + width: auto; + height: calc(100vh - 2 * var(--spacing-card-lg)); border-radius: var(--size-rounded-card); - overflow: hidden; } .floating { From 46bc3e72afadfeb1f4079b191c751d1e76dc7ea5 Mon Sep 17 00:00:00 2001 From: Prospector Date: Tue, 8 Mar 2022 09:07:08 -0800 Subject: [PATCH 4/8] Fix filters not updating when clearing them --- components/ui/VersionFilterControl.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue index b141596d6a..e9b0277843 100644 --- a/components/ui/VersionFilterControl.vue +++ b/components/ui/VersionFilterControl.vue @@ -58,6 +58,7 @@ @click=" selectedLoader = getDefaultLoader() selectedGameVersions = [] + updateVersionFilters() " > From e9c5366ecf8ba38e912f00925e77d63c48d402a9 Mon Sep 17 00:00:00 2001 From: Prospector Date: Tue, 8 Mar 2022 09:10:47 -0800 Subject: [PATCH 5/8] Add max width to expanded images --- pages/_type/_id/gallery.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index 3ed3bb2fcc..c0750142cf 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -468,6 +468,7 @@ export default { transform: translate(-50%, -50%); width: auto; height: calc(100vh - 2 * var(--spacing-card-lg)); + max-width: calc(100vw - 2 * var(--spacing-card-lg)); border-radius: var(--size-rounded-card); } From 57b25d6c54bdb1c6c636eb0ee12145ede5d89f74 Mon Sep 17 00:00:00 2001 From: Prospector Date: Tue, 8 Mar 2022 09:16:08 -0800 Subject: [PATCH 6/8] Center text as it gets super long --- pages/_type/_id/gallery.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index c0750142cf..df755eccf7 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -486,6 +486,7 @@ export default { margin-bottom: 0.25rem; font-size: 1.25rem; text-shadow: 1px 1px 10px #000000d4; + text-align: center; } .controls { background-color: var(--color-raised-bg); From e2eed81c3dfbde6076251e37b3a04178f1590c16 Mon Sep 17 00:00:00 2001 From: Prospector Date: Tue, 8 Mar 2022 09:26:50 -0800 Subject: [PATCH 7/8] Object-fit: cover --- pages/_type/_id/gallery.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index df755eccf7..32eb24f069 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -462,6 +462,7 @@ export default { } .image { + object-fit: cover; position: absolute; left: 50%; top: 50%; From 04a98d997d39dc9c97973df0c7b7acdbc00a75e4 Mon Sep 17 00:00:00 2001 From: Prospector Date: Tue, 8 Mar 2022 09:32:36 -0800 Subject: [PATCH 8/8] =?UTF-8?q?Fix=20extra=20margin=20=F0=9F=98=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/_type/_id/gallery.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index 32eb24f069..de38ec5aa3 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -436,9 +436,13 @@ export default { max-width: 2rem; background-color: var(--color-button-bg); border-radius: var(--size-rounded-max); - margin: 0 0.5rem 0 0; + margin: 0; box-shadow: inset 0px -1px 1px rgb(17 24 39 / 10%); + &:not(:last-child) { + margin-right: 0.5rem; + } + &:hover { background-color: var(--color-button-bg-hover) !important;