STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

changed layout for consistency

Browse Source
This commit is contained in:
James Collins
2023-07-15 21:56:56 +10:00
parent 9cb9ebbe4f
commit 469a646ae3
5 changed files with 53 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/js/views/dashboard/ArticleEdit.vue
View File

@@ -5,35 +5,37 @@
:title="pageHeading" :title="pageHeading"
:back-link="{ name: 'dashboard-article-list' }" :back-link="{ name: 'dashboard-article-list' }"
back-title="Back to Articles" /> back-title="Back to Articles" />
<div class="max-w-7xl mx-auto mt-8 px-8"> <SMLoading v-if="form.loading()" />
<SMLoading v-if="pageLoading" /> <div v-else class="max-w-7xl mx-auto px-8 mt-8">
<SMForm <SMForm
v-else
:model-value="form" :model-value="form"
@submit="handleSubmit" @submit="handleSubmit"
@failed-validation="handleFailValidation"> @failed-validation="handleFailValidation">
<div class="mb-8"> <div>
<SMInput control="title" @blur="updateSlug()" /> <SMInput class="mb-8" control="title" autofocus @blur="updateSlug()" />
</div> </div>
<div class="flex gap-4 mb-8"> <div class="flex flex-col md:flex-row gap-4">
<SMInput control="slug" /> <SMInput class="mb-8" control="slug" />
<SMInput <SMInput
class="mb-8"
type="datetime" type="datetime"
control="publish_at" control="publish_at"
label="Publish Date" /> label="Publish Date" />
</div> </div>
<div class="mb-8"> <div>
<SMSelectImage control="hero" label="Hero image" required /> <SMSelectImage class="mb-8" control="hero" label="Hero image" required />
</div> </div>
<div class="mb-8"> <div>
<SMDropdown <SMDropdown
class="mb-8"
control="user_id" control="user_id"
label="Created By" label="Created By"
type="select" type="select"
:options="authors" /> :options="authors" />
</div> </div>
<div class="mb-8"> <div>
<SMEditor <SMEditor
class="mb-8"
v-model:model-value="form.controls.content.value" /> v-model:model-value="form.controls.content.value" />
</div> </div>
<SMInputAttachments v-model:model-value="attachments" /> <SMInputAttachments v-model:model-value="attachments" />
@@ -73,7 +75,6 @@ const route = useRoute();
const router = useRouter(); const router = useRouter();
const userStore = useUserStore(); const userStore = useUserStore();
let pageError = ref(200); let pageError = ref(200);
const pageLoading = ref(false);
const authors = ref({}); const authors = ref({});
const attachments = ref([]); const attachments = ref([]);
const pageHeading = route.params.id ? "Edit Article" : "Create Article"; const pageHeading = route.params.id ? "Edit Article" : "Create Article";
@@ -136,7 +137,7 @@ const updateSlug = async () => {
const loadData = async () => { const loadData = async () => {
try { try {
if (route.params.id) { if (route.params.id) {
pageLoading.value = true; form.loading(true);
let result = await api.get({ let result = await api.get({
url: "/articles/{id}", url: "/articles/{id}",
params: { params: {
@@ -172,7 +173,7 @@ const loadData = async () => {
} catch (error) { } catch (error) {
pageError.value = error.status; pageError.value = error.status;
} finally { } finally {
pageLoading.value = false; form.loading(false);
} }
}; };

24
resources/js/views/dashboard/EventEdit.vue
View File

@@ -23,28 +23,32 @@
}" /> }" />
</div> </div>
<div <div
class="flex gap-4 mb-8" class="flex flex-col md:flex-row gap-4"
v-if="form.controls.location.value !== 'online'"> v-if="form.controls.location.value !== 'online'">
<SMInput control="address" /> <SMInput class="mb-4" control="address" />
<SMInput control="location_url" /> <SMInput class="mb-4" control="location_url" />
</div> </div>
<div class="flex gap-4 mb-8"> <div class="flex flex-col md:flex-row gap-4">
<SMInput <SMInput
type="datetime" type="datetime"
class="mb-4"
control="start_at" control="start_at"
label="Start Date/Time" /> label="Start Date/Time" />
<SMInput <SMInput
type="datetime" type="datetime"
class="mb-4"
control="end_at" control="end_at"
label="End Date/Time" /> label="End Date/Time" />
</div> </div>
<div class="flex gap-4 mb-8"> <div class="flex flex-col md:flex-row gap-4">
<SMInput <SMInput
type="datetime" type="datetime"
class="mb-4"
control="publish_at" control="publish_at"
label="Publish Date/Time" /> label="Publish Date/Time" />
<SMDropdown <SMDropdown
type="select" type="select"
class="mb-4"
control="status" control="status"
:options="{ :options="{
draft: 'Draft', draft: 'Draft',
@@ -55,18 +59,19 @@
cancelled: 'Cancelled', cancelled: 'Cancelled',
}" /> }" />
</div> </div>
<div class="flex gap-4 mb-8"> <div class="flex flex-col md:flex-row gap-4">
<SMInput control="price" <SMInput class="mb-4" control="price"
>Leave blank to hide from public. Also supports TBD and >Leave blank to hide from public. Also supports TBD and
TBC.</SMInput TBC.</SMInput
> >
<SMInput control="ages" <SMInput class="mb-4" control="ages"
>Leave blank to hide from public.</SMInput >Leave blank to hide from public.</SMInput
> >
</div> </div>
<div class="flex gap-4 mb-8"> <div class="flex flex-col md:flex-row gap-4">
<SMDropdown <SMDropdown
type="select" type="select"
class="mb-4"
control="registration_type" control="registration_type"
label="Registration" label="Registration"
:options="{ :options="{
@@ -77,6 +82,7 @@
}" /> }" />
<SMInput <SMInput
v-if="registration_data?.visible" v-if="registration_data?.visible"
class="mb-4"
control="registration_data" control="registration_data"
:label="registration_data?.title" :label="registration_data?.title"
:type="registration_data?.type" /> :type="registration_data?.type" />

26
resources/js/views/dashboard/MediaEdit.vue
View File

@@ -6,49 +6,53 @@
:back-link="{ name: 'dashboard-media-list' }" :back-link="{ name: 'dashboard-media-list' }"
back-title="Back to Media" /> back-title="Back to Media" />
<SMLoading v-if="form.loading()" /> <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 <SMForm
:model-value="form" :model-value="form"
@submit="handleSubmit" @submit="handleSubmit"
@failed-validation="handleFailValidation"> @failed-validation="handleFailValidation">
<div> <div>
<SMImage v-if="!editMultiple" :src="imageUrl" /> <SMImage v-if="!editMultiple" class="mb-8" :src="imageUrl" />
<SMImageStack v-if="editMultiple" :src="imageStackUrls" /> <SMImageStack v-else class="mb-8" :src="imageStackUrls" />
</div> </div>
<SMInputFile <SMInputFile
v-if="!editMultiple" v-if="!editMultiple"
control="file" control="file"
type="file" type="file"
class="mt-4" /> class="mb-8" />
<SMInput control="title" class="mt-4" /> <SMInput control="title" class="mb-8" />
<SMInput control="permission" class="mt-4" /> <SMInput control="permission" class="mb-8" />
<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 <SMInput
class="mb-8"
v-model="computedFileSize" v-model="computedFileSize"
type="static" type="static"
label="File Size" /> label="File Size" />
<SMInput <SMInput
v-model="fileData.mime_type" class="mb-8"
v-model="fileData.mime_type"
type="static" type="static"
label="File Mime Type" /> label="File Mime Type" />
</div> </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 <SMInput
class="mb-8"
v-model="fileData.status" v-model="fileData.status"
type="static" type="static"
label="Status" /> label="Status" />
<SMInput <SMInput
class="mb-8"
v-model="fileData.dimensions" v-model="fileData.dimensions"
type="static" type="static"
label="Dimensions" /> label="Dimensions" />
</div> </div>
<SMInput <SMInput
v-if="!editMultiple" v-if="!editMultiple"
class="mt-4" class="mb-8"
v-model="fileData.url" v-model="fileData.url"
type="static" type="static"
label="URL" /> label="URL" />
<SMInput type="textarea" control="description" /> <SMInput class="mb-8" textarea control="description" />
<input <input
role="button" role="button"
type="submit" type="submit"

4
resources/js/views/dashboard/ShortlinkEdit.vue
View File

@@ -16,9 +16,9 @@
<SMLoading v-if="form.loading()" /> <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-4 mt-12">
<SMForm :model-value="form" @submit="handleSubmit"> <SMForm :model-value="form" @submit="handleSubmit">
<SMInput class="mt-4" control="code" /> <SMInput class="mb-8" control="code" />
<SMInput <SMInput
class="mt-4" class="mb-8"
type="static" type="static"
v-model="used" v-model="used"
label="Times used" /> label="Times used" />

12
resources/js/views/dashboard/UserEdit.vue
View File

@@ -16,17 +16,17 @@
: 'Back to Dashboard' : 'Back to Dashboard'
" /> " />
<SMLoading v-if="form.loading()" /> <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"> <SMForm :model-value="form" @submit="handleSubmit">
<SMInput class="mt-4" control="display_name" autofocus /> <SMInput class="mb-8" control="display_name" autofocus />
<SMInput class="mt-4" control="email" type="email" /> <SMInput class="mb-8" control="email" type="email" />
<SMInput class="mt-4" control="first_name" <SMInput class="mb-8" control="first_name"
>This field is optional</SMInput >This field is optional</SMInput
> >
<SMInput class="mt-4" control="last_name" <SMInput class="mb-8" control="last_name"
>This field is optional</SMInput >This field is optional</SMInput
> >
<SMInput class="mt-4" control="phone" <SMInput class="mb-8" control="phone"
>This field is optional</SMInput >This field is optional</SMInput
> >
<template v-if="userStore.permissions.includes('admin/users')"> <template v-if="userStore.permissions.includes('admin/users')">