🎨 #17 - 상세 페이지 Header 수정

14hy · Sep 29, 2019 · 74c8a78 · 74c8a78
1 parent bc242ae
commit 74c8a78
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/client/.storybook/config.js b/client/.storybook/config.js
@@ -9,7 +9,7 @@ function loadStories() {
   document.body.style.justifyContent = `center`;
   document.body.style.alignItems = `center`;
   document.body.style.margin = `0`;
-  document.body.style.height = `100vh`;
+  document.body.style.height = `100%`;
   document.body.appendChild(document.createElement(`main`))
 
   req.keys().forEach(filename => req(filename));

diff --git a/client/src/pages/page-detail.js b/client/src/pages/page-detail.js
@@ -1,5 +1,5 @@
 import { html, render } from 'lit-html'
-import i18next from 'i18next'
+// import i18next from 'i18next'
 
 import '../components/swiper-slider.js'
 import '../components/swiper-slider-nearby'
@@ -19,7 +19,7 @@ export class PageDetail extends HTMLElement {
 		<div id="pageDetail" class="page-content">
             <header>
                 <a class="btn-back" href="/"><i class="f7-icons">chevron_left</i></a>
-                <div class="search">브루어리 이름</div>
+                <div class="brew-name">브루어리 이름</div>
             </header>
             <main>      
                 <swiper-slider></swiper-slider>
@@ -58,8 +58,8 @@ page-detail {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     margin: 0;
     padding: 0;
     justify-content: center;
@@ -69,8 +69,8 @@ page-detail {
 
 page-detail #pageDetail {
     border: 1px solid #595959;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     margin: 0 auto;
     padding: 0;
     border-radius: 2px;    
@@ -81,12 +81,28 @@ page-detail #pageDetail {
 
 page-detail header {
     display: grid;
-    grid-template-columns: 30px auto;
+    grid-template-columns: 50px auto;
+    align-items: center;
+    position: relative;    
+}
+
+page-detail header:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    width: 100%;
+    top: 100%;
+    bottom: auto;
+    height: 10px;
+    pointer-events: none;
+    background: linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.1) 40%,rgba(0,0,0,.05) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
 }
 
 page-detail .btn-back {
     display: flex;
     align-items: center;
+    justify-content: center;
+
 }
 
 page-detail main {
@@ -136,11 +152,7 @@ page-detail .logo, page-detail .title, page-detail .select-local, page-detail .m
     align-items: center;
 }
 
-page-detail .search {
-    padding-left: 20px;
-}
-
-page-detail button, page-detail .search {  
+page-detail button, page-detail .brew-name {  
     margin: 3px;
     border: 0;
     color: black;
@@ -149,15 +161,15 @@ page-detail button, page-detail .search {
     align-items: center;
 }
 
-page-detail .search {
+page-detail .brew-name {    
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0;
-    padding-right: 30px;
+    padding-left: 20px;
+    padding-right: 50px;
     font-weight: bold;
 }
-
 </style>
 `
 

diff --git a/client/src/pages/page-main.js b/client/src/pages/page-main.js
@@ -75,8 +75,8 @@ page-main {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     margin: 0;
     padding: 0;
     justify-content: center;
@@ -86,8 +86,8 @@ page-main {
 
 #pageMain {
     border: 1px solid #595959;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     margin: 0 auto;
     padding: 0;
     border-radius: 2px;