From 89c8c35b4a99c2ef70a16e29b7941a88286e429f Mon Sep 17 00:00:00 2001 From: Lars van Hijfte Date: Sun, 29 Jan 2017 17:24:39 +0100 Subject: [PATCH 1/7] Changed profile look a bit more --- website/public/js/friendButtons.js | 83 ++++++++++++++++++++++------- website/public/styles/main.css | 9 +++- website/public/styles/profile.css | 84 +++++++++++++++++++++--------- website/queries/user.php | 1 + website/views/head.php | 1 - website/views/menu.php | 7 +++ website/views/profile.php | 51 +++++++++++------- 7 files changed, 171 insertions(+), 65 deletions(-) diff --git a/website/public/js/friendButtons.js b/website/public/js/friendButtons.js index bdc3cc8..febc636 100644 --- a/website/public/js/friendButtons.js +++ b/website/public/js/friendButtons.js @@ -1,26 +1,73 @@ function placeFriendButtons() { $.post("API/getFriendshipStatus.php", { usr: userID }) .done(function(data) { - friendshipStatus = data; - $buttonContainer = $("div.friend-button-container"); - $buttonContainer.children().remove(); - $("#start-profile-chat-form").hide(); - if (friendshipStatus == -1) { - return; - } else if(friendshipStatus == 0) { - $buttonContainer.append($("")); - } else if(friendshipStatus == 1) { - $buttonContainer.append($("")); - $("#start-profile-chat-form").show(); - } else if(friendshipStatus == 2) { - $buttonContainer.append($("")); - } else if(friendshipStatus == 3) { - $buttonContainer.append($("")); - $buttonContainer.append($("")); - } + var friendshipStatus = data; + var $buttonContainer = $("div.friend-button-container"); + $("#start-profile-chat").hide(); + $buttonContainer.html(""); + var value1 = ""; + var class1 = "empty-button"; + var icon1 = ""; + var text1 = ""; + + var value2 = ""; + var class2 = "empty-button"; + var icon2 = ""; + var text2 = ""; + + switch (friendshipStatus) { + case "0": + value1 = "request"; + class1 = "green"; + text1 = "Bevriend"; + icon1 = "fa-handshake-o"; + break; + case "1": + value1 = "delete"; + class1 = "red"; + text1 = "Verwijder"; + icon1 = "fa-times"; + value2 = userID; + class2 = "green"; + text2 = "Chat"; + icon2 = "fa-comment-o"; + break; + case "2": + value1 = "delete"; + class1 = "red"; + text1 = "Trek verzoek in"; + icon1 = "fa-cross"; + break; + case "3": + value1 = "delete"; + class1 = "red"; + text1 = "Weiger"; + icon1 = "fa-times"; + value2 = "accept"; + class2 = "green"; + text2 = "Accepteer"; + icon2 = "fa-check"; + break; + default: + console.log(friendshipStatus); + break; + } + + $buttonContainer.append( + ""); + $buttonContainer.append( + ""); + $buttonContainer.children().click(function() { - editFriendship(userID, this.value); + if (isNaN(this.value)) + editFriendship(userID, this.value); + else if (this.value != "") + window.location.href = "chat.php?username=" + this.value; }); }); } \ No newline at end of file diff --git a/website/public/styles/main.css b/website/public/styles/main.css index 0c37afa..be2f4f7 100644 --- a/website/public/styles/main.css +++ b/website/public/styles/main.css @@ -103,10 +103,11 @@ p { } .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 +184,10 @@ button.green { background-color: forestgreen; } +button.gray{ + background-color: #FFF; + color: #333; +} button, input[type="submit"], diff --git a/website/public/styles/profile.css b/website/public/styles/profile.css index becbeca..a85f683 100644 --- a/website/public/styles/profile.css +++ b/website/public/styles/profile.css @@ -1,15 +1,61 @@ -.profile-box { - min-height: 150px; - padding: 25px; - background-color: #FFFFFF; +/* New */ + +.user-box { + text-align: center; + margin-bottom: 50px; } -.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: #4CAF50 solid 5px; + + display: inline-block; width: 150px; height: 150px; - margin: 0 20px 20px 0; + margin-bottom: -25px; } +/* Old */ + .profile-box h1.profile-username { padding-top: 50px; } @@ -60,6 +106,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); @@ -72,23 +124,3 @@ div.posts .post form textarea.newpost { width: calc(100% - 65px); } } - -.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); -} \ No newline at end of file diff --git a/website/queries/user.php b/website/queries/user.php index 1d075ef..e9a3be5 100644 --- a/website/queries/user.php +++ b/website/queries/user.php @@ -46,6 +46,7 @@ function selectUser($me, $other) { `bio`, `user`.`creationdate`, `onlinestatus`, + `role`, `fname`, `lname`, CASE `status` IS NULL diff --git a/website/views/head.php b/website/views/head.php index b6c2f21..eb86d56 100644 --- a/website/views/head.php +++ b/website/views/head.php @@ -5,7 +5,6 @@ - "; + } + ?> +

From 44ff3a4cabc81a06fe6ab49b29fc40d1a24bea64 Mon Sep 17 00:00:00 2001 From: Lars van Hijfte Date: Mon, 30 Jan 2017 15:08:07 +0100 Subject: [PATCH 6/7] added time to chat messages --- website/public/js/chat.js | 56 ++++++++++++++++++++++------------ website/public/styles/chat.css | 10 ++++++ 2 files changed, 47 insertions(+), 19 deletions(-) diff --git a/website/public/js/chat.js b/website/public/js/chat.js index 5566d15..014d723 100644 --- a/website/public/js/chat.js +++ b/website/public/js/chat.js @@ -1,6 +1,7 @@ var previousDate = new Date("1970-01-01 00:00:00"); +var previousTime = "00:00"; var gettingMessages = false; - +var previousType = "robot"; $(document).ready(function() { setInterval(loadMessages, 1000); @@ -39,34 +40,51 @@ function sendMessage() { } function addMessages(messages) { + var messagesText = ""; for(var i in messages) { - thisDate = new Date(messages[i].creationdate); + // Initialize message variables + var thisDate = new Date(messages[i].creationdate); + var thisTime = thisDate.getHours() + ":" + thisDate.getMinutes(); + var type; thisDate.setHours(0,0,0,0); + if (messages[i].destination == $(".destinationID").val()) { type = "chat-message-self"; } else { type = "chat-message-other"; } - if (thisDate > previousDate) { + if (i == 0) { + messagesText += '
'; + } else if (type != previousType || thisTime != previousTime || thisDate > previousDate) { + messagesText += '
\ + ' + thisTime + '\ +
'; + previousDate = thisDate; - $("#chat-history").append('\ -
\ -
\ - ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\ -
\ -
\ - '); + previousTime = thisTime; + previousType = type; + if (thisDate > previousDate) { + messagesText += '\ +
\ +
\ + ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\ +
\ +
'; + } + + messagesText += '
'; } - $("#chat-history").append('\ -
\ -
\ - ' + fancyText(messages[i].content) + '\ -
\ -
\ - '); + messagesText += fancyText(messages[i].content) + "
"; } - $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight); + // Close the last message + messagesText += '
\ + ' + thisTime + '\ +
'; + + $("#chat-history").append(messagesText); + + $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight - $('#chat-history')[0].clientHeight); } function switchUser(userID) { @@ -80,5 +98,5 @@ function switchUser(userID) { } function sayEmpty() { - $("#chat-history").html("Begin nu met chatten!"); + $("#chat-history").html("Probeer ook eens foto's en video's te sturen"); } \ No newline at end of file diff --git a/website/public/styles/chat.css b/website/public/styles/chat.css index 75a4a6d..47b0639 100644 --- a/website/public/styles/chat.css +++ b/website/public/styles/chat.css @@ -134,4 +134,14 @@ body { .chat-message a { text-decoration: underline; +} + +.chat-time { + color: #666666; + font-size: 12px; + margin-bottom: -3px; +} + +.chat-message-other .chat-time { + text-align: right; } \ No newline at end of file From b0a8ceafc35c10d3fc23ef6f071ac7a34e919fce Mon Sep 17 00:00:00 2001 From: Lars van Hijfte Date: Mon, 30 Jan 2017 15:40:31 +0100 Subject: [PATCH 7/7] Added youtube links --- website/public/js/main.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/website/public/js/main.js b/website/public/js/main.js index 07a0cb8..d23bbbf 100644 --- a/website/public/js/main.js +++ b/website/public/js/main.js @@ -2,22 +2,35 @@ var days = ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", var months = ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"] function fancyText(text) { - // Add images and gifs. + // Add links, images, gifs and (youtube) video's. var regex = /(https?:\/\/.[^ ]*)/ig; text = text.replace(regex, function(link) { + // Add images if (link.match(/(https?:\/\/.[^ ]*\.(?:png|jpg|jpeg|gif))/ig)) { return "" + link + ""; - } else if (link.match(/(https?:\/\/.[^ ]*\.(?:mp4))/ig)) { + } + // Add mp4 video's + else if (link.match(/(https?:\/\/.[^ ]*\.(?:mp4))/ig)) { return ""; - } else if (link.match(/(https?:\/\/.[^ ]*\.(?:ogg))/ig)) { + ""; + } + // Add ogg video's + else if (link.match(/(https?:\/\/.[^ ]*\.(?:ogg))/ig)) { return ""; - } else { + } + // Add youtube video's + else if (link.match(/(https?:\/\/.(www.)?youtube|youtu.be)*watch/ig)) { + return ''; + } + // Add links + else { return "" + link + ""; } });