Merge pull request #127 from JonnyWong16/miscellaneous-fixes

Miscellaneous fixes

data/interfaces/default/css/plexpy.css

@@ -420,6 +420,11 @@ input[type="color"],
     box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     overflow: hidden;
 }
+a .poster-face:hover {
+    webkit-box-shadow: inset 0 0 0 2px #e9a049;
+    -moz-box-shadow: inset 0 0 0 2px #e9a049;
+    box-shadow: inset 0 0 0 2px #e9a049;
+}
 .cover-face {
     background-position: center;
     background-size: cover;
@@ -431,6 +436,29 @@ 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);
 }
+a .cover-face:hover {
+    webkit-box-shadow: inset 0 0 0 2px #e9a049;
+    -moz-box-shadow: inset 0 0 0 2px #e9a049;
+    box-shadow: inset 0 0 0 2px #e9a049;
+}
+a .users-poster-face:hover {
+    webkit-box-shadow: inset 0 0 0 2px #e9a049;
+    -moz-box-shadow: inset 0 0 0 2px #e9a049;
+    box-shadow: inset 0 0 0 2px #e9a049;
+}
+.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;
@@ -620,11 +648,6 @@ input[type="color"],
 }
 .dashboard-recent-media-instance {
 }
-.dashboard-recent-media-instance a:hover .poster-face {
-    webkit-box-shadow: inset 0 0 0 2px #e9a049;
-    -moz-box-shadow: inset 0 0 0 2px #e9a049;
-    box-shadow: inset 0 0 0 2px #e9a049;
-}
 .dashboard-recent-media li {
     margin-right: 27px;
     position: relative;
@@ -789,14 +812,9 @@ input[type="color"],
     position: relative;
     top: -10px;
     float: left;
-    margin-left: 20px;
+    margin-left: 25px;
-    width: 174px;
+    width: 150px;
-    height: 260px;
+    height: 225px;
-}
-.summary-content-poster a:hover .poster-face {
-    webkit-box-shadow: inset 0 0 0 2px #e9a049;
-    -moz-box-shadow: inset 0 0 0 2px #e9a049;
-    box-shadow: inset 0 0 0 2px #e9a049;
 }
 .summary-content-poster img {
     bottom: 0;
@@ -827,7 +845,6 @@ input[type="color"],
     -ms-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
-    border: 1px solid rgba(128, 128, 128, 0.3);
 }
 .summary-content {
     position: relative;
@@ -1024,7 +1041,7 @@ input[type="color"],
     left: 0px;
     margin-right: 25px;
 }
-.season-episodes-instance a:hover .season-episodes-card-overlay {
+a .season-episodes-card-overlay:hover {
     webkit-box-shadow: inset 0 0 0 2px #e9a049;
     -moz-box-shadow: inset 0 0 0 2px #e9a049;
     box-shadow: inset 0 0 0 2px #e9a049;
@@ -1047,10 +1064,10 @@ input[type="color"],
 .season-episodes-poster-face img {
     bottom: 0;
     overflow: hidden;
-    width: 205px;
+    width: 250px;
-    height: 115px;
+    height: 140px;
 }
-.season-episodes-poster-face    img:hover {
+.season-episodes-poster-face img:hover {
     webkit-box-shadow: 0 0 0 2px #F9AA03;
     -moz-box-shadow: 0 0 0 2px #F9AA03;
     box-shadow: 0 0 0 2px #F9AA03;
@@ -1127,6 +1144,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;
@@ -1245,13 +1272,13 @@ input[type="color"],
 }
 .user-platforms-instance li {
 }
-.user-platforms-instance-poster {
+.user-platforms-instance-box {
     float: left;
     width: 75px;
     border-radius: 3px;
-    -webkit-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 5px rgba(0,0,0,0.5);
+    -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 5px rgba(0,0,0,0.5);
+    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 +1335,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 +1352,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;
@@ -1380,7 +1415,12 @@ input[type="color"],
     webkit-box-sizing: content-box;
     box-sizing: content-box;
 }
-.home-platforms-instance a:hover .poster-face {
+a .home-platforms-instance-oval:hover {
+    webkit-box-shadow: inset 0 0 0 2px #e9a049;
+    -moz-box-shadow: inset 0 0 0 2px #e9a049;
+    box-shadow: inset 0 0 0 2px #e9a049;
+}
+a .home-platforms-instance-box:hover {
     webkit-box-shadow: inset 0 0 0 2px #e9a049;
     -moz-box-shadow: inset 0 0 0 2px #e9a049;
     box-shadow: inset 0 0 0 2px #e9a049;

data/interfaces/default/info_episode_list.html

@@ -32,7 +32,7 @@ DOCUMENTATION :: END
         <li>
             <a href="info?item_id=${a['rating_key']}">
                 <div class="season-episodes-poster">
-                    <div class="season-episodes-poster-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=410&height=230);">
+                    <div class="season-episodes-poster-face" style="background-image: url(pms_image_proxy?img=${a['thumb']}&width=500&height=280);">
                         <div class="season-episodes-card-overlay">
                             <div class="season-episodes-season">
                                 Episode ${a['index']}

data/interfaces/default/js/tables/users.js

@@ -36,15 +36,15 @@ 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('<a href="user?user_id=' + rowData['user_id'] + '"><div class="users-poster-face" style="background-image: url(interfaces/default/images/gravatar-default-80x80.png);"></div></a>');
                 } else {
-                    $(td).html('<img src="' + cellData + '" alt="User Logo"/>');
+                    $(td).html('<a href="user?user_id=' + rowData['user_id'] + '"><div class="users-poster-face" style="background-image: url(' + cellData + ');"></div></a>');
                 }
             },
             "orderable": false,
             "searchable": false,
             "width": "5%",
-            "className": "users-poster-face"
+            "className": "users-thumbs"
         },
         {
             "targets": [2],

data/interfaces/default/settings.html

@@ -83,6 +83,25 @@ available_notification_agents = notifiers.available_notification_agents()
                             </div>
                             <p class="help-block">Set your preferred time format. <a href="javascript:void(0)" data-target="#dateTimeOptionsModal" data-toggle="modal">Click here</a> to see the parameter list.</p>
                         </div>
+                        <div class="padded-header">
+                            <h3>Homepage Statistics</h3>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="home_stats_length">Time Frame</label>
+                            <div class="row">
+                                <div class="col-md-2">
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="home_stats_length" name="home_stats_length" value="${config['home_stats_length']}" size="3" data-parsley-min="0" data-parsley-trigger="change" required>
+                                </div>
+                            </div>
+                            <p class="help-block">Specify the number of days for the statistics on the home page. Default is 30 days.</p>
+                        </div>
+                        <div class="checkbox">
+                            <label>
+                                <input type="checkbox" id="home_stats_type" name="home_stats_type" value="1" ${config['home_stats_type']}> Use play duration
+                            </label>
+                            <p class="help-block">Use play duration instead of play count to generate statistics.</p>
+                        </div>
                         <p><input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully"></p>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-2">
@@ -221,9 +240,24 @@ available_notification_agents = notifiers.available_notification_agents()
                             </label>
                             <p class="help-block">Force PlexPy to connect to your Plex Server via SSL. Your server needs to have remote access enabled.</p>
                         </div>
+                        <div class="padded-header">
+                            <h3>Plex Logs</h3>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="pms_logs_folder">Logs Folder</label>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <input type="text" class="form-control" id="pms_logs_folder" name="pms_logs_folder" value="${config['pms_logs_folder']}" size="30" data-parsley-trigger="change">
+                                </div>
+                            </div>
+                            <p class="help-block">Set the folder where your Plex Server logs are. This is required if you enable IP logging.<br /><a href="https://support.plex.tv/hc/en-us/articles/200250417-Plex-Media-Server-Log-Files" target="_blank">Click here</a> for help.</p>
+                        </div>
+
                         <input type="hidden" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}">
 
                         <input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
+
                     </div>
                     <div role="tabpanel" class="tab-pane" id="tabs-5">
 
@@ -278,41 +312,6 @@ available_notification_agents = notifiers.available_notification_agents()
                             <p class="help-block">If you have media indexing enabled on your server, use these on the activity pane.</p>
                         </div>
 
-                        <div class="padded-header">
-                            <h3>Homepage Statistics</h3>
-                        </div>
-
-                        <div class="form-group">
-                            <label for="home_stats_length">Time Frame</label>
-                            <div class="row">
-                                <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="home_stats_length" name="home_stats_length" value="${config['home_stats_length']}" size="3" data-parsley-min="0" data-parsley-trigger="change" required>
-                                </div>
-                            </div>
-                            <p class="help-block">Specify the number of days for the statistics on the home page. Default is 30 days.</p>
-                        </div>
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" id="home_stats_type" name="home_stats_type" value="1" ${config['home_stats_type']}> Use play duration
-                            </label>
-                            <p class="help-block">Use play duration instead of play count to generate statistics.</p>
-                        </div>
-
-                        <div class="padded-header">
-                            <h3>Plex Logs</h3>
-                        </div>
-
-                        <div class="form-group">
-                            <label for="pms_logs_folder">Logs Folder</label>
-                            <div class="row">
-                                <div class="col-md-6">
-                                    <input type="text" class="form-control" id="pms_logs_folder" name="pms_logs_folder" value="${config['pms_logs_folder']}" size="30" data-parsley-trigger="change">
-                                </div>
-                            </div>
-                            <p class="help-block">Set the folder where your Plex Server logs are. This is required if you enable IP logging.<br/><a href="https://support.plex.tv/hc/en-us/articles/200250417-Plex-Media-Server-Log-Files" target="_blank">Click here</a> for help.</p>
-                        </div>
-
-
                         <div class="padded-header">
                             <h3>PlexWatch Import Tool</h3>
                         </div>

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">
+                    <div class="user-info-poster-face" id="user-gravatar" style="background-image: url(${data['thumb']});">
-                        <img id="user-profile-thumb" src="${data['thumb']}" height="80px" width="80px">
                     </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>

data/interfaces/default/user_platform_stats.html

@@ -34,7 +34,7 @@ DOCUMENTATION :: END
     </div>
 </ul>
 <script>
-    $("#user-platform-image-${a['result_id']}").html("<div class='user-platforms-instance-poster' style='background-image: url(" + getPlatformImagePath('${a['platform_type']}') + ");'>");
+    $("#user-platform-image-${a['result_id']}").html("<div class='user-platforms-instance-box' style='background-image: url(" + getPlatformImagePath('${a['platform_type']}') + ");'>");
 </script>
 % endfor
 % else: