heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Tweak UI

Browse source
This commit is contained in:
syuilo 2021-04-17 11:40:47 +09:00
parent 08e1db45a9
commit c27c3817a9
2 changed files with 53 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/client/pages/note.vue
View file

@ -1,37 +1,37 @@
<template>
<div class="fcuexfpr _root">
<div v-if="note" class="note" v-anim>
<div class="_gap" v-if="showNext">
<XNotes class="_content" :pagination="next" :no-gap="true"/>
</div>
<div class="main _gap">
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
<div class="_content _gap">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
<transition name="fade" mode="out-in">
<div v-if="note" class="note">
<div class="_gap" v-if="showNext">
<XNotes class="_content" :pagination="next" :no-gap="true"/>
</div>
<div class="_content clips _gap" v-if="clips && clips.length > 0">
<div class="title">{{ $ts.clip }}</div>
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div>
<div class="user">
<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
</div>
</MkA>
<div class="main _gap">
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
<div class="_content _gap">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
</div>
<div class="_content clips _gap" v-if="clips && clips.length > 0">
<div class="title">{{ $ts.clip }}</div>
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div>
<div class="user">
<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
</div>
</MkA>
</div>
<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
</div>
<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
</div>
<div class="_gap" v-if="showPrev">
<XNotes class="_content" :pagination="prev" :no-gap="true"/>
<div class="_gap" v-if="showPrev">
<XNotes class="_content" :pagination="prev" :no-gap="true"/>
</div>
</div>
</div>
<div v-if="error">
<MkError @retry="fetch()"/>
</div>
<MkError v-else-if="error" @retry="fetch()"/>
<MkLoading v-else/>
</transition>
</div>
</template>
@ -106,6 +106,7 @@ export default defineComponent({
},
methods: {
fetch() {
this.note = null;
os.api('notes/show', {
noteId: this.noteId
}).then(note => {
@ -138,6 +139,15 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fcuexfpr {
> .note {
> .main {

21
src/client/pages/user/index.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<div class="ftskorzw wide _section" v-if="user && narrow === false">
<transition name="fade" mode="out-in">
<div class="ftskorzw wide" v-if="user && narrow === false">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
<div class="banner-container _gap" :style="style">
@ -212,10 +212,9 @@
<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
</div>
</div>
<div v-else-if="error">
<MkError @retry="fetch()"/>
</div>
</div>
<MkError v-else-if="error" @retry="fetch()"/>
<MkLoading v-else/>
</transition>
</template>
<script lang="ts">
@ -324,6 +323,7 @@ export default defineComponent({
fetch() {
if (this.acct == null) return;
this.user = null;
Progress.start();
os.api('users/show', parseAcct(this.acct)).then(user => {
this.user = user;
@ -369,6 +369,15 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.125s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.ftskorzw.wide {
max-width: 1150px;
margin: 0 auto;