diff --git a/.gitignore b/.gitignore index 408aecadd..76fa27057 100644 --- a/.gitignore +++ b/.gitignore @@ -38,9 +38,6 @@ testem.log .DS_Store Thumbs.db -.nx/cache -.nx/workspace-data - # Nuxt dev/build outputs .output .data @@ -54,6 +51,7 @@ apps/frontend/src/generated .turbo target generated +.env # app testing dir -app-playground-data/* \ No newline at end of file +app-playground-data/* diff --git a/.vscode/settings.json b/.vscode/settings.json index c89a52fa7..00362a598 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,13 @@ { - "prettier.endOfLine": "lf", - "editor.formatOnSave": true - } \ No newline at end of file + "prettier.endOfLine": "lf", + "editor.formatOnSave": true, + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact" + ], + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + } +} diff --git a/apps/frontend/.env b/apps/frontend/.env new file mode 100644 index 000000000..62a603777 --- /dev/null +++ b/apps/frontend/.env @@ -0,0 +1,3 @@ +BASE_URL=https://api.modrinth.com/v2/ +BROWSER_BASE_URL=https://api.modrinth.com/v2/ +SITE_URL=https://new-project-page.code-efh.pages.dev diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts index ffc9fdaf4..3d4a6b048 100644 --- a/apps/frontend/nuxt.config.ts +++ b/apps/frontend/nuxt.config.ts @@ -434,6 +434,7 @@ export default defineNuxtConfig({ }, }, compatibilityDate: "2024-07-03", + telemetry: false, }); function getApiUrl() { diff --git a/apps/frontend/src/assets/images/badges/10m-club.svg b/apps/frontend/src/assets/images/badges/10m-club.svg new file mode 100644 index 000000000..5a6fd534e --- /dev/null +++ b/apps/frontend/src/assets/images/badges/10m-club.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/frontend/src/assets/images/badges/early-adopter.svg b/apps/frontend/src/assets/images/badges/early-adopter.svg new file mode 100644 index 000000000..80b8b0f09 --- /dev/null +++ b/apps/frontend/src/assets/images/badges/early-adopter.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/frontend/src/assets/images/badges/mod.svg b/apps/frontend/src/assets/images/badges/mod.svg new file mode 100644 index 000000000..04220d5af --- /dev/null +++ b/apps/frontend/src/assets/images/badges/mod.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/frontend/src/assets/images/badges/plus.svg b/apps/frontend/src/assets/images/badges/plus.svg new file mode 100644 index 000000000..850d1b596 --- /dev/null +++ b/apps/frontend/src/assets/images/badges/plus.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/frontend/src/assets/images/badges/staff.svg b/apps/frontend/src/assets/images/badges/staff.svg new file mode 100644 index 000000000..d76cdba1a --- /dev/null +++ b/apps/frontend/src/assets/images/badges/staff.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/frontend/src/assets/images/sidebar/admin.svg b/apps/frontend/src/assets/images/sidebar/admin.svg index dfdc6cb4b..a583688c8 100644 --- a/apps/frontend/src/assets/images/sidebar/admin.svg +++ b/apps/frontend/src/assets/images/sidebar/admin.svg @@ -1,3 +1,3 @@ - + diff --git a/apps/frontend/src/assets/images/utils/download.svg b/apps/frontend/src/assets/images/utils/download.svg index 38db729ad..84f0d7d3b 100644 --- a/apps/frontend/src/assets/images/utils/download.svg +++ b/apps/frontend/src/assets/images/utils/download.svg @@ -1,3 +1,3 @@ - + diff --git a/apps/frontend/src/assets/images/utils/expand.svg b/apps/frontend/src/assets/images/utils/expand.svg index c1f364ead..743770940 100644 --- a/apps/frontend/src/assets/images/utils/expand.svg +++ b/apps/frontend/src/assets/images/utils/expand.svg @@ -1,3 +1,3 @@ - + diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss index 4802e9afb..b475972b2 100644 --- a/apps/frontend/src/assets/styles/components.scss +++ b/apps/frontend/src/assets/styles/components.scss @@ -367,35 +367,6 @@ Other */ -// Here lies π–„π–Š π•Έπ–†π–—π–Œπ–Žπ–“ π•Έπ–†π–Œπ–Žπ–ˆ -// which allows to have just one wrapper div -.iconified-input { - align-items: center; - display: inline-flex; - position: relative; - - input { - padding-left: 2.25rem; - width: 100%; - } - - &:focus-within svg { - color: var(--color-button-text-active); - opacity: 1; - } - - svg { - position: absolute; - left: 0.75rem; - height: 1.25rem; - width: 1.25rem; - z-index: 1; - - color: var(--color-button-text); - opacity: 0.6; - } -} - .text-link { color: var(--color-link); @@ -691,122 +662,6 @@ 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: none !important; - - input { - background: transparent; - box-shadow: none; - } - - input::placeholder { - color: var(--color-text); - } - - .multiselect__tags { - border-radius: var(--size-rounded-sm); - background: var(--color-dropdown-bg); - box-shadow: var(--shadow-inset-sm); - border: none; - cursor: pointer; - padding-left: 7px; - padding-top: 10px; - outline: 2px solid transparent; - - transition: background-color 0.1s ease-in-out; - - &:active { - background: var(--color-button-bg-hover); - - .multiselect__spinner { - background: var(--color-button-bg-hover); - } - } - - .multiselect__single { - background: transparent; - } - - .multiselect__tag { - border-radius: var(--size-rounded-sm); - color: var(--color-text-dark); - background: transparent; - border: 2px solid var(--color-brand); - } - - .multiselect__tag-icon { - background: transparent; - - &:after { - color: var(--color-text-dark); - } - } - - .multiselect__placeholder { - color: var(--color-button-text); - margin-left: 8px; - margin-bottom: 8px; - opacity: 0.6; - font-size: 16px; - line-height: 16px; - } - } - - .multiselect__content-wrapper { - background: var(--color-dropdown-bg); - border: none; - overflow-x: hidden; - border-bottom-left-radius: var(--size-rounded-sm); - border-bottom-right-radius: var(--size-rounded-sm); - box-shadow: var(--shadow-inset-sm), var(--shadow-floating); - outline: 2px solid transparent; - - .multiselect__element { - .multiselect__option { - outline: 1px solid transparent; - } - - .multiselect__option--highlight { - background: var(--color-button-bg-active); - color: var(--color-text-dark); - } - - .multiselect__option--selected { - background: var(--color-brand); - font-weight: bold; - color: var(--color-brand-inverted); - } - } - } - - .multiselect__spinner { - background: var(--color-dropdown-bg); - - &:active { - background: var(--color-button-bg-hover); - } - } - - &.multiselect--disabled { - background: none; - - .multiselect__current, - .multiselect__select { - background: none; - } - } -} - .switch { -webkit-appearance: none; -moz-appearance: none; @@ -916,9 +771,9 @@ tr.button-transparent { } .card-divider { - background-color: var(--color-divider); + background-color: var(--color-button-bg); border: none; - color: var(--color-divider); + color: var(--color-button-bg); height: 1px; margin: var(--spacing-card-bg) 0; } @@ -1298,7 +1153,7 @@ svg.inline-svg { .tag-list__item { background-color: var(--color-button-bg); - padding: var(--gap-2) var(--gap-6); + padding: var(--gap-4) var(--gap-8); border-radius: var(--radius-max); font-weight: var(--weight-bold); font-size: var(--text-14); @@ -1415,6 +1270,10 @@ svg.inline-svg { width: var(--icon-16); height: var(--icon-16); } + + > svg:first-child { + flex-shrink: 0; + } } .links-list { @@ -1442,23 +1301,4 @@ svg.inline-svg { font-size: var(--text-14); } } - - .icon { - --_size: 1rem; - width: var(--_size, var(--icon-16)) !important; - height: var(--_size, var(--icon-16)) !important; - border: 1px solid var(--color-button-border); - - &[data-size="32"] { - --_size: var(--icon-32); - } - - &[data-shape="circle"] { - border-radius: var(--radius-max) !important; - } - - &[data-shape="square"] { - border-radius: calc(2.25 * (var(--_size) / 16)) !important; - } - } } diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss index 1a7b89459..80a4dbad7 100644 --- a/apps/frontend/src/assets/styles/global.scss +++ b/apps/frontend/src/assets/styles/global.scss @@ -51,7 +51,6 @@ html { --color-text-inverted: initial !important; --color-bg-inverted: initial !important; - --color-brand-green: initial !important; --color-brand: var(--color-green) !important; --color-brand-inverted: initial !important; @@ -141,8 +140,7 @@ html { --color-text-inverted: var(--color-bg); --color-bg-inverted: var(--color-text); - --color-brand-green: #00af5c; - --color-brand: var(--color-brand-green); + --color-brand: var(--color-green); --color-brand-highlight: rgba(0, 175, 92, 0.25); --color-brand-shadow: rgba(0, 175, 92, 0.7); --color-brand-inverted: #ffffff; @@ -181,7 +179,11 @@ html { --color-link-hover: #1a76e7; --color-link-active: #146fd7; - --color-red-bg: rgba(204, 35, 69, 0.1); + --color-red-bg: rgba(203, 34, 69, 0.1); + --color-orange-bg: rgba(224, 131, 37, 0.1); + --color-green-bg: rgba(0, 175, 92, 0.1); + --color-blue-bg: rgba(31, 104, 192, 0.1); + --color-purple-bg: rgba(142, 50, 243, 0.1); --color-warning-bg: hsl(355, 70%, 88%); --color-warning-text: hsl(342, 70%, 35%); @@ -273,10 +275,13 @@ html { --color-text-inverted: var(--color-bg); --color-bg-inverted: var(--color-text); - --color-red-bg: rgba(255, 74, 110, 0.2); + --color-red-bg: rgba(255, 73, 110, 0.2); + --color-orange-bg: rgba(255, 163, 71, 0.2); + --color-green-bg: rgba(27, 217, 106, 0.2); + --color-blue-bg: rgba(79, 156, 255, 0.2); + --color-purple-bg: rgba(199, 138, 255, 0.2); - --color-brand-green: #1bd96a; - --color-brand: var(--color-brand-green); + --color-brand: var(--color-green); --color-brand-highlight: rgba(27, 217, 106, 0.25); --color-brand-shadow: rgba(27, 217, 106, 0.7); --color-brand-inverted: #000; @@ -420,6 +425,13 @@ html { --color-blue: rgb(9, 159, 239); --color-purple: rgb(139, 129, 230); --color-gray: #718096; + + --color-red-highlight: rgba(232, 32, 13, 0.25); + --color-orange-highlight: rgba(232, 141, 13, 0.25); + --color-green-highlight: rgba(60, 219, 54, 0.25); + --color-blue-highlight: rgba(9, 159, 239, 0.25); + --color-purple-highlight: rgba(139, 129, 230, 0.25); + --color-gray-highlight: rgba(113, 128, 150, 0.25); } body { diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss index d6c02a4f0..92b0bf4a8 100644 --- a/apps/frontend/src/assets/styles/layout.scss +++ b/apps/frontend/src/assets/styles/layout.scss @@ -64,10 +64,6 @@ } } -.site-header { - margin: 0 0.75rem; -} - @media (min-width: 1024px) { .full-page { margin: 0 auto; @@ -84,14 +80,14 @@ "sidebar content" auto "info content" auto "dummy content" 1fr - / 20rem 1fr; + / 18.75rem 1fr; &.alt-layout { grid-template: "content sidebar" auto "content info" auto "content dummy" 1fr - / 1fr 20rem; + / 1fr 18.75rem; } &.no-sidebar { @@ -110,11 +106,59 @@ } .normal-page__sidebar { - min-width: 20rem; - width: 20rem; + min-width: 18.75rem; + width: 18.75rem; } .normal-page__content { - max-width: calc(60rem - 0.75rem); + max-width: calc(80rem - 18.75rem - 0.75rem); + //overflow-x: hidden; + } +} + +.new-page { + display: grid; + margin: 0 auto; + max-width: 80rem; + column-gap: 0.75rem; + padding: 0 0.75rem; + + grid-template: + "header" + "content" + "sidebar" + / 100%; + + @media screen and (min-width: 1024px) { + &.sidebar { + grid-template: + "header header" auto + "content sidebar" auto + "content dummy" 1fr + / 1fr 18.75rem; + + &.alt-layout { + grid-template: + "header header" auto + "sidebar content" auto + "dummy content" 1fr + / 18.75rem 1fr; + } + } + + .normal-page__sidebar { + min-width: 18.75rem; + width: 18.75rem; + } + } + + .normal-page__sidebar { + grid-area: sidebar; + } + + .normal-page__content { + grid-area: content; + max-width: calc(80rem - 18.75rem - 0.75rem); + //overflow-x: hidden; } } diff --git a/apps/frontend/src/assets/styles/utils.scss b/apps/frontend/src/assets/styles/utils.scss index 23c6ccc41..b2e96ea64 100644 --- a/apps/frontend/src/assets/styles/utils.scss +++ b/apps/frontend/src/assets/styles/utils.scss @@ -1,7 +1,3 @@ -.hidden { - display: none !important; -} - body { overflow-y: scroll; overflow-x: hidden; diff --git a/apps/frontend/src/components/ui/Accordion.vue b/apps/frontend/src/components/ui/Accordion.vue new file mode 100644 index 000000000..7da1de516 --- /dev/null +++ b/apps/frontend/src/components/ui/Accordion.vue @@ -0,0 +1,80 @@ +
+ + + +
+
+
+ +
+
+
+
+ + + + diff --git a/apps/frontend/src/components/ui/AdPlaceholder.vue b/apps/frontend/src/components/ui/AdPlaceholder.vue new file mode 100644 index 000000000..0688653cb --- /dev/null +++ b/apps/frontend/src/components/ui/AdPlaceholder.vue @@ -0,0 +1,24 @@ + + + diff --git a/apps/frontend/src/components/ui/AutomaticAccordion.vue b/apps/frontend/src/components/ui/AutomaticAccordion.vue new file mode 100644 index 000000000..eaf708fb7 --- /dev/null +++ b/apps/frontend/src/components/ui/AutomaticAccordion.vue @@ -0,0 +1,42 @@ + + + + diff --git a/apps/frontend/src/components/ui/Avatar.vue b/apps/frontend/src/components/ui/Avatar.vue index fc1151195..6216aa5d8 100644 --- a/apps/frontend/src/components/ui/Avatar.vue +++ b/apps/frontend/src/components/ui/Avatar.vue @@ -1,44 +1,19 @@ - - diff --git a/apps/frontend/src/components/ui/Badge.vue b/apps/frontend/src/components/ui/Badge.vue index c4ad9cfc2..376d3f9d6 100644 --- a/apps/frontend/src/components/ui/Badge.vue +++ b/apps/frontend/src/components/ui/Badge.vue @@ -1,5 +1,9 @@ - + diff --git a/apps/frontend/src/components/ui/ModerationChecklist.vue b/apps/frontend/src/components/ui/ModerationChecklist.vue index 869743138..997ea571f 100644 --- a/apps/frontend/src/components/ui/ModerationChecklist.vue +++ b/apps/frontend/src/components/ui/ModerationChecklist.vue @@ -306,8 +306,6 @@ @@ -51,8 +51,6 @@ const positionToMoveY = computed(() => `${sliderPositionY.value}px`); const sliderWidth = computed(() => `${selectedElementWidth.value}px`); function pickLink() { - console.log("link is picking"); - activeIndex.value = props.query ? filteredLinks.value.findIndex( (x) => (x.href === "" ? undefined : x.href) === route.path[props.query], @@ -68,10 +66,12 @@ function pickLink() { } } -const linkElements = ref(); +const rowLinkElements = ref(); function startAnimation() { - const el = linkElements.value[activeIndex.value].$el; + const el = rowLinkElements.value[activeIndex.value].$el; + + if (!el || !el.offsetParent) return; sliderPositionX.value = el.offsetLeft; sliderPositionY.value = el.offsetTop + el.offsetHeight; diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue index d7972b089..9ab0bf4d0 100644 --- a/apps/frontend/src/components/ui/NavTabs.vue +++ b/apps/frontend/src/components/ui/NavTabs.vue @@ -1,63 +1,84 @@ - + diff --git a/apps/frontend/src/components/ui/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/OrganizationCreateModal.vue index 703f96553..3b4c64320 100644 --- a/apps/frontend/src/components/ui/OrganizationCreateModal.vue +++ b/apps/frontend/src/components/ui/OrganizationCreateModal.vue @@ -1,61 +1,78 @@