From a50e109043cfc0450867a88e0e00939e6c8ed97a Mon Sep 17 00:00:00 2001 From: Prospector <6166773+Prospector@users.noreply.github.com> Date: Sun, 6 Mar 2022 14:37:07 -0800 Subject: [PATCH] Some more cleanup to prepare for 2.1.0 release (#395) * Make syntax highlighting green match the brand color * Fix version filter control wrapping and not obeying snapshot filter * Fix checkbox hover state Closes #390 * Update components/ui/VersionFilterControl.vue Co-authored-by: Emma Pointer-Null * Fix missing hover and active states for various buttons Co-authored-by: Emma Pointer-Null --- assets/styles/components.scss | 19 ++++++++++ assets/styles/global.scss | 2 +- assets/styles/highlightjs.scss | 2 +- components/ui/Checkbox.vue | 24 +++++++++++++ components/ui/VersionFilterControl.vue | 50 +++++++++++++++----------- layouts/default.vue | 14 +++++--- pages/_type/_id.vue | 4 +++ pages/_type/_id/gallery.vue | 4 +++ 8 files changed, 93 insertions(+), 26 deletions(-) diff --git a/assets/styles/components.scss b/assets/styles/components.scss index 28cfad7e8..335c95a53 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -39,6 +39,12 @@ &:hover, &:focus-visible { background-color: var(--color-button-bg-hover); + color: var(--color-button-text-hover); + } + + &:active, { + background-color: var(--color-button-bg-active); + color: var(--color-button-text-active); } svg { @@ -464,6 +470,15 @@ background: var(--color-button-bg-hover); } } + + &.multiselect--disabled { + background: none; + + .multiselect__current, + .multiselect__select { + background: none; + } + } } label { @@ -584,6 +599,10 @@ label { background-color: var(--color-brand-hover); } + &:active { + background-color: var(--color-brand-active); + } + svg { width: 1.25rem; margin: auto; diff --git a/assets/styles/global.scss b/assets/styles/global.scss index 409483949..54a5db017 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -94,7 +94,7 @@ html { --color-bg-inverted: var(--color-text); --color-brand: #1bd96a; - --color-brand-hover: #30b366; + --color-brand-hover: #2de391; --color-brand-active: #55f5ae; --color-brand-inverted: #000; diff --git a/assets/styles/highlightjs.scss b/assets/styles/highlightjs.scss index 22bb8263e..6c9d77753 100644 --- a/assets/styles/highlightjs.scss +++ b/assets/styles/highlightjs.scss @@ -25,7 +25,7 @@ .hljs-quote, .hljs-template-tag, .hljs-deletion { - color: #06b800 + color: var(--color-brand) } .hljs-title, diff --git a/components/ui/Checkbox.vue b/components/ui/Checkbox.vue index d06d503ec..ad2c0350a 100644 --- a/components/ui/Checkbox.vue +++ b/components/ui/Checkbox.vue @@ -84,6 +84,30 @@ export default { padding: 0.2rem 0rem; margin: 0; } + + &:focus-visible, + &:hover { + color: var(--color-heading); + + button { + background-color: var(--color-button-bg-hover); + + &.checked { + background-color: var(--color-brand-hover); + } + } + } + &:active { + color: var(--color-text-dark); + + button { + background-color: var(--color-button-bg-active); + + &.checked { + background-color: var(--color-brand-active); + } + } + } } .checkbox { diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue index 0df58c167..ae98ccc7e 100644 --- a/components/ui/VersionFilterControl.vue +++ b/components/ui/VersionFilterControl.vue @@ -5,22 +5,29 @@ > @@ -68,19 +74,25 @@ export default { cachedValidVersions: null, cachedValidLoaders: null, selectedGameVersions: [], - selectedLoaders: [], + selectedLoader: this.getDefaultLoader(), } }, methods: { + getDefaultLoader() { + const loaders = this.getValidLoaders() + if (loaders.includes('fabric')) { + return 'fabric' + } else { + return loaders[0] + } + }, getValidVersions() { if (!this.cachedValidVersions) { - this.cachedValidVersions = this.$tag.gameVersions - .map((x) => x.version) - .filter((gameVer) => - this.versions.some((projVer) => - projVer.game_versions.includes(gameVer) - ) + this.cachedValidVersions = this.$tag.gameVersions.filter((gameVer) => + this.versions.some((projVer) => + projVer.game_versions.includes(gameVer.version) ) + ) } return this.cachedValidVersions }, @@ -104,10 +116,7 @@ export default { this.selectedGameVersions.some((gameVersion) => projectVersion.game_versions.includes(gameVersion) )) && - (this.selectedLoaders.length === 0 || - this.selectedLoaders.some((loader) => - projectVersion.loaders.includes(loader) - )) + projectVersion.loaders.includes(this.selectedLoader) ) this.$emit('updateVersions', temp) }, @@ -124,11 +133,12 @@ export default { flex-wrap: wrap; .multiselect { - flex-grow: 1; + flex: 1; + min-width: fit-content; } .checkbox-outer { - margin-bottom: 0 !important; + min-width: fit-content; } } diff --git a/layouts/default.vue b/layouts/default.vue index 38979da91..4e1f31956 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -533,12 +533,14 @@ export default { box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1); &:hover, - &:active { + &:focus-visible { background-color: var(--color-button-bg-hover); + color: var(--color-button-text-hover); + } - svg { - color: var(--color-button-text-hover); - } + &:active { + background-color: var(--color-button-bg-active); + color: var(--color-button-text-active); } svg { @@ -697,6 +699,10 @@ export default { &:focus { background-color: var(--color-brand-hover); } + + &:active { + background-color: var(--color-brand-active); + } } } } diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue index 81f3de959..5eee76fa3 100644 --- a/pages/_type/_id.vue +++ b/pages/_type/_id.vue @@ -891,6 +891,10 @@ export default { background-color: var(--color-brand-hover); } + &:active { + background-color: var(--color-brand-active); + } + svg { width: 1.5rem; margin: auto; diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue index 28ccf7402..b02beb71a 100644 --- a/pages/_type/_id/gallery.vue +++ b/pages/_type/_id/gallery.vue @@ -502,6 +502,10 @@ export default { &:hover { background-color: var(--color-brand-hover); } + + &:active { + background-color: var(--color-brand-active); + } } } }