Menu, netjes, notification

website/public/API/loadChatNotifications.php

@@ -0,0 +1,8 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/friendship.php");
+
+echo selectAllUnreadChat();

website/public/js/header.js

@@ -13,14 +13,14 @@ $(document).ready(function() {
                 marginRight: "256px"
             }, 500);
             $(".chat-right").animate({
-                width: "100%"
+                width: "calc(100% - 512px - 40px)"
             }, 500);
             $("#notification-center").animate({
                 right: "0px"
             }, 500);
         } else {
             $(".chat-right").animate({
-                width: "100%"
+                width: "calc(100% - 256px - 40px)"
             }, 500);
             $(".content").animate({
                 marginRight: "0px"
@@ -30,4 +30,6 @@ $(document).ready(function() {
             }, 500);
         }
     });
+
+    $("#own-profile-picture").click();
 });

website/public/js/notifications.js

@@ -1,7 +1,7 @@
 function showNotifications(notifications, id) {
-    $("#friendrequestslist").html("");
+    $("#" + id).html("");
     for (i in notifications) {
-        $("#friendrequestslist").append(" \
+        $("#" + id).append(" \
             <li class='friend-item $extraItem'> \
                 <form action='profile.php' method='get'> \
                     <button type='submit' \
@@ -20,15 +20,25 @@ function showNotifications(notifications, id) {
 
 function loadNotifications() {
     $.post(
-        "API/loadNotifications.php"
+        "API/loadFriendRequestNotifications.php"
     ).done(function(data) {
         if (data && data != "[]") {
             showNotifications(JSON.parse(data), "friendrequestslist");
         }
     });
+    $.post(
+        "API/loadChatNotifications.php"
+    ).done(function(data) {
+        if (data && data != "[]") {
+            showNotifications(JSON.parse(data), "unreadChatlist");
+        }
+    });
 
     setTimeout(loadNotifications, 10000);
 }
+$(document).ready(function() {
+    loadNotifications();
+});
+
 
-loadNotifications();
 

website/public/styles/footer.css

@@ -1,6 +1,5 @@
 footer {
-    width: calc(100% - 256px);
-    margin-left: 256px;
+    width: 100%;
 
     background-color: rgba(0,0,0,0.4);
 }

website/public/styles/main.css

@@ -166,6 +166,7 @@ textarea {
 
 textarea:hover, input:hover, select:hover {
     border-radius: 10px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
 }
 
 textarea:focus, input:focus, select:focus {

website/public/styles/menu.css

@@ -6,15 +6,15 @@
     left: 0;
     top: 80px;
     height: calc(100% - 80px);
-    width: 256px;
+    width: 236px;
 
-    background-color: #EEE;
-    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
+    padding: 20px 10px;
 }
 
 .menu section {
-    margin: 0 5px 10px 5px;
-    background-color: white;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    background-color: #FFFFFF;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
@@ -24,6 +24,7 @@
 
 .nav-list li {
     padding: 5px 20px;
+    border-radius: 4px;
 }
 
 .more-item {
@@ -40,7 +41,7 @@
 
 .friend-item:hover, .group-item:hover {
     background: #FBC02D;
-    color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .menu button {
@@ -54,7 +55,7 @@
 
 #notification-center {
     left: auto;
-    width: 256px;
+    width: 236px;
     right: -256px;
 }
 
@@ -67,4 +68,9 @@
     color: #4CAF50;
     font-size: 42px;
     padding: 7px;
+    transition-duration: 250ms;
+}
+
+#quick-links i:hover {
+    color: #FBC02D;
 }

website/public/styles/profile.css

@@ -33,9 +33,6 @@ div.posts div.post {
 }
 
 div.posts div.post:hover {
-    /*margin: 15px 0 0 -5px;*/
-    /*padding: 15px;*/
-    /*z-index: 20;*/
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }