Commit 30b95717 authored by Ale's avatar Ale

feat: Update form

parent e106826b
......@@ -100,7 +100,7 @@ class Testimony(Publishable):
video = models.FileField(
_('Sube el vídeo con tu historia'),
help_text = _(
'Sube un video aquí'
'Puedes usar formatos ogg, mp4, avi, webm o mov'
),
validators = [ validator_video ],
blank=False,
......
......@@ -706,9 +706,29 @@ video {
align-items: center;
justify-content: space-between; }
#contacta.loading:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100000;
background: url("/static/site/img/icons/spinner.svg") center center no-repeat;
background-color: rgba(255, 255, 255, 0.9); }
.form__field {
margin-bottom: 3.2rem; }
.form__field.not-validated {
background-color: #eee;
padding: 0.8rem; }
.form__field.not-validated:after {
content: attr(data-error);
color: #fa4440;
margin-top: 0.8rem;
font-size: 1.4rem; }
.form__label {
display: block;
color: #333;
......@@ -743,6 +763,8 @@ video {
display: block;
width: 50%;
margin: 6.4rem auto; }
.form__submit:hover {
cursor: pointer; }
#id_position {
display: none; }
......@@ -836,10 +858,13 @@ video {
.site-messages {
position: fixed;
width: 400px;
left: calc(50% - 200px);
width: 500px;
left: calc(50% - 250px);
top: 50px;
z-index: 50000; }
z-index: 50000;
font-size: 1.6rem;
text-align: center;
max-width: 100%; }
.site-message--success {
background-color: #43AD36;
......
This diff is collapsed.
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#41ad33">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
......@@ -28,9 +28,10 @@ document.addEventListener('DOMContentLoaded', function(){
});
});
var form = document.querySelector('form');
var form_container = document.querySelector('#contacta');
if(form) form.addEventListener('submit', function(e){
e.preventDefault();
console.log("submitting");
form_container.classList.add('loading');
var data = new FormData(form);
jQuery.ajax({
type : form.method,
......@@ -41,10 +42,19 @@ document.addEventListener('DOMContentLoaded', function(){
success : function(response)
{
location.reload();
form_container.classList.remove('loading');
},
error : function(response)
{
console.log('error: ' + response);
var errors_msg = JSON.parse(response.responseText);
Object.keys(errors_msg).forEach( function(fieldname) {
var field = document.querySelector('.form-field--' + fieldname);
if(field){
field.classList.add('not-validated');
field.dataset.error = errors_msg[fieldname][0].message;
}
});
form_container.classList.remove('loading');
},
});
});
......
#contacta.loading:before
content: ""
position: absolute
left: 0
top: 0
right: 0
bottom: 0
z-index: 100000
background: url('/static/site/img/icons/spinner.svg') center center no-repeat
background-color: rgba(white, .9)
.form__field
margin-bottom: $m*2
.form__field.not-validated
background-color: #eee
padding: $m/2
&:after
content: attr(data-error)
color: #fa4440
margin-top: $m/2
font-size: 1.4rem
.form__label
display: block
color: #333
......@@ -30,6 +51,8 @@
display: block
width: 50%
margin: $m*4 auto
&:hover
cursor: pointer
// Geocoder
#id_position
......
.site-messages
position: fixed
width: 400px
left: calc(50% - 200px)
width: 500px
left: calc(50% - 250px)
top: 50px
z-index: 50000
font-size: 1.6rem
text-align: center
max-width: 100%
.site-message--success
background-color: $green
......
......@@ -34,7 +34,6 @@
<ul class="site-messages">
{% for message in messages %}
<li class="site-message {% if message.tags %}site-message--{{ message.tags }}{% endif %}">
<span class="site-message__close">×</span>
{{ message|safe }}
</li>
{% endfor %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment