From 1db59fc052d366f7b4e629f8623df3396c1d8379 Mon Sep 17 00:00:00 2001 From: Geometrically <18202329+Geometrically@users.noreply.github.com> Date: Sun, 28 May 2023 16:36:49 -0400 Subject: [PATCH] Knossos Catch-up (#58) * Knossos Catch-up * bump version * fix build * fix build again * Fix lint * downgrade pnpm * fix modals * fix btn style * add missing styles --- .github/workflows/build.yml | 28 +- .github/workflows/publish.yml | 29 +- docs/components/modal.md | 12 +- lib/assets/icons/history.svg | 5 + lib/assets/omorphia.scss | 3 + lib/assets/styles/classes.scss | 46 +- lib/assets/styles/inter.scss | 40 + lib/components/base/Avatar.vue | 34 +- lib/components/base/Badge.vue | 5 +- lib/components/base/Breadcrumbs.vue | 51 + lib/components/base/FileInput.vue | 12 +- lib/components/base/Modal.vue | 163 +- lib/components/base/ModalConfirm.vue | 122 ++ lib/components/base/ModalReport.vue | 95 +- lib/components/index.js | 3 + lib/components/search/Categories.vue | 5 +- lib/helpers/parse.js | 81 +- lib/helpers/utils.js | 16 +- package.json | 34 +- pnpm-lock.yaml | 2459 ++++++++++++++++++++++++++ yarn.lock | 1763 ------------------ 21 files changed, 3014 insertions(+), 1992 deletions(-) create mode 100644 lib/assets/icons/history.svg create mode 100644 lib/assets/styles/inter.scss create mode 100644 lib/components/base/Breadcrumbs.vue create mode 100644 lib/components/base/ModalConfirm.vue create mode 100644 pnpm-lock.yaml delete mode 100644 yarn.lock diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 0ccca964f..3c02f5723 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -16,18 +16,26 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.x - - name: Get yarn cache - id: yarn-cache - run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT - - uses: actions/cache@v3 + - name: Install pnpm via corepack + shell: bash + run: | + corepack enable + corepack prepare --activate + - name: Get pnpm store directory + id: pnpm-cache + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT + - name: Setup pnpm cache + uses: actions/cache@v3 with: - path: ${{ steps.yarn-cache.outputs.dir }} - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} restore-keys: | - ${{ runner.os }}-yarn- + ${{ runner.os }}-pnpm-store- - name: Install dependencies - run: yarn install --immutable --immutable-cache --check-cache + run: pnpm install - name: Run Lint - run: npm run lint + run: pnpm lint - name: Build - run: npm run build + run: pnpm build diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 553c6cb47..219aed184 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -17,15 +17,28 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.x - registry-url: https://registry.npmjs.org/ - + - name: Install pnpm via corepack + shell: bash + run: | + corepack enable + corepack prepare --activate + - name: Get pnpm store directory + id: pnpm-cache + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT + - name: Setup pnpm cache + uses: actions/cache@v3 + with: + path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- - name: Install dependencies - run: yarn install --immutable --immutable-cache --check-cache - - - name: Build package - run: npm run build - + run: pnpm install + - name: Build + run: pnpm build - name: Publish package - run: npm publish + run: pnpm publish env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/docs/components/modal.md b/docs/components/modal.md index 38db5222f..b31483942 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -2,13 +2,23 @@ :::raw - + + + + ::: diff --git a/lib/assets/icons/history.svg b/lib/assets/icons/history.svg new file mode 100644 index 000000000..75328668e --- /dev/null +++ b/lib/assets/icons/history.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/lib/assets/omorphia.scss b/lib/assets/omorphia.scss index c018078d2..d2b5ee28c 100644 --- a/lib/assets/omorphia.scss +++ b/lib/assets/omorphia.scss @@ -13,3 +13,6 @@ // Finally, apply accessibility-related global styling @import 'styles/accessibility'; + +// Fonts +@import 'styles/inter'; diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss index b161292cb..565b907fc 100644 --- a/lib/assets/styles/classes.scss +++ b/lib/assets/styles/classes.scss @@ -160,6 +160,14 @@ margin-bottom: var(--gap-md); } } + + ul, + ol { + ul, + ol { + margin-bottom: 0; + } + } } .input-group { @@ -965,9 +973,10 @@ select { .multiselect__placeholder { color: var(--color-base); margin-left: 0.5rem; + margin-bottom: 8px; opacity: 0.6; font-size: 1rem; - line-height: 1.25rem; + line-height: 16px; } } @@ -1016,3 +1025,38 @@ select { border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; } + +.input-group { + display: flex; + flex-direction: row; + grid-gap: var(--gap-sm); + flex-wrap: wrap; + max-width: 100%; + align-items: center; + + .multiselect { + width: 15rem; + } + + input { + flex-shrink: 2; + } + + &.shrink-first { + :first-child { + flex-shrink: 2; + flex-grow: 1; + flex-basis: min-content; + } + + :not(:first-child) { + flex-shrink: 1; + } + } +} + +.push-right:not(.input-group), +.push-right.input-group > :first-child { + margin-left: auto; + margin-right: 0; +} diff --git a/lib/assets/styles/inter.scss b/lib/assets/styles/inter.scss new file mode 100644 index 000000000..41f16c8b1 --- /dev/null +++ b/lib/assets/styles/inter.scss @@ -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'); +} diff --git a/lib/components/base/Avatar.vue b/lib/components/base/Avatar.vue index a8b80ca25..38556c3b1 100644 --- a/lib/components/base/Avatar.vue +++ b/lib/components/base/Avatar.vue @@ -2,10 +2,13 @@ { - if (this.$refs.img.naturalWidth < 96 && this.$refs.img.naturalWidth > 0) { - this.$refs.img.style.imageRendering = 'pixelated' - } - } - - if (this.$refs.img.naturalWidth) { - isPixelated() - } else { - this.$refs.img.onload = isPixelated - } + data() { + return { + pixelated: false, } }, + methods: { + updatePixelated() { + if (this.$refs.img && this.$refs.img.naturalWidth && this.$refs.img.naturalWidth <= 96) { + this.pixelated = true + } else { + this.pixelated = false + } + }, + }, } @@ -122,5 +124,9 @@ export default { &.no-shadow { box-shadow: none; } + + &.pixelated { + image-rendering: pixelated; + } } diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue index 99760d5dd..09a74af6b 100644 --- a/lib/components/base/Badge.vue +++ b/lib/components/base/Badge.vue @@ -91,6 +91,7 @@ defineProps({ &.type--accepted, &.type--admin, + &.type--success, &.green { --badge-color: var(--color-green); } @@ -98,12 +99,12 @@ defineProps({ &.type--creator, &.type--approved, &.blue { - color: var(--color-blue); + --badge-color: var(--color-blue); } &.type--unlisted, &.purple { - color: var(--color-purple); + --badge-color: var(--color-purple); } &.type--private, diff --git a/lib/components/base/Breadcrumbs.vue b/lib/components/base/Breadcrumbs.vue new file mode 100644 index 000000000..6e342122f --- /dev/null +++ b/lib/components/base/Breadcrumbs.vue @@ -0,0 +1,51 @@ +{{ currentTitle }} + + + + + + diff --git a/lib/components/base/FileInput.vue b/lib/components/base/FileInput.vue index ab2fc0b81..ffb463c23 100644 --- a/lib/components/base/FileInput.vue +++ b/lib/components/base/FileInput.vue @@ -2,7 +2,13 @@ @@ -42,6 +48,10 @@ export default defineComponent({ type: Boolean, default: false, }, + disabled: { + type: Boolean, + default: false, + }, }, emits: ['change'], data() { diff --git a/lib/components/base/Modal.vue b/lib/components/base/Modal.vue index c4ac3b3cc..50d006a7b 100644 --- a/lib/components/base/Modal.vue +++ b/lib/components/base/Modal.vue @@ -1,58 +1,66 @@ - diff --git a/lib/components/base/ModalConfirm.vue b/lib/components/base/ModalConfirm.vue new file mode 100644 index 000000000..058fe34dd --- /dev/null +++ b/lib/components/base/ModalConfirm.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/lib/components/base/ModalReport.vue b/lib/components/base/ModalReport.vue index 37bd03f82..1d07ad5d0 100644 --- a/lib/components/base/ModalReport.vue +++ b/lib/components/base/ModalReport.vue @@ -1,5 +1,5 @@