mirror/iceshrimp
1
0
Fork 0
mirror of https://iceshrimp.dev/iceshrimp/iceshrimp synced 2024-12-02 00:38:08 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweak UI

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

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

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