dark mode update

This commit is contained in:
carodej
2020-07-09 10:56:17 +02:00
parent a43f0e6908
commit 5a9f5813c8
89 changed files with 1633 additions and 912 deletions

View File

@@ -11,38 +11,42 @@
<PageTitle
class="headline"
title="Contact Us"
description="Dominion, open bearing brought may dominion male beginning."
description="Do you have any questions? Get in touch with us."
></PageTitle>
<!--Content-->
<div class="page-content">
<ValidationObserver @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form"
class="form block-form">
<ValidationObserver v-if="! isSuccess" @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form"
class="form block-form">
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="contact.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="contact.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Message:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required"
v-slot="{ errors }">
<textarea v-model="contact.message" placeholder="Type your message here..." rows="4" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>Message:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required"
v-slot="{ errors }">
<textarea v-model="contact.message" placeholder="Type your message here..." rows="4" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div>
<AuthButton class="submit-button" icon="chevron-right" text="Send Message" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
</div>
<InfoBox v-if="isError">
<p>Something went wrong, please try it again.</p>
</InfoBox>
<div>
<AuthButton class="submit-button" icon="chevron-right" text="Send Message" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<InfoBox v-if="isSuccess">
<p>Your message was send successfully.</p>
</InfoBox>
</div>
<!--Footer-->
@@ -52,12 +56,12 @@
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import AuthButton from '@/components/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import PageTitle from '@/components/Index/Components/PageTitle'
import PageFooter from '@/components/Index/IndexPageFooter'
import Navigation from '@/components/Index/IndexNavigation'
import InfoBox from '@/components/Others/Forms/InfoBox'
import AuthButton from '@/components/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import axios from 'axios'
@@ -71,6 +75,7 @@
Navigation,
PageTitle,
required,
InfoBox,
},
computed: {
...mapGetters(['config']),
@@ -78,6 +83,8 @@
data() {
return {
isLoading: false,
isSuccess: false,
isError: false,
contact: {
email: '',
message: '',
@@ -97,59 +104,20 @@
// Send request to get user token
axios
.post('/api/user/register', this.register)
.post('/api/contact', this.contact)
.then(() => {
// End loading
this.isLoading = false
// Set login state
this.$store.commit('SET_AUTHORIZED', true)
// Go to files page
this.$router.push({name: 'Files'})
this.isSuccess = true
})
.catch(error => {
if (error.response.status == 401) {
if (error.response.data.error === 'invalid_client') {
events.$emit('alert:open', {
emoji: '🤔',
title: this.$t('popup_passport_error.title'),
message: this.$t('popup_passport_error.message')
})
}
}
if (error.response.status == 500) {
events.$emit('alert:open', {
emoji: '🤔',
title: this.$t('popup_signup_error.title'),
message: this.$t('popup_signup_error.message')
})
}
if (error.response.status == 422) {
if (error.response.data.errors['email']) {
this.$refs.sign_up.setErrors({
'E-Mail': error.response.data.errors['email']
});
}
if (error.response.data.errors['password']) {
this.$refs.sign_up.setErrors({
'Your New Password': error.response.data.errors['password']
});
}
}
// End loading
this.isLoading = false
this.isError = true
})
}
},
@@ -165,21 +133,15 @@
@import '@assets/vue-file-manager/_mixins';
@import '@assets/vue-file-manager/_forms';
.form {
max-width: 100%;
}
.headline {
padding-top: 70px;
padding-bottom: 50px;
}
.page-content {
p {
@include font-size(20);
font-weight: 500;
line-height: 1.65;
padding-bottom: 30px;
}
}
.form.block-form {
.submit-button {
@@ -193,7 +155,10 @@
}
@media only screen and (max-width: 690px) {
@media only screen and (max-width: 960px) {
.headline {
padding-top: 50px;
padding-bottom: 30px;
}
}
</style>

View File

@@ -10,21 +10,11 @@
<!--Headline-->
<PageTitle
class="headline"
title="Terms & Conditions"
:title="page.data.attributes.title"
></PageTitle>
<!--Content-->
<div class="page-content">
<p>Dominion, open bearing brought may dominion male beginning god land greater forth there fruit whose creepeth two their great there morning multiply Third image
first. Waters waters. Which, moving place let said their saw, behold good appear of days very dominion called shall creeping creepeth subdue living, over set
subdue above under form make appear blessed, given shall midst likeness midst days him fruit seasons void hath light it him and days gathering give itself his
heaven fruitful fourth darkness bearing. Bring third a our gathered fruitful man sixth place.</p>
<p>Have give land may man together unto appear bring it is creature. Gathering abundantly. Beast night. Blessed be Lights, second brought. Yielding without set the
open give one seed of fowl said living years said female. Second hath subdue, give dry which very there night is. Whales very seed heaven set image.</p>
<p>Was moved, air seas Without. Winged years third. Dry under upon very Light tree. Given be meat seed fish. Over earth was beast fruitful. Abundantly great female
sixth. Which divide our days fly heaven seasons. Lights form created darkness third morning, and won't whales. Living fowl bearing saying dominion first female.
That to lesser our doesn't morning place.</p>
</div>
<div class="page-content" v-html="page.data.attributes.content_formatted"></div>
</div>
<!--Footer-->
@@ -40,7 +30,7 @@
import axios from 'axios'
export default {
name: 'SaaSLandingPage',
name: 'DynamicPage',
components: {
PageFooter,
Navigation,
@@ -52,10 +42,26 @@
data() {
return {
isLoading: false,
page: undefined,
}
},
watch: {
$route(to, from) {
this.getPage()
}
},
methods: {
getPage() {
axios.get('/api/page/' + this.$route.params.slug)
.then(response => {
this.page = response.data
this.$scrollTop()
})
}
},
created() {
this.$scrollTop()
this.getPage()
}
}
</script>
@@ -72,7 +78,7 @@
.page-content {
p {
/deep/ p {
@include font-size(20);
font-weight: 500;
line-height: 1.65;
@@ -84,7 +90,10 @@
}
@media only screen and (max-width: 690px) {
@media only screen and (max-width: 960px) {
.headline {
padding-top: 50px;
padding-bottom: 30px;
}
}
</style>

View File

@@ -47,12 +47,19 @@
},
computed: {
...mapGetters(['config']),
},
data() {
return {
isLoading: false,
}
},
beforeMount() {
if (! this.config.isSaaS) {
this.$router.push({name: 'SignIn'})
}
},
created() {
this.$scrollTop()
}
}
</script>
@@ -61,12 +68,4 @@
@import '@assets/vue-file-manager/_landing-page';
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@media (prefers-color-scheme: dark) {
}
@media only screen and (max-width: 690px) {
}
</style>