sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2018-04-27 21:06:28 +09:00
parent 0f27b62924
commit ee62f6e356
18 changed files with 172 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/client/app/mobile/views/components/note.sub.vue
View File

@ -31,6 +31,9 @@ export default Vue.extend({
font-size 0.9em
padding 16px
@media (min-width 600px)
padding 24px 32px
&:after
content ""
display block

7
src/client/app/mobile/views/components/note.vue
View File

@ -238,7 +238,7 @@ export default Vue.extend({
root(isDark)
font-size 12px
border-bottom solid 1px #eaeaea
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
&:first-child
border-radius 8px 8px 0 0
@ -308,7 +308,10 @@ root(isDark)
background transparent
> article
padding 14px 16px 9px 16px
padding 16px 16px 9px
@media (min-width 600px)
padding 32px 32px 22px
&:after
content ""

23
src/client/app/mobile/views/components/notes.vue
View File

@ -199,10 +199,13 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-notes
background #fff
root(isDark)
background isDark ? #282C37 : #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
@media (min-width 500px)
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
.transition
.mk-notes-enter
@ -260,8 +263,8 @@ export default Vue.extend({
> footer
text-align center
border-top solid 1px #eaeaea
border-bottom-left-radius 4px
border-bottom-right-radius 4px
border-bottom-left-radius 8px
border-bottom-right-radius 8px
&:empty
display none
@ -270,10 +273,18 @@ export default Vue.extend({
margin 0
padding 16px
width 100%
color $theme-color
border-radius 0 0 8px 8px
@media (min-width 500px)
padding 20px
&:disabled
opacity 0.7
.mk-notes[data-darkmode]
root(true)
.mk-notes:not([data-darkmode])
root(false)
</style>

123
src/client/app/mobile/views/components/notification.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="mk-notification">
<div class="notification reaction" v-if="notification.type == 'reaction'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div class="text">
<p>
<div>
<header>
<mk-reaction-icon :reaction="notification.reaction"/>
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}
%fa:quote-right%
@ -18,38 +18,54 @@
</div>
<div class="notification renote" v-if="notification.type == 'renote'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div class="text">
<p>
<div>
<header>
%fa:retweet%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
</router-link>
</div>
</div>
<div class="notification follow" v-if="notification.type == 'follow'">
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div>
<header>
%fa:user-plus%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
</div>
</div>
<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div>
<header>
%fa:chart-pie%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
<mk-time :time="notification.createdAt"/>
</header>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
</router-link>
</div>
</div>
<template v-if="notification.type == 'quote'">
<mk-note :note="notification.note"/>
</template>
<div class="notification follow" v-if="notification.type == 'follow'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div class="text">
<p>
%fa:user-plus%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p>
</div>
</div>
<template v-if="notification.type == 'reply'">
<mk-note :note="notification.note"/>
</template>
@ -57,22 +73,6 @@
<template v-if="notification.type == 'mention'">
<mk-note :note="notification.note"/>
</template>
<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
<mk-time :time="notification.createdAt"/>
<router-link class="avatar-anchor" :to="notification.user | userPage">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
<div class="text">
<p>
%fa:chart-pie%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
</p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
</router-link>
</div>
</div>
</div>
</template>
@ -95,44 +95,57 @@ export default Vue.extend({
> .notification
padding 16px
font-size 12px
overflow-wrap break-word
@media (min-width 350px)
font-size 14px
@media (min-width 500px)
font-size 16px
@media (min-width 600px)
padding 32px
&:after
content ""
display block
clear both
> .mk-time
display inline
position absolute
top 16px
right 12px
vertical-align top
color rgba(0, 0, 0, 0.6)
font-size 0.9em
> .avatar-anchor
display block
float left
img
min-width 36px
min-height 36px
max-width 36px
max-height 36px
width 36px
height 36px
border-radius 6px
> .text
@media (min-width 500px)
width 42px
height 42px
> div
float right
width calc(100% - 36px)
padding-left 8px
p
margin 0
@media (min-width 500px)
width calc(100% - 42px)
> header
display flex
align-items center
white-space nowrap
i, .mk-reaction-icon
margin-right 4px
> .mk-time
margin-left auto
color rgba(0, 0, 0, 0.3)
font-size 0.9em
> .note-preview
color rgba(0, 0, 0, 0.7)
@ -147,11 +160,11 @@ export default Vue.extend({
margin-right 3px
&.renote
.text p i
> div > header i
color #77B255
&.follow
.text p i
> div > header i
color #53c7ce
</style>

29
src/client/app/mobile/views/components/notifications.vue
View File

@ -1,18 +1,20 @@
<template>
<div class="mk-notifications">
<div class="notifications" v-if="notifications.length != 0">
<transition-group name="mk-notifications" class="transition notifications">
<template v-for="(notification, i) in _notifications">
<mk-notification :notification="notification" :key="notification.id"/>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
<span>%fa:angle-up%{{ notification._datetext }}</span>
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
</p>
</template>
</div>
</transition-group>
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
</button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
</div>
@ -102,23 +104,26 @@ export default Vue.extend({
<style lang="stylus" scoped>
.mk-notifications
margin 8px auto
padding 0
max-width 500px
width calc(100% - 16px)
margin 0 auto
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
box-shadow 0 0 2px rgba(0, 0, 0, 0.1)
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
box-shadow 0 8px 32px rgba(0, 0, 0, 0.1)
.transition
.mk-notifications-enter
.mk-notifications-leave-to
opacity 0
transform translateY(-30px)
> *
transition transform .3s ease, opacity .3s ease
> .notifications
> .mk-notification
margin 0 auto
max-width 500px
border-bottom solid 1px rgba(0, 0, 0, 0.05)
&:last-child

12
src/client/app/mobile/views/components/ui.header.vue
View File

@ -143,14 +143,14 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.header
root(isDark)
$height = 48px
position fixed
top 0
z-index 1024
width 100%
box-shadow 0 1px 0 rgba(#000, 0.075)
//box-shadow 0 1px 0 rgba(#000, 0.075)
&, *
user-select none
@ -167,7 +167,7 @@ export default Vue.extend({
-webkit-backdrop-filter blur(12px)
backdrop-filter blur(12px)
//background-color rgba(#1b2023, 0.75)
background-color #1b2023
background-color isDark ? #313543 : #595f6f
> p
display none
@ -244,4 +244,10 @@ export default Vue.extend({
line-height $height
border-left solid 1px rgba(#000, 0.1)
.header[data-darkmode]
root(true)
.header:not([data-darkmode])
root(false)
</style>

6
src/client/app/mobile/views/components/user-timeline.vue
View File

@ -65,9 +65,3 @@ export default Vue.extend({
}
});
</script>
<style lang="stylus" scoped>
.mk-user-timeline
max-width 600px
margin 0 auto
</style>