HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client/app/mobile/style.styl
View file

@ -8,6 +8,10 @@
html
height 100%
background #ececed
&[data-darkmode]
background #191B22
body
display flex

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>

1
src/client/app/mobile/views/pages/dashboard.vue
View file

@ -102,7 +102,6 @@ export default Vue.extend({
mounted() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
},
methods: {

3
src/client/app/mobile/views/pages/followers.vue
View file

@ -40,9 +40,6 @@ export default Vue.extend({
created() {
this.fetch();
},
mounted() {
document.documentElement.style.background = '#313a42';
},
methods: {
fetch() {
Progress.start();

3
src/client/app/mobile/views/pages/following.vue
View file

@ -39,9 +39,6 @@ export default Vue.extend({
created() {
this.fetch();
},
mounted() {
document.documentElement.style.background = '#313a42';
},
methods: {
fetch() {
Progress.start();

6
src/client/app/mobile/views/pages/home.vue
View file

@ -77,7 +77,6 @@ export default Vue.extend({
mounted() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
Progress.start();
},
@ -163,11 +162,14 @@ main
background #eee
> .tl
max-width 600px
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>

1
src/client/app/mobile/views/pages/note.vue
View file

@ -30,7 +30,6 @@ export default Vue.extend({
},
mounted() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
},
methods: {
fetch() {

23
src/client/app/mobile/views/pages/notifications.vue
View file

@ -2,7 +2,10 @@
<mk-ui>
<span slot="header">%fa:R bell%%i18n:@notifications%</span>
<template slot="func"><button @click="fn">%fa:check%</button></template>
<mk-notifications @fetched="onFetched"/>
<main>
<mk-notifications @fetched="onFetched"/>
</main>
</mk-ui>
</template>
@ -13,7 +16,6 @@ import Progress from '../../../common/scripts/loading';
export default Vue.extend({
mounted() {
document.title = 'Misskey | %i18n:@notifications%';
document.documentElement.style.background = '#313a42';
Progress.start();
},
@ -30,3 +32,20 @@ export default Vue.extend({
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
width 100%
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
</style>

1
src/client/app/mobile/views/pages/profile-setting.vue
View file

@ -59,7 +59,6 @@ export default Vue.extend({
},
mounted() {
document.title = 'Misskey | %i18n:@title%';
document.documentElement.style.background = '#313a42';
},
methods: {
setAvatar() {

1
src/client/app/mobile/views/pages/search.vue
View file

@ -39,7 +39,6 @@ export default Vue.extend({
},
mounted() {
document.title = `%i18n:@search%: ${this.q} | Misskey`;
document.documentElement.style.background = '#313a42';
this.fetch();
},

1
src/client/app/mobile/views/pages/settings.vue
View file

@ -34,7 +34,6 @@ export default Vue.extend({
},
mounted() {
document.title = 'Misskey | %i18n:@settings%';
document.documentElement.style.background = '#313a42';
},
methods: {
signout() {

40
src/client/app/mobile/views/pages/user.vue
View file

@ -1,7 +1,7 @@
<template>
<mk-ui>
<template slot="header" v-if="!fetching"><img :src="`${user.avatarUrl}?thumbnail&size=64`" alt="">{{ user | userName }}</template>
<main v-if="!fetching">
<main v-if="!fetching" :data-darkmode="_darkmode_">
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
<header>
@ -88,9 +88,6 @@ export default Vue.extend({
created() {
this.fetch();
},
mounted() {
document.documentElement.style.background = '#313a42';
},
methods: {
fetch() {
Progress.start();
@ -110,7 +107,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
main
root(isDark)
> .is-suspended
> .is-remote
&.is-suspended
@ -138,7 +135,7 @@ main
> .banner
padding-bottom 33.3%
background-color #1b1b1b
background-color isDark ? #0e0e0e : #cacaca
background-size cover
background-position center
@ -165,13 +162,13 @@ main
left -2px
bottom -2px
width 100%
border 3px solid #313a42
border 3px solid isDark ? #191b22 : #ececed
border-radius 6px
@media (min-width 500px)
left -4px
bottom -4px
border 4px solid #313a42
border 4px solid isDark ? #191b22 : #ececed
border-radius 12px
> .mk-follow-button
@ -185,14 +182,14 @@ main
margin 0
line-height 22px
font-size 20px
color #fff
color isDark ? #fff : #757c82
> .username
display inline-block
line-height 20px
font-size 16px
font-weight bold
color #657786
color isDark ? #657786 : #969ea5
> .followed
margin-left 8px
@ -219,7 +216,7 @@ main
> .status
> a
color #657786
color isDark ? #657786 : #818a92
&:not(:last-child)
margin-right 16px
@ -227,7 +224,7 @@ main
> b
margin-right 4px
font-size 16px
color #fff
color isDark ? #fff : #787e86
> i
font-size 14px
@ -235,9 +232,9 @@ main
> nav
position -webkit-sticky
position sticky
top 48px
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
background-color #313a42
top 47px
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
background-color isDark ? #191b22 : #ececed
z-index 1
> .nav-container
@ -253,7 +250,7 @@ main
line-height 52px
font-size 14px
text-decoration none
color #657786
color isDark ? #657786 : #9ca1a5
border-bottom solid 2px transparent
&[data-active]
@ -262,9 +259,20 @@ main
border-color $theme-color
> .body
max-width 680px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
@media (min-width 600px)
padding 32px
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
</style>