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

updated contact

Browse Source
This commit is contained in:
Kamil Niemczycki 2022-07-12 23:43:52 +02:00
parent 5caa0f056d
commit 948a187931
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
2 changed files with 93 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,32 +19,74 @@
id="form-point"
@submit="formSubmit"
>
<label
class="label-info"
:class="{ 'label-error': isEmailError }"
for="email"
>
E-mail:
</label>
<input
id="email"
v-model="emailValue"
class="contact_input"
:class="{ 'contact_input-error': isEmailError }"
type="text"
name="email"
placeholder="Twój adres e-mail."
placeholder="przemek.kowalski@gmail.com"
>
<span
v-if="isEmailError"
class="error-message"
>
E-mail musi być poprawny, np. przemek.kowalski@gmail.com
</span>
<label
class="label-info"
:class="{ 'label-error': isMessageError }"
for="message"
>
Wiadomość:
</label>
<textarea
id="message"
v-model="messageValue"
class="contact_input"
:class="{ 'contact_input-error': isMessageError }"
name="message"
placeholder="Twoja wiadomość."
placeholder="Chciałbym zlecić wykonanie strony..."
/>
<span
v-if="isMessageError"
class="error-message"
>
Wiadomość musi zawierać przynajmniej 3 znaki!
</span>
<label
class="label-info"
:class="{ 'label-error': isSenderError }"
for="sender"
>
Podpis nadawcy:
</label>
<input
id="sender"
v-model="senderValue"
class="contact_input"
:class="{ 'contact_input-error': isSenderError }"
type="text"
name="sender"
placeholder="Twój podpis."
placeholder="np. Przemek Kowalski"
>
<span
v-if="isSenderError"
class="error-message"
>
Podpis musi zawierać przynajmniej 3 znaki!
</span>
<BaseButton
is-reverse
:disabled="buttonDisabled"
:disabled="isButtonDisabled"
>
Wyślij
</BaseButton>
@ -54,7 +96,7 @@
<script setup>
import BaseButton from '../../buttons/BaseButton'
import {ref, reactive, watch, computed} from 'vue'
import { ref, reactive, watch, computed } from 'vue'
function emailValidate (mailObj) {
const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
@ -88,6 +130,7 @@ const errors = reactive({
sender: false
})
const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender)
const isEmailError = computed(() => errors.email)
const isMessageError = computed(() => errors.message)
const isSenderError = computed(() => errors.sender)
@ -184,17 +227,35 @@ function formSubmit(event) {
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;
font-size: 1em;
font-family: var(--font-family);
line-height: 1.3em;
margin-bottom: 10px;
border-radius: 5px;
.contact_container {
.label-info {
width: 97%;
padding-bottom: 5px;
color: #7a7a7a;
}
.error-message {
width: 97%;
padding: 5px 0 10px;
color: #d44950;
}
input, textarea {
width: 97%;
max-width: 97%;
border: 0;
border-bottom: 2px solid #c9c9c9;
padding: 10px 10px 8px;
font-size: 1em;
font-family: var(--font-family);
line-height: 1.3em;
margin-bottom: 15px;
border-radius: 5px;
}
}
.contact_input::placeholder {
color: #bdbdbd;
}
.contact_input:focus, .contact_input:focus {
@ -208,14 +269,14 @@ textarea.contact_input {
min-height: 150px;
}
.contact_input-error, .contact_input-error {
background-color: #ffc3b0;
border-color: #ff865f;
color: #c90000;
input.contact_input-error, textarea.contact_input-error {
border-color: #d44950;
color: #d44950;
margin-bottom: 0;
}
.contact_input-error::placeholder, .contact_input-error::placeholder {
color: #c9000094;
color: #d7626a;
}
input[disabled].contact_input {
@ -242,8 +303,8 @@ input[disabled].contact_input {
}
.message_error {
background-color: #ffc3b0;
border: 1px solid #ff865f;
color: #c90000;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
</style>

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

@ -7,6 +7,7 @@
<img
class="contact_element_icon"
src="/assets/img/instagram.jpg"
alt="Instagram"
>
<span
id="instagram"
@ -23,6 +24,7 @@
<img
class="contact_element_icon"
src="/assets/img/facebook.jpg"
alt="Facebook"
>
<span
id="facebook"
@ -39,6 +41,7 @@
<img
class="contact_element_icon"
src="/assets/img/twitter.jpg"
alt="Twitter"
>
<span
id="twitter"
@ -55,6 +58,7 @@
<img
class="contact_element_icon"
src="/assets/img/gg.png"
alt="Gadu-Gadu"
>
<span
id="gg"
@ -65,9 +69,10 @@
<img
class="contact_element_icon"
src="/assets/img/user.jpg"
alt="E-mail"
>
<span
id="email"
id="mailto"
class="contact_element_text"
>
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
@ -141,7 +146,7 @@
color: #5eaade;
}
#email {
#mailto {
color: #696969;
}
@ -150,7 +155,7 @@
}
@include media-tablet {
#instagram, #facebook, #twitter, #email, #gg {
#instagram, #facebook, #twitter, #mailto, #gg {
font-size: 1em;
line-height: 1.2em;
}