Merge branch 'master' into hendrik-post

website/public/styles/chat.css

@@ -1,34 +1,38 @@
 /* Overall chat-screen */
 .chat {
     position: fixed;
+
     top: 80px;
     left: 256px;
-    padding: 20px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
-    display: inline-flex;
+
+    padding: 20px 0;
+
+    display: inline-block;
 }
 
-.chat-left {
+#chat-recent-panel {
     width: 256px;
     height: calc(100% - 100px);
-    margin: 0 10px;
-    overflow-y: auto;
-}
 
-.chat-right {
-    width: calc(100% - 256px - 40px);
-    height: calc(100% - 80px);
-    margin-right: 10px;
+    display: inline-block;
+
+    overflow-y: auto;
 }
 
 /* Chat history. */
-.chat-history {
+#chat-history {
     overflow-y: auto;
     overflow-x: hidden;
-    height: 100%;
+
+    width: calc(100% - 256px - 75px);
+    height: calc(100% - 80px);
+
     padding: 10px;
 
+    display: inline-block;
+
     word-wrap: break-word;
 }
 
@@ -36,7 +40,13 @@
 .chat-message {
     width: 100%;
     min-height: 40px;
-    padding-top: 10px;
+    padding: 10px 0;
+    clear: both;
+}
+
+.chat-message::after {
+    content: '';
+    display: table;
     clear: both;
 }
 
@@ -63,7 +73,7 @@
 /* Chat reply field */
 
 .chat-field {
-    width: 100%;
+    width: calc(100% - 10px);
     display: table;
 }
 

website/public/styles/index.css

@@ -1,20 +1,19 @@
 a.button {
     background-color: #C8CABD;
-    border-radius: 10px;
+    border-radius: 5px;
     color: black;
     cursor: pointer;
     height: 50%;
-    margin: 8px 0;
-    padding: 14px 20px;
-    width: 25%;
+    padding: 8px 20px;
+    width: 50%;
     font-family: Arial;
-    font-size: 16px;
+    font-size: 20px;
 }
 
 /* Body */
 body {
     height: 100%;
-    background-color: #C8CABD;
+    background-color: #FBC02D;
     /*background-image: url(http://play.pokemonshowdown.com/fx/client-bg-shaymin.jpg);
     background-size: cover;
     background-attachment: fixed;*/
@@ -24,31 +23,14 @@ body {
     font-family: Arial, sans-serif;
 }
 
-/* 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;
-}
-
-/* Close button on hover */
-.close:hover,
-.close:focus {
-    color: red;
-    cursor: pointer;
-}
 
 /* inlogform */
 form {
     /*background-color: #a87a87;*/
     border-radius: 12px;
-    height: 70%;
+    height: 75%;
     margin: auto;
-    width: 70%;
+    width: 80%;
     overflow-y:auto;
 }
 
@@ -72,24 +54,20 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
     border-color: #C8CABD;
     display: inline-block;
     height: 60%;
+    font-size: 16px;
     padding: 8px 20px;
     margin: 4px 0;
-    width: 70%;
+    width: 55%;
 }
-/*
-input[type=text], input[type=password], input[type=email], input[type="date"] {
-    border: 0px;
-    border-bottom: 4px solid lightgray;
-    border-radius: 0px;
-}*/
 
 button[type=submit] {
     background-color: #C8CABD;
-    color: black  ;
+    color: black;
     cursor: pointer;
     font-family: Arial;
-    font-size: 16px;
-    width: 50%;
+    font-size: 22px;
+    height: 30px;
+    width: 120px;
 }
 
 .error {
@@ -106,12 +84,12 @@ label {
     display: inline-block;
     position: relative;
     background-color: #C8CABD;
-    height: 30px;
-    width: 90px;
-    padding: 3px 3px 3px 0px;
+    height: 25px;
+    width: 120px;
+    padding: 3px 3px 3px 3px;
     text-align: center;
-    border-radius: 0px 10px 10px 0px;
-    font-size: 24px;
+    border-radius: 0px 5px 5px 0px;
+    font-size: 22px;
 
 }
 .left-arrow:after {
@@ -121,9 +99,9 @@ label {
     right: 100%;
     top: 0;
     bottom: 0;
-    border-top: 15px solid transparent;
+    border-top: 12px solid transparent;
     border-right: 20px solid #C8CABD;
-    border-bottom: 15px solid transparent;
+    border-bottom: 12px solid transparent;
     border-left: 0px solid transparent;
 }
 
@@ -135,7 +113,7 @@ label {
 
 /* padding voor login_containers */
 .login_containerlogin {
-    padding:25px;
+    padding:16px;
     text-align: center;
 }
 
@@ -163,7 +141,7 @@ label {
     margin: 34px auto;
     overflow-y: auto;
     padding: 20px;
-    width: 50%;
+    width: 45%;
 }
 
 /*.platform {

website/public/styles/main.css

@@ -242,3 +242,23 @@ div[data-title]:hover:after {
     line-height: normal;
     font-family: Arial, sans-serif;
 }
+
+.friend {
+
+}
+
+
+.friend-item, .group-item {
+    cursor: pointer;
+    transition-duration: 250ms;
+}
+
+.friend-item:hover, .group-item:hover {
+    background: #FBC02D;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.friend-name {
+    display: inline-block;
+    vertical-align: middle;
+}

website/public/styles/menu.css

@@ -34,16 +34,6 @@
     cursor: pointer;
 }
 
-.friend-item, .group-item {
-    cursor: pointer;
-    transition-duration: 250ms;
-}
-
-.friend-item:hover, .group-item:hover {
-    background: #FBC02D;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
-
 .menu button {
     background: none;
     color: inherit;
@@ -73,4 +63,32 @@
 
 #quick-links i:hover {
     color: #FBC02D;
+}
+
+.notification-options {
+    display: none;
+    width: 100%;
+}
+
+.notification-options form {
+    width: 100%;
+    text-align: center;
+}
+
+.notification-options button {
+    display: inline-block;
+    padding: 5px 20px;
+    width: auto;
+}
+
+.accept-notification:hover {
+    color: #4CAF50;
+}
+
+.deny-notification:hover {
+    color: firebrick;
+}
+
+.friend-item:hover .notification-options {
+    display: inline-block;
 }

website/public/styles/profile.css

@@ -78,8 +78,9 @@ div.posts .post form textarea.newpost {
     font-size: 0.8em;
 }
 
-.profile-button {
+input.profile-button {
     float: right;
+    height: auto;
     padding: 10px;
     border-radius: 5px;
     background-color: #4CAF50;