limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-22 09:57:29 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: user card design

Browse source
This commit is contained in:
freeplay 2023-07-13 19:26:44 -04:00
parent 85f6ee2231
commit 1ed9438972
1 changed files with 244 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

320
packages/client/src/components/MkUserInfo.vue
View file

@ -1,151 +1,319 @@
<template> <template>
<div class="_panel vjnjpkug"> <article class="_panel user-card">
<div <div
class="banner" class="banner"
:style=" :style="
user.bannerUrl ? `background-image: url(${user.bannerUrl})` : '' user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''
" "
:class="{ detailed }"
></div> ></div>
<MkAvatar <h3 class="title">
class="avatar" <MkAvatar
:user="user" class="avatar"
:disable-preview="true" :user="user"
:show-indicator="true" :disable-preview="true"
/> :show-indicator="true"
<div class="title"> />
<MkA class="name" :to="userPage(user)" <MkA class="name" :to="userPage(user)"
><MkUserName :user="user" :nowrap="false" ><MkUserName :user="user" :nowrap="true"
/></MkA> /></MkA>
<p class="username"><MkAcct :user="user" /></p> <p class="username"><MkAcct :user="user" /></p>
</div> </h3>
<div class="description"> <div
<div v-if="user.description" class="mfm"> class="description"
<Mfm :class="{ collapsed: isLong && collapsed, truncate: !detailed }"
:text="user.description" >
:author="user" <Mfm
:i="$i" v-if="user.description"
:custom-emojis="user.emojis" class="mfm"
/> :text="user.description"
</div> :author="user"
:i="$i"
:custom-emojis="user.emojis"
/>
<span v-else style="opacity: 0.7">{{ <span v-else style="opacity: 0.7">{{
i18n.ts.noAccountDescription i18n.ts.noAccountDescription
}}</span> }}</span>
</div> </div>
<XShowMoreButton
v-if="isLong"
v-model="collapsed"
></XShowMoreButton>
<div v-if="user.fields.length > 0 && detailed" class="fields">
<dl
v-for="(field, i) in user.fields"
:key="i"
class="field"
>
<dt class="name">
<Mfm
:text="field.name"
:plain="true"
:custom-emojis="user.emojis"
:colored="false"
/>
</dt>
<dd class="value">
<Mfm
:text="field.value"
:author="user"
:i="$i"
:custom-emojis="user.emojis"
:colored="false"
/>
</dd>
</dl>
</div>
<div class="status"> <div class="status">
<div> <p>
<p>{{ i18n.ts.notes }}</p>
<MkNumber :value="user.notesCount" /> <MkNumber :value="user.notesCount" />
</div> {{ i18n.ts.notes }}
<div> </p>
<p>{{ i18n.ts.following }}</p> <p>
<MkNumber :value="user.followingCount" /> <MkNumber :value="user.followingCount" />
</div> {{ i18n.ts.following }}
<div> </p>
<p>{{ i18n.ts.followers }}</p> <p>
<MkNumber :value="user.followersCount" /> <MkNumber :value="user.followersCount" />
</div> {{ i18n.ts.followers }}
</p>
</div> </div>
<div class="koudoku-button"> <div class="buttons">
<MkFollowButton v-if="$i && user.id != $i.id" :user="user" /> <slot>
<MkFollowButton v-if="$i && user.id != $i.id" :user="user" />
</slot>
</div> </div>
</div> </article>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as misskey from "calckey-js"; import * as misskey from "calckey-js";
import MkFollowButton from "@/components/MkFollowButton.vue"; import MkFollowButton from "@/components/MkFollowButton.vue";
import XShowMoreButton from "@/components/MkShowMoreButton.vue";
import MkNumber from "@/components/MkNumber.vue"; import MkNumber from "@/components/MkNumber.vue";
import { userPage } from "@/filters/user"; import { userPage } from "@/filters/user";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
defineProps<{ const props = defineProps<{
user: misskey.entities.UserDetailed; user: misskey.entities.UserDetailed;
detailed?: boolean;
}>(); }>();
let isLong = $ref(
props.detailed &&
(
props.user.description.split("\n").length > 9 ||
props.user.description.length > 400
)
);
let collapsed = $ref(isLong);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.vjnjpkug { .user-card {
position: relative; position: relative;
display: flex;
flex-direction: column;
> .banner { .banner {
height: 84px; height: 94px;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
margin-bottom: calc(0px - var(--radius));
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
height: inherit;
background: linear-gradient(
-125deg,
rgba(0, 0, 0, 0.7),
transparent,
transparent
);
}
&.detailed::after {
content: "";
background-image: var(--blur, inherit);
position: fixed;
inset: 0;
background-size: cover;
background-position: center;
pointer-events: none;
opacity: 0.1;
filter: var(--blur, blur(10px));
z-index: 5;
}
} }
> .avatar {
.title {
position: relative;
display: block; display: block;
position: absolute; padding: 10px 10px 10px 84px;
top: 62px; margin: 0;
left: 13px; font-size: 1em;
z-index: 2; border-radius: var(--radius);
width: 58px; background: var(--panel);
height: 58px; line-height: 1;
border: solid 4px var(--panel); z-index: 4;
}
.avatar {
> .title { display: block;
display: block; position: absolute;
padding: 10px 0 10px 88px; bottom: 6px;
left: 10px;
> .name { z-index: 2;
width: 58px;
height: 58px;
background: var(--panel);
border: solid 4px var(--panel);
}
.name {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
word-break: break-all; overflow: hidden;
text-overflow: ellipsis;
height: 1.5em;
margin-block: -0.5em;
padding-block: 0.5em 0.25em;
max-width: 100%;
} }
> .username { .username {
display: block; display: block;
margin: 0; margin: 0;
line-height: 16px; line-height: 16px;
font-size: 0.8em; font-size: 0.8em;
color: var(--fg); color: var(--fg);
font-weight: 500;
opacity: 0.7; opacity: 0.7;
line-height: 1;
} }
} }
> .description { .description {
padding: 16px; overflow: hidden;
padding-inline: 16px;
margin-bottom: 10px;
font-size: 0.8em; font-size: 0.8em;
border-top: solid 0.5px var(--divider); &.truncate {
> .mfm {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 6;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; }
&.collapsed {
position: relative;
max-height: calc(9em + 50px);
mask: linear-gradient(black calc(100% - 64px), transparent);
-webkit-mask: linear-gradient(
black calc(100% - 64px),
transparent
);
}
&.collapsed, &.truncate {
:deep(br) {
display: none; // collapse white spaces
}
} }
} }
:deep(.fade) {
> .status { position: relative;
padding: 10px 16px; display: block;
border-top: solid 0.5px var(--divider); width: 100%;
margin-top: -4.5em;
> div { z-index: 2;
> span {
display: inline-block; display: inline-block;
width: 33%; background: var(--panel);
padding: 0.4em 1em;
> p { font-size: 0.8em;
margin: 0; border-radius: 999px;
font-size: 0.7em; box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
color: var(--fg); }
} &:hover {
> span { > span {
font-size: 1em; background: var(--panelHighlight);
color: var(--accent);
} }
} }
} }
:deep(.showLess) {
width: 100%;
position: sticky;
bottom: var(--stickyBottom);
> .koudoku-button { > span {
display: inline-block;
background: var(--panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 0 7px 7px var(--bg);
}
}
> .fields {
padding-inline: 16px;
font-size: 0.8em;
padding-block: 1em;
border-top: 1px solid var(--divider);
> .field {
display: flex;
padding: 0;
margin: 0;
align-items: center;
&:not(:last-child) {
margin-bottom: 8px;
}
:deep(span) {
white-space: nowrap !important;
}
> .name {
width: 30%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
text-align: center;
padding-right: 10px;
}
> .value {
width: 70%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
}
}
}
.status {
display: flex;
gap: 1em;
padding-inline: 16px;
font-size: 0.8em;
margin-top: auto;
border-top: 1px solid var(--divider);
> p > :deep(span) {
font-weight: 700;
color: var(--accent);
}
}
.buttons {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
margin-bottom: 1rem; margin-bottom: 1rem;
z-index: 3;
color: white;
} }
} }
</style> </style>