From 6bdfd57332a2ad46459f31ba6a5456968ed9bf9d Mon Sep 17 00:00:00 2001 From: Elihuso Quigley Date: Tue, 22 Oct 2024 14:48:41 +0800 Subject: [PATCH 1/3] [+] Search bar --- src/views/Home.vue | 69 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 67 insertions(+), 2 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 78d578231..45cea876a 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -16,6 +16,12 @@ + +
+ + +
+ @@ -75,10 +81,11 @@ import {isUwU, UwU} from "@/logic/uwu"; import {viaBalloon} from "@/logic/viaFetch"; import router from "@/router"; import TdorComments from "@/views/TdorComments.vue"; +import {Icon} from "@iconify/vue"; import urljoin from "url-join"; import {Component, Ref, Vue} from 'vue-facing-decorator'; -@Component({ components: { TdorComments, Loading, RandomPerson, BirthdayButton } }) +@Component({ components: { TdorComments, Loading, RandomPerson, BirthdayButton, Icon } }) export default class Home extends Vue { clicked = '' showAdd = false @@ -91,6 +98,8 @@ export default class Home extends Vue { htmlBottom = handleIconFromString(this.lang === 'zh_hans' ? htmlBottom : (this.lang === 'zh_hant' ? htmlBottomHant : htmlBottomEn)); people: PersonMeta[] = null as never as PersonMeta[] + fullPeople = [] as PersonMeta[] + searchKey = '' birthdayList = [] as [string, string][] @@ -113,7 +122,7 @@ export default class Home extends Vue { } updated() { - if (this.bookmark != undefined) { + if ((this.bookmark != undefined) && (this.bookmark.length > 0)) { const width = this.bookmark[0].offsetWidth - 10 for (const b of this.bookmarkTexts) fitText(b, { width }) } @@ -125,6 +134,7 @@ export default class Home extends Vue { .then(it => it.text()) .then(it => { this.people = (isEaster() && (gaussian() < 0.35)) ? shuffle(JSON.parse(it)) : JSON.parse(it) + this.fullPeople = JSON.parse(it) const now = new Date(); const pros = ((now.getDate() == 1) && (now.getMonth() + 1 == 4)) ? 0.5 : 0.05; if (isEaster() && (gaussian() < pros)) scheduledLoopTask(1500, () => { @@ -159,6 +169,15 @@ export default class Home extends Vue { router.push(`/profile/${p.id}`) } + updateSearch() { + this.people = []; + for (const p of this.fullPeople) { + if (p.id.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase()) || p.name.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase())) { + this.people.push(p); + } + } + } + profileUrl(p: PersonMeta): string { return replaceUrlVars(p.profileUrl, p.id) } @@ -194,6 +213,36 @@ export default class Home extends Vue { #profiles margin-top: 20px +.search-bar + margin: 1rem auto + display: flex + flex-direction: row + flex-wrap: nowrap + justify-content: space-around + align-items: center + padding: 0 2rem + + .search-icon + width: 28px + height: 28px + color: $color-text-main + cursor: pointer + + .search-input + width: calc(100% - 36px) + height: 24px + color: $color-text-main + background-color: rgba(0, 0, 0, 0.05) + border-radius: 10px + border: none + outline: $color-text-main + font-size: 16px + text-indent: 5px + + &:active + outline: $color-text-main + border: none + // Profile picture alignment .profile position: relative @@ -267,6 +316,14 @@ export default class Home extends Vue { .profiles-move transition: all 0.5s $ease-in-out-cric +.profiles-enter-active .profiles-leave-active + transition: all .5s $ease-out-cric !important + +.profiles-enter-from, .profiles-leave-to + opacity: 0 + transform: translateY(50px) + + @media screen and (max-width: 440px) .profile .front, .back @@ -283,4 +340,12 @@ export default class Home extends Vue { .bookmark border: 40px solid rgba(255, 189, 202, 0.25) !important border-bottom: 10px solid transparent !important + + .search-bar + .search-icon + color: $color-text-dark-main + .search-input + color: $color-text-dark-main + outline: $color-text-dark-main + background: rgba(255, 255, 255, 0.05) From d387fd8a62e1ccf7b8e18566b4437de737010254 Mon Sep 17 00:00:00 2001 From: Elihuso Quigley Date: Tue, 22 Oct 2024 16:03:18 +0800 Subject: [PATCH 2/3] [+] Date Picker --- package.json | 1 + src/css/datepicker.css | 100 +++++++++++++++++++++++++++++++++++++++++ src/logic/data.ts | 5 ++- src/main.ts | 2 + src/views/Home.vue | 33 +++++++++++--- yarn.lock | 19 ++++++++ 6 files changed, 151 insertions(+), 9 deletions(-) create mode 100644 src/css/datepicker.css diff --git a/package.json b/package.json index 7a2234e12..862e0470c 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", + "@vuepic/vue-datepicker": "^9.0.3", "element-plus": "^2.7.1", "katex": "^0.16.10", "lxgw-wenkai-webfont": "^1.7.0", diff --git a/src/css/datepicker.css b/src/css/datepicker.css new file mode 100644 index 000000000..9d7d6eb59 --- /dev/null +++ b/src/css/datepicker.css @@ -0,0 +1,100 @@ + +:root { + /*General*/ + --dp-font-family: 'LXGW Wenkai' -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", + "Helvetica Neue", sans-serif; + --dp-border-radius: 10px; /*Configurable border-radius*/ + --dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/ + --dp-common-transition: all 0.5s ease-in; /*Generic transition applied on buttons and calendar cells*/ + + /*Sizing*/ + --dp-button-height: 24px; /*Size for buttons in overlays*/ + --dp-month-year-row-height: 24px; /*Height of the month-year select row*/ + --dp-month-year-row-button-size: 24px; /*Specific height for the next/previous buttons*/ + --dp-button-icon-height: 16px; /*Icon sizing in buttons*/ + --dp-cell-size: 35px; /*Width and height of calendar cell*/ + --dp-cell-padding: 5px; /*Padding in the cell*/ + --dp-common-padding: 10px; /*Common padding used*/ + --dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/ + --dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/ + --dp-menu-min-width: 260px; /*Adjust the min width of the menu*/ + --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/ + --dp-row-margin: 5px 0; /*Adjust the spacing between rows in the calendar*/ + --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/ + --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/ + --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/ + --dp-time-inc-dec-button-size: 32px; /*Sizing for arrow buttons in the time picker*/ + --dp-menu-padding: 6px 8px; /*Menu padding*/ + + /*Font sizes*/ + --dp-font-size: 1rem; /*Default font-size*/ + --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/ + --dp-time-font-size: 0.8rem; /*Font size in the time picker*/ + + /*Transitions*/ + --dp-animation-duration: 0.1s; /*Transition duration*/ + --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/ + --dp-transition-timing: ease-out; /*Timing on slide animations*/ +} + +.dp__theme_light { + --dp-background-color: #f0ece9; + --dp-text-color: #70512a; + --dp-hover-color: #e5deda; + --dp-hover-text-color: rgba(166, 134, 89, 0.84); + --dp-hover-icon-color: #959595; + --dp-primary-color: #ffeedb; + --dp-primary-disabled-color: #efdecb; + --dp-primary-text-color: #705a2a; + --dp-secondary-color: rgba(166, 134, 89, 0.84); + --dp-border-color: #ddd; + --dp-menu-border-color: #ddd; + --dp-border-color-hover: #aaaeb7; + --dp-border-color-focus: #aaaeb7; + --dp-disabled-color: #f6f6f6; + --dp-scroll-bar-background: #f3f3f3; + --dp-scroll-bar-color: #959595; + --dp-success-color: #76d275; + --dp-success-color-disabled: #a3d9b1; + --dp-icon-color: #959595; + --dp-danger-color: #ff6f60; + --dp-marker-color: #ff6f60; + --dp-tooltip-color: #fafafa; + --dp-disabled-color-text: #8e8e8e; + --dp-highlight-color: rgb(25 118 210 / 10%); + --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3); + --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121); + --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3); +} + +[data-theme="dark"] { + .dp__theme_light { + --dp-background-color: hsl(32, 21%, 12%); + --dp-text-color: #f3b8a6; + --dp-hover-color: hsl(32, 21%, 7%); + --dp-hover-text-color: rgba(255, 225, 185, 0.9); + --dp-hover-icon-color: #959595; + --dp-primary-color: hsl(33, 25%, 25%); + --dp-primary-disabled-color: hsl(33, 25%, 15%); + --dp-primary-text-color: #ff8193; + --dp-secondary-color: rgba(255, 225, 185, 0.9); + --dp-border-color: #2d2d2d; + --dp-menu-border-color: #2d2d2d; + --dp-border-color-hover: #aaaeb7; + --dp-border-color-focus: #aaaeb7; + --dp-disabled-color: #737373; + --dp-disabled-color-text: #d0d0d0; + --dp-scroll-bar-background: #212121; + --dp-scroll-bar-color: #484848; + --dp-success-color: #00701a; + --dp-success-color-disabled: #428f59; + --dp-icon-color: #959595; + --dp-danger-color: #e53935; + --dp-marker-color: #e53935; + --dp-tooltip-color: #3e3e3e; + --dp-highlight-color: rgb(0 92 178 / 20%); + --dp-range-between-dates-background-color: var(--dp-hover-color, #484848); + --dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff); + --dp-range-between-border-color: var(--dp-hover-color, #fff); + } +} \ No newline at end of file diff --git a/src/logic/data.ts b/src/logic/data.ts index 432a44ecd..9b6f631ab 100644 --- a/src/logic/data.ts +++ b/src/logic/data.ts @@ -1,8 +1,9 @@ export interface PersonMeta { path: string, id: string, - name: string - profileUrl: string + name: string, + profileUrl: string, + sortKey?: any, } export interface CommentReply { diff --git a/src/main.ts b/src/main.ts index e15b2b5f3..5b0209465 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,5 +10,7 @@ import 'element-plus/theme-chalk/el-message.css' import 'element-plus/theme-chalk/el-message-box.css' import 'element-plus/theme-chalk/el-overlay.css' import 'element-plus/theme-chalk/el-button.css' +import '@vuepic/vue-datepicker/dist/main.css' +import '@/css/datepicker.css' createApp(App).use(router).mount('#app') diff --git a/src/views/Home.vue b/src/views/Home.vue index 45cea876a..16687e927 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -19,7 +19,8 @@
- + +
@@ -70,7 +71,8 @@ import {fitText} from "@/logic/dom_utils"; import {isEaster} from "@/logic/easterEgg"; import { fetchWithLang, - gaussian, gaussian_shuffle, + gaussian, + gaussian_shuffle, getResponseSync, handleIconFromString, scheduledLoopTask, @@ -82,10 +84,11 @@ import {viaBalloon} from "@/logic/viaFetch"; import router from "@/router"; import TdorComments from "@/views/TdorComments.vue"; import {Icon} from "@iconify/vue"; +import VueDatePicker from '@vuepic/vue-datepicker' import urljoin from "url-join"; import {Component, Ref, Vue} from 'vue-facing-decorator'; -@Component({ components: { TdorComments, Loading, RandomPerson, BirthdayButton, Icon } }) +@Component({ components: { TdorComments, Loading, RandomPerson, BirthdayButton, Icon, VueDatePicker } }) export default class Home extends Vue { clicked = '' showAdd = false @@ -100,6 +103,7 @@ export default class Home extends Vue { people: PersonMeta[] = null as never as PersonMeta[] fullPeople = [] as PersonMeta[] searchKey = '' + dateRange = [] birthdayList = [] as [string, string][] @@ -172,8 +176,17 @@ export default class Home extends Vue { updateSearch() { this.people = []; for (const p of this.fullPeople) { - if (p.id.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase()) || p.name.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase())) { - this.people.push(p); + if (p.id.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase()) || + p.name.trim().toLowerCase().includes(this.searchKey.trim().toLowerCase())) { + if (!this.dateRange) this.people.push(p); + else if ((this.dateRange.length < 2)) this.people.push(p); + else { + const sortDate = new Date(p.sortKey) + if ((this.dateRange[0].getTime() < sortDate.getTime()) && + (this.dateRange[1].getTime() > sortDate.getTime())) { + this.people.push(p); + } + } } } } @@ -229,8 +242,8 @@ export default class Home extends Vue { cursor: pointer .search-input - width: calc(100% - 36px) - height: 24px + width: calc(50% - 48px) + height: 26px color: $color-text-main background-color: rgba(0, 0, 0, 0.05) border-radius: 10px @@ -238,11 +251,16 @@ export default class Home extends Vue { outline: $color-text-main font-size: 16px text-indent: 5px + padding: 6px 30px 6px 12px &:active outline: $color-text-main border: none + .search-date + width: calc(50% - 48px) + height: 36px + // Profile picture alignment .profile position: relative @@ -344,6 +362,7 @@ export default class Home extends Vue { .search-bar .search-icon color: $color-text-dark-main + .search-input color: $color-text-dark-main outline: $color-text-dark-main diff --git a/yarn.lock b/yarn.lock index d8ecfa149..dde9e5864 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1903,6 +1903,17 @@ __metadata: languageName: node linkType: hard +"@vuepic/vue-datepicker@npm:^9.0.3": + version: 9.0.3 + resolution: "@vuepic/vue-datepicker@npm:9.0.3" + dependencies: + date-fns: "npm:^3.6.0" + peerDependencies: + vue: ">=3.2.0" + checksum: 10c0/c16ee115a1cc71afd018c967b4a36190beb093c97c5fd42eae65c110aa173c73747562d81e1b41c0f16bb7e3caa695efcc6530171aad55c19d7dd00385c8a7f9 + languageName: node + linkType: hard + "@vueuse/core@npm:^9.1.0": version: 9.13.0 resolution: "@vueuse/core@npm:9.13.0" @@ -2606,6 +2617,13 @@ __metadata: languageName: node linkType: hard +"date-fns@npm:^3.6.0": + version: 3.6.0 + resolution: "date-fns@npm:3.6.0" + checksum: 10c0/0b5fb981590ef2f8e5a3ba6cd6d77faece0ea7f7158948f2eaae7bbb7c80a8f63ae30b01236c2923cf89bb3719c33aeb150c715ea4fe4e86e37dcf06bed42fb6 + languageName: node + linkType: hard + "dayjs@npm:^1.11.3": version: 1.11.9 resolution: "dayjs@npm:1.11.9" @@ -4923,6 +4941,7 @@ __metadata: "@vitejs/plugin-vue": "npm:^5.0.4" "@vitejs/plugin-vue-jsx": "npm:^3.1.0" "@vue/eslint-config-typescript": "npm:^11.0.3" + "@vuepic/vue-datepicker": "npm:^9.0.3" autocorrect-node: "npm:^2.9.0" element-plus: "npm:^2.7.1" eslint: "npm:^8.57.0" From a347b5d2bf509a3c538b17c2f60de27d4e4eaf24 Mon Sep 17 00:00:00 2001 From: Elihuso Quigley Date: Tue, 22 Oct 2024 17:31:10 +0800 Subject: [PATCH 3/3] [O] Layout on phone screen --- src/views/Home.vue | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/views/Home.vue b/src/views/Home.vue index 16687e927..3e93f58d0 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -350,6 +350,21 @@ export default class Home extends Vue { height: $len width: $len +@media screen and (max-width: 700px) + .search-bar + display: flex + flex-direction: column + gap: 0.5rem + + .search-icon + display: none + + .search-input + width: calc(100% - 40px) + + .search-date + width: 100% + [data-theme="dark"] .back, .front border: 10px solid rgba(27, 27, 32, 0.8964) !important