diff --git a/css/eventos.css b/css/eventos.css index 5247ebe..7812b82 100644 --- a/css/eventos.css +++ b/css/eventos.css @@ -27,12 +27,13 @@ background-color: #fff; } - button { + .btn-send, .btn-modal { font-size: 16px; font-weight: bold; width: 120px; height: 40px; - margin-block: 15px; + margin-bottom: 10px; + margin-top: 15px; border-radius: 5px; cursor: pointer; background-color: #734bd1; @@ -40,6 +41,10 @@ border: none; transition-duration: 0.4s; } + + .btn-modal { + margin-top: 50px; + } button:hover { background-color: #9466ff; @@ -64,15 +69,17 @@ bottom: 0; } - .form { + .form-container { display: none; + flex-direction: column; + justify-content: center; position: absolute; - top: 30vh; + top: 20vh; z-index: 2; background-color: #fff; border-radius: 10px; border: 4px solid #734bd1; - min-height: 0; + min-height: 320px; width: 500px; } @@ -96,6 +103,13 @@ transform: rotate(45deg); } + .send-message { + display: none; + text-align: center; + font-size: 30px; + font-weight: bold; + } + form { padding-left: 10px; } @@ -107,7 +121,7 @@ width: 320px; border-color: #996dff; padding-left: 10px; - font-size: 20PX; + font-size: 18PX; } select { @@ -118,3 +132,14 @@ height: 40px; font-size: 18px; } + + + @media (max-width: 550px) { + .form-container { + width: 90vw; + } + input, select { + width: calc(80vw - 120px); + } + + } diff --git a/paginas/eventos.html b/paginas/eventos.html index 4ee0797..0d95f0b 100644 --- a/paginas/eventos.html +++ b/paginas/eventos.html @@ -40,17 +40,19 @@ -
+
+ + -
+ @@ -80,13 +82,13 @@
Título:
- +
- + diff --git a/script/eventos.js b/script/eventos.js index 80c3e3d..0fb2174 100644 --- a/script/eventos.js +++ b/script/eventos.js @@ -27,6 +27,9 @@ const sendData = (form) => { return false } + openClose('form', 'head-form', 'none'); + document.getElementsByClassName('send-message')[0].style.display = 'block' + const request = new XMLHttpRequest(); request.onreadystatechange = function() { @@ -48,8 +51,7 @@ const sendData = (form) => { categoria: parseInt(formData.get("categoria")) } - const url = 'http://hcbarros.bootcamp.dev.netuno.org:20190/services/evento-salvar' - request.open('POST', url) + request.open('POST', 'http://hcbarros.bootcamp.dev.netuno.org:20190/services/evento-salvar') request.setRequestHeader('Content-Type', 'application/json') request.send(JSON.stringify(objeto)); @@ -65,11 +67,6 @@ const validator = (formData) => { alert('O título deve possuir ao menos 5 caracteres!') return false } - - if(formData.get("capacidade").length === 0) { - alert('Informe a capacidade do evento!') - return false - } const date = new Date(formData.get("data")) if(isNaN(date.getTime())) { @@ -83,29 +80,33 @@ const validator = (formData) => { const finish = (text) => { - openCloseModal('none') - alert(text) - window.location.reload() + openClose('modal-content', 'form-container', 'none') + setTimeout(() => { + alert(text) + window.location.reload() + }, 100) } -const openCloseModal = (acao) => { - document.getElementsByClassName('modal-content')[0].style.display = acao - document.getElementsByClassName('form')[0].style.display = acao +const openClose = (classe1, classe2, acao) => { + document.getElementsByClassName(classe1)[0].style.display = acao + document.getElementsByClassName(classe2)[0].style.display = acao } -const numberMask = (element) => { - element.value = element.value.replace(/\D/g,'') +const numberMask = (e) => { + let v = e.value.replace(/\D/g,'') + v = v.length === 0 ? '0' : v + e.value = v.length > 1 && v.charAt(0) == '0' ? v.substring(1) : v } -const currencyMask = (element) => { - var v = element.value.replace(/\D/g,'') +const currencyMask = (e) => { + let v = e.value.replace(/\D/g,'') v = (v/100).toFixed(2) + '' v = v.replace(".", ",").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') - element.value = v + e.value = v }