Merge branch 'master' into hendrik-post

website/public/styles/adminbutton.css

@@ -0,0 +1,3 @@
+#quick-links i {
+    font-size: 32px;
+}

website/public/styles/adminpanel.css

@@ -4,7 +4,7 @@
 
 .admin-panel input[type="radio"], input[type="checkbox"] {
     vertical-align: middle;
-    height: auto;
+    height: 28px;
     margin: 2px;
 }
 
@@ -34,7 +34,6 @@
     width: 100%;
 }
 
-.usertable .table-checkbox {width: 20px}
 .usertable .table-username {width: 150px}
 .usertable .table-status {width: 100px}
 .usertable .table-action {width: 200px}
@@ -44,10 +43,18 @@
     padding: 3px;
 }
 
-.usertable tr {
+.usertable th, tr {
     text-align: left;
 }
 
 .usertable tr:hover {
     background-color: #f5f5f5;
 }
+
+.bancommentedit {
+    display: none;
+}
+
+.bancommentform input[type="text"] {
+    width: 100%;
+}

website/public/styles/chat.css

@@ -1,3 +1,8 @@
+
+body {
+    overflow: hidden;
+}
+
 /* Overall chat-screen */
 .chat {
     position: fixed;
@@ -37,6 +42,22 @@
 }
 
 /* Chat-message takes the whole width of the chat area */
+.day-message {
+    width: 100%;
+    min-height: 40px;
+    padding: 10px 0;
+    clear: both;
+    text-align: center;
+}
+
+.day-message-content {
+    width: auto;
+    padding: 10px;
+
+    background-color: #F8F8F8;
+    color: #666;
+}
+
 .chat-message {
     width: 100%;
     min-height: 40px;
@@ -105,4 +126,40 @@
 .active-friend-chat {
     background: #4CAF50;
     color: white;
+}
+
+.chat-message img {
+    max-width: 100%;
+}
+
+.chat-message a {
+    text-decoration: underline;
+}
+
+.chat-time {
+    color: #666666;
+    font-size: 12px;
+    margin-bottom: -3px;
+}
+
+.chat-message-other .chat-time {
+    text-align: right;
+}
+
+@media only screen and (max-width: 1080px) {
+    .chat-message-self, .chat-message-other {
+        max-width: 75%;
+    }
+    .chat {
+        left: 0;
+        width: 100%;
+    }
+    #chat-recent-panel {
+        left: 0;
+        width: 320px;
+    }
+    #chat-history {
+        left: 50%;
+        width: calc(100% - 390px);
+    }
 }

website/public/styles/header.css

@@ -26,7 +26,8 @@ header {
 }
 
 #header-search {
-    padding-left: 42px;
+    margin: 24px 0 24px 32px;
+    vertical-align: middle;
 }
 
 
@@ -48,5 +49,11 @@ header div {
 }
 
 #open-notifications {
-    padding: 5px 20px 5px 0px;
+    padding: 20px 20px 20px 0px;
+}
+
+@media only screen and (max-width: 1080px) {
+    #header-logo {
+        display: none;
+    }
 }

website/public/styles/index.css

@@ -30,8 +30,10 @@ form {
     border-radius: 12px;
     height: 85%;
     margin: auto;
-    width: 80%;
-    overflow-y:auto;
+    width: 600px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
 }
 
 
@@ -44,13 +46,13 @@ h1 {
 
 /* registreer titel*/
 h2 {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
     font-size: 2.0em;
 }
 
 h3 {
-    padding: 16px;
+    padding: 8px;
     text-align: center;
     font-size: 1.5em;
 }
@@ -61,11 +63,15 @@ input[type=text], input[type=password], input[type=email], input[type="date"] {
     display: inline-block;
     height: 60%;
     font-size: 16px;
-    padding: 8px 20px;
+    padding: 8px 10px;
     margin: 4px 0;
     width: 55%;
 }
 
+.middle{
+    text-align: center;
+}
+
 .center{
     text-align: center;
 }
@@ -77,7 +83,7 @@ button {
     cursor: pointer;
     height: 50%;
     padding: 8px 20px;
-    margin: 10px;
+    margin: 5px;
     font-family: Arial;
     font-size: 22px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@@ -88,6 +94,7 @@ button {
     font-family: Arial;
     font-size: 15px;
     color: red;
+    text-align: left;
 }
 
 label {
@@ -96,19 +103,19 @@ label {
 
 /* padding voor registreer container */
 .login_containerregister {
-    padding: 16px;
+    padding: 8px;
     text-align: left;
 }
 
 /* padding voor login_containers */
 .login_containerlogin {
-    padding:16px;
+    padding:8px;
     text-align: center;
 }
 
 /* padding voor foutmelding login */
 .login_containerfault {
-    padding: 16px;
+    padding: 4px;
     text-align: center;
     color: red;
 }
@@ -127,10 +134,14 @@ label {
     background-attachment: fixed;*/
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     height: 400px;
-    margin: 34px auto;
+    margin: 16px auto;
     overflow-y: auto;
     padding: 20px;
-    width: 45%;
+    width: 600px;
+}
+
+select{
+    width: 18%;
 }
 
 ul {
@@ -143,12 +154,12 @@ ul {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
-    padding-top: 100px; /* Location of the box */
+    padding-top: 30px; /* Location of the box */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
+    overflow: hidden; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
@@ -160,7 +171,7 @@ ul {
     margin: auto;
     padding: 0;
     border: 1px solid #888;
-    width: 500px;
+    width: 600px;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
@@ -183,7 +194,7 @@ ul {
 .close {
     color: white;
     float: right;
-    font-size: 28px;
+    font-size: 36px;
     font-weight: bold;
 }
 
@@ -195,15 +206,16 @@ ul {
 }
 
 .modal-header {
-    padding: 2px 16px;
+    padding: 4px 16px;
     background-color: #FBC02D;
     color: black;
 }
 
-.modal-body {padding: 2px 16px;}
+.modal-body {
+    padding: 2px 16px;
+}
 
 .modal-footer {
-    padding: 2px 16px;
     background-color: #FBC02D;
     color: black;
-}
+}

website/public/styles/main.css

@@ -92,21 +92,29 @@ p {
     border-radius: 50%;
 }
 
+.online {
+    border: #4CAF50 solid 3px;
+}
+
+.offline {
+    border: #666666 solid 3px;
+}
+
 .group-picture {
     border-radius: 5px;
 }
 
 .item-box, .item-box-full-width {
-    margin: 20px 0 0 0;
     padding: 25px;
     background-color: #FFFFFF;
 }
 
 .item-box {
-    width: calc(50% - 60px);
+    width: calc(33% - 50px);
+    display: inline-table;
 }
 
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 1400px) {
     .item-box {
         width: calc(100% - 50px);
     }
@@ -183,6 +191,10 @@ button.green {
     background-color: forestgreen;
 }
 
+button.gray{
+    background-color: #FFF;
+    color: #333;
+}
 
 button,
 input[type="submit"],
@@ -224,6 +236,7 @@ td {
 
 /* Custom title box, appears instantaneously */
 a[data-title]:hover,
+i[data-title]:hover,
 img[data-title]:hover,
 span[data-title]:hover,
 div[data-title]:hover {
@@ -231,6 +244,7 @@ div[data-title]:hover {
 }
 
 a[data-title]:hover:after,
+i[data-title]:hover:after,
 img[data-title]:hover:after,
 span[data-title]:hover:after,
 div[data-title]:hover:after {
@@ -275,3 +289,34 @@ div[data-title]:hover:after {
     display: inline-block;
     vertical-align: middle;
 }
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+::-webkit-scrollbar-track {
+    background: none;
+}
+::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 20px;
+    border-radius: 20px;
+    background: #4CAF50;
+}
+
+@media only screen and (max-width: 1080px) {
+    body {
+        font-size: 28px!important;
+    }
+    button, input, select {
+        font-size: 28px;
+        height: 42px;
+    }
+    textarea {
+        font-size: 28px;
+    }
+    input[type="checkbox"], input[type="radio"] {
+        width: 28px;
+        height: 28px;
+    }
+
+}

website/public/styles/menu.css

@@ -5,7 +5,7 @@
 
     left: 0;
     top: 80px;
-    height: calc(100% - 80px);
+    height: calc(100% - 120px);
     width: 236px;
 
     padding: 20px 10px;
@@ -86,4 +86,18 @@
     height: 100%;
     padding: 0;
     text-align: left;
+}
+
+@media only screen and (max-width: 1080px) {
+    #contact-menu, #notification-center {
+        display: none;
+        background: rgba(0, 0, 0, 0.4);
+        width: calc(50% - 20px);
+    }
+    .content {
+        margin-left: 0;
+    }
+    #quick-links i {
+        font-size: 48px!important;
+    }
 }

website/public/styles/message-page.css

@@ -1,6 +1,9 @@
+body {
+    background-color: #FBC02D;
+}
+
 .password-change {
     height: 100%;
-    background-color: #FBC02D;
     margin: auto;
 }
 
@@ -12,6 +15,14 @@
     margin: 30px auto auto;
     display: block;
 }
-.password-change img {
+.top-logo img {
     width: 50%;
 }
+
+.error-page {
+    text-align: center;
+}
+
+.error-page img {
+    vertical-align: middle;
+}

website/public/styles/mobilefriendly.css

@@ -0,0 +1,47 @@
+/* MAIN */
+body {
+    font-size: 28px!important;
+}
+button {
+    font-size: 28px;
+}
+
+/* HEADER */
+#header-logo {
+    display: none;
+}
+
+/* PROFILE */
+.post-box {
+    width: calc(100% - 65px);
+}
+
+/* MENU */
+#contact-menu, #notification-center {
+    display: none;
+    background: rgba(0, 0, 0, 0.4);
+    width: calc(50% - 20px);
+}
+.content {
+    margin-left: 0;
+}
+#quick-links i {
+    font-size: 48px!important;
+}
+
+/* CHAT */
+.chat-message-self, .chat-message-other {
+    max-width: 75%;
+}
+.chat {
+    left: 0;
+    width: 100%;
+}
+#chat-recent-panel {
+    left: 0;
+    width: 320px;
+}
+#chat-history {
+    left: 50%;
+    width: calc(100% - 390px);
+}

website/public/styles/post-popup.css

@@ -69,4 +69,18 @@
 .commentcontent {
     margin: 5px auto;
     width: 95%;
+}
+
+.nietslecht-text {
+    font-family: Impact, Anton, sans-serif;
+    text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
+}
+
+.nietslecht {
+}
+
+.nietslecht img {
+    vertical-align: middle;
+    height: 24px;
+    width: 24px;
 }

website/public/styles/profile.css

@@ -1,15 +1,60 @@
-.profile-box {
-    min-height: 150px;
-    padding: 25px;
-    background-color: #FFFFFF;
+/* New */
+
+.user-box {
+    text-align: center;
 }
 
-.profile-box .profile-picture, .profile-box .group-picture {
+.status-buttons-container {
+    position: relative;
+    float: left;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container {
+    position: relative;
+    float: right;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container button, .status-buttons-container button {
+    display: block;
+
+    margin: 7px 0;
+    width: 200px;
+
+    font-size: 18px;
+}
+
+.empty-button {
+    background: none;
+    cursor: auto;
+}
+.empty-button:active {
+    box-shadow: none;
+}
+
+.profile-info {
+    display: inline-block;
+
+    min-width: 250px;
+    width: auto;
+    padding-top: 30px;
+}
+
+.main-picture {
+    position: relative;
+    border-width: 5px;
+
+    display: inline-block;
     width: 150px;
     height: 150px;
-    margin: 0 20px 20px 0;
+    margin-bottom: -45px;
 }
 
+/* Old */
+
 .profile-box h1.profile-username {
     padding-top: 50px;
 }
@@ -18,18 +63,17 @@
 }
 
 div.posts {
-    padding-top: 20px;
     width: calc(100% + 20px);
     display: inline-flex;
 }
 
 div.posts div.post {
     display: block;
-    margin: 20px 0 0 0;
     padding: 10px;
     width: calc(100% - 40px);
     cursor: pointer;
     transition-duration: 250ms;
+    word-wrap: break-word;
 }
 
 div.posts div.post:hover {
@@ -59,6 +103,12 @@ div.posts .post form textarea.newpost {
     height: 100px;
 }
 
+.post .post-date {
+    float: right;
+    color: #aaaaaa;
+    font-size: 0.8em;
+}
+
 @media only screen and (max-width: 1500px) {
     .post-box {
         width: calc(50% - 68px);
@@ -66,28 +116,12 @@ div.posts .post form textarea.newpost {
 }
 
 /* mobile */
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1080px) {
     .post-box {
         width: calc(100% - 65px);
     }
+    .modal {
+        left: 0!important;
+        width: 100%!important;
+    }
 }
-
-.post .post-date {
-    float: right;
-    color: #aaaaaa;
-    font-size: 0.8em;
-}
-
-button.friend-button {
-    float: right;
-    height: auto;
-    padding: 10px;
-    margin-left: 10px;
-    border-radius: 5px;
-    transition-duration: 250ms;
-    cursor: pointer;
-}
-
-button.friend-button:hover {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}