From eb57d25b5c4972000cb202c68ecb2710a4a2393a Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@arclight.industries>
Date: Wed, 15 Jan 2020 12:58:41 -0800
Subject: [PATCH] CatalogList.vue: layout improvements

---
 cateditor/src/components/CatalogList.vue | 159 ++++++++++++-----------
 1 file changed, 82 insertions(+), 77 deletions(-)

diff --git a/cateditor/src/components/CatalogList.vue b/cateditor/src/components/CatalogList.vue
index d2972db..28aa5fb 100644
--- a/cateditor/src/components/CatalogList.vue
+++ b/cateditor/src/components/CatalogList.vue
@@ -1,7 +1,7 @@
 <template>
   <v-container fluid>
     <v-row>
-      <v-col cols="3">
+      <v-col cols="3" class="px-5 py-2">
         <v-btn color="primary"
                class="black--text"
                href="/catalog/new"
@@ -10,7 +10,7 @@
       <v-col cols="9"/>
     </v-row>
 
-    <v-row>
+    <v-row class="px-2">
       <v-col cols="8">
 
         <v-card>
@@ -23,10 +23,9 @@
 
             <!-- my catalogs -->
             <v-tab-item key="mine">
-              <v-card text>
-
-                <v-card-title>
-                  <v-spacer/>
+              <v-row>
+                <v-col cols="7"/>
+                <v-col cols="5" class="px-8">
                   <v-text-field
                     v-model="search"
                     append-icon="search"
@@ -34,52 +33,54 @@
                     single-line
                     hide-details
                   />
-                </v-card-title>
+                </v-col>
+              </v-row>
 
-                <v-data-table
-                  :headers="myHeaders"
-                  :items="myCatalogs"
-                  :items-per-page="15"
-                  :search="search"
-                  :loading="loadingMyCatalogs"
-                  class="scroll-area"
-                  @click:row="selectCatalog"
-                >
-                  <template v-slot:item.master="{ item }">
-                    <v-tooltip v-if="item.master" top>
-                      <template v-slot:activator="{ on }">
-                        <v-icon small color="red" v-on="on">stars</v-icon>
-                      </template>
-                      <span>Season master</span>
-                    </v-tooltip>
-                  </template>
+              <v-row>
+                <v-col>
+                  <v-data-table
+                    :headers="myHeaders"
+                    :items="myCatalogs"
+                    :items-per-page="10"
+                    :search="search"
+                    :loading="loadingMyCatalogs"
+                    class="scroll-area"
+                    @click:row="selectCatalog"
+                  >
+                    <template v-slot:item.master="{ item }">
+                      <v-tooltip v-if="item.master" top>
+                        <template v-slot:activator="{ on }">
+                          <v-icon small color="red" v-on="on">stars</v-icon>
+                        </template>
+                        <span>Season master</span>
+                      </v-tooltip>
+                    </template>
 
-                  <template v-slot:item.updated="{ item }">
-                    {{ item.updatedPretty }}
-                  </template>
+                    <template v-slot:item.updated="{ item }">
+                      {{ item.updatedPretty }}
+                    </template>
 
-                  <template v-slot:item.build_progress="{ item }">
-                    <PDFProgress :percent-done="item.build_progress" />
-                  </template>
+                    <template v-slot:item.build_progress="{ item }">
+                      <PDFProgress :percent-done="item.build_progress" />
+                    </template>
 
-                  <template v-slot:no-results>
-                    No catalogs match "{{ search }}"
-                  </template>
+                    <template v-slot:no-results>
+                      No catalogs match "{{ search }}"
+                    </template>
 
-                  <template v-slot:no-data>
-                    No Catalogs
-                  </template>
-                </v-data-table>
-
-              </v-card>
+                    <template v-slot:no-data>
+                      No Catalogs
+                    </template>
+                  </v-data-table>
+                </v-col>
+              </v-row>
             </v-tab-item>
 
             <!-- public catalogs -->
             <v-tab-item key="public">
-              <v-card text>
-
-                <v-card-title>
-                  <v-spacer/>
+              <v-row>
+                <v-col cols="7"/>
+                <v-col cols="5" class="px-8">
                   <v-text-field
                     v-model="search"
                     append-icon="search"
@@ -87,48 +88,50 @@
                     single-line
                     hide-details
                   />
-                </v-card-title>
+                </v-col>
+              </v-row>
 
-                <v-data-table
-                  :headers="pubHeaders"
-                  :items="publicCatalogs"
-                  :items-per-page="15"
-                  :search="search"
-                  :loading="loadingPublicCatalogs"
-                  class="scroll-area"
-                  @click:row="selectCatalog"
-                >
-                  <template v-slot:item.master="{ item }">
-                    <v-tooltip v-if="item.master" top>
-                      <template v-slot:activator="{ on }">
-                        <v-icon small color="red" v-on="on">stars</v-icon>
-                      </template>
-                      <span>Season master</span>
-                    </v-tooltip>
-                  </template>
+              <v-row>
+                <v-col>
+                  <v-data-table
+                    :headers="pubHeaders"
+                    :items="publicCatalogs"
+                    :items-per-page="10"
+                    :search="search"
+                    :loading="loadingPublicCatalogs"
+                    class="scroll-area"
+                    @click:row="selectCatalog"
+                  >
+                    <template v-slot:item.master="{ item }">
+                      <v-tooltip v-if="item.master" top>
+                        <template v-slot:activator="{ on }">
+                          <v-icon small color="red" v-on="on">stars</v-icon>
+                        </template>
+                        <span>Season master</span>
+                      </v-tooltip>
+                    </template>
 
-                  <template v-slot:item.updated="{ item }">
-                    {{ item.updatedPretty }}
-                  </template>
+                    <template v-slot:item.updated="{ item }">
+                      {{ item.updatedPretty }}
+                    </template>
 
-                  <template v-slot:item.build_progress="{ item }">
-                    <PDFProgress :percent-done="item.build_progress" />
-                  </template>
+                    <template v-slot:item.build_progress="{ item }">
+                      <PDFProgress :percent-done="item.build_progress" />
+                    </template>
 
-                  <template v-slot:no-results>
-                    No catalogs match "{{ search }}"
-                  </template>
+                    <template v-slot:no-results>
+                      No catalogs match "{{ search }}"
+                    </template>
 
-                  <template v-slot:no-data>
-                    No Catalogs
-                  </template>
-                </v-data-table>
-
-              </v-card>
+                    <template v-slot:no-data>
+                      No Catalogs
+                    </template>
+                  </v-data-table>
+                </v-col>
+              </v-row>
             </v-tab-item>
           </v-tabs>
         </v-card>
-
       </v-col>
 
       <v-col cols="4">
@@ -332,10 +335,12 @@ export default {
 </script>
 
 <style scoped>
+/*
 .scroll-area {
   height: 300px;
   overflow-y: auto;
 }
+*/
 </style>
 
 <style>