eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Migrate to Nuxt 3 (#933)

Browse Source 
* Migrate to Nuxt 3

* Update vercel config

* remove tsconfig comment

* Changelog experiment + working proj pages

* Fix package json

* Prevent vercel complaining

* fix deploy (hopefully)

* Tag generator

* Switch to yarn

* Vercel pls 🙏

* Fix tag generation bug

* Make (most) non-logged in pages work

* fix base build

* Linting + state

* Eradicate axios, make most user pages work

* Fix checkbox state being set incorrectly

* Make most things work

* Final stretch

* Finish (most) things

* Move to update model value

* Fix modal text getting blurred from transforms (#964)

* Adjust nav-link border radius when focused (#961)

* Transition between animation states on TextLogo (#955)

* Transition between animation states on TextLogo

* Remove unused refs

* Fixes from review

* Disable tabbing to pagination arrows when disabled (#972)

* Make position of the "no results" text on grid/gallery views consistent (fixes #963) (#965)

* Fix position of the "no results" text on grid view

* fix padding

* Remove extra margin on main page, fixes #957 (#959)

* Fix layout shift and placeholder line height (#973)

* Fix a lot of issues

* Fix more nuxt 3 issues

* fix not all versions showing up (temp)

* inline inter css file

* More nuxt 3 fixes

* [skip ci] broken- backup changes

* Change modpack warnings to blue instead of red (#991)

* Fix some hydration issues

* Update nuxt

* Fix some images not showing

* Add pagination to versions page + fix lag

* Make changelog page consistent with versions page

* sync before merge

* Delete old file

* Fix actions failing

* update branch

* Fixes navbar transition animation. (#1012)

* Fixes navbar transition animation.

* Fixes Y-axis animation. Fixes mobile menu. Removes highlightjs prop.

* Changes xss call to renderString.

* Fixes renderString call.

* Removes unnecessary styling.

* Reverts mobile nav change.

* Nuxt 3 Lazy Loading Search (#1022)

* Uses lazyFetch for results. onSearchChange refreshes. Adds loading circle.

* Removes console.log

* Preserves old page when paging.

* Diagnosing filtering bugs.

* Fix single facet filtering

* Implements useAuth in settings/account.

* tiny ssr fix

* Updating nuxt.config checklist.

* Implements useAuth in revenue, moneitzation, and dashboard index pages.

* Fixes setups.

* Eliminates results when path changes. Adds animated logo.

* Ensures loading animation renders on search page.

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>

* Fix navigation issues

* Square button fix (#1023)

* Removes checklist from nuxt.config.

* Modifies Nuxt CI to build after linting.

* Fixes prettierignore file.

* bug fixes

* Update whitelist domains

* Page improvements, fix CLS

* Fix a lot of things

* Fix project type redirect

* Fix 404 errors

* Fix user settings + hydration error

* Final fixes

* fix(creator-section): border radius on icons not aligning with bg (#1027)

Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk>

* Improvements to the mobile navbar (#984)

* Transition between animation states on TextLogo

* Remove unused refs

* Fixes from review

* Improvements to the mobile nav menu

* fix avatar alt text

* Nevermind, got confused for a moment

* Tab bar, menu layout improvements

* Highlight search icon when menu is open

* Update layouts/default.vue

Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com>

* Fix some issues

* Use caret instead

* Run prettier

* Add create a project

---------

Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>

* Fix mobile menu issues

* More issues

* Fix lint

---------

Co-authored-by: Kaeden Murphy <kmurphy@kaedenmurphy.dev>
Co-authored-by: triphora <emmaffle@modrinth.com>
Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com>
Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com>
Co-authored-by: Zachary Baird <zdb1994@yahoo.com>
Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com>
Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk>
This commit is contained in:
Geometrically
2023-03-09 10:05:32 -07:00
committed by GitHub
parent 5638f0f24b
commit 740357d120
145 changed files with 12371 additions and 37478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
assets/styles/components.scss
View File

@@ -71,9 +71,10 @@
.multiselect__placeholder {
color: var(--color-button-text);
margin-left: 8px;
margin-bottom: 8px;
opacity: 0.6;
font-size: 16px;
line-height: 20px;
line-height: 16px;
}
}
@@ -186,14 +187,10 @@
z-index: 2;
}
&.warning {
border-left: 0.5rem solid var(--color-banner-side);
&:where(&.warning, &.information) {
padding: 1.5rem;
line-height: 1.5;
background-color: var(--color-banner-bg);
color: var(--color-banner-text);
min-height: 0;
a {
/* Uses active color to increase contrast */
color: var(--color-link-active);
@@ -201,8 +198,20 @@
}
}
&.warning {
border-left: 0.5rem solid var(--color-warning-banner-side);
background-color: var(--color-warning-banner-bg);
color: var(--color-warning-banner-text);
}
&.information {
border-left: 0.5rem solid var(--color-info-banner-side);
background-color: var(--color-info-banner-bg);
color: var(--color-info-banner-text);
}
&.moderation-card {
background-color: var(--color-banner-bg);
background-color: var(--color-warning-banner-bg);
}
}
@@ -427,11 +436,11 @@
}
}
> .label:first-child :where(> :first-child, .label__title),
> label:first-child :where(> :first-child, .label__title),
> .adjacent-input:first-child :where(> :first-child, .label__title) {
margin-block-start: 0;
}
//> .label:first-child :where(> :first-child, .label__title),
//> label:first-child :where(> :first-child, .label__title),
//> .adjacent-input:first-child :where(> :first-child, .label__title) {
// margin-block-start: 0;
//}
}
.universal-card {
@@ -734,104 +743,25 @@
}
}
.tooltip {
display: block !important;
z-index: 10000;
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
.tooltip-inner {
background: var(--color-tooltip-bg);
color: var(--color-tooltip-text);
padding: 5px 10px 4px;
border-radius: var(--size-rounded-tooltip);
box-shadow: var(--shadow-floating);
font-size: 0.9rem;
.v-popper--theme-tooltip {
.v-popper__inner {
background: var(--color-tooltip-bg) !important;
color: var(--color-tooltip-text) !important;
padding: 5px 10px 4px !important;
border-radius: var(--size-rounded-tooltip) !important;
box-shadow: var(--shadow-floating) !important;
font-size: 0.9rem !important;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: var(--color-tooltip-bg);
z-index: 1;
}
&[x-placement^='top'] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^='bottom'] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^='right'] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^='left'] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
.v-popper__arrow-outer,
.v-popper__arrow-inner {
border-color: var(--color-tooltip-bg) !important;
}
}
.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);
@@ -901,8 +831,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) {
@@ -990,6 +920,7 @@ tr.button-transparent {
display: flex;
align-items: center;
justify-content: center;
height: 2.25rem;
width: 2.25rem;
border-radius: var(--size-rounded-sm);
@@ -1135,9 +1066,10 @@ tr.button-transparent {
.multiselect__placeholder {
color: var(--color-button-text);
margin-left: 8px;
margin-bottom: 8px;
opacity: 0.6;
font-size: 16px;
line-height: 20px;
line-height: 16px;
}
}
@@ -1313,76 +1245,27 @@ tr.button-transparent {
z-index: 2;
}
&.warning {
border-left: 0.5rem solid var(--color-banner-side);
&:where(&.warning, &.information) {
padding: 1.5rem;
line-height: 1.5;
background-color: var(--color-banner-bg);
color: var(--color-banner-text);
min-height: 0;
a {
/* Uses active color to increase contrast */
color: var(--color-link-active);
text-decoration: underline;
}
}
}
.vue-notification {
background: var(--color-special-blue) !important;
border-left: 5px solid var(--color-special-blue) !important;
color: var(--color-brand-inverted) !important;
&.success {
background: var(--color-special-green) !important;
border-left-color: var(--color-special-green) !important;
&.warning {
border-left: 0.5rem solid var(--color-warning-banner-side);
background-color: var(--color-warning-banner-bg);
color: var(--color-warning-banner-text);
}
&.warn {
background: var(--color-special-orange) !important;
border-left-color: var(--color-special-orange) !important;
}
&.error {
background: var(--color-special-red) !important;
border-left-color: var(--color-special-red) !important;
}
}
.vue-notification-group {
right: 25px !important;
bottom: 25px !important;
.vue-notification-wrapper {
margin-bottom: 10px;
.vue-notification-template {
border-radius: var(--size-rounded-card);
margin: 0;
.notification-title {
font-size: var(--font-size-lg);
margin-right: auto;
}
.notification-content {
font-size: var(--font-size-md);
}
}
&:last-child {
margin: 0;
}
}
@media screen and (max-width: 750px) {
transition: bottom 0.25s ease-in-out;
bottom: calc(var(--size-mobile-navbar-height) + 10px) !important;
&.browse-menu-open {
bottom: calc(var(--size-mobile-navbar-height-expanded) + 10px) !important;
}
&.information {
border-left: 0.5rem solid var(--color-info-banner-side);
background-color: var(--color-info-banner-bg);
color: var(--color-info-banner-text);
}
}
@@ -1449,7 +1332,7 @@ h1 {
font-weight: bold;
}
.nuxt-link-exact-active,
.router-link-exact-active,
h1,
h2,
h3 {

63
assets/styles/global.scss
View File

@@ -67,9 +67,13 @@ html {
--color-warning-bg: hsl(355, 70%, 88%);
--color-warning-text: hsl(342, 70%, 35%);
--color-banner-text: hsl(0, 11%, 16%);
--color-banner-bg: hsl(0, 100%, 95%);
--color-banner-side: hsl(357, 78%, 40%);
--color-warning-banner-text: hsl(0, 11%, 16%);
--color-warning-banner-bg: hsl(0, 100%, 95%);
--color-warning-banner-side: hsl(357, 78%, 40%);
--color-info-banner-text: var(--color-text);
--color-info-banner-bg: var(--color-ad);
--color-info-banner-side: var(--color-special-blue);
--color-block-quote: var(--color-tooltip-bg);
--color-header-underline: var(--color-divider-dark);
@@ -86,9 +90,8 @@ 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;
@@ -112,11 +115,7 @@ html {
rgba(66, 71, 97, 0.34) 100%
);
--landing-border-color: rgba(129, 137, 175, 0.55);
--landing-creator-gradient: linear-gradient(
180deg,
#f8f8f8 0%,
#f8f8f8 63.19%
);
--landing-creator-gradient: linear-gradient(180deg, #f8f8f8 0%, #f8f8f8 63.19%);
--landing-blob-gradient: radial-gradient(
50% 50% at 50% 50%,
@@ -196,9 +195,13 @@ html {
--color-warning-bg: hsl(355, 70%, 20%);
--color-warning-text: hsl(342, 70%, 75%);
--color-banner-text: hsl(0, 100%, 96%);
--color-banner-bg: hsl(356, 18%, 18%);
--color-banner-side: hsl(357, 78%, 40%);
--color-warning-banner-text: hsl(0, 100%, 96%);
--color-warning-banner-bg: hsl(356, 18%, 18%);
--color-warning-banner-side: hsl(357, 78%, 40%);
--color-info-banner-text: var(--color-text);
--color-info-banner-bg: var(--color-ad);
--color-info-banner-side: var(--color-special-blue);
--color-block-quote: var(--color-code-bg);
--color-header-underline: var(--color-divider-dark);
@@ -213,18 +216,13 @@ 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;
--landing-maze-bg: url('https://cdn.modrinth.com/landing/landing.png');
--landing-maze-gradient-bg: linear-gradient(
0deg,
#31375f 0%,
rgba(8, 14, 55, 0) 100%
),
--landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
url('https://cdn.modrinth.com/landing/landing-lower.png');
--landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
@@ -251,8 +249,7 @@ html {
rgba(44, 48, 79, 0.35) 0%,
rgba(32, 35, 50, 0.2695) 100%
);
--landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16),
inset 2px 2px 64px rgba(57, 61, 94, 0.45);
--landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);
--landing-card-bg: rgba(59, 63, 85, 0.15);
--landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -280,10 +277,9 @@ 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);
@@ -436,11 +432,12 @@ kbd {
font-size: 0.85em !important;
}
@import '~assets/styles/highlightjs.scss';
@import '~assets/styles/layout.scss';
@import '~assets/styles/utils.scss';
@import '~assets/styles/components.scss';
@import '~assets/styles/normalize.scss';
@import '~/assets/styles/highlightjs.scss';
@import '~/assets/styles/layout.scss';
@import '~/assets/styles/utils.scss';
@import '~/assets/styles/components.scss';
@import '~/assets/styles/normalize.scss';
@import '~/assets/styles/inter.scss';
button:focus-visible,
a:focus-visible,

40
assets/styles/inter.scss Normal file
View File

@@ -0,0 +1,40 @@
@font-face {
font-family: inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19') format('woff2'),
url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff?v=3.19') format('woff');
}
@font-face {
font-family: inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19') format('woff2'),
url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff?v=3.19') format('woff');
}
@font-face {
font-family: inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff2?v=3.19') format('woff2'),
url('https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff?v=3.19') format('woff');
}
@font-face {
font-family: inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff2?v=3.19') format('woff2'),
url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff?v=3.19') format('woff');
}
@font-face {
font-family: inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff2?v=3.19') format('woff2'),
url('https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff?v=3.19') format('woff');
}

4
assets/styles/layout.scss
View File

@@ -47,6 +47,10 @@
'info'
/ 100%;
@media screen and (max-width: 1024px) {
margin-top: var(--spacing-card-md);
}
.normal-page__sidebar {
grid-area: sidebar;
}