From 469a646ae323707affabf013471db6c7ff59bf39 Mon Sep 17 00:00:00 2001
From: James Collins <james@stemmechanics.com.au>
Date: Sat, 15 Jul 2023 21:56:56 +1000
Subject: [PATCH] changed layout for consistency

---
 resources/js/views/dashboard/ArticleEdit.vue  | 29 ++++++++++---------
 resources/js/views/dashboard/EventEdit.vue    | 24 +++++++++------
 resources/js/views/dashboard/MediaEdit.vue    | 26 ++++++++++-------
 .../js/views/dashboard/ShortlinkEdit.vue      |  4 +--
 resources/js/views/dashboard/UserEdit.vue     | 12 ++++----
 5 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/resources/js/views/dashboard/ArticleEdit.vue b/resources/js/views/dashboard/ArticleEdit.vue
index 78c56d3..b12f0f3 100644
--- a/resources/js/views/dashboard/ArticleEdit.vue
+++ b/resources/js/views/dashboard/ArticleEdit.vue
@@ -5,35 +5,37 @@
             :title="pageHeading"
             :back-link="{ name: 'dashboard-article-list' }"
             back-title="Back to Articles" />
-        <div class="max-w-7xl mx-auto mt-8 px-8">
-            <SMLoading v-if="pageLoading" />
+        <SMLoading v-if="form.loading()" />
+		<div v-else class="max-w-7xl mx-auto px-8 mt-8">
             <SMForm
-                v-else
                 :model-value="form"
                 @submit="handleSubmit"
                 @failed-validation="handleFailValidation">
-                <div class="mb-8">
-                    <SMInput control="title" @blur="updateSlug()" />
+                <div>
+                    <SMInput class="mb-8" control="title" autofocus @blur="updateSlug()" />
                 </div>
-                <div class="flex gap-4 mb-8">
-                    <SMInput control="slug" />
+                <div class="flex flex-col md:flex-row gap-4">
+                    <SMInput class="mb-8" control="slug" />
                     <SMInput
+						class="mb-8"
                         type="datetime"
                         control="publish_at"
                         label="Publish Date" />
                 </div>
-                <div class="mb-8">
-                    <SMSelectImage control="hero" label="Hero image" required />
+                <div>
+                    <SMSelectImage class="mb-8" control="hero" label="Hero image" required />
                 </div>
-                <div class="mb-8">
+                <div>
                     <SMDropdown
+						class="mb-8"
                         control="user_id"
                         label="Created By"
                         type="select"
                         :options="authors" />
                 </div>
-                <div class="mb-8">
+                <div>
                     <SMEditor
+						class="mb-8"
                         v-model:model-value="form.controls.content.value" />
                 </div>
                 <SMInputAttachments v-model:model-value="attachments" />
@@ -73,7 +75,6 @@ const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 let pageError = ref(200);
-const pageLoading = ref(false);
 const authors = ref({});
 const attachments = ref([]);
 const pageHeading = route.params.id ? "Edit Article" : "Create Article";
@@ -136,7 +137,7 @@ const updateSlug = async () => {
 const loadData = async () => {
     try {
         if (route.params.id) {
-            pageLoading.value = true;
+            form.loading(true);
             let result = await api.get({
                 url: "/articles/{id}",
                 params: {
@@ -172,7 +173,7 @@ const loadData = async () => {
     } catch (error) {
         pageError.value = error.status;
     } finally {
-        pageLoading.value = false;
+        form.loading(false);
     }
 };
 
diff --git a/resources/js/views/dashboard/EventEdit.vue b/resources/js/views/dashboard/EventEdit.vue
index 6a794ff..14b5ff5 100644
--- a/resources/js/views/dashboard/EventEdit.vue
+++ b/resources/js/views/dashboard/EventEdit.vue
@@ -23,28 +23,32 @@
                         }" />
                 </div>
                 <div
-                    class="flex gap-4 mb-8"
+                    class="flex flex-col md:flex-row gap-4"
                     v-if="form.controls.location.value !== 'online'">
-                    <SMInput control="address" />
-                    <SMInput control="location_url" />
+                    <SMInput class="mb-4" control="address" />
+                    <SMInput class="mb-4" control="location_url" />
                 </div>
-                <div class="flex gap-4 mb-8">
+                <div class="flex flex-col md:flex-row gap-4">
                     <SMInput
                         type="datetime"
+						class="mb-4"
                         control="start_at"
                         label="Start Date/Time" />
                     <SMInput
                         type="datetime"
+						class="mb-4"
                         control="end_at"
                         label="End Date/Time" />
                 </div>
-                <div class="flex gap-4 mb-8">
+                <div class="flex flex-col md:flex-row gap-4">
                     <SMInput
                         type="datetime"
+						class="mb-4"
                         control="publish_at"
                         label="Publish Date/Time" />
                     <SMDropdown
                         type="select"
+						class="mb-4"
                         control="status"
                         :options="{
                             draft: 'Draft',
@@ -55,18 +59,19 @@
                             cancelled: 'Cancelled',
                         }" />
                 </div>
-                <div class="flex gap-4 mb-8">
-                    <SMInput control="price"
+                <div class="flex flex-col md:flex-row gap-4">
+                    <SMInput class="mb-4" control="price"
                         >Leave blank to hide from public. Also supports TBD and
                         TBC.</SMInput
                     >
-                    <SMInput control="ages"
+                    <SMInput class="mb-4" control="ages"
                         >Leave blank to hide from public.</SMInput
                     >
                 </div>
-                <div class="flex gap-4 mb-8">
+                <div class="flex flex-col md:flex-row gap-4">
                     <SMDropdown
                         type="select"
+						class="mb-4"
                         control="registration_type"
                         label="Registration"
                         :options="{
@@ -77,6 +82,7 @@
                         }" />
                     <SMInput
                         v-if="registration_data?.visible"
+						class="mb-4"
                         control="registration_data"
                         :label="registration_data?.title"
                         :type="registration_data?.type" />
diff --git a/resources/js/views/dashboard/MediaEdit.vue b/resources/js/views/dashboard/MediaEdit.vue
index 3ca1f55..5c1adc3 100644
--- a/resources/js/views/dashboard/MediaEdit.vue
+++ b/resources/js/views/dashboard/MediaEdit.vue
@@ -6,49 +6,53 @@
             :back-link="{ name: 'dashboard-media-list' }"
             back-title="Back to Media" />
         <SMLoading v-if="form.loading()" />
-        <div v-else class="max-w-4xl mx-auto px-4 mt-12">
+        <div v-else class="max-w-7xl mx-auto px-8 mt-8">
             <SMForm
                 :model-value="form"
                 @submit="handleSubmit"
                 @failed-validation="handleFailValidation">
                 <div>
-                    <SMImage v-if="!editMultiple" :src="imageUrl" />
-                    <SMImageStack v-if="editMultiple" :src="imageStackUrls" />
+                    <SMImage v-if="!editMultiple" class="mb-8" :src="imageUrl" />
+                    <SMImageStack v-else class="mb-8" :src="imageStackUrls" />
                 </div>
                 <SMInputFile
                     v-if="!editMultiple"
                     control="file"
                     type="file"
-                    class="mt-4" />
-                <SMInput control="title" class="mt-4" />
-                <SMInput control="permission" class="mt-4" />
-                <div v-if="!editMultiple" class="mt-4 flex flex-cols gap-4">
+                    class="mb-8" />
+                <SMInput control="title" class="mb-8" />
+                <SMInput control="permission" class="mb-8" />
+                <div v-if="!editMultiple" class="flex flex-col md:flex-row gap-4">
                     <SMInput
+						class="mb-8"
                         v-model="computedFileSize"
                         type="static"
                         label="File Size" />
                     <SMInput
-                        v-model="fileData.mime_type"
+                        class="mb-8"
+						v-model="fileData.mime_type"
                         type="static"
                         label="File Mime Type" />
                 </div>
-                <div v-if="!editMultiple" class="mt-4 flex flex-cols gap-4">
+                <div v-if="!editMultiple" class="flex flex-col md:flex-row gap-4">
                     <SMInput
+						class="mb-8"
                         v-model="fileData.status"
                         type="static"
                         label="Status" />
                     <SMInput
+						class="mb-8"
                         v-model="fileData.dimensions"
                         type="static"
                         label="Dimensions" />
                 </div>
                 <SMInput
                     v-if="!editMultiple"
-                    class="mt-4"
+                    class="mb-8"
                     v-model="fileData.url"
                     type="static"
                     label="URL" />
-                <SMInput type="textarea" control="description" />
+                <SMInput class="mb-8" textarea control="description" />
                 <input
                     role="button"
                     type="submit"
diff --git a/resources/js/views/dashboard/ShortlinkEdit.vue b/resources/js/views/dashboard/ShortlinkEdit.vue
index 952f5c0..1742ea6 100644
--- a/resources/js/views/dashboard/ShortlinkEdit.vue
+++ b/resources/js/views/dashboard/ShortlinkEdit.vue
@@ -16,9 +16,9 @@
         <SMLoading v-if="form.loading()" />
         <div v-else class="max-w-4xl mx-auto px-4 mt-12">
             <SMForm :model-value="form" @submit="handleSubmit">
-                <SMInput class="mt-4" control="code" />
+                <SMInput class="mb-8" control="code" />
                 <SMInput
-                    class="mt-4"
+                    class="mb-8"
                     type="static"
                     v-model="used"
                     label="Times used" />
diff --git a/resources/js/views/dashboard/UserEdit.vue b/resources/js/views/dashboard/UserEdit.vue
index 02641b1..5be1149 100644
--- a/resources/js/views/dashboard/UserEdit.vue
+++ b/resources/js/views/dashboard/UserEdit.vue
@@ -16,17 +16,17 @@
                     : 'Back to Dashboard'
             " />
         <SMLoading v-if="form.loading()" />
-        <div v-else class="max-w-4xl mx-auto px-4 mt-12">
+        <div v-else class="max-w-4xl mx-auto px-8 mb-8">
             <SMForm :model-value="form" @submit="handleSubmit">
-                <SMInput class="mt-4" control="display_name" autofocus />
-                <SMInput class="mt-4" control="email" type="email" />
-                <SMInput class="mt-4" control="first_name"
+                <SMInput class="mb-8" control="display_name" autofocus />
+                <SMInput class="mb-8" control="email" type="email" />
+                <SMInput class="mb-8" control="first_name"
                     >This field is optional</SMInput
                 >
-                <SMInput class="mt-4" control="last_name"
+                <SMInput class="mb-8" control="last_name"
                     >This field is optional</SMInput
                 >
-                <SMInput class="mt-4" control="phone"
+                <SMInput class="mb-8" control="phone"
                     >This field is optional</SMInput
                 >
                 <template v-if="userStore.permissions.includes('admin/users')">