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

Change SMDialog to SMFormCard

Browse Source
This commit is contained in:
James Collins
2023-03-23 18:14:30 +10:00
parent ab4ef89c87
commit 59a7f02893
15 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/components/SMDialog.vue → resources/js/components/SMFormCard.vue
View File

@@ -1,14 +1,14 @@
<template>
<div
:class="[
'sm-dialog',
{ 'sm-dialog-narrow': narrow },
{ 'sm-dialog-full': full },
{ 'sm-dialog-noshadow': noShadow },
'sm-form-card',
{ 'sm-form-card-narrow': narrow },
{ 'sm-form-card-full': full },
{ 'sm-form-card-noshadow': noShadow },
]">
<transition name="fade">
<div v-if="loading" class="sm-dialog-loading-cover">
<div class="sm-dialog-loading">
<div v-if="loading" class="sm-form-card-loading-cover">
<div class="sm-form-card-loading">
<SMLoadingIcon />
<span>{{ loadingMessage }}</span>
</div>
@@ -46,7 +46,7 @@ defineProps({
</script>
<style lang="scss">
.sm-dialog {
.sm-form-card {
flex-direction: column;
margin: 0 auto;
background-color: #eee;
@@ -58,7 +58,7 @@ defineProps({
min-width: map-get($spacer, 5) * 12;
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
&.sm-dialog-noshadow {
&.sm-form-card-noshadow {
box-shadow: none !important;
}
@@ -70,16 +70,16 @@ defineProps({
font-size: 90%;
}
&.sm-dialog-narrow {
&.sm-form-card-narrow {
min-width: auto;
max-width: map-get($spacer, 5) * 10;
}
&.sm-dialog-full {
&.sm-form-card-full {
width: 100%;
}
.sm-dialog-loading-cover {
.sm-form-card-loading-cover {
position: fixed;
display: flex;
justify-content: center;
@@ -93,7 +93,7 @@ defineProps({
background-color: rgba(255, 255, 255, 0.5);
z-index: 19000;
.sm-dialog-loading {
.sm-form-card-loading {
display: flex;
flex-direction: column;
padding: map-get($spacer, 5) calc(map-get($spacer, 5) * 2);
@@ -115,15 +115,15 @@ defineProps({
}
@media only screen and (max-width: 640px) {
.sm-container .sm-dialog {
.sm-container .sm-form-card {
margin: 0 -1rem;
&.sm-dialog-full {
&.sm-form-card-full {
width: auto;
}
}
.sm-dialog {
.sm-form-card {
padding: map-get($spacer, 5) map-get($spacer, 4) map-get($spacer, 4)
map-get($spacer, 4);
min-width: auto;

6
resources/js/components/dialogs/SMDialogChangePassword.vue
View File

@@ -1,6 +1,6 @@
<template>
<SMModal>
<SMDialog :loading="dialogLoading">
<SMFormCard :loading="dialogLoading">
<h1>Change Password</h1>
<p class="text-center">Enter your new password below</p>
<SMForm :model-value="form" @submit="handleSubmit">
@@ -20,7 +20,7 @@
</template>
</SMFormFooter>
</SMForm>
</SMDialog>
</SMFormCard>
</SMModal>
</template>
@@ -34,7 +34,7 @@ import { useApplicationStore } from "../../store/ApplicationStore";
import { useToastStore } from "../../store/ToastStore";
import { useUserStore } from "../../store/UserStore";
import SMButton from "../SMButton.vue";
import SMDialog from "../SMDialog.vue";
import SMFormCard from "../SMFormCard.vue";
import SMForm from "../SMForm.vue";
import SMFormFooter from "../SMFormFooter.vue";
import SMInput from "../SMInput.vue";

6
resources/js/components/dialogs/SMDialogConfirm.vue
View File

@@ -1,6 +1,6 @@
<template>
<SMModal>
<SMDialog>
<SMFormCard>
<h1>{{ props.title }}</h1>
<p v-html="computedSanitizedText"></p>
<SMFormFooter>
@@ -17,7 +17,7 @@
@click="handleClickConfirm()" />
</template>
</SMFormFooter>
</SMDialog>
</SMFormCard>
</SMModal>
</template>
@@ -27,7 +27,7 @@ import { computed, onMounted, onUnmounted } from "vue";
import { closeDialog } from "vue3-promise-dialog";
import { useApplicationStore } from "../../store/ApplicationStore";
import SMButton from "../SMButton.vue";
import SMDialog from "../SMDialog.vue";
import SMFormCard from "../SMFormCard.vue";
import SMFormFooter from "../SMFormFooter.vue";
import SMModal from "../SMModal.vue";

6
resources/js/components/dialogs/SMDialogMedia.vue
View File

@@ -1,6 +1,6 @@
<template>
<SMModal>
<SMDialog
<SMFormCard
:loading="dialogLoading"
full
:loading-message="dialogLoadingMessage"
@@ -96,7 +96,7 @@
style="display: none"
:accept="computedAccepts"
@change="handleChangeUpload" />
</SMDialog>
</SMFormCard>
</SMModal>
</template>
@@ -109,7 +109,7 @@ import { bytesReadable } from "../../helpers/types";
import { getFilePreview } from "../../helpers/utils";
import { useApplicationStore } from "../../store/ApplicationStore";
import SMButton from "../SMButton.vue";
import SMDialog from "../SMDialog.vue";
import SMFormCard from "../SMFormCard.vue";
import SMFormFooter from "../SMFormFooter.vue";
import SMLoadingIcon from "../SMLoadingIcon.vue";
import SMMessage from "../SMMessage.vue";

6
resources/js/views/Contact.vue
View File

@@ -85,7 +85,7 @@
</SMColumn>
<SMColumn>
<div>
<SMDialog narrow>
<SMFormCard narrow>
<template v-if="!formSubmitted">
<SMForm v-model="form" @submit="handleSubmit">
<SMInput control="name" />
@@ -111,7 +111,7 @@
:to="{ name: 'home' }"
label="Home" />
</template>
</SMDialog>
</SMFormCard>
</div>
</SMColumn>
</SMRow>
@@ -123,7 +123,7 @@
import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api";

6
resources/js/views/EmailVerify.vue
View File

@@ -1,7 +1,7 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<SMRow>
<SMDialog class="mt-5" narrow>
<SMFormCard class="mt-5" narrow>
<template v-if="!formDone">
<h1>Email Verify</h1>
<p>
@@ -34,7 +34,7 @@
</template>
</SMFormFooter>
</template>
</SMDialog>
</SMFormCard>
</SMRow>
</SMPage>
</template>
@@ -44,7 +44,7 @@ import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import { useRoute } from "vue-router";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/ForgotPassword.vue
View File

@@ -1,7 +1,7 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<SMRow>
<SMDialog class="mt-5">
<SMFormCard class="mt-5">
<template v-if="!formDone">
<h1>Forgot Password</h1>
<p>
@@ -41,7 +41,7 @@
</SMColumn>
</SMRow>
</template>
</SMDialog>
</SMFormCard>
</SMRow>
</SMPage>
</template>
@@ -50,7 +50,7 @@
import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/ForgotUsername.vue
View File

@@ -1,7 +1,7 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<SMRow>
<SMDialog class="mt-5">
<SMFormCard class="mt-5">
<template v-if="!formDone">
<h1>Forgot Username</h1>
<p>
@@ -40,7 +40,7 @@
</SMColumn>
</SMRow>
</template>
</SMDialog>
</SMFormCard>
</SMRow>
</SMPage>
</template>
@@ -49,7 +49,7 @@
import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/Home.vue
View File

@@ -110,14 +110,14 @@
Sign up for our mailing list to receive expert tips and tricks,
as well as updates on upcoming workshops.
</p>
<SMDialog class="p-0" no-shadow>
<SMFormCard class="p-0" no-shadow>
<SMForm v-model="form" @submit="handleSubscribe">
<div class="form-row">
<SMInput control="email" />
<SMButton type="submit" label="Subscribe" />
</div>
</SMForm>
</SMDialog>
</SMFormCard>
</SMContainer>
</SMPage>
</template>
@@ -128,7 +128,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue";
import SMCarousel from "../components/SMCarousel.vue";
import SMCarouselSlide from "../components/SMCarouselSlide.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/Login.vue
View File

@@ -1,6 +1,6 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<SMDialog class="mt-5">
<SMFormCard class="mt-5">
<h1>Log in</h1>
<SMForm v-model="form" @submit="handleSubmit">
<SMInput control="username">
@@ -28,7 +28,7 @@
</template>
</SMFormFooter>
</SMForm>
</SMDialog>
</SMFormCard>
</SMPage>
</template>
@@ -36,7 +36,7 @@
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/Register.vue
View File

@@ -1,7 +1,7 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<template #container>
<SMDialog full class="mt-5" :narrow="formDone">
<SMFormCard full class="mt-5" :narrow="formDone">
<template v-if="!formDone">
<h1>Register</h1>
<SMForm v-model="form" @submit="handleSubmit">
@@ -64,7 +64,7 @@
</template>
</SMFormFooter>
</template>
</SMDialog>
</SMFormCard>
</template>
</SMPage>
</template>
@@ -73,7 +73,7 @@
import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/ResendEmailVerify.vue
View File

@@ -1,7 +1,7 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<SMRow>
<SMDialog class="mt-5" narrow>
<SMFormCard class="mt-5" narrow>
<template v-if="!formDone">
<h1>Resend Verify Email</h1>
<SMForm v-model="form" @submit="handleSubmit">
@@ -37,7 +37,7 @@
</template>
</SMFormFooter>
</template>
</SMDialog>
</SMFormCard>
</SMRow>
</SMPage>
</template>
@@ -46,7 +46,7 @@
import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/ResetPassword.vue
View File

@@ -1,7 +1,7 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<SMRow>
<SMDialog narrow>
<SMFormCard narrow>
<template v-if="!formDone">
<h1>Reset Password</h1>
<SMForm v-model="form" @submit="handleSubmit">
@@ -36,7 +36,7 @@
</template>
</SMFormFooter>
</template>
</SMDialog>
</SMFormCard>
</SMRow>
</SMPage>
</template>
@@ -46,7 +46,7 @@ import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import { useRoute } from "vue-router";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

6
resources/js/views/Unsubscribe.vue
View File

@@ -1,7 +1,7 @@
<template>
<SMPage no-breadcrumbs background="/img/background.jpg">
<SMRow>
<SMDialog narrow>
<SMFormCard narrow>
<template v-if="!formDone">
<h1>Unsubscribe</h1>
<p>
@@ -28,7 +28,7 @@
</SMColumn>
</SMRow>
</template>
</SMDialog>
</SMFormCard>
</SMRow>
</SMPage>
</template>
@@ -38,7 +38,7 @@ import { reactive, ref } from "vue";
import { useReCaptcha } from "vue-recaptcha-v3";
import { useRoute } from "vue-router";
import SMButton from "../components/SMButton.vue";
import SMDialog from "../components/SMDialog.vue";
import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue";
import SMInput from "../components/SMInput.vue";

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

@@ -1,7 +1,7 @@
<template>
<SMPage :page-error="pageError" permission="admin/media">
<SMRow>
<SMDialog>
<SMFormCard>
<h1>{{ page_title }}</h1>
<SMForm
:model-value="form"
@@ -56,7 +56,7 @@
</SMColumn>
</SMRow>
</SMForm>
</SMDialog>
</SMFormCard>
</SMRow>
</SMPage>
</template>
@@ -65,7 +65,7 @@
import { computed, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import SMButton from "../../components/SMButton.vue";
import SMDialog from "../../components/SMDialog.vue";
import SMFormCard from "../../components/SMFormCard.vue";
import SMForm from "../../components/SMForm.vue";
import SMInput from "../../components/SMInput.vue";