Merge branch 'master' into marijn-settings

website/styles/adminpanel.css

@@ -0,0 +1,63 @@
+.admin-panel {
+    margin: auto;
+    background-color: white;
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.admin-actions {
+    display: inline-block;
+    margin: 10px;
+    vertical-align: top;
+}
+
+.admin-searchbar {
+    display: inline-block;
+    margin: 10px;
+    vertical-align: top;
+}
+
+.admin-searchinput {
+    border: 2px solid #B78996;
+    border-radius: 2px;
+    margin-bottom: 10px;
+}
+
+.admin-filter {
+    display: inline-block;
+    margin: 10px;
+    vertical-align: top;
+    margin-right: 100px;
+}
+
+
+.admin-users {
+    margin: 10px;
+}
+
+.usertable {
+    width: 100%;
+}
+
+.usertable .table-checkbox {width: 20px}
+.usertable .table-username {width: 150px}
+.usertable .table-status {width: 100px}
+.usertable .table-action {width: 200px}
+
+.usertable th, td {
+    border-bottom: 1px solid #ddd;
+    padding: 3px;
+}
+
+.usertable tr {
+    text-align: left;
+}
+
+.usertable tr:hover {
+    background-color: #f5f5f5;
+}
+
+/*div {
+    border: 1px solid black;
+}*/

website/styles/chat.css

@@ -92,8 +92,8 @@
 }
 
 .chat-field input[type="submit"] {
-    width: 60px;
+    width: auto;
     background-color: #845663;
     color: white;
-    padding: 5px;
+    padding: 5px 10px;
 }

website/styles/index.css

@@ -3,31 +3,45 @@ body {
     background-color: #B78996;
 }
 
-/* Bordered form */
+/* inlogform */
 form {
     background-color: #a87a87;
     border: 5px solid #325da3;
     border-radius: 12px;
     height: 50%;
     margin: auto;
-    width: 45%;
+    width: 55%;
 }
 
+/* inlog titel */
 h1 {
     padding: 16px;
     text-align: center;
 }
 
+/* registreer titel*/
 h2 {
     padding: 16px;
     text-align: left;
 }
 
+/* text */
 label {
     display: block;
 }
 
-/* Full-width inputs */
+/* datepicker */
+select {
+    border-radius: 12px;
+    border: 5px solid #ccc;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 50%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    width: 15%;
+}
+
 input[type=text], input[type=password], input[type=email] {
     border-radius: 12px;
     border: 5px solid #ccc;
@@ -51,7 +65,7 @@ input[type=submit]{
     width: 50%;
 }
 
-/* Set a style for all buttons */
+/* stijl voor alle buttons */
 button {
     background-color: #845663;
     border: 2px solid black;
@@ -64,13 +78,14 @@ button {
     width: 25%;
 }
 
-/* Add padding to containers */
-.container {
+/* padding voor registreer container */
+.login_containerregister {
     padding: 16px;
     text-align: left;
 }
 
-.containercenter {
+/* padding voor login_containers */
+.login_containerlogin {
     padding: 16px;
     text-align: center;
 }
@@ -97,7 +112,8 @@ button {
     border: 5px solid #325da3;
     margin: 5px auto; /* 15% from the top and centered */
     overflow-y: auto;
-    width: 50% /* Could be more or less, depending on screen size */
+    width: 40%; /* Could be more or less, depending on screen size */
+    height: 80%;
 }
 
 /* The Close Button */

website/styles/profile.css

@@ -1,7 +1,3 @@
-.profile-box, .item-box, .item-box-full-width, .post-box {
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
-
 .profile-box {
     min-height: 150px;
     padding: 25px;
@@ -28,24 +24,53 @@
     width: calc(50% - 60px);
 }
 
+@media only screen and (max-width: 900px) {
+    .item-box {
+        width: calc(100% - 50px);
+    }
+}
+
 .item-box-full-width {
     width: calc(100% - 50px);
 }
 
 .posts {
     z-index: -1;
+    margin-right: 0;
+    width: calc(100% + 15px);
 }
 
 .post-box {
     display: inline-flex;
-    width: 250px;
-    margin: 20px 20px 0 0;
+    margin: 20px 15px 0 0;
     padding: 25px;
     background-color: #FFFFFF;
 }
 
+/* fullscreen */
+.post-box {
+    width: calc(25% - 68px);
+}
+
+@media only screen and (max-width: 1500px) {
+    .post-box {
+        width: calc(50% - 67px);
+    }
+}
+
+/* mobile */
+@media only screen and (max-width: 1000px) {
+    .post-box {
+        width: calc(100% - 65px);
+    }
+}
+
+.post {
+    width: 100%;
+}
+
 .post img {
-    width: 250px;
+    width: 100%;
 }
 
 .post .post-date {