From 2d416d491c9a139a584799e2c3a06b4eceaa7fdc Mon Sep 17 00:00:00 2001 From: Geometrically <18202329+Geometrically@users.noreply.github.com> Date: Tue, 20 Aug 2024 23:03:16 -0700 Subject: [PATCH] Project, Search, User redesign (#1281) * New project page * fix silly icon tailwind classes * Start new versions page, add new ButtonStyled component * Pagination and finish mocking up versions page functionality * green download button * hover animation * New Modal, Avatar refactor, subpages in NavTabs * lint * Download modal * New user page + fix lint * fix ui lint * Download animation fix * Versions filter + finish project page * Improve consistency of buttons on home page * Fix ButtonStyled breaking * Fix margin on version summary * finish search, new modals, user + project page mobile * fix gallery image pages * New project header * Fix gallery tab showing improperly * Use auto direction + position for all popouts * Preliminary user page * test to see if this fixes login stuff * remove extra slash * Add version actions, move download button on versions page * Listed -> public * Shorten download modal selector height * Fix user menu open direction * Change breakpoint for header collapse * Only underline title * Tighten padding on stats a little * New nav * Make mobile breakpoint more consistent * fix header breakpoint regression * Add sign in button * Fix edit icon color * Fix margin at top of screen * Fix user bios and ad width * Fix user nav showing when there's only one type of project * Fix plural projects on user page & extract i18n * Remove ads on mobile for now * Fix overflow menu showing hidden items * NavTabs on mobile * Fix navbar z index * Search filter overhaul + negative filters * fix no-max-height * port version filters, fix following/collections, lint * hide promos * ui lint * Disable modal background animation to reduce reported motion sickness * Hide install with modrinth app button on mobile --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Prospector --- .gitignore | 6 +- .vscode/settings.json | 15 +- apps/frontend/.env | 3 + apps/frontend/nuxt.config.ts | 1 + .../src/assets/images/badges/10m-club.svg | 5 + .../assets/images/badges/early-adopter.svg | 8 + .../frontend/src/assets/images/badges/mod.svg | 5 + .../src/assets/images/badges/plus.svg | 12 + .../src/assets/images/badges/staff.svg | 7 + .../src/assets/images/sidebar/admin.svg | 2 +- .../src/assets/images/utils/download.svg | 2 +- .../src/assets/images/utils/expand.svg | 2 +- .../src/assets/styles/components.scss | 174 +- apps/frontend/src/assets/styles/global.scss | 26 +- apps/frontend/src/assets/styles/layout.scss | 62 +- apps/frontend/src/assets/styles/utils.scss | 4 - apps/frontend/src/components/ui/Accordion.vue | 80 + .../src/components/ui/AdPlaceholder.vue | 24 + .../src/components/ui/AutomaticAccordion.vue | 42 + apps/frontend/src/components/ui/Avatar.vue | 109 +- apps/frontend/src/components/ui/Badge.vue | 27 +- apps/frontend/src/components/ui/Checkbox.vue | 5 + .../components/ui/CollectionCreateModal.vue | 90 +- .../src/components/ui/ModalCreation.vue | 398 ++-- .../src/components/ui/ModerationChecklist.vue | 2 - apps/frontend/src/components/ui/NavRow.vue | 10 +- apps/frontend/src/components/ui/NavTabs.vue | 137 +- .../components/ui/OrganizationCreateModal.vue | 115 +- .../frontend/src/components/ui/Pagination.vue | 1 + .../src/components/ui/ProjectMemberHeader.vue | 4 +- .../components/ui/VersionFilterControl.vue | 312 +-- .../src/components/ui/VersionSummary.vue | 45 + .../ui/modrinth-loading-indicator.ts | 2 +- .../ui/thread/ConversationThread.vue | 2 - .../components/ui/thread/ThreadMessage.vue | 2 +- apps/frontend/src/composables/user.js | 33 +- apps/frontend/src/helpers/projects.js | 20 +- apps/frontend/src/layouts/default.vue | 1378 +++++------- apps/frontend/src/locales/en-US/index.json | 137 +- apps/frontend/src/pages/[type]/[id].vue | 1914 ++++++----------- .../src/pages/[type]/[id]/changelog.vue | 34 +- .../src/pages/[type]/[id]/gallery.vue | 4 + apps/frontend/src/pages/[type]/[id]/index.vue | 533 ++++- .../src/pages/[type]/[id]/moderation.vue | 2 +- .../src/pages/[type]/[id]/settings/index.vue | 7 +- .../[type]/[id]/version/[version]-new.vue | 164 ++ .../pages/[type]/[id]/version/[version].vue | 657 +++--- .../src/pages/[type]/[id]/versions.vue | 564 ++--- apps/frontend/src/pages/app.vue | 2 +- apps/frontend/src/pages/collection/[id].vue | 2 +- .../src/pages/dashboard/collections.vue | 2 +- .../src/pages/dashboard/organizations.vue | 4 +- apps/frontend/src/pages/index.vue | 70 +- apps/frontend/src/pages/plus.vue | 2 +- .../src/pages/search/[searchProjectType].vue | 674 +++--- apps/frontend/src/pages/settings/index.vue | 34 +- apps/frontend/src/pages/user/[id].vue | 558 +++-- apps/frontend/src/plugins/shorthands.js | 11 - apps/frontend/src/types/modrinth.d.ts | 1 + apps/frontend/src/utils/analytics.js | 4 +- apps/frontend/src/utils/common-messages.ts | 8 + apps/frontend/tailwind.config.js | 22 +- package.json | 3 +- packages/assets/icons/arrow-big-up-dash.svg | 1 + packages/assets/icons/ban.svg | 1 + packages/assets/icons/book-text.svg | 1 + packages/assets/icons/box-import.svg | 1 + packages/assets/icons/braces.svg | 1 + packages/assets/icons/collection.svg | 1 + packages/assets/icons/compass.svg | 1 + packages/assets/icons/crown.svg | 1 + packages/assets/icons/download.svg | 2 +- packages/assets/icons/expand.svg | 2 +- packages/assets/icons/filter-x.svg | 1 + packages/assets/icons/game.svg | 1 + packages/assets/icons/glasses.svg | 1 + packages/assets/icons/newspaper.svg | 1 + packages/assets/icons/organization.svg | 1 + packages/assets/icons/package-open.svg | 1 + packages/assets/icons/window.svg | 1 + packages/assets/icons/wrench.svg | 1 + packages/assets/index.ts | 32 + packages/assets/styles/classes.scss | 8 +- packages/assets/styles/defaults.scss | 2 +- packages/assets/styles/variables.scss | 16 +- packages/ui/src/components/base/Avatar.vue | 97 +- packages/ui/src/components/base/Button.vue | 14 + .../ui/src/components/base/ButtonStyled.vue | 101 +- .../ui/src/components/base/DropdownSelect.vue | 6 +- .../ui/src/components/base/OverflowMenu.vue | 75 +- .../ui/src/components/base/Pagination.vue | 210 +- .../ui/src/components/base/PopoutMenu.vue | 36 +- .../src/components/base/ScrollablePanel.vue | 138 ++ packages/ui/src/components/base/StatItem.vue | 27 + packages/ui/src/components/index.ts | 5 + .../ui/src/components/modal/ConfirmModal.vue | 69 +- packages/ui/src/components/modal/NewModal.vue | 108 +- .../version/VersionChannelIndicator.vue | 40 + packages/utils/index.d.ts | 246 +++ packages/utils/package.json | 2 +- turbo.json | 12 +- 101 files changed, 5361 insertions(+), 4488 deletions(-) create mode 100644 apps/frontend/.env create mode 100644 apps/frontend/src/assets/images/badges/10m-club.svg create mode 100644 apps/frontend/src/assets/images/badges/early-adopter.svg create mode 100644 apps/frontend/src/assets/images/badges/mod.svg create mode 100644 apps/frontend/src/assets/images/badges/plus.svg create mode 100644 apps/frontend/src/assets/images/badges/staff.svg create mode 100644 apps/frontend/src/components/ui/Accordion.vue create mode 100644 apps/frontend/src/components/ui/AdPlaceholder.vue create mode 100644 apps/frontend/src/components/ui/AutomaticAccordion.vue create mode 100644 apps/frontend/src/components/ui/VersionSummary.vue create mode 100644 apps/frontend/src/pages/[type]/[id]/version/[version]-new.vue create mode 100644 apps/frontend/src/types/modrinth.d.ts create mode 100644 packages/assets/icons/arrow-big-up-dash.svg create mode 100644 packages/assets/icons/ban.svg create mode 100644 packages/assets/icons/book-text.svg create mode 100644 packages/assets/icons/box-import.svg create mode 100644 packages/assets/icons/braces.svg create mode 100644 packages/assets/icons/collection.svg create mode 100644 packages/assets/icons/compass.svg create mode 100644 packages/assets/icons/crown.svg create mode 100644 packages/assets/icons/filter-x.svg create mode 100644 packages/assets/icons/game.svg create mode 100644 packages/assets/icons/glasses.svg create mode 100644 packages/assets/icons/newspaper.svg create mode 100644 packages/assets/icons/organization.svg create mode 100644 packages/assets/icons/package-open.svg create mode 100644 packages/assets/icons/window.svg create mode 100644 packages/assets/icons/wrench.svg create mode 100644 packages/ui/src/components/base/ScrollablePanel.vue create mode 100644 packages/ui/src/components/base/StatItem.vue create mode 100644 packages/ui/src/components/version/VersionChannelIndicator.vue create mode 100644 packages/utils/index.d.ts 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 @@