CatalogInfo: improve layout

cateditor/src/components/CatalogInfo.vue

@@ -1,58 +1,83 @@
 <template>
-  <v-container fluid grid-list-lg>
-    <v-layout column>
-
-      <v-layout row>
-        <v-flex d-flex shrink>
-          <v-select
-            v-model="season"
-            :items="seasons"
-            item-value="id"
-            item-text="name"
-            label="Season"></v-select>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-select
-            v-model="region"
-            :items="regions"
-            item-value="id"
-            item-text="name"
-            label="Region"></v-select>
-        </v-flex>
-        <v-flex d-flex grow>
-          <v-text-field
-            v-model="name"
-            label="Catalog name"
-            :rules="[rules.required]"
-          ></v-text-field>
-        </v-flex>
-
-        <v-flex d-flex shrink>
-          <v-text-field
-            v-model="email"
-            :rules="[rules.emailRules]"
-            label="Email"
-          ></v-text-field>
-        </v-flex>
-      </v-layout>
-
-      <v-layout row>
-        <!-- TODO only if admin! -->
-        <v-flex d-flex shrink v-if="isAdmin">
-          <v-checkbox v-model="master" label="Region master"></v-checkbox>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-checkbox v-model="isPublic" label="Public"></v-checkbox>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-checkbox v-model="prices" label="Show prices"></v-checkbox>
-        </v-flex>
-        <v-flex d-flex shrink>
-          <v-checkbox v-model="utility" label="Is Utility?"></v-checkbox>
-        </v-flex>
-      </v-layout>
+  <v-container fluid grid-list-sm>
 
+    <!--
+    <v-layout row>
+      <v-flex xs8>
+        <h2>Catalog Info</h2>
+      </v-flex>
     </v-layout>
+    -->
+
+    <v-layout row>
+      <v-flex xs8>
+        <v-text-field
+          v-model="name"
+          label="Catalog name"
+          :rules="[rules.required]"
+          autofocus
+          class="headline font-weight-medium"
+          height="30px"
+        ></v-text-field>
+      </v-flex>
+    </v-layout>
+
+    <v-layout row>
+      <v-flex xs4>
+        <v-select
+          v-model="season"
+          :items="seasons"
+          item-value="id"
+          item-text="name"
+          :rules="[rules.required]"
+          label="Season"></v-select>
+      </v-flex>
+      <v-flex xs4>
+        <v-select
+          v-model="region"
+          :items="regions"
+          item-value="id"
+          item-text="name"
+          :rules="[rules.required]"
+          label="Region"
+          class="pl-4"
+        ></v-select>
+      </v-flex>
+    </v-layout>
+
+    <v-layout row>
+      <v-flex xs8>
+        <v-text-field
+          v-model="email"
+          :rules="[rules.emailRules]"
+          label="Email"
+          hint="Get notified when the catalog PDF is done"
+          persistent-hint
+        ></v-text-field>
+      </v-flex>
+    </v-layout>
+
+    <v-layout row>
+      <v-flex xs4>
+        <v-checkbox
+          v-model="isPublic"
+          label="Public"
+        ></v-checkbox>
+      </v-flex>
+      <v-flex xs4>
+        <v-checkbox v-model="prices" label="Show prices"></v-checkbox>
+      </v-flex>
+    </v-layout>
+
+    <v-layout row>
+      <v-flex xs4 v-if="isAdmin">
+        <v-checkbox v-model="utility" label="Is Utility?"></v-checkbox>
+      </v-flex>
+      <v-flex xs4 v-if="isAdmin">
+        <v-checkbox v-model="master" label="Region master"></v-checkbox>
+      </v-flex>
+    </v-layout>
+
   </v-container>
 </template>
 
@@ -65,13 +90,13 @@ export default {
   data: () => ({
     seasons: seasons,
     regions: regions,
-    isAdmin: true, // TODO
+    isAdmin: false, // TODO
     rules: {
       required: value => {
         return !!value || 'Required'
       },
       emailRules: value => {
-        if (!lazyUser) {
+        if (!lazyUser && !value) {
           // signed-up user doesn't need email
           return true
         }