From 9adb5c3de81af25807384675ab377072b9c5a326 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 26 Feb 2019 14:37:17 +0900
Subject: [PATCH] :art:
---
.../mobile/views/components/note-detail.vue | 14 +++++++------
.../app/mobile/views/components/notes.vue | 20 ++++++++-----------
.../app/mobile/views/components/ui.header.vue | 6 ++++--
.../app/mobile/views/pages/user/index.vue | 6 ++++--
4 files changed, 24 insertions(+), 22 deletions(-)
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 9450b3a17..46bca949c 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -1,5 +1,5 @@
<template>
-<div class="mk-note-detail" tabindex="-1">
+<div class="mk-note-detail" tabindex="-1" :class="{ shadow: $store.state.device.useShadow }">
<button
class="more"
v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
@@ -165,10 +165,12 @@ export default Vue.extend({
text-align left
background var(--face)
border-radius 8px
- box-shadow 0 4px 16px rgba(#000, 0.1)
- @media (min-width 500px)
- box-shadow 0 8px 32px rgba(#000, 0.1)
+ &.shadow
+ box-shadow 0 4px 16px rgba(#000, 0.1)
+
+ @media (min-width 500px)
+ box-shadow 0 8px 32px rgba(#000, 0.1)
> .fetching
padding 64px 0
@@ -180,7 +182,7 @@ export default Vue.extend({
width 100%
font-size 1em
text-align center
- color #999
+ color var(--text)
cursor pointer
background var(--subNoteBg)
outline none
@@ -289,7 +291,7 @@ export default Vue.extend({
> .location
margin 4px 0
font-size 12px
- color #ccc
+ color var(--text)
> .map
width 100%
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index a65482329..0a35465ed 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -1,5 +1,5 @@
<template>
-<div class="ivaojijs">
+<div class="ivaojijs" :class="{ shadow: $store.state.device.useShadow }">
<div class="empty" v-if="notes.length == 0 && !fetching && inited">{{ $t('@.no-notes') }}</div>
<mk-error v-if="!fetching && !inited" @retry="init()"/>
@@ -192,10 +192,12 @@ export default Vue.extend({
overflow hidden
background var(--face)
border-radius 8px
- box-shadow 0 4px 16px rgba(#000, 0.1)
- @media (min-width 500px)
- box-shadow 0 8px 32px rgba(#000, 0.1)
+ &.shadow
+ box-shadow 0 4px 16px rgba(#000, 0.1)
+
+ @media (min-width 500px)
+ box-shadow 0 8px 32px rgba(#000, 0.1)
> .empty
padding 16px
@@ -239,13 +241,7 @@ export default Vue.extend({
padding 32px
max-width 400px
text-align center
- color #999
-
- > [data-icon]
- display block
- margin-bottom 16px
- font-size 3em
- color #ccc
+ color var(--text)
> footer
text-align center
@@ -258,7 +254,7 @@ export default Vue.extend({
margin 0
padding 16px
width 100%
- color #ccc
+ color var(--text)
@media (min-width 500px)
padding 20px
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 532720ceb..068679567 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -1,5 +1,5 @@
<template>
-<div class="header" ref="root">
+<div class="header" ref="root" :class="{ shadow: $store.state.device.useShadow }">
<p class="warn" v-if="env != 'production'">{{ $t('@.do-not-use-in-production') }} <a href="/assets/flush.html?force">Flush</a></p>
<div class="main" ref="main">
<div class="backdrop"></div>
@@ -47,7 +47,9 @@ export default Vue.extend({
z-index 1024
width calc(100% + 16px)
padding 0 8px
- box-shadow 0 0px 8px rgba(0, 0, 0, 0.25)
+
+ &.shadow
+ box-shadow 0 0px 8px rgba(0, 0, 0, 0.25)
&, *
user-select none
diff --git a/src/client/app/mobile/views/pages/user/index.vue b/src/client/app/mobile/views/pages/user/index.vue
index 55f786b3d..85fd08d41 100644
--- a/src/client/app/mobile/views/pages/user/index.vue
+++ b/src/client/app/mobile/views/pages/user/index.vue
@@ -59,7 +59,7 @@
</div>
</div>
</header>
- <nav v-if="$route.name == 'user'">
+ <nav v-if="$route.name == 'user'" :class="{ shadow: $store.state.device.useShadow }">
<div class="nav-container">
<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> {{ $t('overview') }}</a>
<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</a>
@@ -315,10 +315,12 @@ export default Vue.extend({
position -webkit-sticky
position sticky
top 47px
- box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
background-color $bg
z-index 2
+ &.shadow
+ box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
+
> .nav-container
display flex
justify-content center