From 1f133dbcd07d9b93e785820480086ec34ab886fb Mon Sep 17 00:00:00 2001 From: Geometrically <18202329+Geometrically@users.noreply.github.com> Date: Thu, 29 Dec 2022 09:59:41 -0700 Subject: [PATCH] Datapack support (#815) * Shader support PR * Make search page work * Fix env showing * Make moderation look reasonable * Fix search for shaders * Datapack support * Make file types work + datapack inferring * Add editing to file types * Finish datapack file generation * Fix bugs, make forge support work * Fix inconsistent data pack label * Final fixes --- assets/styles/components.scss | 89 ++++-- assets/styles/global.scss | 52 ++-- components/ui/DropArea.vue | 9 +- components/ui/ModalCreation.vue | 4 + components/ui/ProjectCard.vue | 18 +- components/ui/search/Categories.vue | 3 +- layouts/default.vue | 29 +- nuxt.config.js | 7 +- pages/_type/_id.vue | 23 +- pages/_type/_id/edit.vue | 6 +- pages/_type/_id/gallery.vue | 5 +- pages/_type/_id/version.vue | 447 +++++++++++++++++++++++----- pages/about.vue | 98 ------ pages/moderation.vue | 2 +- pages/search.vue | 31 +- pages/search/datapacks.vue | 11 + pages/settings/index.vue | 1 + pages/user/_id.vue | 44 ++- plugins/fileUtils.js | 315 +++++++++++++++++++- plugins/shorthands.js | 39 ++- store/cosmetics.js | 1 + store/tag.js | 6 + 22 files changed, 978 insertions(+), 262 deletions(-) delete mode 100644 pages/about.vue create mode 100644 pages/search/datapacks.vue diff --git a/assets/styles/components.scss b/assets/styles/components.scss index e194e2d1..975d0f94 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -85,7 +85,14 @@ border-bottom: 1px solid var(--color-header-underline); } - h1, h2, h3, h4, h5, h6, li, p { + h1, + h2, + h3, + h4, + h5, + h6, + li, + p { word-wrap: break-word; overflow-wrap: anywhere; } @@ -227,11 +234,17 @@ margin-bottom: 0 !important; } + iframe, + video { + aspect-ratio: 16 / 9; + width: 850px; + height: auto; + } + @media screen and (max-width: 850px) { - iframe { - aspect-ratio: 16 / 9; + iframe, + video { width: 100%; - height: auto; } } } @@ -332,8 +345,8 @@ } .button-animation { - transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out, - outline 0.2s ease-in-out; + transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, + transform 0.05s ease-in-out, outline 0.2s ease-in-out; &:active:not(&:disabled) { transform: scale(0.95); @@ -403,8 +416,8 @@ tr.button-transparent { } .button-within { - transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out, - outline 0.2s ease-in-out; + transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, + transform 0.05s ease-in-out, outline 0.2s ease-in-out; &:focus-visible:not(&.disabled), &:hover:not(&.disabled) { @@ -541,6 +554,11 @@ tr.button-transparent { --text-color: var(--color-brand-inverted); } +.alt-brand-button { + --background-color: var(--color-brand-highlight); + --text-color: var(--color-text); +} + .button-group { display: flex; grid-gap: var(--spacing-card-sm); @@ -563,6 +581,15 @@ tr.button-transparent { } .multiselect { + &.raised-multiselect { + .multiselect__tags, + .multiselect__content-wrapper, + .multiselect__spinner { + background-color: var(--color-raised-bg); + box-shadow: none; + } + } + color: var(--color-text) !important; outline: 2px solid transparent; @@ -584,7 +611,7 @@ tr.button-transparent { padding-left: 7px; padding-top: 10px; - transition: background-color .1s ease-in-out; + transition: background-color 0.1s ease-in-out; &:active { background: var(--color-button-bg-hover); @@ -790,7 +817,7 @@ tr.button-transparent { display: flex; flex-direction: column; align-items: flex-end; - grid-gap: .5rem; + grid-gap: 0.5rem; z-index: 2; } @@ -929,7 +956,10 @@ h1 { font-weight: bold; } -.nuxt-link-exact-active, h1, h2, h3 { +.nuxt-link-exact-active, +h1, +h2, +h3 { .beta-badge { background-color: var(--color-button-text-active); box-sizing: border-box; @@ -939,7 +969,8 @@ h1 { } @media (prefers-reduced-motion) { - .button-animation, button { + .button-animation, + button { transform: none !important; } } @@ -965,7 +996,7 @@ h1 { display: flex; flex-direction: column; align-items: flex-end; - grid-gap: .5rem; + grid-gap: 0.5rem; z-index: 2; } @@ -986,7 +1017,8 @@ h1 { } .universal-labels { - label, .label { + label, + .label { .label__title { display: block; margin-block: var(--spacing-card-md) var(--spacing-card-sm); @@ -1074,13 +1106,16 @@ h1 { } .input-group { - .multiselect, input { + .multiselect, + input { width: auto; flex-basis: 0; } } - button, .button, .iconified-button { + button, + .button, + .iconified-button { width: fit-content; } @@ -1095,12 +1130,14 @@ h1 { } } - .adjacent-input, &.adjacent-input { + .adjacent-input, + &.adjacent-input { display: flex; flex-direction: row; align-items: center; - .iconified-button, .input-group { + .iconified-button, + .input-group { flex-shrink: 0; } @@ -1152,7 +1189,9 @@ h1 { } .full-width-inputs { - .multiselect, input, .iconified-input { + .multiselect, + input, + .iconified-input { width: 100%; flex-basis: 100%; } @@ -1286,7 +1325,8 @@ button { flex-shrink: 0; } - input, textarea { + input, + textarea { border-radius: 0; background-color: transparent; box-shadow: unset; @@ -1294,8 +1334,10 @@ button { flex-grow: 1; } - &:focus, &:focus-visible, &:focus-within { - box-shadow: inset 0 0 0 transparent, 0 0 0 .25rem var(--color-brand-shadow); + &:focus, + &:focus-visible, + &:focus-within { + box-shadow: inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow); color: var(--color-button-text-active); } } @@ -1365,7 +1407,8 @@ button { } @media screen and (max-width: 550px) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + display: flex; + flex-direction: column; } } diff --git a/assets/styles/global.scss b/assets/styles/global.scss index 687e11a6..9a6c05c0 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -61,8 +61,8 @@ html { --color-special-orange: #e08325; --color-special-green: var(--color-brand-green); --color-special-blue: #1f68c0; - --color-special-purple: #8e32F3; - --color-special-gray: #595B61; + --color-special-purple: #8e32f3; + --color-special-gray: #595b61; --color-warning-bg: hsl(355, 70%, 88%); --color-warning-text: hsl(342, 70%, 35%); @@ -86,8 +86,9 @@ html { --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15), 1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12), 4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09); - --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, - hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px; + --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, + hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, + hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px; --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px; } @@ -109,9 +110,9 @@ html { --color-special-red: #ff496e; --color-special-orange: #ffa347; --color-special-green: var(--color-brand-green); - --color-special-blue: #4F9CFF; - --color-special-purple: #C78AFF; - --color-special-gray: #9FA4B3; + --color-special-blue: #4f9cff; + --color-special-purple: #c78aff; + --color-special-gray: #9fa4b3; --color-brand-green: #1bd96a; --color-brand: var(--color-brand-green); @@ -168,8 +169,9 @@ html { --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2); --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1); - --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, - hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; + --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, + hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, + rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px; } @@ -194,8 +196,10 @@ body { // Defaults background-color: var(--color-bg); color: var(--color-text); - --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, + Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, + Liberation Mono, monospace; font-family: var(--font-standard); font-size: 16px; font-weight: var(--font-weight-regular); @@ -216,7 +220,7 @@ body { --size-navbar-height: 3.5rem; --size-mobile-navbar-height: 3.5rem; - --size-mobile-navbar-height-expanded: 11.75rem; + --size-mobile-navbar-height-expanded: 13.75rem; --spacing-card-lg: 1.5rem; --spacing-card-bg: 1rem; @@ -245,11 +249,15 @@ body { --font-weight-heading: var(--font-weight-extrabold); --font-weight-title: var(--font-weight-extrabold); - @media screen and (min-width: 318px) { + @media screen and (min-width: 320px) { + --size-mobile-navbar-height-expanded: 11.5rem; + } + + @media screen and (min-width: 432px) { --size-mobile-navbar-height-expanded: 9.25rem; } - @media screen and (min-width: 625px) { + @media screen and (min-width: 765px) { --size-mobile-navbar-height-expanded: 7rem; } } @@ -304,8 +312,9 @@ textarea { transition: box-shadow 0.1s ease-in-out; min-height: 40px; - &:focus, &:focus-visible { - box-shadow: inset 0 0 0 transparent, 0 0 0 .25rem var(--color-brand-shadow); + &:focus, + &:focus-visible { + box-shadow: inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow); color: var(--color-button-text-active); } @@ -326,7 +335,8 @@ textarea { } } -button, input[type=button] { +button, +input[type='button'] { cursor: pointer; border: none; outline: 2px solid transparent; @@ -348,7 +358,9 @@ kbd { @import '~assets/styles/components.scss'; @import '~assets/styles/normalize.scss'; -button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { - outline: .25rem solid #ea80ff; - border-radius: .25rem; +button:focus-visible, +a:focus-visible, +[tabindex='0']:focus-visible { + outline: 0.25rem solid #ea80ff; + border-radius: 0.25rem; } diff --git a/components/ui/DropArea.vue b/components/ui/DropArea.vue index 375f6d00..4d224574 100644 --- a/components/ui/DropArea.vue +++ b/components/ui/DropArea.vue @@ -27,9 +27,12 @@ export default { }, }, mounted() { - document.addEventListener('dragenter', () => { - this.$refs.drop_area.style.visibility = 'visible' - }) + // eslint-disable-next-line nuxt/no-env-in-hooks + if (process.client) { + document.addEventListener('dragenter', () => { + this.$refs.drop_area.style.visibility = 'visible' + }) + } }, methods: { allowDrag(event) { diff --git a/components/ui/ModalCreation.vue b/components/ui/ModalCreation.vue index 88e744db..eee6843d 100644 --- a/components/ui/ModalCreation.vue +++ b/components/ui/ModalCreation.vue @@ -123,6 +123,8 @@ export default { return 'required' case 'shader': return 'required' + case 'datapack': + return 'optional' default: return 'unknown' } @@ -135,6 +137,8 @@ export default { return 'unsupported' case 'shader': return 'unsupported' + case 'datapack': + return 'required' default: return 'unknown' } diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue index 79d40ebf..2985576a 100644 --- a/components/ui/ProjectCard.vue +++ b/components/ui/ProjectCard.vue @@ -50,7 +50,15 @@

{{ description }}

- +