From afdfc1de2cdc7ab3c5b14f29a7871e26e070b02b Mon Sep 17 00:00:00 2001 From: Jai A Date: Tue, 28 Nov 2023 17:06:30 -0700 Subject: [PATCH 1/9] Move omorphia styles --- lib/assets/icons/right-arrow.svg | 5 +- lib/assets/styles/classes.scss | 95 +- lib/assets/styles/defaults.scss | 9 + lib/assets/styles/variables.scss | 56 +- lib/components/base/Avatar.vue | 6 +- lib/components/base/CopyCode.vue | 4 +- lib/components/base/DoubleIcon.vue | 43 +- lib/components/base/DropArea.vue | 2 +- lib/components/base/ListSelector.vue | 53 ++ lib/components/base/MarkdownEditor.vue | 2 +- lib/components/base/PageBar.vue | 87 ++ lib/components/base/Pagination.vue | 132 +-- lib/components/base/ProjectCard.vue | 820 ++++++++---------- lib/components/base/Promotion.vue | 2 +- lib/components/base/ScrollableMultiSelect.vue | 106 +++ lib/components/index.js | 3 + lib/components/nav/Breadcrumbs.vue | 7 +- lib/components/search/Categories.vue | 22 +- lib/components/search/SearchFilter.vue | 28 +- lib/helpers/projects.js | 32 +- package.json | 2 +- 21 files changed, 821 insertions(+), 695 deletions(-) create mode 100644 lib/components/base/ListSelector.vue create mode 100644 lib/components/base/PageBar.vue create mode 100644 lib/components/base/ScrollableMultiSelect.vue diff --git a/lib/assets/icons/right-arrow.svg b/lib/assets/icons/right-arrow.svg index 6046f1518..2e8e17d01 100644 --- a/lib/assets/icons/right-arrow.svg +++ b/lib/assets/icons/right-arrow.svg @@ -1,4 +1 @@ - - - + diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss index 9bf5b0d4d..e908f8005 100644 --- a/lib/assets/styles/classes.scss +++ b/lib/assets/styles/classes.scss @@ -223,6 +223,34 @@ } } +.universal-modal { + @extend .universal-body; + + padding: var(--spacing-card-bg); + display: flex; + flex-direction: column; + + > p:first-child { + margin-top: 0; + } + + @media screen and (max-width: 750px) { + .adjacent-input, + &.adjacent-input &:not(&.small) { + flex-direction: row; + align-items: center; + } + } + + @media screen and (max-width: calc(600px + 2rem)) { + .adjacent-input, + &.adjacent-input &:not(&.small) { + flex-direction: column; + align-items: flex-start; + } + } +} + // CLICKABLES/BUTTONS a, .clickable { @@ -245,12 +273,12 @@ a, cursor: pointer; &:not(.btn-outline.btn-hover-filled, .btn-transparent) { - filter: brightness(0.85); + filter: var(--filter-hover); } } &:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) { - filter: brightness(0.8); + filter: var(--filter-active); } &:disabled.quiet-disabled { @@ -272,11 +300,11 @@ a, &:focus-visible:not(&.disabled), &:hover:not(&.disabled) { - filter: brightness(0.85); + filter: brightness(var(--filter-hover)); } &:active:not(&.disabled) { - filter: brightness(0.8); + filter: brightness(var(--filter-active)); } // For some reason this within the above block makes it universal and not only applied to children. SCSS bug maybe? @@ -319,6 +347,7 @@ a, &.btn-transparent { --_accent-color: var(--color-base); color: var(--_accent-color); + border-color: transparent; &.btn-hover-filled-only { color: var(--color-base); @@ -382,6 +411,12 @@ a, --_accent-color: var(--color-orange); } + &.btn-brand-highlight { + --_text-color: var(--color-brand); + --_background-color: var(--color-brand-highlight); + --_accent-color: var(--color-brand-highlight); + } + &.btn-red { --_text-color: var(--color-accent-contrast); --_background-color: var(--color-red); @@ -427,10 +462,10 @@ a, color: var(--_text-color); background-color: var(--_background-color); - box-shadow: var(--_shadow); + box-shadow: none; border-radius: var(--radius-md); - - padding: var(--gap-sm) var(--gap-lg); + padding: var(--gap-sm) var(--gap-md); + border: var(--button-border-width) solid var(--button-divider); display: flex; align-items: center; @@ -440,7 +475,7 @@ a, height: fit-content; text-decoration: none; gap: 0.5rem; - line-height: 1.25rem; + line-height: 1rem; svg { width: 1.25rem; @@ -461,6 +496,7 @@ a, &.transparent { background: none; box-shadow: none; + border-color: transparent; } &.btn-dropdown-animation { @@ -507,30 +543,23 @@ a, .project-list { width: 100%; - gap: var(--gap-md); - overflow: hidden; + gap: var(--spacing-card-md); + overflow: unset !important; + container-type: inline-size; &:not(:first-child) { - margin-top: var(--gap-md); + margin-top: var(--spacing-card-md); } &:not(:empty) { - margin-bottom: var(--gap-md); + margin-bottom: var(--spacing-card-md); } } .project-list.display-mode--list { - display: flex; - flex-direction: column; -} - -.project-list.display-mode--gallery { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - - @media screen and (max-width: 750px) { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } + grid-template-columns: repeat(1, 1fr); + gap: 0.75rem; } .project-list.display-mode--grid { @@ -550,8 +579,7 @@ a, } @media screen and (max-width: 550px) { - display: flex; - flex-direction: column; + grid-template-columns: repeat(1, 1fr); } } @@ -563,6 +591,7 @@ a, background-color: var(--color-raised-bg); border-radius: var(--radius-lg); + border: var(--card-border-width) solid var(--card-divider); margin-bottom: var(--gap-md); outline: 2px solid transparent; @@ -665,11 +694,11 @@ a, &.selectable:focus-visible, &.selectable:hover { cursor: pointer; - filter: brightness(0.85); + filter: var(--filter-hover); } &.selectable:active { - filter: brightness(0.8); + filter: var(--filter-active); scale: 0.99; } } @@ -861,7 +890,7 @@ a, a { cursor: pointer; - color: var(--color-link); + color: var(--color-blue); &:focus-visible, &:hover { @@ -948,6 +977,16 @@ a, th { border-bottom: 0.1rem solid var(--color-button-bg); } + + kbd { + background-color: var(--color-button-bg); + color: var(--color-base); + box-shadow: var(--shadow-inset-lg); + padding: 0.2em 0.5em 0.1em; + border-radius: 3px; + line-height: 1; + font-size: 0.85em !important; + } } details { @@ -964,7 +1003,7 @@ a, border-radius: var(--radius-xs); &:hover { - filter: brightness(0.85); + filter: var(--filter-hover); } } diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss index f9a2dd20c..1d98cda9b 100644 --- a/lib/assets/styles/defaults.scss +++ b/lib/assets/styles/defaults.scss @@ -40,6 +40,7 @@ body { a.uncolored { color: inherit; + text-decoration: none; } input[type='text'], @@ -129,6 +130,7 @@ input[type='number'] { input { padding: 0 2.5rem; width: 100%; + box-shadow: none; } &:focus-within svg { @@ -224,3 +226,10 @@ h3 { margin-block: var(--gap-md) var(--gap-md); color: var(--color-contrast); } + +h1, +h2, +h3 { + font-weight: 600; +} + diff --git a/lib/assets/styles/variables.scss b/lib/assets/styles/variables.scss index bcf99e823..805e3c832 100644 --- a/lib/assets/styles/variables.scss +++ b/lib/assets/styles/variables.scss @@ -1,5 +1,4 @@ html { - @extend .light-mode; --dark-color-base: #b0bac5; --dark-color-contrast: #ecf9fb; @@ -8,26 +7,43 @@ html { --color-ad-contrast: black; --color-ad-highlight: var(--color-purple); + --card-border-width: 1px; + --button-border-width: 1px; + --divider-border-width: 1px; + + --round-little: 5px; + --round-univ: 9px; + --round-card: 13px; + --gap-xs: 0.25rem; --gap-sm: 0.5rem; --gap-md: 0.75rem; --gap-lg: 1rem; - --gap-xl: 1.5rem; + --gap-xl: 1.25rem; - --radius-xs: 0.25rem; - --radius-sm: 0.5rem; - --radius-md: 0.75rem; - --radius-lg: 1rem; - --radius-xl: 1.25rem; + --radius-xs: var(--round-univ); + --radius-sm: var(--round-univ); + --radius-md: var(--round-univ); + --radius-lg: var(--round-univ); + --radius-xl: var(--round-univ); --radius-max: 999999999px; } .light-mode, .light { - --color-bg: #e5e7eb; + --color-bg: #fafafa; --color-raised-bg: #ffffff; --color-super-raised-bg: #e9e9e9; - --color-button-bg: hsl(220, 13%, 91%); + --color-button-bg: #f0f1f2; + + --color-divider: rgba(78, 67, 121, 0.2); + --color-button-divider: rgba(78, 67, 121, 0.1); + --color-card-divider: rgba(77, 66, 120, 0.2); + + --color-tag-bg: rgba(0, 0, 0, 0.075); + + --filter-hover: brightness(90%); + --filter-active: brightness(80%); --color-base: hsl(221, 39%, 11%); --color-secondary: #6b7280; @@ -53,10 +69,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: 2px 2px 24px 0px rgba(0, 0, 0, 0.05), 3px 6px 24px 8px rgba(0, 0, 0, 0.07); - --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px; + --shadow-card: 0px 0px 10px 2px hsla(0, 0%, 0%, 0.025); --color-tooltip-text: var(--color-accent-contrast); --color-tooltip-bg: var(--color-base); @@ -65,9 +80,18 @@ html { .dark-mode, .dark { --color-bg: #16181c; - --color-raised-bg: #26292f; + --color-raised-bg: #24262b; --color-super-raised-bg: #40434a; - --color-button-bg: hsl(222, 13%, 30%); + --color-button-bg: rgb(51, 54, 61); + + --color-divider: rgba(176, 169, 207, 0.2); + --color-button-divider: transparent; + --color-card-divider: rgba(176, 169, 207, 0.1); + + --color-tag-bg: var(--color-button-bg); + + --filter-hover: brightness(120%); + --filter-active: brightness(140%); --color-base: var(--dark-color-base); --color-secondary: #96a2b0; @@ -91,9 +115,7 @@ 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: 2px 2px 24px 0px rgba(0, 0, 0, 0.15), 3px 6px 48px 16px rgba(0, 0, 0, 0.15); --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px; --color-tooltip-text: var(--color-base); diff --git a/lib/components/base/Avatar.vue b/lib/components/base/Avatar.vue index e4b852e58..bfbfe5908 100644 --- a/lib/components/base/Avatar.vue +++ b/lib/components/base/Avatar.vue @@ -85,15 +85,17 @@ function updatePixelated() { box-shadow: var(--shadow-inset-lg), var(--shadow-card); height: var(--size) !important; width: var(--size) !important; - background-color: var(--color-button-bg); object-fit: cover; max-width: var(--size) !important; max-height: var(--size) !important; + background-color: var(--color-raised-bg); + border: 1px solid var(--color-divider); + &.size-xxs { --size: 1.25rem; box-shadow: var(--shadow-inset), var(--shadow-card); - border-radius: var(--radius-sm); + border-radius: 5px; } &.size-xs { diff --git a/lib/components/base/CopyCode.vue b/lib/components/base/CopyCode.vue index b54d7ea81..2ec33b592 100644 --- a/lib/components/base/CopyCode.vue +++ b/lib/components/base/CopyCode.vue @@ -58,12 +58,12 @@ async function copyText() { } &:hover { - filter: brightness(0.85); + filter: brightness(var(--filter-hover)); } &:active { transform: scale(0.95); - filter: brightness(0.8); + filter: brightness(var(--filter-active)); } } diff --git a/lib/components/base/DoubleIcon.vue b/lib/components/base/DoubleIcon.vue index ff054e837..41368bac6 100644 --- a/lib/components/base/DoubleIcon.vue +++ b/lib/components/base/DoubleIcon.vue @@ -1,33 +1,62 @@ - + diff --git a/lib/components/base/MarkdownEditor.vue b/lib/components/base/MarkdownEditor.vue index d72c066b3..434283f7d 100644 --- a/lib/components/base/MarkdownEditor.vue +++ b/lib/components/base/MarkdownEditor.vue @@ -727,7 +727,7 @@ function openVideoModal() { .markdown-resource-link { cursor: pointer; - color: var(--color-link); + color: var(--color-blue); &:focus-visible, &:hover { diff --git a/lib/components/base/PageBar.vue b/lib/components/base/PageBar.vue new file mode 100644 index 000000000..cad2f2cfd --- /dev/null +++ b/lib/components/base/PageBar.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/lib/components/base/Pagination.vue b/lib/components/base/Pagination.vue index 221da9971..e1d2a34d2 100644 --- a/lib/components/base/Pagination.vue +++ b/lib/components/base/Pagination.vue @@ -3,7 +3,7 @@
- +
{ - let pages: ('-' | number)[] = [] - - if (props.count > 7) { - if (props.page + 3 >= props.count) { - pages = [ - 1, - '-', - props.count - 4, - props.count - 3, - props.count - 2, - props.count - 1, - props.count, - ] - } else if (props.page > 5) { - pages = [1, '-', props.page - 1, props.page, props.page + 1, '-', props.count] - } else { - pages = [1, 2, 3, 4, 5, '-', props.count] - } - } else { - pages = Array.from({ length: props.count }, (_, i) => i + 1) + const pages = [] + const fourFromStart = 4 + const fourFromEnd = props.count - 3 + pages.push(1) + if (props.page <= fourFromStart) { + pages.push(2, 3, 4, 5) } - + if (props.page > fourFromStart) { + pages.push('-') + } + if (props.page > fourFromStart && props.page < fourFromEnd) { + pages.push(props.page - 1, props.page, props.page + 1) + } + if (props.page < fourFromEnd) { + pages.push('-') + } + if (props.page >= fourFromEnd) { + pages.push(props.count - 4, props.count - 3, props.count - 2, props.count - 1) + } + pages.push(props.count) return pages }) @@ -102,53 +103,12 @@ function switchPage(newPage: number) { diff --git a/lib/components/base/ProjectCard.vue b/lib/components/base/ProjectCard.vue index 35f660f9a..62d2f1da1 100644 --- a/lib/components/base/ProjectCard.vue +++ b/lib/components/base/ProjectCard.vue @@ -1,585 +1,443 @@ +import { HeartIcon, DownloadIcon, CalendarIcon, HistoryIcon, Categories, TagIcon, Avatar, formatNumber } from '@' +import { useVIntl, defineMessages } from '@vintl/vintl' - diff --git a/lib/components/base/Promotion.vue b/lib/components/base/Promotion.vue index f83f8c4c6..a0a6e620b 100644 --- a/lib/components/base/Promotion.vue +++ b/lib/components/base/Promotion.vue @@ -44,7 +44,7 @@ const target = computed(() => (props.external ? '_blank' : '_self')) diff --git a/lib/components/index.js b/lib/components/index.js index 000ab7584..a6f163f37 100644 --- a/lib/components/index.js +++ b/lib/components/index.js @@ -22,6 +22,9 @@ export { default as ProjectCard } from './base/ProjectCard.vue' export { default as Promotion } from './base/Promotion.vue' export { default as Slider } from './base/Slider.vue' export { default as Toggle } from './base/Toggle.vue' +export { default as ListSelector } from './base/ListSelector.vue' +export { default as PageBar } from './base/PageBar.vue' +export { default as ScrollableMultiSelect } from './base/ScrollableMultiSelect.vue' // Branding export { default as AnimatedLogo } from './brand/AnimatedLogo.vue' diff --git a/lib/components/nav/Breadcrumbs.vue b/lib/components/nav/Breadcrumbs.vue index b23ded1e2..b96a7be8d 100644 --- a/lib/components/nav/Breadcrumbs.vue +++ b/lib/components/nav/Breadcrumbs.vue @@ -1,5 +1,5 @@