From 6d1af24a57971ddc0b36b96c16dcb59d1f5de16b Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@apparentinc.com>
Date: Wed, 10 Apr 2019 22:29:30 -0700
Subject: [PATCH] cateditor: improve contents layout

---
 cateditor/src/components/CatalogContents.vue  |  21 +++-
 cateditor/src/components/MaterialList.vue     |  87 +++++++-------
 .../src/components/ProductFamilyList.vue      |  30 +++--
 cateditor/src/components/SectionList.vue      | 110 ++++++++++--------
 4 files changed, 138 insertions(+), 110 deletions(-)

diff --git a/cateditor/src/components/CatalogContents.vue b/cateditor/src/components/CatalogContents.vue
index 39ae8ec..d036541 100644
--- a/cateditor/src/components/CatalogContents.vue
+++ b/cateditor/src/components/CatalogContents.vue
@@ -1,10 +1,19 @@
 <template>
-  <v-container fluid grid-list-lg>
-    <v-layout row>
-      <SectionList/>
-      <ProductFamilyList/>
-      <!-- <ModelList/> -->
-      <MaterialList/>
+  <v-container fluid grid-list-lg ma-0 pa-1>
+    <v-layout row fill-height>
+
+      <v-flex xs4>
+        <SectionList/>
+      </v-flex>
+
+      <v-flex xs4>
+        <ProductFamilyList/>
+      </v-flex>
+
+      <v-flex xs4>
+        <MaterialList/>
+      </v-flex>
+
     </v-layout>
   </v-container>
 </template>
diff --git a/cateditor/src/components/MaterialList.vue b/cateditor/src/components/MaterialList.vue
index a3575be..7943248 100644
--- a/cateditor/src/components/MaterialList.vue
+++ b/cateditor/src/components/MaterialList.vue
@@ -1,52 +1,52 @@
 <template>
-  <v-container>
-    <v-card>
-      <v-card flat color="grey lighten-4" >
-        <v-card-title>Styles</v-card-title>
-      </v-card>
-      <!-- <v-toolbar dense>
-           <v-toolbar-title>Categories</v-toolbar-title>
-           <v-spacer></v-spacer>
-           <v-btn icon><v-icon>add</v-icon></v-btn>
-           </v-toolbar> -->
+  <v-card>
+    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
+      Styles
+    </v-card>
+    <!-- <v-toolbar dense>
+         <v-toolbar-title>Categories</v-toolbar-title>
+         <v-spacer></v-spacer>
+         <v-btn icon><v-icon>add</v-icon></v-btn>
+         </v-toolbar> -->
 
-      <draggable v-model="materials" group="materials">
-        <div v-for="item in materials" :key="item.id">
-          <v-hover
-            :key="item.id"
-            :materialid="item.id">
-            <v-list-tile
-              slot-scope="{ hover }"
-              :class="listItemClasses(item.id, hover)"
-              @click="selectMaterial(item.id)"
-            >
-              <v-list-tile-content>
-                <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
-                <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
-              </v-list-tile-content>
+    <v-card flat class="scroll-area">
+    <draggable v-model="materials" group="materials">
+      <div v-for="item in materials" :key="item.id">
+        <v-hover
+          :key="item.id"
+          :materialid="item.id">
+          <v-list-tile
+            slot-scope="{ hover }"
+            :class="listItemClasses(item.id, hover)"
+            @click="selectMaterial(item.id)"
+          >
+            <v-list-tile-content>
+              <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
+              <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
+            </v-list-tile-content>
 
-              <v-list-tile-action>
-                <span class="group">
-                  <v-btn icon @click="popInfo(item.id)">
-                    <v-icon small color="grey lighten-1">info</v-icon>
-                  </v-btn>
-                  <v-btn icon @click="popDelete(item.id)">
-                    <v-icon small color="grey lighten-1">delete</v-icon>
-                  </v-btn>
-                </span>
-              </v-list-tile-action>
+            <v-list-tile-action>
+              <span class="group">
+                <v-btn icon @click="popInfo(item.id)">
+                  <v-icon small color="grey lighten-1">info</v-icon>
+                </v-btn>
+                <v-btn icon @click="popDelete(item.id)">
+                  <v-icon small color="grey lighten-1">delete</v-icon>
+                </v-btn>
+              </span>
+            </v-list-tile-action>
 
-            </v-list-tile>
-          </v-hover>
-        </div>
-      </draggable>
+          </v-list-tile>
+        </v-hover>
+      </div>
+    </draggable>
     </v-card>
 
     <!-- <v-flex xs5>
          <RawDisplayer :value="materials" title="Data" />
          </v-flex> -->
 
-  </v-container>
+  </v-card>
 </template>
 
 <script>
@@ -89,8 +89,8 @@ export default {
   methods: {
     listItemClasses: function (id, hovering) {
       /* if (id === this.selectedMaterial) {
-        return 'primary'
-      } else */
+         return 'primary'
+         } else */
       if (hovering) {
         return 'grey lighten-4'
       } else {
@@ -110,5 +110,8 @@ export default {
 </script>
 
 <style scoped>
-
+.scroll-area {
+  height: 300px;
+  overflow-y: auto;
+}
 </style>
diff --git a/cateditor/src/components/ProductFamilyList.vue b/cateditor/src/components/ProductFamilyList.vue
index 63ed3a8..978bea1 100644
--- a/cateditor/src/components/ProductFamilyList.vue
+++ b/cateditor/src/components/ProductFamilyList.vue
@@ -1,10 +1,10 @@
 <template>
-  <v-container>
-    <v-card>
-      <v-card flat color="grey lighten-4" >
-        <v-card-title>Product Families</v-card-title>
-      </v-card>
+  <v-card>
+    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
+      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,8 +36,7 @@
           </v-hover>
         </div>
       </draggable>
-
-    </v-card>
+      </v-card>
 
     <!-- <v-flex xs5>
          <RawDisplayer :value="families" title="Data" />
@@ -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>
diff --git a/cateditor/src/components/SectionList.vue b/cateditor/src/components/SectionList.vue
index 155d0e1..067f4ca 100644
--- a/cateditor/src/components/SectionList.vue
+++ b/cateditor/src/components/SectionList.vue
@@ -1,60 +1,65 @@
 <template>
-  <v-container>
-    <v-card>
-      <v-card flat color="grey lighten-4" >
-        <v-card-title>Sections</v-card-title>
-      </v-card>
-
-      <!-- <v-toolbar dense>
-        <v-toolbar-title>Sections</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon>
-          <v-tooltip top>
-            <template v-slot:activator="{ on }">
-              <v-icon v-on="on">add</v-icon>
-            </template>
-            <span>Add new section</span>
-          </v-tooltip>
-        </v-btn>
-      </v-toolbar> -->
-
-      <draggable v-model="sections" group="categories">
-        <div v-for="item in sections" :key="item.id">
-          <v-hover :key="item.id">
-            <v-list-tile
-              slot-scope="{ hover }"
-              :class="listItemClasses(item.id, hover)"
-              @click="selectSection(item.id)"
-            >
-              <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-content>
-
-              <v-list-tile-action>
-                <span class="group">
-                  <v-btn icon @click.stop="popInfo(item.id)">
-                    <v-icon small color="grey lighten-1">info</v-icon>
-                  </v-btn>
-                  <v-btn icon @click.stop="popDelete(item.id)">
-                    <v-icon small color="grey lighten-1">delete</v-icon>
-                  </v-btn>
-                </span>
-              </v-list-tile-action>
-
-            </v-list-tile>
-          </v-hover>
-        </div>
-      </draggable>
+  <v-card>
+    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
+      Sections
     </v-card>
 
+    <!-- <v-toolbar dense>
+         <v-toolbar-title>Sections</v-toolbar-title>
+         <v-spacer></v-spacer>
+         <v-btn icon>
+         <v-tooltip top>
+         <template v-slot:activator="{ on }">
+         <v-icon v-on="on">add</v-icon>
+         </template>
+         <span>Add new section</span>
+         </v-tooltip>
+         </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">
+          <v-list-tile
+            slot-scope="{ hover }"
+            :class="listItemClasses(item.id, hover)"
+            @click="selectSection(item.id)"
+          >
+            <v-list-tile-content>
+              <v-list-tile-title v-html="item.name"></v-list-tile-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>
+              <span class="group">
+                <v-btn icon @click.stop="popInfo(item.id)">
+                  <v-icon small color="grey lighten-1">info</v-icon>
+                </v-btn>
+                <v-btn icon @click.stop="popDelete(item.id)">
+                  <v-icon small color="grey lighten-1">delete</v-icon>
+                </v-btn>
+              </span>
+            </v-list-tile-action>
+
+          </v-list-tile>
+        </v-hover>
+      </div>
+    </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"/>
-    <SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
-  </v-container>
+  </v-card>
 </template>
 
 <script>
@@ -116,5 +121,8 @@ export default {
 </script>
 
 <style scoped>
-
+.scroll-area {
+  height: 300px;
+  overflow-y: auto;
+}
 </style>