[+] Folder View

src/components.d.ts

@@ -38,7 +38,9 @@ declare module 'vue' {
     MarkdownTooltip: typeof import('./components/MarkdownTooltip.vue')['default']
     MDX: typeof import('./components/MDX.vue')['default']
     PhotoScroll: typeof import('./components/PhotoScroll.vue')['default']
+    ProfileBookmark: typeof import('./components/ProfileBookmark.vue')['default']
     ProfileCard: typeof import('./components/ProfileCard.vue')['default']
+    ProfileFolder: typeof import('./components/ProfileFolder.vue')['default']
     RandomPerson: typeof import('./components/RandomPerson.vue')['default']
     RecaptchaV2: typeof import('./components/RecaptchaV2.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/ProfileBookmark.vue

@@ -0,0 +1,157 @@
+<script lang="ts">
+import ProfileFolder from "@/components/ProfileFolder.vue";
+import {replaceUrlVars} from "@/logic/config";
+import {PersonMeta} from "@/logic/data";
+import {Component, Prop, Vue} from 'vue-facing-decorator';
+
+@Component({ components: { ProfileFolder } })
+export default class ProfileBookmark extends Vue {
+    @Prop({ required: true }) list: PersonMeta[]
+    @Prop({ required: true }) name: string
+
+    source = [] as string[]
+    showFolder = false;
+
+    mounted() {
+        if (!this.list.length) return;
+        if (this.list.length >= 4) {
+            for (let i = 0; i < 4; ++i) {
+                this.source.push(this.profileUrl(this.list[i]));
+            }
+        }
+        else {
+            for (const o of this.list) {
+                this.source.push(this.profileUrl(o));
+            }
+        }
+    }
+
+    profileUrl(p: PersonMeta): string {
+        return replaceUrlVars(p.profileUrl, p.id)
+    }
+}
+</script>
+
+<template>
+    <div class="profile">
+        <div class="back"/>
+        <div class="img-list front clickable" v-on:click="showFolder = true">
+            <img v-for="i of source" :key="i" :src="i" :alt="i"/>
+        </div>
+        <div class="name font-custom" ref="bookmarkTexts">{{ name }}</div>
+        <div class="bookmark" ref="bookmark"/>
+    </div>
+    <ProfileFolder :name="name" :people="list" v-if="showFolder" />
+</template>
+
+<style lang="scss">
+@import "@/css/colors";
+@import "@/css/motion";
+@import "@/css/global";
+
+.profile {
+    position: relative;
+    display: inline-block;
+    margin: 20px 20px 30px;
+    vertical-align: top;
+    text-align: left;
+
+    .front, .back {
+        border: 10px solid white;
+        outline: 2px solid $color-text-main;
+        height: 150px;
+        width: 150px;
+        transition: all .25s $ease-out-cric;
+    }
+
+    .back {
+        z-index: 2;
+        position: relative;
+    }
+
+    .front {
+        transform: rotate(10deg);
+        position: absolute;
+        z-index: 4;
+        height: 150px;
+        top: 0;
+        left: 0;
+
+        background-blend-mode: screen;
+        background-color: #ffffff;
+
+        &:hover {
+            transform: rotate(2deg);
+        }
+    }
+
+    .name {
+        margin-top: 3px;
+        margin-left: 15px;
+        text-align: left;
+        position: relative;
+        z-index: 3;
+        display: inline-flex;
+        align-items: center;
+        font-weight: bold;
+    }
+
+    .bookmark {
+        border: 40px solid rgba(255, 189, 202, .49);
+        border-bottom: 10px solid transparent;
+
+        width: 0;
+        left: 10px;
+        height: 10px;
+
+        position: absolute;
+        bottom: -15px;
+        z-index: 2;
+    }
+
+    .img-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        padding: 2px;
+        gap: 8px;
+        flex-direction: row-reverse;
+
+        img {
+            flex: 1;
+            width: 70px;
+            height: 70px;
+            border-radius: 10px;
+            object-fit: cover;
+        }
+    }
+}
+
+@media screen and (max-width: 440px) {
+    .profile {
+        .front, .back {
+            border: 5px solid white;
+            height: 30vw;
+            width: 30vw;
+        }
+    }
+}
+
+[data-theme="dark"] {
+    .back, .front {
+        border: 10px solid rgba(27, 27, 32, .8964) !important;
+        outline: 2px solid $color-text-dark-main !important;
+    }
+
+    .front {
+        background-blend-mode: screen;
+        background-color: rgba(27, 27, 32, 0.95) !important;
+    }
+
+    .bookmark {
+        border: 40px solid rgba(255, 189, 202, 0.25) !important;
+        border-bottom: 10px solid transparent !important;
+    }
+}
+</style>

src/components/ProfileFolder.vue

@@ -0,0 +1,193 @@
+<script lang="ts">
+import {replaceUrlVars} from "@/logic/config";
+import {PersonMeta} from "@/logic/data";
+import {delay} from "@/logic/helper";
+import {Icon} from "@iconify/vue";
+import {Vue, Component, Prop} from 'vue-facing-decorator';
+
+@Component({
+    components: { Icon },
+})
+export default class ProfileFolder extends Vue {
+    @Prop({ required: true }) people: PersonMeta[]
+    @Prop({ required: true }) name: string
+
+    show = [] as PersonMeta[]
+    page = 0
+    maxPage = 0;
+
+    mounted() {
+        this.model = true;
+        this.maxPage = Math.floor(this.people.length / 9);
+        for (let i = 0; i < this.people.length && i < 9; i++) {
+            this.show.push(this.people[i]);
+            delay(500).then()
+        }
+    }
+
+    pushing(id: string): void {
+        window.open(`/profile/${id}`, '_self');
+    }
+
+    doNext() {
+        if (this.page < this.maxPage) {
+            this.page += 1;
+            this.show = [];
+            for (let i = this.page * 9; (i < this.page * 9 + 9) && (i < this.people.length); ++i) {
+                delay(500).then()
+                this.show.push(this.people[i]);
+            }
+        }
+    }
+
+    doPrev() {
+        if (this.page > 0) {
+            this.page -= 1;
+            this.show = [];
+            for (let i = this.page * 9; i < this.page * 9 + 9; ++i) {
+                delay(500).then()
+                this.show.push(this.people[i]);
+            }
+        }
+    }
+
+    profileUrl(p: PersonMeta): string {
+        return replaceUrlVars(p.profileUrl, p.id)
+    }
+}
+</script>
+
+<template>
+    <div class="drop-panel">
+        <div class="folder">
+            <h1 class="header">{{ name }}</h1>
+            <transition-group name="tac" tag="div" class="items">
+                <div class="item" v-for="p of show" :key="p.id" v-on:click="pushing(p.id)">
+                    <img class="avatar" :src="profileUrl(p)" :alt="'Avatar for ' + p.id"/>
+                </div>
+            </transition-group>
+            <div class="page-container">
+                <Icon class="button-icon" v-on:click="doPrev" icon="iconoir:nav-arrow-left"/>
+                <span class="page-span">{{ page + 1 }} / {{ maxPage + 1 }}</span>
+                <Icon class="button-icon" v-on:click="doNext" icon="iconoir:nav-arrow-right"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+@import "@/css/global";
+@import "@/css/colors";
+@import "@/css/motion";
+
+.drop-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(76, 79, 105, 0.75);
+    z-index: 16;
+
+    .folder {
+        position: fixed;
+        max-width: 600px;
+        max-height: 600px;
+        width: 100%;
+        height: 100%;
+        top: calc(50vh - 400px);
+        left: calc(50vw - 300px);
+        transition: all 0.5s $ease-in-out-cric;
+        background: $color-bg-6;
+        border-radius: 30px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        @media screen and (max-width: 620px) {
+            $w: calc(100vw - 20px);
+            $h: calc($w * 1.33);
+            width: $w;
+            height: $h;
+            left: 10px;
+            top: calc(50vh - $h);
+        }
+
+        h1 {
+            color: $color-text-main;
+            text-align: center;
+            display: block;
+            font-size: 2rem;
+        }
+
+        .items {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+            width: calc(100% - 100px);
+            height: calc(100% - 100px);
+            gap: 30px;
+            overflow: hidden;
+
+            .item {
+                display: block;
+                width: 25%;
+                height: 25%;
+                border-radius: 20px;
+                border: 3px solid $color-text-light;
+                overflow: hidden;
+
+                &:hover {
+                    cursor: pointer;
+                    filter: drop-shadow(0px 0px 5px $color-text-dark-special);
+                }
+
+                .avatar {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+        }
+
+        .page-container {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            justify-content: center;
+            align-items: center;
+            width: calc(100% - 100px);
+            height: 30px;
+            gap: 20px;
+
+            .page-span {
+                font-size: 24px;
+                color: $color-text-main;
+            }
+
+            .button-icon {
+                width: 24px;
+                height: 24px;
+                color: $color-text-main;
+            }
+        }
+    }
+}
+
+.tac-enter-active, .tac-leave-active {
+    transition: all 1s $ease-in-out-cric;
+}
+
+.tac-enter-from {
+    opacity: 0;
+    transform: translateY(-50px);
+}
+
+.tac-leave-to {
+    opacity: 0;
+    transform: translateY(50px);
+}
+</style>

src/views/Home.vue

@@ -280,7 +280,7 @@ export default class Home extends Vue {
         outline: 2px solid $color-text-main
         height: 150px
         width: 150px
-        transition: all .25s ease
+        transition: all .25s $ease-out-cric
 
     .back
         z-index: 2