natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page style

This commit is contained in:
ThatOneCalculator 2022-11-21 14:55:41 -08:00
parent d2d8661b9c
commit 7e82b2f5d9
2 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.15.5", "version": "12.119.0-calc.16",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

58
packages/client/src/pages/page.vue
View File

@ -4,14 +4,25 @@
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh"> <div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
<div class="_block main"> <div class="footer">
<!-- <div><i class="ph-alarm-bold"/>{{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
<div class="header"> <div v-if="page.createdAt != page.updatedAt"><i class="ph-alarm-bold"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
<h1>{{ page.title }}</h1>
</div> </div>
--> <div class="_block main">
<div class="banner"> <div class="banner">
<img v-if="page.eyeCatchingImageId" :src="page.eyeCatchingImage.url"/> <div v-if="page.eyeCatchingImageId" class="banner-image" :style="`background-image: url(${page.eyeCatchingImage.url})`">
<div class="header">
<h1>{{ page.title }}</h1>
</div>
<div class="menu-actions">
<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
<template v-if="$i && $i.id === page.userId">
<MkA class="menu _button" :to="`/pages/edit/${page.id}`"><i class="ph-dots-pencil-outline-bold ph-lg"/></MkA>
<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)"><i class="ph-push-pin-slash-bold ph-lg"/></button>
<button v-else class="link _textButton" @click="pin(true)"><i class="ph-push-pin-bold ph-lg"/></button>
</template>
</div>
</div>
</div> </div>
<div class="content"> <div class="content">
<XPage :page="page"/> <XPage :page="page"/>
@ -34,18 +45,14 @@
<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" class="koudoku"/> <MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div> </div>
</div> </div>
<div class="links"> <!-- <div class="links">
<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA> <MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
<template v-if="$i && $i.id === page.userId"> <template v-if="$i && $i.id === page.userId">
<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA> <MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ i18n.ts.unpin }}</button> <button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ i18n.ts.unpin }}</button>
<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button> <button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
</template> </template>
</div> </div> -->
</div>
<div class="footer">
<div><i class="ph-alarm-bold"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
<div v-if="page.createdAt != page.updatedAt"><i class="ph-alarm-bold"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
</div> </div>
<MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <MkContainer :max-height="300" :foldable="true" class="other">
@ -191,12 +198,37 @@ definePageMetadata(computed(() => page ? {
> .banner { > .banner {
margin: 0rem !important; margin: 0rem !important;
> img { > .banner-image {
// TODO: 良い感じのアスペクト比で表示 // TODO: 良い感じのアスペクト比で表示
display: block; display: block;
width: 100%; width: 100%;
height: 150px; height: 150px;
object-fit: cover; object-fit: cover;
> .menu-actions {
position: absolute;
top: 12px;
right: 12px;
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
background: rgba(0, 0, 0, 0.2);
padding: 8px;
border-radius: 24px;
> .menu {
vertical-align: bottom;
height: 31px;
width: 31px;
color: #fff;
text-shadow: 0 0 8px #000;
font-size: 16px;
}
> .koudoku {
margin-left: 4px;
vertical-align: bottom;
}
}
} }
} }