MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds message on submit of contact form

This commit is contained in:
apapachristou 2020-10-06 14:26:57 +03:00
parent e2326e1070
commit 9fd33e421b
5 changed files with 87 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html
View File

@ -26,8 +26,8 @@
</div>
</div>
<div *ngIf="!isDialog" class="row contact-actions">
<div class="ml-auto col-auto"><button mat-raised-button type="button" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
<div class="ml-auto col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button type="button" class="send-btn" [ngClass]="{'send-btn-disabled': !formGroup.valid}" [disabled]="!formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
</div>
</div>
</form>

35
dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss
View File

@ -22,3 +22,38 @@ img {
.contact-actions {
padding-right: 1em;
}
.send-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #129d99;
border-radius: 30px;
opacity: 1;
width: 101px;
height: 43px;
color: #129d99;
font-weight: 500;
}
.send-btn-disabled {
width: 6.64em;
height: 2.93em;
background: #FFFFFF;
border: 1px solid #B5B5B5;
border-radius: 30px;
font-weight: bold;
letter-spacing: -0.35px;
color: #B5B5B5;
margin-bottom: 0.25em;
cursor: default;
}
.cancel-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #B5B5B5;
border-radius: 30px;
opacity: 1;
width: 101px;
height: 43px;
color: #212121;
font-weight: 500;
}

4
dmp-frontend/src/assets/splash/contact.html
View File

@ -66,7 +66,9 @@
<div class="col ">
<div class="page-title">Contact</div>
</div>
<form class="form" method="POST" action="/api/contactEmail/public">
<iframe name="hiddenFrame" class="hide"></iframe>
<form class="form" method="POST" action="/api/contactEmail/public" target="hiddenFrame" onsubmit="emailSend()">
<div class="main-contact">
<div class="col page-subtitle">
<div>Contact us to learn more</div>

8
dmp-frontend/src/assets/splash/css/contact.css
View File

@ -20,3 +20,11 @@
font-size: 1.12rem;
color: #212121;
}
.hide {
position:absolute;
top:-1px;
left:-1px;
width:1px;
height:1px;
}

71
dmp-frontend/src/assets/splash/js/scripts.js
View File

@ -1,49 +1,49 @@
function toggleClass(ids, option) {
ids.forEach(id => {
var element = document.getElementById(id);
var className = element.getAttribute("class").replace(/ .*/, '');
if (id === option) {
element.classList.replace(className, "selected");
} else {
element.classList.replace(className, "not-selected");
}
})
ids.forEach(id => {
var element = document.getElementById(id);
var className = element.getAttribute("class").replace(/ .*/, '');
if (id === option) {
element.classList.replace(className, "selected");
} else {
element.classList.replace(className, "not-selected");
}
})
}
function navbarCollapse() {
var element = document.getElementById('nav');
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
element.classList.add("navbar-shrink");
element.classList.add("fixed-top");
} else {
element.classList.remove("navbar-shrink");
element.classList.remove("fixed-top");
}
var element = document.getElementById('nav');
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
element.classList.add("navbar-shrink");
element.classList.add("fixed-top");
} else {
element.classList.remove("navbar-shrink");
element.classList.remove("fixed-top");
}
};
navbarCollapse();
window.onscroll = function () { navbarCollapse() };
function dropdownToggle(dropdownId) {
this.closeOpenDropdowns();
document.getElementById(dropdownId).classList.toggle("show");
this.closeOpenDropdowns();
document.getElementById(dropdownId).classList.toggle("show");
}
function closeOpenDropdowns() {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
this.closeOpenDropdowns();
}
if (!event.target.matches('.dropbtn')) {
this.closeOpenDropdowns();
}
}
// Slideshow per 3 sec, stops on option click
@ -51,8 +51,10 @@ window.onload = function slideImages() {
var x = -1;
slides = setInterval(function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById('template-preview').src = images[x];
toggleClass(['id1','id2','id3'], 'id'.concat((x + 1).toString()));
if (document.getElementById('template-preview')) {
document.getElementById('template-preview').src = images[x];
toggleClass(['id1', 'id2', 'id3'], 'id'.concat((x + 1).toString()));
}
}, 3000);
}
@ -61,3 +63,8 @@ var images = [];
images[0] = 'assets/img/template-preview-1.svg';
images[1] = 'assets/img/template-preview-2.svg';
images[2] = 'assets/img/template-preview-3.svg';
function emailSend() {
alert("The form was submitted");
}