Exploreページを実装

src/client/app/desktop/views/components/ui-container.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="kedshtep" :class="{ naked }">
+<div class="kedshtep" :class="{ naked, inDeck }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -31,6 +31,11 @@ export default Vue.extend({
 			default: false
 		},
 	},
+	inject: {
+		inDeck: {
+			default: false
+		}
+	},
 	data() {
 		return {
 			showBody: true
@@ -41,49 +46,72 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .kedshtep
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
 	overflow hidden
 
-	&.naked
-		background transparent !important
-		box-shadow none !important
+	&:not(.inDeck)
+		background var(--face)
+		box-shadow var(--shadow)
+		border-radius var(--round)
 
-	> header
-		background var(--faceHeader)
+		& + .kedshtep
+			margin-top 16px
 
-		> .title
-			z-index 1
+		&.naked
+			background transparent !important
+			box-shadow none !important
+
+		> header
+			background var(--faceHeader)
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color var(--faceHeaderText)
+				box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
+
+				> [data-icon]
+					margin-right 6px
+
+				&:empty
+					display none
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color var(--faceTextButton)
+
+				&:hover
+					color var(--faceTextButtonHover)
+
+				&:active
+					color var(--faceTextButtonActive)
+
+	&.inDeck
+		background var(--face)
+
+		> header
 			margin 0
-			padding 0 16px
-			line-height 42px
-			font-size 0.9em
-			font-weight bold
-			color var(--faceHeaderText)
-			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
+			padding 8px 16px
+			font-size 12px
+			color var(--text)
+			background var(--deckColumnBg)
 
-			> [data-icon]
-				margin-right 6px
-
-			&:empty
-				display none
-
-		> button
-			position absolute
-			z-index 2
-			top 0
-			right 0
-			padding 0
-			width 42px
-			font-size 0.9em
-			line-height 42px
-			color var(--faceTextButton)
-
-			&:hover
-				color var(--faceTextButtonHover)
-
-			&:active
-				color var(--faceTextButtonActive)
+			> button
+				position absolute
+				top 0
+				right 8px
+				padding 8px 6px
+				font-size 14px
+				color var(--text)
 
 </style>