Mobile friendly

website/public/js/admin.js

@@ -60,7 +60,6 @@ function adminSearch() {
         "API/adminSearchUsers.php",
         $("#admin-searchform").serialize()
     ).done(function (data) {
-        console.log(data);
         $("#usertable").html(data);
     })
 }

website/public/js/friendButtons.js

@@ -48,9 +48,6 @@ function placeFriendButtons() {
                         text2 = "Weiger";
                         icon2 = "fa-times";
                         break;
-                    default:
-                        console.log(friendshipStatus);
-                        break;
                 }
 
                 $buttonContainer.append(

website/public/js/header.js

@@ -1,24 +1,36 @@
 $(document).ready(function() {
     // Toggle menu
     $("#own-profile-picture, #open-notifications").click(function() {
-        if ($("#notification-center").css('right') == "-256px") {
+            if ($("#notification-center").css('display') == "none") {
                 // Make the menu visible and move the content to the left.
-            $("#chat-history").width("calc(100% - 587px)");
                 $(".modal").width("calc(100% - 512px)");
                 $(".content").css("margin-right", "256px");
                 $("#notification-center").css("right", "0px");
+                $("#notification-center").css("display", "block");
+                $("#contact-menu").css("display", "block");
 
                 // Add cookie so the menu stays open on other pages
+                if (window.innerWidth > 1080) {
+                    $("#chat-history").width("calc(100% - 587px)");
                     document.cookie = "menu=open; path=/";
                 } else {
-            // Make the menu invisible and move the content to the right.
-            $("#chat-history").width("calc(100% - 331px)");
+                    document.cookie = "menu=closed; path=/";
+                }
+            } else {
                 $(".modal").width("calc(100% - 256px)");
                 $(".content").css("margin-right", "0px");
-            $("#notification-center").css("right", "-256px");
+                $("#notification-center").css("display", "none");
+
+                if (window.innerWidth > 1080) {
+                    $("#chat-history").width("calc(100% - 331px)");
+                } else {
+                    // Make the menu invisible and move the content to the right.
+                    $("#contact-menu").css("display", "none");
+                }
 
                 // Change menu cookie to close
                 document.cookie = "menu=closed; path=/";
+
             }
     });
 

website/public/styles/chat.css

@@ -146,8 +146,20 @@ body {
     text-align: right;
 }
 
-@media only screen and (max-width: 1200px) {
+@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;
 }
 
 
@@ -50,3 +51,9 @@ header div {
 #open-notifications {
     padding: 5px 20px 5px 0px;
 }
+
+@media only screen and (max-width: 1080px) {
+    #header-logo {
+        display: none;
+    }
+}

website/public/styles/main.css

@@ -294,3 +294,13 @@ div[data-title]:hover:after {
     border-radius: 20px;
     background: #4CAF50;
 }
+
+@media only screen and (max-width: 1080px) {
+    body {
+        font-size: 28px!important;
+    }
+    button {
+        font-size: 28px;
+    }
+
+}

website/public/styles/menu.css

@@ -87,3 +87,17 @@
     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/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/profile.css

@@ -116,7 +116,7 @@ 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);
     }

website/views/head.php

@@ -12,6 +12,8 @@
     @import url("styles/header.css");
     @import url("styles/menu.css");
     @import url("styles/footer.css");
+
+    @import url("styles/mobilefriendly.css") screen and (orientation: portrait);
 </style>
 <?php
 

website/views/menu.php

@@ -1,4 +1,4 @@
-<nav class="menu">
+<nav class="menu" id="contact-menu">
     <section id="friends-menu-section">
         <h4>
             Recente vrienden