cateditor: improve contents layout

cateditor/src/components/CatalogContents.vue

@@ -1,10 +1,19 @@
 <template>
-  <v-container fluid grid-list-lg>
+  <v-container fluid grid-list-lg ma-0 pa-1>
-    <v-layout row>
+    <v-layout row fill-height>
+
+      <v-flex xs4>
         <SectionList/>
+      </v-flex>
+
+      <v-flex xs4>
         <ProductFamilyList/>
-      <!-- <ModelList/> -->
+      </v-flex>
+
+      <v-flex xs4>
         <MaterialList/>
+      </v-flex>
+
     </v-layout>
   </v-container>
 </template>

cateditor/src/components/MaterialList.vue

@@ -1,8 +1,7 @@
 <template>
-  <v-container>
   <v-card>
-      <v-card flat color="grey lighten-4" >
+    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-        <v-card-title>Styles</v-card-title>
+      Styles
     </v-card>
     <!-- <v-toolbar dense>
          <v-toolbar-title>Categories</v-toolbar-title>
@@ -10,6 +9,7 @@
          <v-btn icon><v-icon>add</v-icon></v-btn>
          </v-toolbar> -->
 
+    <v-card flat class="scroll-area">
     <draggable v-model="materials" group="materials">
       <div v-for="item in materials" :key="item.id">
         <v-hover
@@ -46,7 +46,7 @@
          <RawDisplayer :value="materials" title="Data" />
          </v-flex> -->
 
-  </v-container>
+  </v-card>
 </template>
 
 <script>
@@ -110,5 +110,8 @@ export default {
 </script>
 
 <style scoped>
-
+.scroll-area {
+  height: 300px;
+  overflow-y: auto;
+}
 </style>

cateditor/src/components/ProductFamilyList.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-container>
   <v-card>
-      <v-card flat color="grey lighten-4" >
+    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-        <v-card-title>Product Families</v-card-title>
+      Product Families
     </v-card>
 
+    <v-card flat class="scroll-area">
       <draggable v-model="families" group="categories">
         <div v-for="item in families" :key="item.id">
           <v-hover :key="item.id">
@@ -15,7 +15,11 @@
             >
               <v-list-tile-content>
                 <v-list-tile-title v-html="item.name"></v-list-tile-title>
-                <v-list-tile-sub-title v-html="item.models.length"></v-list-tile-sub-title>
+                <v-list-tile-sub-title
+                  class="caption font-weight-light"
+                  color="grey lighten-2">
+                  {{item.models.length}} {{item.models.length | pluralize('model') }}
+                </v-list-tile-sub-title>
               </v-list-tile-content>
 
               <v-list-tile-action>
@@ -32,7 +36,6 @@
           </v-hover>
         </div>
       </draggable>
-
       </v-card>
 
     <!-- <v-flex xs5>
@@ -41,18 +44,20 @@
 
     <!-- <SectionInfoDialog v-model="showInfoPopup" v-bind:section="selectedSectionID"/>
          <SectionDeleteDialog v-model="showDeletePopup" v-bind:section="selectedSectionID"/> -->
-  </v-container>
+  </v-card>
 </template>
 
 <script>
 import draggable from 'vuedraggable'
+import Vue2Filters from 'vue2-filters'
 import SelectionMixin from './SelectionMixin'
 /* import RawDisplayer from './RawDisplayer' */
 /* import SectionInfoDialog from './SectionInfoDialog'
  * import SectionDeleteDialog from './SectionDeleteDialog' */
 
 export default {
-  mixins: [SelectionMixin],
+  mixins: [Vue2Filters.mixin,
+           SelectionMixin],
   components: {
     draggable,
     /* SectionInfoDialog,
@@ -109,5 +114,8 @@ export default {
 </script>
 
 <style scoped>
-
+.scroll-area {
+  height: 300px;
+  overflow-y: auto;
+}
 </style>

cateditor/src/components/SectionList.vue

@@ -1,8 +1,7 @@
 <template>
-  <v-container>
   <v-card>
-      <v-card flat color="grey lighten-4" >
+    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-        <v-card-title>Sections</v-card-title>
+      Sections
     </v-card>
 
     <!-- <v-toolbar dense>
@@ -18,6 +17,7 @@
          </v-btn>
          </v-toolbar> -->
 
+    <v-card flat class="scroll-area">
     <draggable v-model="sections" group="categories">
       <div v-for="item in sections" :key="item.id">
         <v-hover :key="item.id">
@@ -28,7 +28,11 @@
           >
             <v-list-tile-content>
               <v-list-tile-title v-html="item.name"></v-list-tile-title>
-                <v-list-tile-sub-title color="text--grey lighten-1">12 models</v-list-tile-sub-title>
+                <v-list-tile-sub-title
+                  class="caption font-weight-light"
+                  color="grey lighten-2">
+                  12 models
+                </v-list-tile-sub-title>
             </v-list-tile-content>
 
             <v-list-tile-action>
@@ -48,13 +52,14 @@
     </draggable>
     </v-card>
 
+    <SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
+    <SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
+
     <!--<v-flex xs5>
          <RawDisplayer :value="sections" title="Data" />
          </v-flex>-->
 
-    <SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
+  </v-card>
-    <SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
-  </v-container>
 </template>
 
 <script>
@@ -116,5 +121,8 @@ export default {
 </script>
 
 <style scoped>
-
+.scroll-area {
+  height: 300px;
+  overflow-y: auto;
+}
 </style>