This commit is contained in:
syuilo
2023-05-19 20:52:15 +09:00
parent c713af8e23
commit 1b78c6a309
85 changed files with 341 additions and 368 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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"/>

View File

@@ -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"/>

View File

@@ -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;

View File

@@ -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;">

View File

@@ -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>

View File

@@ -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"/>

View File

@@ -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>

View File

@@ -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>