Merge branch 'master' into marijn-settings

This commit is contained in:
Marijn Jansen
2017-01-12 15:21:08 +01:00
9 changed files with 227 additions and 52 deletions

View File

@@ -123,37 +123,127 @@
</div>
</form>
</div>
</div>
<script>
$("#default-settings").birthdayPicker();
</script>
</body>
<div class="login_containerlogin">
<button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
</div>
<div class="login_containerregister">
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">&times;</span>
<!-- Register Content -->
<form class="modal-content animate" action="../profile.php" onsubmit="return passwordfunction()" method="post">
<h2>Registreer je account</h2>
<div class="login_containerregister">
<label><b>Naam</b></label>
<input type="text" placeholder="Voer je naam in" name="name"
pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
</div>
<div class="login_containerregister">
<label><b>Achternaam</b></label>
<input type="text" placeholder="Voer je achternaam in" name="surname"
pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
</div>
<div class="login_containerregister">
<label><b>Geboortedatum</b></label>
<!-- These are the select elements we will target -->
<select id="dobday" title="Voer een dag in" ></select>
<select id="dobmonth" title="Voer een maand in" required></select>
<select id="dobyear" title="Voer een jaar in" required></select>
<!-- And here's the library being called! -->
<script>
$(document).ready(function() {
$.dobPicker({
daySelector: '#dobday',
monthSelector: '#dobmonth',
yearSelector: '#dobyear',
dayDefault: 'Dag',
monthDefault: 'Maand',
yearDefault: 'Jaar',
minimumAge: 12,
maximumAge: 80
});
});
</script>
</div>
<div class="login_containerregister">
<label><b>Gebruikersnaam</b></label>
<input type="text" placeholder="Voer je gebruikersnaam in" name="username"
pattern=".{6,}" title="Moet meer dan 6 karakers zijn" required>
</div>
<div class="login_containerregister">
<label><b>Wachtwoord</b></label>
<input type="password" placeholder="Voer je wachtwoord in" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="password"
title="Moet miniaal 1 cijfer, 1 hoofdletter en kleine letter hebben en minstens 8 of meer karakters zijn" required>
</div>
<div class="login_containerregister">
<label><b>Herhaal wachtwoord</b></label>
<input type="password" placeholder="Herhaal wachtwoord" name="confirmpassword"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="confirmpassword"
title="Herhaal wachtwoord" required>
</div>
<div class="login_containerregister">
<label><b>Straatnaam</b></label>
<input type="text" placeholder="Voer jouw straatnaam in" name="name"
pattern="[A-Za-z]{1,}" title="Moet alleen letters zijn" required>
</div>
<div class="login_containerregister">
<label><b>Straatnummer</b></label>
<input type="text" placeholder="Voer jouw straatnummer in" name="name"
pattern="[1-9][0-9]{0,}" title="Moet alleen nummers zijn" required>
</div>
<div class="login_containerregister">
<label><b>Email</b></label>
<input type="email" placeholder="Voer je email in" id="email"
title="Voer een geldige email in" required>
</div>
<div class="login_containerregister">
<input type="submit" value="Registreer je account" name="Submit" id="frm1_submit" />
</div>
</form>
</div>
</div>
<script>
$("#default-settings").birthdayPicker();
</script>
</body>
</html>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
function passwordfunction() {
var password1 = document.getElementById("password").value;
var password2 = document.getElementById("confirmpassword").value;
var passwordmatching = true;
function passwordfunction() {
var password1 = document.getElementById("password").value;
var password2 = document.getElementById("confirmpassword").value;
var passwordmatching = true;
if (password1 != password2) {
document.getElementById("password").style.borderColor = "red";
document.getElementById("confirmpassword").style.borderColor = "red";
passwordmatching = false;
confirmpassword.setCustomValidity("Wachwoord match niet")
if (password1 != password2) {
document.getElementById("password").style.borderColor = "red";
document.getElementById("confirmpassword").style.borderColor = "red";
passwordmatching = false;
confirmpassword.setCustomValidity("Wachwoord match niet")
}
return passwordmatching;
}
return passwordmatching;
}
</script>

View File

@@ -19,9 +19,7 @@
}
.chat-recent, .chat-history {
border-radius: 20px;
width: 100%;
background-color: white;
}
/* List of chats. */
@@ -47,7 +45,7 @@
.chat-history {
overflow-y: auto;
height: 100%;
padding-bottom: 10px;
padding: 0 0 10px 0;
}
.chat-message {
@@ -80,20 +78,35 @@
/* Chat reply field */
.chat-field {
padding: 15px;
width: 100%;
padding: 15px 0;
display: table;
}
.chat-field input {
border-radius: 8px;
.chat-field form {
width: 100%;
overflow: hidden;
}
.chat-field span {
display: block;
overflow: hidden;
}
.chat-field input[type="text"] {
width: calc(100% - 80px);
width: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.chat-field input[type="submit"] {
width: auto;
float: right;
background-color: #845663;
color: white;
padding: 5px 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

View File

@@ -26,16 +26,13 @@ header {
}
#header-search input[type="text"] {
padding: 5px 10px;
height: 19px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#header-search input[type="submit"] {
margin: 0 0 0 -4px;
padding: 5px;
#header-search input[type="submit"] {
background: none;
color: white;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

View File

@@ -43,6 +43,7 @@ body {
.platform {
padding: 20px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@@ -65,11 +66,6 @@ body {
border: 0;
}
input[type="text"] {
padding: 5px;
}
/* Move element down (clear), below floating elements */
.clear {
clear: both;
@@ -106,6 +102,10 @@ h5 {
font-size: 1.4em;
}
ul {
list-style-type: none;
}
p {
font-size: 1.2em;
}
@@ -115,6 +115,21 @@ a, a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
button, input, select {
width: auto;
height: 32px;
padding: 0 5px;
background: white;
color: #3333333;
cursor: pointer;
border: none;
font-family: Arial;
font-size: 16px;
}
/* Tables */
table {
border-spacing: 0;

View File

@@ -0,0 +1,3 @@
.search-form input {
border-bottom: #845663 solid 1px;
}

View File

@@ -1,7 +1,7 @@
<div class="content">
<div class="chat">
<div class="chat-left">
<nav class="chat-recent">
<nav class="chat-recent platform">
<h5>Chats</h5>
<a href="#"><div class="chat-conversation">
<img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
@@ -15,7 +15,7 @@
</div>
<div class="chat-right">
<div class="chat-history">
<div class="chat-history platform">
<div class="chat-message">
<div class="chat-message-self">Hi!</div>
</div>
@@ -43,14 +43,16 @@
</div>
<div class="chat-field">
<form method="post">
<input type="text"
name="message"
placeholder="Reageer..."
required
>
<input type="submit"
value="Verstuur"
>
<span>
<input type="text"
name="message"
placeholder="Reageer..."
required
>
</span>
</form>
</div>
</div>

View File

@@ -13,6 +13,7 @@
@import url("styles/header.css");
@import url("styles/menu.css");
@import url("styles/footer.css");
@import url("styles/search.css");
@import url("styles/adminpanel.css");
@import url("styles/chat.css");
@import url("styles/settings.css");

View File

@@ -4,7 +4,7 @@
</div>
<div id="header-search">
<form action="search.php" method="get">
<input name="search" type="text" placeholder="search people, friends and pages" />
<input name="search" type="text" placeholder="zoek naar van alles" />
<input type="submit" value="Zoek"/>
</form>
</div>

File diff suppressed because one or more lines are too long