refactor
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="1200">
|
||||
<MkAchievements :user="user" :with-locked="false" :with-description="$i != null && (props.user.id === $i.id)"/>
|
||||
<MkSpacer :contentMax="1200">
|
||||
<MkAchievements :user="user" :withLocked="false" :withDescription="$i != null && (props.user.id === $i.id)"/>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="700">
|
||||
<MkSpacer :contentMax="700">
|
||||
<div class="_gaps">
|
||||
<MkFoldableSection class="item">
|
||||
<template #header><i class="ti ti-activity"></i> Heatmap</template>
|
||||
|
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="700">
|
||||
<div class="pages-user-clips">
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
|
||||
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin">
|
||||
<MkSpacer :contentMax="700">
|
||||
<div>
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
|
||||
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" :class="$style.item" class="_panel _margin">
|
||||
<b>{{ item.name }}</b>
|
||||
<div v-if="item.description" class="description">{{ item.description }}</div>
|
||||
<div v-if="item.description" :class="$style.description">{{ item.description }}</div>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
</div>
|
||||
@@ -29,19 +29,15 @@ const pagination = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pages-user-clips {
|
||||
> .list {
|
||||
> .item {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
<style lang="scss" module>
|
||||
.item {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
> .description {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
.description {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
|
||||
<div class="users">
|
||||
<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination">
|
||||
<div :class="$style.users">
|
||||
<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" :user="user"/>
|
||||
</div>
|
||||
</MkPagination>
|
||||
</div>
|
||||
@@ -36,12 +36,10 @@ const followersPagination = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mk-following-or-followers {
|
||||
> .users {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
grid-gap: var(--margin);
|
||||
}
|
||||
<style lang="scss" module>
|
||||
.users {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
grid-gap: var(--margin);
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="1000">
|
||||
<MkSpacer :contentMax="1000">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="user">
|
||||
<XFollowList :user="user" type="followers"/>
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="1000">
|
||||
<MkSpacer :contentMax="1000">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="user">
|
||||
<XFollowList :user="user" type="following"/>
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="700">
|
||||
<MkSpacer :contentMax="700">
|
||||
<MkPagination v-slot="{items}" :pagination="pagination">
|
||||
<div class="jrnovfpt">
|
||||
<div :class="$style.root">
|
||||
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
|
||||
</div>
|
||||
</MkPagination>
|
||||
@@ -28,8 +28,8 @@ const pagination = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.jrnovfpt {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
grid-gap: 12px;
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="narrow ? 800 : 1100">
|
||||
<MkSpacer :contentMax="narrow ? 800 : 1100">
|
||||
<div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }" style="container-type: inline-size;">
|
||||
<div class="main _gaps">
|
||||
<!-- TODO -->
|
||||
@@ -7,7 +7,7 @@
|
||||
<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
|
||||
|
||||
<div class="profile _gaps">
|
||||
<MkAccountMoved v-if="user.movedTo" :moved-to="user.movedTo"/>
|
||||
<MkAccountMoved v-if="user.movedTo" :movedTo="user.movedTo"/>
|
||||
<MkRemoteCaution v-if="user.host != null" :href="user.url ?? user.uri!" class="warn"/>
|
||||
|
||||
<div :key="user.id" class="main _panel">
|
||||
@@ -49,7 +49,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="iAmModerator" class="moderationNote">
|
||||
<MkTextarea v-if="editModerationNote || (moderationNote != null && moderationNote !== '')" v-model="moderationNote" manual-save>
|
||||
<MkTextarea v-if="editModerationNote || (moderationNote != null && moderationNote !== '')" v-model="moderationNote" manualSave>
|
||||
<template #label>Moderation note</template>
|
||||
</MkTextarea>
|
||||
<div v-else>
|
||||
@@ -123,7 +123,7 @@
|
||||
<XPhotos :key="user.id" :user="user"/>
|
||||
<XActivity :key="user.id" :user="user"/>
|
||||
</template>
|
||||
<MkNotes v-if="!disableNotes" :class="$style.tl" :no-gap="true" :pagination="pagination"/>
|
||||
<MkNotes v-if="!disableNotes" :class="$style.tl" :noGap="true" :pagination="pagination"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="800" style="padding-top: 0">
|
||||
<MkSpacer :contentMax="800" style="padding-top: 0">
|
||||
<MkStickyContainer>
|
||||
<template #header>
|
||||
<MkTab v-model="include" :class="$style.tab">
|
||||
@@ -8,7 +8,7 @@
|
||||
<option value="files">{{ i18n.ts.withFiles }}</option>
|
||||
</MkTab>
|
||||
</template>
|
||||
<MkNotes :no-gap="true" :pagination="pagination" :class="$style.tl"/>
|
||||
<MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
|
||||
</MkStickyContainer>
|
||||
</MkSpacer>
|
||||
</template>
|
||||
|
@@ -5,7 +5,7 @@
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="user">
|
||||
<XHome v-if="tab === 'home'" :user="user"/>
|
||||
<XTimeline v-else-if="tab === 'notes'" :user="user" />
|
||||
<XTimeline v-else-if="tab === 'notes'" :user="user"/>
|
||||
<XActivity v-else-if="tab === 'activity'" :user="user"/>
|
||||
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
|
||||
<XReactions v-else-if="tab === 'reactions'" :user="user"/>
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="700">
|
||||
<MkSpacer :contentMax="700">
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
|
||||
<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/>
|
||||
</MkPagination>
|
||||
@@ -24,7 +24,3 @@ const pagination = {
|
||||
})),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<MkSpacer :content-max="700">
|
||||
<MkSpacer :contentMax="700">
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
|
||||
<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin afdcfbfb">
|
||||
<div class="header">
|
||||
<MkAvatar class="avatar" :user="user"/>
|
||||
<MkReactionIcon class="reaction" :reaction="item.type" :no-style="true"/>
|
||||
<MkTime :time="item.createdAt" class="createdAt"/>
|
||||
<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="_panel _margin">
|
||||
<div :class="$style.header">
|
||||
<MkAvatar :class="$style.avatar" :user="user"/>
|
||||
<MkReactionIcon :class="$style.reaction" :reaction="item.type" :noStyle="true"/>
|
||||
<MkTime :time="item.createdAt" :class="$style.createdAt"/>
|
||||
</div>
|
||||
<MkNote :key="item.id" :note="item.note"/>
|
||||
</div>
|
||||
@@ -33,29 +33,27 @@ const pagination = {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.afdcfbfb {
|
||||
> .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: solid 2px var(--divider);
|
||||
<style lang="scss" module>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: solid 2px var(--divider);
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> .reaction {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.reaction {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
> .createdAt {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.createdAt {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user