diff --git a/www/assets/css/darkstrap.css b/www/assets/css/darkstrap.css index bd8b308c..849228b9 100644 --- a/www/assets/css/darkstrap.css +++ b/www/assets/css/darkstrap.css @@ -1013,3 +1013,7 @@ li.alert-error.alert-info { .userlist_owner { color: #ff9900; } + +.profile-box { + background-color: #2f2f2f; +} diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css index b484d6a4..71daefda 100644 --- a/www/assets/css/ytsync.css +++ b/www/assets/css/ytsync.css @@ -224,3 +224,20 @@ html, body { .timestamp { font-size: 8pt; } + +.profile-box { + z-index: 9999; + position: absolute; + border: 1px solid #aaaaaa; + border-radius: 5px; + background-color: #ffffff; + max-width: 200px; + padding: 5px; +} + +.profile-image { + width: 80px; + height: 80px; + border: 1px solid #aaaaaa; + border-radius: 5px; +} diff --git a/www/assets/js/client.js b/www/assets/js/client.js index b497e466..dbd0a7b7 100644 --- a/www/assets/js/client.js +++ b/www/assets/js/client.js @@ -34,6 +34,10 @@ var CHANNEL = ""; var CUSTOMJS = ""; var uname = readCookie("sync_uname"); var session = readCookie("sync_session"); +var PROFILE = { + image: "", + bio: "" +}; function parseBool(x) { if(typeof x == "boolean") diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js index 53038ba0..f961b5c9 100644 --- a/www/assets/js/functions.js +++ b/www/assets/js/functions.js @@ -16,6 +16,26 @@ function formatUserlistItem(div, data) { $(name).css("font-style", ""); $(name).addClass(getNameColor(data.rank)); + var profile; + $(name).mouseenter(function(ev) { + profile = $("
") + .addClass("profile-box") + .css("top", (ev.pageY + 5) + "px") + .css("left", ev.pageX + "px") + .appendTo($("body")); + $("").addClass("profile-image") + .attr("src", "http://i.imgur.com/P8MIHkc.jpg") + .appendTo(profile); + $("").text("I'm calzoneman, the developer of this site. Feel free to contact me with queries, comments, or praise about the site.").appendTo(profile); + }); + $(name).mousemove(function(ev) { + profile.css("top", (ev.pageY + 5) + "px") + .css("left", ev.pageX + "px") + }); + $(name).mouseleave(function() { + profile.remove(); + }); + var flair = div.children[0]; flair.innerHTML = ""; // denote current leader with a star @@ -143,6 +163,7 @@ function addUserDropdown(entry, name) { ul.css("display", "none"); } }); + return ul; } @@ -829,6 +850,7 @@ function showUserOpts() { var warn = $("").addClass("text-error") .text("Changing layouts may require a refresh") addOption("", warn); + $("