mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-12-22 16:30:13 +00:00
🎨
This commit is contained in:
syuilo
parent
3dc70f9878
commit
955b3e313b
7 changed files with 89 additions and 66 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick" ref="el">
|
||||
<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
|
||||
<template v-if="info">
|
||||
<div class="titleContainer" @click="showTabsPopup">
|
||||
<i v-if="info.icon" class="icon" :class="info.icon"></i>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
|
||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
|
||||
import * as tinycolor from 'tinycolor2';
|
||||
import { popupMenu } from '@client/os';
|
||||
import { url } from '@client/config';
|
||||
|
|
@ -182,6 +182,7 @@ export default defineComponent({
|
|||
showTabsPopup,
|
||||
preventDrag,
|
||||
onClick,
|
||||
thin_: props.thin || inject('shouldHeaderThin', false)
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ export default defineComponent({
|
|||
return {
|
||||
navHook: (path) => {
|
||||
this.navigate(path);
|
||||
}
|
||||
},
|
||||
shouldHeaderThin: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@ export default defineComponent({
|
|||
return {
|
||||
navHook: (path) => {
|
||||
this.navigate(path);
|
||||
}
|
||||
},
|
||||
shouldHeaderThin: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="gafaadew" :class="{ modal, _popup: modal }"
|
||||
v-size="{ max: [500] }"
|
||||
v-size="{ max: [310, 500] }"
|
||||
@dragover.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
@dragleave="onDragleave"
|
||||
|
|
@ -914,5 +914,17 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_310px {
|
||||
> .form {
|
||||
> footer {
|
||||
> button {
|
||||
font-size: 14px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,65 @@
|
|||
<template>
|
||||
<div class="_root">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
|
||||
<div class="_block main">
|
||||
<!--
|
||||
<div class="header">
|
||||
<h1>{{ page.title }}</h1>
|
||||
</div>
|
||||
-->
|
||||
<div class="banner">
|
||||
<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<XPage :page="page"/>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="like">
|
||||
<MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
|
||||
<MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
|
||||
<div>
|
||||
<MkHeader :info="header"/>
|
||||
|
||||
<div class="_root">
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
|
||||
<div class="_block main">
|
||||
<!--
|
||||
<div class="header">
|
||||
<h1>{{ page.title }}</h1>
|
||||
</div>
|
||||
<div class="other">
|
||||
<button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
|
||||
<button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
|
||||
-->
|
||||
<div class="banner">
|
||||
<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<XPage :page="page"/>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="like">
|
||||
<MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
|
||||
<MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
|
||||
</div>
|
||||
<div class="other">
|
||||
<button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
|
||||
<button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<MkAvatar :user="page.user" class="avatar"/>
|
||||
<div class="name">
|
||||
<MkUserName :user="page.user" style="display: block;"/>
|
||||
<MkAcct :user="page.user"/>
|
||||
</div>
|
||||
<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
|
||||
</div>
|
||||
<div class="links">
|
||||
<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
|
||||
<template v-if="$i && $i.id === page.userId">
|
||||
<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
|
||||
<button v-if="$i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $ts.unpin }}</button>
|
||||
<button v-else @click="pin(true)" class="link _textButton">{{ $ts.pin }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<MkAvatar :user="page.user" class="avatar"/>
|
||||
<div class="name">
|
||||
<MkUserName :user="page.user" style="display: block;"/>
|
||||
<MkAcct :user="page.user"/>
|
||||
</div>
|
||||
<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
|
||||
</div>
|
||||
<div class="links">
|
||||
<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
|
||||
<template v-if="$i && $i.id === page.userId">
|
||||
<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
|
||||
<button v-if="$i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $ts.unpin }}</button>
|
||||
<button v-else @click="pin(true)" class="link _textButton">{{ $ts.pin }}</button>
|
||||
</template>
|
||||
<div class="footer">
|
||||
<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
|
||||
<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
|
||||
</div>
|
||||
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
|
||||
<MkContainer :max-height="300" :foldable="true" class="other">
|
||||
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
|
||||
<MkPagination :pagination="otherPostsPagination" #default="{items}">
|
||||
<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
|
||||
</MkPagination>
|
||||
</MkContainer>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
|
||||
<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
|
||||
</div>
|
||||
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
|
||||
<MkContainer :max-height="300" :foldable="true" class="other">
|
||||
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
|
||||
<MkPagination :pagination="otherPostsPagination" #default="{items}">
|
||||
<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
|
||||
</MkPagination>
|
||||
</MkContainer>
|
||||
</div>
|
||||
<MkError v-else-if="error" @retry="fetch()"/>
|
||||
<MkLoading v-else/>
|
||||
</transition>
|
||||
<MkError v-else-if="error" @retry="fetch()"/>
|
||||
<MkLoading v-else/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -97,6 +101,10 @@ export default defineComponent({
|
|||
[symbols.PAGE_INFO]: computed(() => this.page ? {
|
||||
title: computed(() => this.page.title || this.page.name),
|
||||
avatar: this.page.user,
|
||||
} : null),
|
||||
header: computed(() => this.page ? {
|
||||
title: computed(() => this.page.title || this.page.name),
|
||||
avatar: this.page.user,
|
||||
path: `/@${this.page.user.username}/pages/${this.page.name}`,
|
||||
share: {
|
||||
title: this.page.title || this.page.name,
|
||||
|
|
|
|||
|
|
@ -215,6 +215,10 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> .post-form {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
> .tl {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@ import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownCo
|
|||
import { deckStore } from './deck-store';
|
||||
|
||||
export default defineComponent({
|
||||
provide: {
|
||||
shouldHeaderThin: true
|
||||
},
|
||||
|
||||
props: {
|
||||
column: {
|
||||
type: Object,
|
||||
|
|
@ -267,6 +271,7 @@ export default defineComponent({
|
|||
height: 100%;
|
||||
overflow: hidden;
|
||||
contain: content;
|
||||
box-shadow: 0 0 8px 0 var(--shadow);
|
||||
|
||||
&.draghover {
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
|
|
@ -320,15 +325,6 @@ export default defineComponent({
|
|||
|
||||
&.paged {
|
||||
background: var(--bg) !important;
|
||||
|
||||
> header {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
> button {
|
||||
color: var(--fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> header {
|
||||
|
|
|
|||
Loading…
Reference in a new issue