Skip to content

Commit

Permalink
feat: upgrade tags UI
Browse files Browse the repository at this point in the history
  • Loading branch information
bennyxguo committed Aug 18, 2023
1 parent 689dd9b commit 45944c6
Show file tree
Hide file tree
Showing 9 changed files with 143 additions and 134 deletions.
2 changes: 1 addition & 1 deletion src/components/Footer/FooterLink.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div
v-if="links"
v-if="links && links.length > 0"
id="footer-link"
class="flex flex-col items-center py-8 bg-ob-deep-900"
>
Expand Down
16 changes: 13 additions & 3 deletions src/components/Paginator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@
v-if="currentPage > 1"
@click="pageChangeEmitter(currentPage - 1)"
>
<SvgIcon icon-class="arrow-left" />
<SvgIcon
class="font-bold"
icon-class="arrow-left"
height="1.25rem"
width="1.25rem"
/>
<span>{{ t('settings.paginator.newer') }}</span>
</li>
<li
Expand Down Expand Up @@ -37,7 +42,12 @@
@click="pageChangeEmitter(currentPage + 1)"
>
<span>{{ t('settings.paginator.older') }}</span>
<SvgIcon icon-class="arrow-right" />
<SvgIcon
class="font-bold"
icon-class="arrow-right"
height="1.25rem"
width="1.25rem"
/>
</li>
</ul>
</div>
Expand Down Expand Up @@ -135,7 +145,7 @@ export default defineComponent({

<style lang="scss" scoped>
.paginator {
@apply flex flex-row justify-center my-8;
@apply flex flex-row justify-center mt-8;
ul {
@apply flex flex-row;
li {
Expand Down
130 changes: 84 additions & 46 deletions src/components/Sidebar/src/TagBox.vue
Original file line number Diff line number Diff line change
@@ -1,66 +1,71 @@
<template>
<div class="sidebar-box">
<SubTitle :title="'titles.tag_list'" icon="tag" />
<TagList>
<template v-if="tags && tags.length > 0">
<TagItem
v-for="tag in tags"
:key="tag.slug"
:name="tag.name"
:slug="tag.slug"
:count="tag.count"
size="xs"
/>
<div
class="
flex flex-row
items-center
hover:opacity-50
mr-2
mb-2
cursor-pointer
transition-all
"
>
<span class="text-center px-3 py-1 rounded-md text-sm">
<b class="border-b-2 border-ob hover:text-ob">
<router-link to="/tags">
{{ t('settings.more-tags') }} ...
</router-link>
</b>
</span>
</div>
</template>
<template v-else-if="tags">
<ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
</template>
<template v-else>
<div class="flex flex-row justify-center items-center">
<SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
{{ t('settings.empty-tag') }}
</div>
</template>
</TagList>
</div>
<Sticky
:stickyTop="32"
endingElId="footer-link"
dynamicElClass="#sticky-tag-box"
>
<div id="sticky-tag-box" class="sidebar-box">
<SubTitle :title="'titles.tag_list'" icon="tag" />
<TagList :class="tagBoxClasses">
<template v-if="tags && tags.length > 0">
<TagItem
v-for="tag in tags"
:key="tag.slug"
:name="tag.name"
:slug="tag.slug"
:count="tag.count"
size="small"
/>
<template v-if="!expand">
<div class="more-cover"></div>
<div class="more-btn" @click="expandBox">
<SvgIcon
class="font-bold"
icon-class="more"
height="2rem"
width="2rem"
/>
<span>{{ t('settings.more-tags') }}</span>
</div>
</template>
</template>
<template v-else-if="tags">
<ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
</template>
<template v-else>
<div class="flex flex-row justify-center items-center">
<SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
{{ t('settings.empty-tag') }}
</div>
</template>
</TagList>
</div>
</Sticky>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue'
import { computed, defineComponent, onMounted, ref } from 'vue'
import { SubTitle } from '@/components/Title'
import { useTagStore } from '@/stores/tag'
import { TagList, TagItem } from '@/components/Tag'
import { useI18n } from 'vue-i18n'
import SvgIcon from '@/components/SvgIcon/index.vue'
import Sticky from '@/components/Sticky.vue'
export default defineComponent({
name: 'ObTag',
components: { SubTitle, TagList, TagItem, SvgIcon },
components: { SubTitle, TagList, TagItem, SvgIcon, Sticky },
setup() {
const tagStore = useTagStore()
const { t } = useI18n()
const expand = ref<boolean>(false)
const fetchData = async () => {
tagStore.fetchTagsByCount(10)
tagStore.fetchAllTags()
}
const expandBox = () => {
expand.value = true
}
onMounted(fetchData)
Expand All @@ -70,6 +75,13 @@ export default defineComponent({
if (tagStore.isLoaded && tagStore.tags.length === 0) return null
return tagStore.tags
}),
tagBoxClasses: computed(() => ({
'overflow-hidden text-ellipsis relative': true,
'max-h-98': !expand.value,
'h-full': expand.value
})),
expandBox,
expand,
t
}
}
Expand All @@ -80,4 +92,30 @@ export default defineComponent({
.sidebar-box li.ob-skeleton {
@apply mr-2 mb-2;
}
.more-btn {
@apply flex flex-col justify-center items-center h-11 cursor-pointer absolute bg-ob-deep-900 rounded-lg w-full shadow-md overflow-hidden;
bottom: 0;
left: 50%;
transform: translateX(-50%);
svg {
transition: 0.2s all ease-in-out;
}
span {
@apply opacity-0 font-bold -mb-8;
transition: 0.2s all ease-in-out;
}
&:hover span {
@apply scale-110 opacity-100 mb-1.5;
}
&:hover svg {
@apply opacity-0;
}
}
.more-cover {
@apply pointer-events-none absolute bottom-0 w-full;
height: 250px;
background: var(--article-cover);
}
</style>
2 changes: 1 addition & 1 deletion src/components/Sticky.vue
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export default defineComponent({
}
this.handleReset()
}, 1)
}, 16)
},
handleResize() {
if (this.isSticky) {
Expand Down
112 changes: 34 additions & 78 deletions src/components/Tag/TagItem.vue
Original file line number Diff line number Diff line change
@@ -1,49 +1,21 @@
<template>
<div
class="
flex flex-row
items-center
hover:opacity-50
mr-2
mb-2
cursor-pointer
transition-all
"
class="flex flex-row items-center mr-1 mb-1 cursor-pointer transition-all"
>
<router-link
class="
bg-ob-deep-900
text-center
px-3
py-1
rounded-tl-md rounded-bl-md
text-sm
"
:class="tagClasses"
:to="{ name: 'tags-search', query: { slug: slug } }"
:style="stylingTag()"
>
<em class="opacity-50">#</em>
{{ name }}
<sub :class="countClasses">
{{ count }}
</sub>
</router-link>
<span
class="
bg-ob-deep-900
text-ob-secondary text-center
px-2
py-1
rounded-tr-md rounded-br-md
text-sm
opacity-70
"
:style="stylingTag()"
>
{{ count }}
</span>
</div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'
import { PropType, computed, defineComponent, toRefs } from 'vue'
export default defineComponent({
name: 'ObTagItem',
Expand All @@ -55,56 +27,40 @@ export default defineComponent({
default: 0
},
size: {
type: String,
default: 'base'
type: String as PropType<'small' | 'large'>,
default: 'small'
}
},
setup(props) {
const tagSize = toRefs(props).size
const stylingTag = () => {
if (tagSize.value === 'xs') {
return {
fontSize: '0.75rem',
lineHeight: '1rem'
}
}
if (tagSize.value === 'sm') {
return {
fontSize: '0.875rem',
lineHeight: '1.25rem'
}
}
if (tagSize.value === 'lg') {
return {
fontSize: '1.125rem',
lineHeight: '1.75rem'
}
}
if (tagSize.value === 'xl') {
return {
fontSize: '1.25rem',
lineHeight: '1.75rem'
}
}
if (tagSize.value === '2xl') {
return {
fontSize: '1.5rem',
lineHeight: '2rem'
}
}
return {
fontSize: '1rem',
lineHeight: '1.5rem'
}
return {
tagClasses: computed(() => ({
'flex p-1.5 rounded-md text-sm hover:bg-ob-deep-900 hover:opacity-100 hover:text-ob-bright font-bold':
tagSize.value === 'small',
'large-tag-item': tagSize.value === 'large'
})),
countClasses: computed(() => ({
'block -mt-1.5 ml-1 text-xs opacity-50': tagSize.value === 'small',
'block -mt-1.5 ml-2 rounded-full text-xs text-ob':
tagSize.value === 'large'
}))
}
return { stylingTag }
}
})
</script>

<style lang="scss">
.large-tag-item {
@apply flex py-2 px-4 rounded-md bg-ob-deep-900 text-ob-bright text-base hover:opacity-100;
sub {
transition: 300ms all ease-in-out;
}
&:hover {
@apply scale-110;
}
&:hover sub {
@apply text-lg;
}
}
</style>
5 changes: 5 additions & 0 deletions src/icons/more.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/locales/languages/cn.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"titles": {
"articles": "文章列表",
"about": "关于我",
"category_list": "分类目录",
"tag_list": "标签目录",
"category_list": "分类",
"tag_list": "标签",
"toc": "文章目录",
"comment": "评论区",
"recent_comment": "最近评论"
Expand Down
4 changes: 2 additions & 2 deletions src/locales/languages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@
"visit_count": "Total visit count",
"button-all": "All",
"paginator": {
"newer": "Newer",
"older": "Older",
"newer": "Pre",
"older": "Next",
"prev": "Previous",
"next": "Next"
},
Expand Down
2 changes: 1 addition & 1 deletion src/views/Tag.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
:name="tag.name"
:slug="tag.slug"
:count="tag.count"
size="xl"
size="large"
/>
</template>
<template v-else-if="tags">
Expand Down

0 comments on commit 45944c6

Please sign in to comment.