Merge branch 'master' into hendrik-testing

website/public/styles/index.css

@@ -1,98 +1,118 @@
 ::selection {
-  background: #845663;
-  color: white;
+    background: #845663;
+    color: white;
 }
 
 ::-moz-selection {
-  background: #845663;
-  color: white;
+    background: #845663;
+    color: white;
 }
 
 a, a:link, a:visited, a:hover, a:active {
-  color: inherit;
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
+a.button {
+    background-color: #845663;
+    border: 2px solid black;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+    height: 50%;
+    margin: 8px 0;
+    padding: 14px 20px;
+    width: 25%;
+    font-family: Arial;
+    font-size: 16px;
+}
 
 a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
 div[data-title]:hover:after{
-  content: attr(data-title);
-  padding: 4px 4px;
-  color: #FFFFFF;
-  position: absolute;
-  left: 0;
-  top: 100%;
-  z-index: 20;
-  white-space: nowrap;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  -moz-box-shadow: 0px 0px 4px #222;
-  -webkit-box-shadow: 0px 0px 4px #222;
-  box-shadow: 0px 0px 4px #222;
-  background-color: #333;
-  font-size: 15px;
-  line-height: normal;
-  font-family: Arial, sans-serif;
+    content: attr(data-title);
+    padding: 4px 4px;
+    color: #FFFFFF;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 20;
+    white-space: nowrap;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0px 0px 4px #222;
+    -webkit-box-shadow: 0px 0px 4px #222;
+    box-shadow: 0px 0px 4px #222;
+    background-color: #333;
+    font-size: 15px;
+    line-height: normal;
+    font-family: Arial, sans-serif;
 }
 
 /* Add Zoom Animation */
 .animate {
-  animation: animatezoom 0.6s
-  -webkit-animation: animatezoom 0.6s;
+    animation: animatezoom 0.6s
+    -webkit-animation: animatezoom 0.6s;
 }
 
 /* Body */
 body {
-  height: 100%;
+    height: 900px;
 
-  background-color: #B78996;
-  color: #333;
+    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEnqKdVtLbxjKuNsCSCxFRhTOpp3Gm0gsU8bMgA_MeUYyzrUFy);
+    background-size: cover;
+    background-repeat: repeat-x;
+    background-attachment: fixed;
 
-  font-family: Arial, sans-serif;
+    /*background-color: #B78996;*/
+    color: #333;
+
+    font-family: Arial, sans-serif;
 }
 
 /* stijl voor alle buttons */
 button {
-  background-color: #845663;
-  border: 2px solid black;
-  border-radius: 12px;
-  color: white;
-  cursor: pointer;
-  height: 50%;
-  margin: 8px 0;
-  padding: 14px 20px;
-  width: 25%;
-  font-family: Arial;
-  font-size: 16px;
+    background-color: #845663;
+    border: 2px solid black;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+    height: 50%;
+    margin: 8px 0;
+    padding: 14px 20px;
+    width: 25%;
+    font-family: Arial;
+    font-size: 16px;
 }
 
 /* The Close Button */
 .close {
   /* Position it in the top right corner outside of the modal */
-  color: white;
-  font-size: 100px;
-  font-weight: bold;
-  position: absolute;
-  right: 25px;
-  top: 0;
+    color: white;
+    font-size: 100px;
+    font-weight: bold;
+    position: absolute;
+    right: 25px;
+    top: 0;
 }
 
 /* Close button on hover */
 .close:hover,
 .close:focus {
-  color: red;
-  cursor: pointer;
+    color: red;
+    cursor: pointer;
 }
 
 /* inlogform */
 form {
-    background-color: #a87a87;
+    /*background-color: #a87a87;*/
     border: 5px solid #325da3;
+    background-color: #a87a87;
     border-radius: 12px;
-    height: 50%;
-    margin: auto;
-    width: 55%;
+    height: 55%;
+    margin: 35px auto;
+    width: 45%;
+    overflow-y:auto;
 }
 
 /* inlog titel */
@@ -115,14 +135,14 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
     box-sizing: border-box;
     display: inline-block;
     height: 50%;
-    padding: 12px 20px;
-    margin: 8px 0;
+    padding: 8px 20px;
+    margin: 4px 0;
     width: 50%;
     font-family: Arial;
     font-size: 16px;
 }
 
-input[type=submit] {
+button[type=submit] {
     background-color: #845663;
     border: 2px solid black;
     border-radius: 12px;
@@ -142,14 +162,21 @@ label {
 
 /* padding voor registreer container */
 .login_containerregister {
-  padding: 16px;
-  text-align: left;
+    padding: 16px;
+    text-align: left;
 }
 
 /* padding voor login_containers */
 .login_containerlogin {
-  padding: 16px;
-  text-align: center;
+    padding: 16px;
+    text-align: center;
+}
+
+/* padding voor foutmelding login */
+.login_containerfault {
+    padding: 16px;
+    text-align: center;
+    color: red;
 }
 
 /* The Modal (background) */
@@ -175,12 +202,13 @@ label {
     margin: 5px auto; /* 15% from the top and centered */
     overflow-y: auto;
     width: 40%; /* Could be more or less, depending on screen size */
-    height: 80%;
+    height: 60%;
+
 }
 
 @keyframes animatezoom {
-  from {transform: scale(0)}
-  to {transform: scale(1)}
+    from {transform: scale(0)}
+    to {transform: scale(1)}
 }
 
 /* datepicker */
@@ -203,6 +231,6 @@ select {
 }
 
 ul {
-  font-family: Arial;
-  font-size: 16px;
+    font-family: Arial;
+    font-size: 16px;
 }

website/public/styles/menu.css

@@ -25,3 +25,16 @@
     font-size: 14px;
     cursor: pointer;
 }
+
+.friend-item {
+    cursor: pointer;
+}
+
+.menu button {
+    background: none;
+    color: #333;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    text-align: left;
+}

website/public/styles/settings.css

@@ -5,6 +5,17 @@
 .settings-password {
     margin-right: 15px;
 }
+.settings-message {
+    color: white;
+}
+.settings-message-angry {
+    background-color: firebrick;
+}
+
+.settings-message-happy {
+    background-color: forestgreen;
+
+}
 
 
 .settings li {
@@ -21,6 +32,10 @@
     text-align: right;
 }
 
+.settings-password label, .settings-email label {
+    text-align: left;
+}
+
 /* All the fields for typing things. */
 .settings input[type="password"],
 .settings input[type="text"],