From 79757da2b1e0ee065a19fe226e965c2e95490b41 Mon Sep 17 00:00:00 2001
From: Jonathan Wong <Jonny.Wong.16@gmail.com>
Date: Sun, 23 Aug 2015 23:25:55 -0700
Subject: [PATCH] Update user images

---
 data/interfaces/default/css/plexpy.css     | 37 ++++++++++++++++++++--
 data/interfaces/default/js/tables/users.js |  5 ++-
 data/interfaces/default/user.html          |  3 +-
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 9f1fc18a..0957937f 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -431,6 +431,19 @@ input[type="color"],
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
 }
+.users-poster-face {
+    overflow: hidden;
+    float: left;
+    background-size: contain;
+    height: 40px;
+    width: 40px;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+}
 .users-poster-face img {
     bottom: 0;
     overflow: hidden;
@@ -1127,6 +1140,16 @@ input[type="color"],
 .user-info-poster-face {
     float: left;
     margin-top: 15px;
+    margin-right: 15px;
+    background-size: contain;
+    height: 80px;
+    width: 80px;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
 }
 .user-info-poster-face img {
     bottom: 0;
@@ -1249,9 +1272,9 @@ input[type="color"],
     float: left;
     width: 75px;
     border-radius: 3px;
-    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-    box-shadow: 0 0 5px rgba(0,0,0,0.5);
+    webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     background-size: contain;
     position: relative;
     height: 80px;
@@ -1308,7 +1331,12 @@ input[type="color"],
     bottom: 35px;
     height: 80px;
     width: 80px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
     border-radius: 3px;
+    webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
 }
 .home-platforms-instance-oval {
     background-size: contain;
@@ -1320,6 +1348,9 @@ input[type="color"],
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
+    webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
 }
 .home-platforms-instance-name {
     float: left;
diff --git a/data/interfaces/default/js/tables/users.js b/data/interfaces/default/js/tables/users.js
index b3f54778..b2974cff 100644
--- a/data/interfaces/default/js/tables/users.js
+++ b/data/interfaces/default/js/tables/users.js
@@ -36,15 +36,14 @@ users_list_table_options = {
             "data": "user_thumb",
             "createdCell": function (td, cellData, rowData, row, col) {
                 if (cellData === '') {
-                    $(td).html('<img src="interfaces/default/images/gravatar-default-80x80.png" alt="User Logo"/>');
+                    $(td).html('<div class="users-poster-face" style="background-image: url(interfaces/default/images/gravatar-default-80x80.png);"></div>');
                 } else {
-                    $(td).html('<img src="' + cellData + '" alt="User Logo"/>');
+                    $(td).html('<div class="users-poster-face" style="background-image: url(' + cellData + ');"></div>');
                 }
             },
             "orderable": false,
             "searchable": false,
             "width": "5%",
-            "className": "users-poster-face"
         },
         {
             "targets": [2],
diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html
index 4727be64..0572aa08 100644
--- a/data/interfaces/default/user.html
+++ b/data/interfaces/default/user.html
@@ -40,8 +40,7 @@ from plexpy import helpers
         <div class="col-md-12">
             <div class="table-card-back">
                 <div class="user-info-wrapper">
-                    <div class="user-info-poster-face" id="user-gravatar">
-                        <img id="user-profile-thumb" src="${data['thumb']}" height="80px" width="80px">
+                    <div class="user-info-poster-face" id="user-gravatar" style="background-image: url(${data['thumb']});">
                     </div>
                     <div class="user-info-username">
                         <span class="set-username">${data['friendly_name']}</span> <span id="edit-user-tooltip" data-target="tooltip" title="Edit user details"><a href="#" data-toggle="modal" data-target="#edit-user-modal" id="toggle-edit-user-modal"><i class="fa fa-pencil"></i></a></span>