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

update SMFormFooter to SMButtonRow

Browse Source
This commit is contained in:
James Collins
2023-04-24 15:21:05 +10:00
parent b92456c178
commit 95318d1b36
10 changed files with 30 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
resources/js/components/SMFormFooter.vue
View File

@@ -1,78 +0,0 @@
<template>
<div class="sm-form-footer">
<div class="sm-form-footer-column sm-form-footer-column-left">
<slot name="left"></slot>
</div>
<div class="sm-form-footer-column sm-form-footer-column-right">
<slot name="right"></slot>
</div>
</div>
</template>
<style lang="scss">
.sm-form-footer {
display: flex;
flex: 1;
.sm-form-footer-column {
display: flex;
align-items: center;
&.sm-form-footer-column-left,
&.sm-form-footer-column-right {
a,
button {
margin-left: map-get($spacer, 1);
margin-right: map-get($spacer, 1);
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
}
}
&.sm-form-footer-column-right {
flex: 1;
justify-content: flex-end;
}
}
}
@media screen and (max-width: 768px) {
.sm-form-footer {
flex-direction: column-reverse;
.sm-form-footer-column {
&.sm-form-footer-column-left,
&.sm-form-footer-column-right {
display: flex;
flex-direction: column-reverse;
justify-content: center;
& > * {
display: block;
width: 100%;
text-align: center;
margin-top: map-get($spacer, 1);
margin-bottom: map-get($spacer, 1);
margin-left: 0 !important;
margin-right: 0 !important;
}
}
&.sm-form-footer-column-left {
margin-bottom: -#{calc(map-get($spacer, 1) / 2)};
}
&.sm-form-footer-column-right {
margin-top: -#{calc(map-get($spacer, 1) / 2)};
}
}
}
}
</style>

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

@@ -32,7 +32,6 @@ import { useUserStore } from "../../store/UserStore";
import SMButton from "../SMButton.vue"; import SMButton from "../SMButton.vue";
import SMFormCard from "../SMFormCard.vue"; import SMFormCard from "../SMFormCard.vue";
import SMForm from "../SMForm.vue"; import SMForm from "../SMForm.vue";
import SMFormFooter from "../SMFormFooter.vue";
import SMInput from "../SMInput.vue"; import SMInput from "../SMInput.vue";
const form: FormObject = reactive( const form: FormObject = reactive(

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

@@ -2,7 +2,7 @@
<SMFormCard> <SMFormCard>
<h3>{{ props.title }}</h3> <h3>{{ props.title }}</h3>
<p v-html="computedSanitizedText"></p> <p v-html="computedSanitizedText"></p>
<SMFormFooter> <SMButtonRow>
<template #left> <template #left>
<SMButton <SMButton
:type="props.cancel.type" :type="props.cancel.type"
@@ -15,7 +15,7 @@
:label="props.confirm.label" :label="props.confirm.label"
@click="handleClickConfirm()" /> @click="handleClickConfirm()" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMFormCard> </SMFormCard>
</template> </template>
@@ -26,7 +26,7 @@ import { closeDialog } from "../SMDialog";
import { useApplicationStore } from "../../store/ApplicationStore"; import { useApplicationStore } from "../../store/ApplicationStore";
import SMButton from "../SMButton.vue"; import SMButton from "../SMButton.vue";
import SMFormCard from "../SMFormCard.vue"; import SMFormCard from "../SMFormCard.vue";
import SMFormFooter from "../SMFormFooter.vue"; import SMButtonRow from "../SMButtonRow.vue";
const props = defineProps({ const props = defineProps({
title: { title: {

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

@@ -13,14 +13,14 @@
</p> </p>
<SMForm v-model="form" @submit="handleSubmit"> <SMForm v-model="form" @submit="handleSubmit">
<SMInput control="code" /> <SMInput control="code" />
<SMFormFooter> <SMButtonRow>
<template #right> <template #right>
<SMButton <SMButton
type="submit" type="submit"
label="Verify Code" label="Verify Code"
icon="arrow-forward-outline" /> icon="arrow-forward-outline" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMForm> </SMForm>
</template> </template>
<template v-else> <template v-else>
@@ -28,11 +28,11 @@
<p class="text-center"> <p class="text-center">
Hurrah, Your email has been verified! Hurrah, Your email has been verified!
</p> </p>
<SMFormFooter> <SMButtonRow>
<template #right> <template #right>
<SMButton :to="{ name: 'login' }" label="Login" /> <SMButton :to="{ name: 'login' }" label="Login" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</template> </template>
</SMFormCard> </SMFormCard>
</SMRow> </SMRow>
@@ -46,7 +46,7 @@ import { useRoute } from "vue-router";
import SMButton from "../components/SMButton.vue"; import SMButton from "../components/SMButton.vue";
import SMFormCard from "../components/SMFormCard.vue"; import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue"; import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue"; import SMButtonRow from "../components/SMButtonRow.vue";
import SMInput from "../components/SMInput.vue"; import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api"; import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form"; import { Form, FormControl } from "../helpers/form";

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

@@ -10,7 +10,7 @@
</p> </p>
<SMForm v-model="form" @submit="handleSubmit"> <SMForm v-model="form" @submit="handleSubmit">
<SMInput control="username" /> <SMInput control="username" />
<SMFormFooter> <SMButtonRow>
<template #left> <template #left>
<div class="small"> <div class="small">
<span class="pr-1">Remember?</span <span class="pr-1">Remember?</span
@@ -25,7 +25,7 @@
label="Send" label="Send"
icon="arrow-forward-outline" /> icon="arrow-forward-outline" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMForm> </SMForm>
</template> </template>
<template v-else> <template v-else>
@@ -52,7 +52,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue"; import SMButton from "../components/SMButton.vue";
import SMFormCard from "../components/SMFormCard.vue"; import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue"; import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue"; import SMButtonRow from "../components/SMButtonRow.vue";
import SMInput from "../components/SMInput.vue"; import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api"; import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form"; import { Form, FormControl } from "../helpers/form";

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

@@ -10,7 +10,7 @@
</p> </p>
<SMForm v-model="form" @submit="handleSubmit"> <SMForm v-model="form" @submit="handleSubmit">
<SMInput control="email" /> <SMInput control="email" />
<SMFormFooter> <SMButtonRow>
<template #left> <template #left>
<div class="small"> <div class="small">
<span class="pr-1">Remember?</span <span class="pr-1">Remember?</span
@@ -25,7 +25,7 @@
label="Send" label="Send"
icon="arrow-forward-outline" /> icon="arrow-forward-outline" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMForm> </SMForm>
</template> </template>
<template v-else> <template v-else>
@@ -51,7 +51,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue"; import SMButton from "../components/SMButton.vue";
import SMFormCard from "../components/SMFormCard.vue"; import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue"; import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue"; import SMButtonRow from "../components/SMButtonRow.vue";
import SMInput from "../components/SMInput.vue"; import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api"; import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form"; import { Form, FormControl } from "../helpers/form";

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

@@ -6,7 +6,7 @@
<h1>Resend Verify Email</h1> <h1>Resend Verify Email</h1>
<SMForm v-model="form" @submit="handleSubmit"> <SMForm v-model="form" @submit="handleSubmit">
<SMInput control="username" /> <SMInput control="username" />
<SMFormFooter> <SMButtonRow>
<template #left> <template #left>
<div class="small"> <div class="small">
<span class="pr-1">Stuck?</span <span class="pr-1">Stuck?</span
@@ -21,7 +21,7 @@
label="Send" label="Send"
icon="arrow-forward-outline" /> icon="arrow-forward-outline" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMForm> </SMForm>
</template> </template>
<template v-else> <template v-else>
@@ -31,11 +31,11 @@
to verify your email, you will receive an email with a to verify your email, you will receive an email with a
new verify code. new verify code.
</p> </p>
<SMFormFooter> <SMButtonRow>
<template #right> <template #right>
<SMButton :to="{ name: 'home' }" label="Home" /> <SMButton :to="{ name: 'home' }" label="Home" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</template> </template>
</SMFormCard> </SMFormCard>
</SMRow> </SMRow>
@@ -48,7 +48,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
import SMButton from "../components/SMButton.vue"; import SMButton from "../components/SMButton.vue";
import SMFormCard from "../components/SMFormCard.vue"; import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue"; import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue"; import SMButtonRow from "../components/SMButtonRow.vue";
import SMInput from "../components/SMInput.vue"; import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api"; import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form"; import { Form, FormControl } from "../helpers/form";

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

@@ -7,7 +7,7 @@
<SMForm v-model="form" @submit="handleSubmit"> <SMForm v-model="form" @submit="handleSubmit">
<SMInput control="code" /> <SMInput control="code" />
<SMInput control="password" type="password" /> <SMInput control="password" type="password" />
<SMFormFooter> <SMButtonRow>
<template #left> <template #left>
<div class="small"> <div class="small">
<router-link <router-link
@@ -22,7 +22,7 @@
label="Reset Password" label="Reset Password"
icon="arrow-forward-outline" /> icon="arrow-forward-outline" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMForm> </SMForm>
</template> </template>
<template v-else> <template v-else>
@@ -30,11 +30,11 @@
<p class="text-center"> <p class="text-center">
Hurrah, Your password has been changed! Hurrah, Your password has been changed!
</p> </p>
<SMFormFooter> <SMButtonRow>
<template #right> <template #right>
<SMButton :to="{ name: 'login' }" label="Login" /> <SMButton :to="{ name: 'login' }" label="Login" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</template> </template>
</SMFormCard> </SMFormCard>
</SMRow> </SMRow>
@@ -48,7 +48,7 @@ import { useRoute } from "vue-router";
import SMButton from "../components/SMButton.vue"; import SMButton from "../components/SMButton.vue";
import SMFormCard from "../components/SMFormCard.vue"; import SMFormCard from "../components/SMFormCard.vue";
import SMForm from "../components/SMForm.vue"; import SMForm from "../components/SMForm.vue";
import SMFormFooter from "../components/SMFormFooter.vue"; import SMButtonRow from "../components/SMButtonRow.vue";
import SMInput from "../components/SMInput.vue"; import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api"; import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form"; import { Form, FormControl } from "../helpers/form";

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

@@ -117,11 +117,11 @@
</SMColumn> </SMColumn>
</SMRow> </SMRow>
<SMRow> <SMRow>
<SMFormFooter> <SMButtonRow>
<template #right> <template #right>
<SMButton type="submit" label="Save" /> <SMButton type="submit" label="Save" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMRow> </SMRow>
</SMForm> </SMForm>
</SMContainer> </SMContainer>
@@ -133,7 +133,7 @@ import { computed, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import SMButton from "../../components/SMButton.vue"; import SMButton from "../../components/SMButton.vue";
import SMEditor from "../../components/SMEditor.vue"; import SMEditor from "../../components/SMEditor.vue";
import SMFormFooter from "../../components/SMFormFooter.vue"; import SMButtonRow from "../../components/SMButtonRow.vue";
import SMInput from "../../components/SMInput.vue"; import SMInput from "../../components/SMInput.vue";
import { api } from "../../helpers/api"; import { api } from "../../helpers/api";
import { SMDate } from "../../helpers/datetime"; import { SMDate } from "../../helpers/datetime";

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

@@ -53,11 +53,11 @@
</SMColumn> </SMColumn>
</SMRow> </SMRow>
<SMRow> <SMRow>
<SMFormFooter> <SMButtonRow>
<template #right> <template #right>
<SMButton type="submit" label="Save" /> <SMButton type="submit" label="Save" />
</template> </template>
</SMFormFooter> </SMButtonRow>
</SMRow> </SMRow>
</SMForm> </SMForm>
</template> </template>
@@ -70,7 +70,7 @@ import { useRoute, useRouter } from "vue-router";
import SMButton from "../../components/SMButton.vue"; import SMButton from "../../components/SMButton.vue";
import SMEditor from "../../components/SMEditor.vue"; import SMEditor from "../../components/SMEditor.vue";
import SMForm from "../../components/SMForm.vue"; import SMForm from "../../components/SMForm.vue";
import SMFormFooter from "../../components/SMFormFooter.vue"; import SMButtonRow from "../../components/SMButtonRow.vue";
import SMInput from "../../components/SMInput.vue"; import SMInput from "../../components/SMInput.vue";
import SMInputAttachments from "../../components/SMInputAttachments.vue"; import SMInputAttachments from "../../components/SMInputAttachments.vue";
import { api } from "../../helpers/api"; import { api } from "../../helpers/api";