From f407409e39e0209610e839551da3c5920ad718b1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 26 Feb 2019 05:22:21 +0900
Subject: [PATCH] :art:
---
src/client/app/common/views/deck/deck.column.vue | 10 +++++++++-
src/client/app/common/views/deck/deck.vue | 13 ++++++++++++-
.../app/desktop/views/components/ui-container.vue | 8 ++++----
.../app/mobile/views/components/ui-container.vue | 12 +++++++++---
4 files changed, 34 insertions(+), 9 deletions(-)
diff --git a/src/client/app/common/views/deck/deck.column.vue b/src/client/app/common/views/deck/deck.column.vue
index 2d5cfdd84..17baa0ea3 100644
--- a/src/client/app/common/views/deck/deck.column.vue
+++ b/src/client/app/common/views/deck/deck.column.vue
@@ -1,5 +1,6 @@
<template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
+ :data-mobile="$root.isMobile"
@dragover.prevent.stop="onDragover"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@@ -113,7 +114,7 @@ export default Vue.extend({
column: this,
isScrollTop: this.isScrollTop,
count: v => this.count = v,
- inDeck: !this.naked
+ inNakedDeckColumn: !this.naked
};
},
@@ -326,6 +327,13 @@ export default Vue.extend({
box-shadow var(--shadow)
overflow hidden
+ &[data-mobile]
+ border-radius 0
+ box-shadow none
+
+ > header
+ box-shadow none
+
&.draghover
box-shadow 0 0 0 2px var(--primaryAlpha08)
diff --git a/src/client/app/common/views/deck/deck.vue b/src/client/app/common/views/deck/deck.vue
index b91df4562..5a2b84ed7 100644
--- a/src/client/app/common/views/deck/deck.vue
+++ b/src/client/app/common/views/deck/deck.vue
@@ -1,6 +1,6 @@
<template>
<mk-ui :class="$style.root">
- <div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
+ <div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-mobile="$root.isMobile" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
<template v-for="ids in layout">
<div v-if="ids.length > 1" class="folder">
<template v-for="id, i in ids">
@@ -68,6 +68,7 @@ export default Vue.extend({
provide() {
return {
+ inDeck: true,
getColumnVm: this.getColumnVm,
narrow: true
};
@@ -331,6 +332,16 @@ export default Vue.extend({
overflow-y hidden
-webkit-overflow-scrolling touch
+ &[data-mobile]
+ padding 0
+
+ > div
+ margin-right 0
+
+ &.folder
+ > *:not(:last-child)
+ margin-bottom 0
+
> div
margin-right 8px
width 330px
diff --git a/src/client/app/desktop/views/components/ui-container.vue b/src/client/app/desktop/views/components/ui-container.vue
index 3bd335b54..306c8fb1c 100644
--- a/src/client/app/desktop/views/components/ui-container.vue
+++ b/src/client/app/desktop/views/components/ui-container.vue
@@ -1,5 +1,5 @@
<template>
-<div class="kedshtep" :class="{ naked, inDeck }">
+<div class="kedshtep" :class="{ naked, inNakedDeckColumn }">
<header v-if="showHeader">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
@@ -36,7 +36,7 @@ export default Vue.extend({
},
},
inject: {
- inDeck: {
+ inNakedDeckColumn: {
default: false
}
},
@@ -58,7 +58,7 @@ export default Vue.extend({
.kedshtep
overflow hidden
- &:not(.inDeck)
+ &:not(.inNakedDeckColumn)
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
@@ -106,7 +106,7 @@ export default Vue.extend({
&:active
color var(--faceTextButtonActive)
- &.inDeck
+ &.inNakedDeckColumn
background var(--face)
> header
diff --git a/src/client/app/mobile/views/components/ui-container.vue b/src/client/app/mobile/views/components/ui-container.vue
index 806dcc9a1..3ccff58b7 100644
--- a/src/client/app/mobile/views/components/ui-container.vue
+++ b/src/client/app/mobile/views/components/ui-container.vue
@@ -1,5 +1,5 @@
<template>
-<div class="ukygtjoj" :class="{ naked, inDeck, hideHeader: !showHeader }">
+<div class="ukygtjoj" :class="{ naked, inDeck, inNakedDeckColumn, hideHeader: !showHeader }">
<header v-if="showHeader">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
@@ -38,6 +38,9 @@ export default Vue.extend({
inject: {
inDeck: {
default: false
+ },
+ inNakedDeckColumn: {
+ default: false
}
},
data() {
@@ -57,7 +60,10 @@ export default Vue.extend({
.ukygtjoj
overflow hidden
- &:not(.inDeck)
+ &.inDeck
+ box-shadow none !important
+
+ &:not(.inNakedDeckColumn)
background var(--face)
border-radius 8px
box-shadow 0 4px 16px rgba(#000, 0.1)
@@ -102,7 +108,7 @@ export default Vue.extend({
> div
color var(--text)
- &.inDeck
+ &.inNakedDeckColumn
background var(--face)
> header