Move description to body of table

IntelliTect · Aug 12, 2024 · 6409a64 · 6409a64
1 parent 672c77b
commit 6409a64
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card class="c-admin-editor" :class="'type-' + metadata.name">
-    <v-toolbar class="c-admin-editor--toolbar" density="compact" :color="color">
+    <v-toolbar
+      class="c-admin-editor--toolbar"
+      density="compact"
+      :color="color"
+      elevation="4"
+    >
       <v-toolbar-title style="flex: 0 1 auto">
         <template v-if="showContent">
           <span v-if="!canEdit">View</span>
@@ -48,12 +53,11 @@
         <span class="hidden-sm-and-down">Reload</span>
       </v-btn>
     </v-toolbar>
-    <v-sheet v-if="metadata.description" :color="color">
-      <v-divider />
-      <v-card-subtitle class="font-italic">
-        {{ metadata.description }}
-      </v-card-subtitle>
-    </v-sheet>
+
+    <div v-if="metadata.description" class="c-admin-table--description">
+      <i class="fa fa-info-circle"></i>
+      {{ metadata.displayName }}: {{ metadata.description }}
+    </div>
 
     <v-card-text class="pt-2">
       <c-loader-status

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table-toolbar.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table-toolbar.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-toolbar class="c-admin-table-toolbar" density="comfortable" :color="color">
+  <v-toolbar
+    extended
+    class="c-admin-table-toolbar"
+    density="comfortable"
+    :color="color"
+    elevation="4"
+  >
     <v-toolbar-title class="c-admin-table-toolbar--model-name hidden-xs-only">
       {{ metadata.displayName }}
     </v-toolbar-title>
@@ -51,35 +57,27 @@
     <v-spacer></v-spacer>
 
     <c-list-page class="c-admin-table-toolbar--page" :list="list" />
-  </v-toolbar>
 
-  <v-sheet :color="color">
-    <v-divider />
-    <span v-if="metadata.description">
-      <v-card-subtitle class="font-italic">
-        {{ metadata.description }}
-      </v-card-subtitle>
-      <v-divider />
-    </span>
-  </v-sheet>
-
-  <v-toolbar :color="color">
-    <v-text-field
-      class="c-admin-table-toolbar--search ml-4"
-      hide-details
-      prepend-inner-icon="fa fa-search"
-      label="Search"
-      v-model="list.$params.search"
-      density="comfortable"
-      single-line
-      clearable
-    ></v-text-field>
-    <v-divider class="hidden-xs-only mx-4 my-0" vertical></v-divider>
-    <c-list-filters :list="list" />
+    <template v-slot:extension>
+      <v-text-field
+        class="c-admin-table-toolbar--search"
+        hide-details
+        prepend-inner-icon="fa fa-search"
+        label="Search"
+        v-model="list.$params.search"
+        density="comfortable"
+        single-line
+        clearable
+      ></v-text-field>
 
-    <v-spacer></v-spacer>
+      <v-divider class="hidden-xs-only mx-4 my-0" vertical></v-divider>
+
+      <c-list-filters :list="list" />
+
+      <v-spacer></v-spacer>
 
-    <c-list-page-size :list="list" :items="pageSizes" />
+      <c-list-page-size :list="list" :items="pageSizes" />
+    </template>
   </v-toolbar>
 </template>
 

diff --git a/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue b/src/coalesce-vue-vuetify3/src/components/admin/c-admin-table.vue
@@ -7,6 +7,12 @@
       :editable="canEdit ? editable : undefined"
       :color="color"
     />
+
+    <div v-if="metadata.description" class="c-admin-table--description">
+      <i class="fa fa-info-circle"></i>
+      {{ metadata.displayName }}: {{ metadata.description }}
+    </div>
+
     <v-card-text>
       <c-table
         admin
@@ -262,6 +268,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.c-admin-table--description {
+  font-size: 12px;
+  margin: 4px 16px;
+  opacity: 0.9;
+}
+
 .c-admin-table {
   a {
     text-decoration: none;