[STYLE] toolbar 메뉴를 반응형으로 만들고 container fluid 속성을 추가하였습니다.

kwangilcho · kwangilcho · commit 548aa9b3de3c · 2018-12-28T01:58:43.000+09:00
diff --git a/patent-calculator/src/App.vue b/patent-calculator/src/App.vue
@@ -6,8 +6,8 @@
       <v-toolbar-items>
         <v-btn flat v-for="(item, i) in menu" :key="i" @click="view=item.component">
           <v-badge color="grey darken-2">
-            <!-- <v-icon>{{item.icon}}</v-icon> -->
-            <span class="subheading">{{item.title}}</span>
+            <v-icon class="hidden-md-and-up">{{item.icon}}</v-icon>
+            <span class="subheading hidden-sm-and-down">{{item.title}}</span>
           </v-badge>
         </v-btn>
       </v-toolbar-items>
@@ -95,8 +95,8 @@ export default {
           badge: false
         },
         {
-          icon: "add",
-          title: "상품추가",
+          icon: "note_add",
+          title: "상품 추가",
           component: "ProductAdder",
           badge: false
         },
@@ -148,7 +148,12 @@ export default {
 }
 
 #app-toolbar > .v-toolbar__content {
-  padding-left: 10rem;
-  padding-right: 10rem;
+  padding-right: 80px;
+}
+
+@media screen and (max-width: 1264px) {
+  #app-toolbar > .v-toolbar__content {
+    padding-right: 0px;
+  }
 }
 </style>
diff --git a/patent-calculator/src/components/Briefcase.vue b/patent-calculator/src/components/Briefcase.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container fluid>
     <v-slide-y-transition mode="out-in">
       <v-layout column wrap>
         <h1 class="headline font-weight-bold mb-2">상품 관리</h1>
diff --git a/patent-calculator/src/components/ProductAdder.vue b/patent-calculator/src/components/ProductAdder.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-container>
+  <v-container fluid>
     <v-slide-y-transition mode="out-in">
       <v-layout column wrap>
-        <h1 class="headline font-weight-bold mb-2">상품추가</h1>
+        <h1 class="headline font-weight-bold mb-2">상품 추가</h1>
         <v-stepper class="elevation-0 pa-0" v-model="curStep">
           <v-stepper-header class="elevation-0">
             <v-stepper-step :complete="curStep>1" step="1">상품 입력</v-stepper-step>
@@ -31,7 +31,7 @@
                             rows="1"
                           ></v-textarea>
                         </v-flex>
-                        <v-flex>
+                        <v-flex class="ml-2">
                           <v-layout align-center justify-center row fill-height>
                             <v-btn
                               icon
diff --git a/patent-calculator/src/components/Quotation.vue b/patent-calculator/src/components/Quotation.vue
@@ -1,6 +1,6 @@
 <template>
   <v-slide-y-transition mode="out-in">
-    <v-container id="print-area">
+    <v-container fluid id="print-area">
       <v-layout column>
         <v-layout row>
           <v-flex s6>
diff --git a/patent-calculator/src/components/Search.vue b/patent-calculator/src/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container fluid>
     <v-slide-y-transition mode="out-in">
       <v-layout column wrap>
         <h1 class="headline font-weight-bold mb-2">검색하기</h1>
diff --git a/patent-calculator/src/components/Settings.vue b/patent-calculator/src/components/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container fluid>
     <v-slide-y-transition mode="out-in">
       <v-layout column wrap>
         <h1 class="headline font-weight-bold mb-4">설정하기</h1>
