Style update to contact page
This commit is contained in:
parent
76d8e59f40
commit
8f3649d141
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<div class="contact-container" style="flex-basis: 500px;">
|
||||
<div class="message-status"></div>
|
||||
<header class="head">Formularz kontaktowy:</header>
|
||||
<div class="contact_container">
|
||||
<div class="message"></div>
|
||||
<header class="container_head">Formularz kontaktowy:</header>
|
||||
<form id="form-point" @submit="formSubmit">
|
||||
<input v-model="emailValue" class="contact-input" type="text" name="email" placeholder="Twój adres e-mail." />
|
||||
<textarea v-model="messageValue" class="contact-input" name="message" placeholder="Twoja wiadomość."></textarea>
|
||||
<input v-model="senderValue" class="contact-input" type="text" name="sender" placeholder="Twój podpis." />
|
||||
<input :disabled="buttonDisabled" class="contact-input" type="submit" value="Wyślij"/>
|
||||
<input v-model="emailValue" class="contact_input" type="text" name="email" placeholder="Twój adres e-mail." />
|
||||
<textarea v-model="messageValue" class="contact_input" name="message" placeholder="Twoja wiadomość."></textarea>
|
||||
<input v-model="senderValue" class="contact_input" type="text" name="sender" placeholder="Twój podpis." />
|
||||
<base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseButton from '../../BaseButton'
|
||||
|
||||
function emailValidate (mailObj) {
|
||||
const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
|
||||
return !!mailObj.value.match(mailFormat)
|
||||
@ -43,41 +45,44 @@ export default {
|
||||
senderValue: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'base-btn': BaseButton
|
||||
},
|
||||
watch: {
|
||||
emailValue (value) {
|
||||
if (this.statusError > 0 && emailValidate(this.email)) {
|
||||
this.email.classList.remove('error')
|
||||
this.email.classList.remove('contact_input-error')
|
||||
}
|
||||
},
|
||||
messageValue (value) {
|
||||
if (this.statusError > 0 && value !== '') {
|
||||
this.message.classList.remove('error')
|
||||
this.message.classList.remove('contact_input-error')
|
||||
}
|
||||
},
|
||||
senderValue (value) {
|
||||
if (this.statusError > 0 && value !== '') {
|
||||
this.sender.classList.remove('error')
|
||||
this.sender.classList.remove('contact_input-error')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearErrors () {
|
||||
this.statusError = 0
|
||||
this.email.classList.remove('error')
|
||||
this.message.classList.remove('error')
|
||||
this.sender.classList.remove('error')
|
||||
this.email.classList.remove('contact_input-error')
|
||||
this.message.classList.remove('contact_input-error')
|
||||
this.sender.classList.remove('contact_input-error')
|
||||
},
|
||||
checkForm () {
|
||||
if (!emailValidate(this.email)) {
|
||||
this.email.classList.add('error')
|
||||
this.email.classList.add('contact_input-error')
|
||||
this.statusError++
|
||||
}
|
||||
if (this.message.value === '') {
|
||||
this.message.classList.add('error')
|
||||
this.message.classList.add('contact_input-error')
|
||||
this.statusError++
|
||||
}
|
||||
if (this.sender.value === '') {
|
||||
this.sender.classList.add('error')
|
||||
this.sender.classList.add('contact_input-error')
|
||||
this.statusError++
|
||||
}
|
||||
},
|
||||
@ -91,8 +96,8 @@ export default {
|
||||
this.clearErrors()
|
||||
this.checkForm()
|
||||
|
||||
const messageElement = document.querySelector('.message-status')
|
||||
messageElement.classList.remove('message-status__ok', 'message-status__error')
|
||||
const messageElement = document.querySelector('.message')
|
||||
messageElement.classList.remove('message_ok', 'message_error')
|
||||
|
||||
if (this.statusError === 0) {
|
||||
this.buttonDisabled = true
|
||||
@ -102,7 +107,7 @@ export default {
|
||||
sender: this.senderValue
|
||||
}).then(result => {
|
||||
messageElement.classList.add(
|
||||
result.error ? 'message-status__error' : 'message-status__ok'
|
||||
result.error ? 'message_error' : 'message_ok'
|
||||
)
|
||||
|
||||
messageElement.textContent = result.message
|
||||
@ -113,7 +118,7 @@ export default {
|
||||
}
|
||||
this.buttonDisabled = false
|
||||
}).catch(() => {
|
||||
messageElement.classList.add('message-status__error')
|
||||
messageElement.classList.add('message_error')
|
||||
messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
|
||||
this.buttonDisabled = false
|
||||
})
|
||||
@ -124,29 +129,33 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contact-container {
|
||||
margin: 10px;
|
||||
max-width: 500px;
|
||||
background-color: #eaeaea;
|
||||
border: 2px solid #dadada;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
|
||||
@import "scss/media";
|
||||
|
||||
header.head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.contact_container {
|
||||
flex-basis: 500px;
|
||||
|
||||
form#form-point {
|
||||
#form-point {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 97%;
|
||||
margin: 0 20px 5px;
|
||||
}
|
||||
}
|
||||
.contact-container input, .contact-container textarea {
|
||||
|
||||
.container_head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact_container input, .contact_container textarea {
|
||||
width: 97%;
|
||||
max-width: 97%;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #c9c9c9;
|
||||
padding: 10px 10px 8px;
|
||||
@ -156,64 +165,54 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
input.contact-input:focus, textarea.contact-input:focus {
|
||||
|
||||
.contact_input:focus, .contact_input:focus {
|
||||
outline: none;
|
||||
border-color: black;
|
||||
}
|
||||
textarea.contact-input {
|
||||
|
||||
textarea.contact_input {
|
||||
max-width: 97%;
|
||||
min-width: 97%;
|
||||
min-height: 150px;
|
||||
}
|
||||
input.error, textarea.error {
|
||||
|
||||
.contact_input-error, .contact_input-error {
|
||||
background-color: #ffc3b0;
|
||||
border-color: #ff865f;
|
||||
color: #c90000;
|
||||
}
|
||||
input.error::placeholder, textarea.error::placeholder {
|
||||
|
||||
.contact_input-error::placeholder, .contact_input-error::placeholder {
|
||||
color: #c9000094;
|
||||
}
|
||||
input[type="submit"].contact-input {
|
||||
appearance: unset;
|
||||
color: white;
|
||||
background-color: #4CAF50;
|
||||
border-bottom: 2px solid #387d3b;
|
||||
}
|
||||
input[type="submit"].contact-input:hover {
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.4);
|
||||
}
|
||||
input[disabled].contact-input {
|
||||
|
||||
input[disabled].contact_input {
|
||||
background-color: #cdcdcd;
|
||||
border-color: gray;
|
||||
color: black;
|
||||
}
|
||||
.message-status {
|
||||
|
||||
.message {
|
||||
display: none;
|
||||
margin: 5px;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.message-status__ok, .message-status__error {
|
||||
|
||||
.message_ok, .message_error {
|
||||
display: block;
|
||||
}
|
||||
.message-status__ok {
|
||||
|
||||
.message_ok {
|
||||
background-color: #4CAF50;
|
||||
border: 1px solid #387d3b;
|
||||
color: white;
|
||||
}
|
||||
.message-status__error {
|
||||
|
||||
.message_error {
|
||||
background-color: #ffc3b0;
|
||||
border: 1px solid #ff865f;
|
||||
color: #c90000;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.contact-elements {
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
#instagram, #facebook, #twitter, #email, #gg {
|
||||
font-size: 1em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,25 +1,43 @@
|
||||
<template>
|
||||
<div class="contact-container" style="flex-basis: 410px">
|
||||
<header class="head">Inne formy kontaktu:</header>
|
||||
<div class="contact-element">
|
||||
<img class="contact-element-icon" src="/assets/img/instagram.jpg" />
|
||||
<span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span>
|
||||
<div class="contact_info">
|
||||
<header class="info_head">Inne formy kontaktu:</header>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/instagram.jpg" />
|
||||
<span id="instagram" class="contact_element_text">
|
||||
<a href="https://www.instagram.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">Instagram: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact-element">
|
||||
<img class="contact-element-icon" src="/assets/img/facebook.jpg" />
|
||||
<span id="facebook"><a href="https://www.facebook.com/nikcamii/" target="_blank">Facebook: @NiKCamii</a></span>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon" src="/assets/img/facebook.jpg" />
|
||||
<span id="facebook" class="contact_element_text">
|
||||
<a href="https://www.facebook.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">Facebook: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact-element">
|
||||
<img class="contact-element-icon" src="/assets/img/twitter.jpg" />
|
||||
<span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/twitter.jpg" />
|
||||
<span id="twitter" class="contact_element_text">
|
||||
<a href="https://twitter.com/nikcamii"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer">Twitter: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact-element">
|
||||
<img class="contact-element-icon" src="/assets/img/gg.png" />
|
||||
<span id="gg">GG: 38429969</span>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/gg.png" />
|
||||
<span id="gg" class="contact_element_text">GG: 38429969</span>
|
||||
</div>
|
||||
<div class="contact-element">
|
||||
<img class="contact-element-icon" src="/assets/img/user.jpg" />
|
||||
<span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span>
|
||||
<div class="contact_element">
|
||||
<img class="contact_element_icon"
|
||||
src="/assets/img/user.jpg" />
|
||||
<span id="email" class="contact_element_text">
|
||||
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -31,28 +49,20 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contact-container {
|
||||
margin: 10px;
|
||||
max-width: 500px;
|
||||
background-color: #eaeaea;
|
||||
border: 2px solid #dadada;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
|
||||
@import "scss/media";
|
||||
|
||||
header.head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form#form-point {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.contact_info {
|
||||
flex-basis: 410px;
|
||||
}
|
||||
.contact-element {
|
||||
|
||||
.info_head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact_element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
@ -71,22 +81,22 @@ export default {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-element-icon {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e2e2e2;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
object-fit: contain;
|
||||
}
|
||||
&_icon {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e2e2e2;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#instagram, #facebook, #twitter, #email, #gg {
|
||||
padding-top: 2px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
&_text{
|
||||
padding-top: 2px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#instagram {
|
||||
@ -110,4 +120,11 @@ export default {
|
||||
#gg {
|
||||
color: #ffa214;
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
#instagram, #facebook, #twitter, #email, #gg {
|
||||
font-size: 1em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,36 +28,47 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contact {
|
||||
padding: 25px 0;
|
||||
@import "scss/media";
|
||||
|
||||
.contact {
|
||||
padding: 25px 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact_container, .contact_info {
|
||||
margin: 10px;
|
||||
max-width: 500px;
|
||||
background-color: #eaeaea;
|
||||
border: 2px solid #dadada;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
.container {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
.contact-container {
|
||||
margin: 0 auto 25px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
|
||||
.contact-container {
|
||||
max-width: unset;
|
||||
.contact_container, .contact_info {
|
||||
margin: 0 auto 25px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-mobile {
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
|
||||
.contact_container {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user