summaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/app/mobile/style.styl4
-rw-r--r--src/client/app/mobile/views/components/note.sub.vue3
-rw-r--r--src/client/app/mobile/views/components/note.vue7
-rw-r--r--src/client/app/mobile/views/components/notes.vue23
-rw-r--r--src/client/app/mobile/views/components/notification.vue105
-rw-r--r--src/client/app/mobile/views/components/notifications.vue29
-rw-r--r--src/client/app/mobile/views/components/ui.header.vue12
-rw-r--r--src/client/app/mobile/views/components/user-timeline.vue6
-rw-r--r--src/client/app/mobile/views/pages/dashboard.vue1
-rw-r--r--src/client/app/mobile/views/pages/followers.vue3
-rw-r--r--src/client/app/mobile/views/pages/following.vue3
-rw-r--r--src/client/app/mobile/views/pages/home.vue6
-rw-r--r--src/client/app/mobile/views/pages/note.vue1
-rw-r--r--src/client/app/mobile/views/pages/notifications.vue23
-rw-r--r--src/client/app/mobile/views/pages/profile-setting.vue1
-rw-r--r--src/client/app/mobile/views/pages/search.vue1
-rw-r--r--src/client/app/mobile/views/pages/settings.vue1
-rw-r--r--src/client/app/mobile/views/pages/user.vue40
18 files changed, 163 insertions, 106 deletions
diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl
index 81912a2483..847ae8eec5 100644
--- a/src/client/app/mobile/style.styl
+++ b/src/client/app/mobile/style.styl
@@ -8,6 +8,10 @@
html
height 100%
+ background #ececed
+
+ &[data-darkmode]
+ background #191B22
body
display flex
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 58e561c2c4..759de4746b 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index ea4f9cb648..5f48d0fe24 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -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 ""
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 703b51d678..ecd9c8cf2b 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 4f7c8968b2..793f34fe85 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -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,61 +18,61 @@
</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>
- <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>
+ <div>
+ <header>
%fa:user-plus%
<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
- </p>
+ <mk-time :time="notification.createdAt"/>
+ </header>
</div>
</div>
- <template v-if="notification.type == 'reply'">
- <mk-note :note="notification.note"/>
- </template>
-
- <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>
+ <div>
+ <header>
%fa:chart-pie%
<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%
</router-link>
</div>
</div>
+
+ <template v-if="notification.type == 'quote'">
+ <mk-note :note="notification.note"/>
+ </template>
+
+ <template v-if="notification.type == 'reply'">
+ <mk-note :note="notification.note"/>
+ </template>
+
+ <template v-if="notification.type == 'mention'">
+ <mk-note :note="notification.note"/>
+ </template>
</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>
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index ad43a27b98..7a878740cc 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index adb2535aad..89edcf5a9e 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/user-timeline.vue b/src/client/app/mobile/views/components/user-timeline.vue
index 89ac4d2c66..5069c5a1ef 100644
--- a/src/client/app/mobile/views/components/user-timeline.vue
+++ b/src/client/app/mobile/views/components/user-timeline.vue
@@ -65,9 +65,3 @@ export default Vue.extend({
}
});
</script>
-
-<style lang="stylus" scoped>
-.mk-user-timeline
- max-width 600px
- margin 0 auto
-</style>
diff --git a/src/client/app/mobile/views/pages/dashboard.vue b/src/client/app/mobile/views/pages/dashboard.vue
index 14779da650..53fe33ee8f 100644
--- a/src/client/app/mobile/views/pages/dashboard.vue
+++ b/src/client/app/mobile/views/pages/dashboard.vue
@@ -102,7 +102,6 @@ export default Vue.extend({
mounted() {
document.title = 'Misskey';
- document.documentElement.style.background = '#313a42';
},
methods: {
diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue
index f3c75f71e9..33ade94e35 100644
--- a/src/client/app/mobile/views/pages/followers.vue
+++ b/src/client/app/mobile/views/pages/followers.vue
@@ -40,9 +40,6 @@ export default Vue.extend({
created() {
this.fetch();
},
- mounted() {
- document.documentElement.style.background = '#313a42';
- },
methods: {
fetch() {
Progress.start();
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index 88368ff778..c6d6d44281 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -39,9 +39,6 @@ export default Vue.extend({
created() {
this.fetch();
},
- mounted() {
- document.documentElement.style.background = '#313a42';
- },
methods: {
fetch() {
Progress.start();
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 72b30d5440..6999108b97 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -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>
diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue
index c866be8a14..7bcc5e71f5 100644
--- a/src/client/app/mobile/views/pages/note.vue
+++ b/src/client/app/mobile/views/pages/note.vue
@@ -30,7 +30,6 @@ export default Vue.extend({
},
mounted() {
document.title = 'Misskey';
- document.documentElement.style.background = '#313a42';
},
methods: {
fetch() {
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index cd2b633676..d0c0fe9535 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -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>
diff --git a/src/client/app/mobile/views/pages/profile-setting.vue b/src/client/app/mobile/views/pages/profile-setting.vue
index 59da71c67d..d0b9095cef 100644
--- a/src/client/app/mobile/views/pages/profile-setting.vue
+++ b/src/client/app/mobile/views/pages/profile-setting.vue
@@ -59,7 +59,6 @@ export default Vue.extend({
},
mounted() {
document.title = 'Misskey | %i18n:@title%';
- document.documentElement.style.background = '#313a42';
},
methods: {
setAvatar() {
diff --git a/src/client/app/mobile/views/pages/search.vue b/src/client/app/mobile/views/pages/search.vue
index 31035f666a..6c80de3aa0 100644
--- a/src/client/app/mobile/views/pages/search.vue
+++ b/src/client/app/mobile/views/pages/search.vue
@@ -39,7 +39,6 @@ export default Vue.extend({
},
mounted() {
document.title = `%i18n:@search%: ${this.q} | Misskey`;
- document.documentElement.style.background = '#313a42';
this.fetch();
},
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 8ae087749f..ebf14f68f5 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -34,7 +34,6 @@ export default Vue.extend({
},
mounted() {
document.title = 'Misskey | %i18n:@settings%';
- document.documentElement.style.background = '#313a42';
},
methods: {
signout() {
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 73b8e24315..aae070afdf 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -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>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-09 17:24:08 +0000