kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Style update to contact page

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-01-06 00:53:37 +01:00
parent 76d8e59f40
commit 8f3649d141
3 changed files with 166 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/sections/contacts/MailContact.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<div class="contact-container" style="flex-basis: 500px;"> <div class="contact_container">
<div class="message-status"></div> <div class="message"></div>
<header class="head">Formularz kontaktowy:</header> <header class="container_head">Formularz kontaktowy:</header>
<form id="form-point" @submit="formSubmit"> <form id="form-point" @submit="formSubmit">
<input v-model="emailValue" class="contact-input" type="text" name="email" placeholder="Twój adres e-mail." /> <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> <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 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"/> <base-btn is-reverse :disabled="buttonDisabled">Wyślij</base-btn>
</form> </form>
</div> </div>
</template> </template>
<script> <script>
import BaseButton from '../../BaseButton'
function emailValidate (mailObj) { function emailValidate (mailObj) {
const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/ const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
return !!mailObj.value.match(mailFormat) return !!mailObj.value.match(mailFormat)
@ -43,41 +45,44 @@ export default {
senderValue: '' senderValue: ''
} }
}, },
components: {
'base-btn': BaseButton
},
watch: { watch: {
emailValue (value) { emailValue (value) {
if (this.statusError > 0 && emailValidate(this.email)) { if (this.statusError > 0 && emailValidate(this.email)) {
this.email.classList.remove('error') this.email.classList.remove('contact_input-error')
} }
}, },
messageValue (value) { messageValue (value) {
if (this.statusError > 0 && value !== '') { if (this.statusError > 0 && value !== '') {
this.message.classList.remove('error') this.message.classList.remove('contact_input-error')
} }
}, },
senderValue (value) { senderValue (value) {
if (this.statusError > 0 && value !== '') { if (this.statusError > 0 && value !== '') {
this.sender.classList.remove('error') this.sender.classList.remove('contact_input-error')
} }
} }
}, },
methods: { methods: {
clearErrors () { clearErrors () {
this.statusError = 0 this.statusError = 0
this.email.classList.remove('error') this.email.classList.remove('contact_input-error')
this.message.classList.remove('error') this.message.classList.remove('contact_input-error')
this.sender.classList.remove('error') this.sender.classList.remove('contact_input-error')
}, },
checkForm () { checkForm () {
if (!emailValidate(this.email)) { if (!emailValidate(this.email)) {
this.email.classList.add('error') this.email.classList.add('contact_input-error')
this.statusError++ this.statusError++
} }
if (this.message.value === '') { if (this.message.value === '') {
this.message.classList.add('error') this.message.classList.add('contact_input-error')
this.statusError++ this.statusError++
} }
if (this.sender.value === '') { if (this.sender.value === '') {
this.sender.classList.add('error') this.sender.classList.add('contact_input-error')
this.statusError++ this.statusError++
} }
}, },
@ -91,8 +96,8 @@ export default {
this.clearErrors() this.clearErrors()
this.checkForm() this.checkForm()
const messageElement = document.querySelector('.message-status') const messageElement = document.querySelector('.message')
messageElement.classList.remove('message-status__ok', 'message-status__error') messageElement.classList.remove('message_ok', 'message_error')
if (this.statusError === 0) { if (this.statusError === 0) {
this.buttonDisabled = true this.buttonDisabled = true
@ -102,7 +107,7 @@ export default {
sender: this.senderValue sender: this.senderValue
}).then(result => { }).then(result => {
messageElement.classList.add( messageElement.classList.add(
result.error ? 'message-status__error' : 'message-status__ok' result.error ? 'message_error' : 'message_ok'
) )
messageElement.textContent = result.message messageElement.textContent = result.message
@ -113,7 +118,7 @@ export default {
} }
this.buttonDisabled = false this.buttonDisabled = false
}).catch(() => { }).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.' messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
this.buttonDisabled = false this.buttonDisabled = false
}) })
@ -124,29 +129,33 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.contact-container { @import "scss/media";
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);
header.head { .contact_container {
padding: 10px; flex-basis: 500px;
line-height: 1.6em;
font-size: 1.3em;
font-weight: bold;
}
form#form-point { #form-point {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
}
.contact-container input, .contact-container textarea { .btn {
width: 97%; width: 97%;
margin: 0 20px 5px;
}
}
.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: 0;
border-bottom: 2px solid #c9c9c9; border-bottom: 2px solid #c9c9c9;
padding: 10px 10px 8px; padding: 10px 10px 8px;
@ -156,64 +165,54 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 5px; border-radius: 5px;
} }
input.contact-input:focus, textarea.contact-input:focus {
.contact_input:focus, .contact_input:focus {
outline: none; outline: none;
border-color: black; border-color: black;
} }
textarea.contact-input {
textarea.contact_input {
max-width: 97%; max-width: 97%;
min-width: 97%; min-width: 97%;
min-height: 150px; min-height: 150px;
} }
input.error, textarea.error {
.contact_input-error, .contact_input-error {
background-color: #ffc3b0; background-color: #ffc3b0;
border-color: #ff865f; border-color: #ff865f;
color: #c90000; color: #c90000;
} }
input.error::placeholder, textarea.error::placeholder {
.contact_input-error::placeholder, .contact_input-error::placeholder {
color: #c9000094; color: #c9000094;
} }
input[type="submit"].contact-input {
appearance: unset; input[disabled].contact_input {
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 {
background-color: #cdcdcd; background-color: #cdcdcd;
border-color: gray; border-color: gray;
color: black; color: black;
} }
.message-status {
.message {
display: none; display: none;
margin: 5px; margin: 5px;
padding: 8px; padding: 8px;
border-radius: 5px; border-radius: 5px;
} }
.message-status__ok, .message-status__error {
.message_ok, .message_error {
display: block; display: block;
} }
.message-status__ok {
.message_ok {
background-color: #4CAF50; background-color: #4CAF50;
border: 1px solid #387d3b; border: 1px solid #387d3b;
color: white; color: white;
} }
.message-status__error {
.message_error {
background-color: #ffc3b0; background-color: #ffc3b0;
border: 1px solid #ff865f; border: 1px solid #ff865f;
color: #c90000; 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> </style>

91
src/components/sections/contacts/OtherContact.vue
View File

@ -1,25 +1,43 @@
<template> <template>
<div class="contact-container" style="flex-basis: 410px"> <div class="contact_info">
<header class="head">Inne formy kontaktu:</header> <header class="info_head">Inne formy kontaktu:</header>
<div class="contact-element"> <div class="contact_element">
<img class="contact-element-icon" src="/assets/img/instagram.jpg" /> <img class="contact_element_icon"
<span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span> 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>
<div class="contact-element"> <div class="contact_element">
<img class="contact-element-icon" src="/assets/img/facebook.jpg" /> <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> <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>
<div class="contact-element"> <div class="contact_element">
<img class="contact-element-icon" src="/assets/img/twitter.jpg" /> <img class="contact_element_icon"
<span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span> 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>
<div class="contact-element"> <div class="contact_element">
<img class="contact-element-icon" src="/assets/img/gg.png" /> <img class="contact_element_icon"
<span id="gg">GG: 38429969</span> src="/assets/img/gg.png" />
<span id="gg" class="contact_element_text">GG: 38429969</span>
</div> </div>
<div class="contact-element"> <div class="contact_element">
<img class="contact-element-icon" src="/assets/img/user.jpg" /> <img class="contact_element_icon"
<span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span> 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>
</div> </div>
</template> </template>
@ -31,28 +49,20 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.contact-container { @import "scss/media";
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);
header.head { .contact_info {
flex-basis: 410px;
}
.info_head {
padding: 10px; padding: 10px;
line-height: 1.6em; line-height: 1.6em;
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
}
form#form-point {
display: flex;
flex-direction: column;
align-items: center;
}
} }
.contact-element {
.contact_element {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
@ -71,22 +81,22 @@ export default {
text-decoration: underline; text-decoration: underline;
} }
} }
}
.contact-element-icon { &_icon {
border-radius: 50%; border-radius: 50%;
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: 10px; margin-right: 10px;
object-fit: contain; object-fit: contain;
} }
#instagram, #facebook, #twitter, #email, #gg { &_text{
padding-top: 2px; padding-top: 2px;
line-height: 1.6em; line-height: 1.6em;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
}
} }
#instagram { #instagram {
@ -110,4 +120,11 @@ export default {
#gg { #gg {
color: #ffa214; color: #ffa214;
} }
@include media-tablet {
#instagram, #facebook, #twitter, #email, #gg {
font-size: 1em;
line-height: 1.2em;
}
}
</style> </style>

23
src/views/Contact.vue
View File

@ -28,7 +28,9 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.contact { @import "scss/media";
.contact {
padding: 25px 0; padding: 25px 0;
.container { .container {
@ -37,12 +39,21 @@ export default {
justify-content: center; justify-content: center;
} }
@media screen and (max-width: 940px) { .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 { .container {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
.contact-container { .contact_container, .contact_info {
margin: 0 auto 25px; margin: 0 auto 25px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -50,14 +61,14 @@ export default {
} }
} }
} }
@media screen and (max-width: 640px) { @include media-mobile {
.container { .container {
padding: 0 10px; padding: 0 10px;
.contact-container { .contact_container {
max-width: unset; max-width: unset;
} }
} }
} }
} }
</style> </style>