mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-06 05:01:14 -07:00
Quater values for History Watch Status (#2179)
* initial release * change fillup orientation to clockwise * fix indentation for css * fix 50 percent circle orientation * optimize colors and padding
This commit is contained in:
parent
1e4fc05ecf
commit
a31dcb5508
3 changed files with 92 additions and 58 deletions
|
@ -338,20 +338,20 @@ object {
|
||||||
}
|
}
|
||||||
.btn-dark:focus,
|
.btn-dark:focus,
|
||||||
.btn-dark.focus {
|
.btn-dark.focus {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
background-color: #3B3B3B;
|
background-color: #3B3B3B;
|
||||||
}
|
}
|
||||||
.btn-dark:hover {
|
.btn-dark:hover {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
border-color: #444;
|
border-color: #444;
|
||||||
}
|
}
|
||||||
.btn-dark:active,
|
.btn-dark:active,
|
||||||
.btn-dark.active,
|
.btn-dark.active,
|
||||||
.open > .dropdown-toggle.btn-dark {
|
.open > .dropdown-toggle.btn-dark {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
border-color: #444;
|
border-color: #444;
|
||||||
}
|
}
|
||||||
.btn-dark:active:hover,
|
.btn-dark:active:hover,
|
||||||
.btn-dark.active:hover,
|
.btn-dark.active:hover,
|
||||||
|
@ -362,13 +362,13 @@ object {
|
||||||
.btn-dark:active.focus,
|
.btn-dark:active.focus,
|
||||||
.btn-dark.active.focus,
|
.btn-dark.active.focus,
|
||||||
.open > .dropdown-toggle.btn-dark.focus {
|
.open > .dropdown-toggle.btn-dark.focus {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
}
|
}
|
||||||
.btn-dark:active,
|
.btn-dark:active,
|
||||||
.btn-dark.active,
|
.btn-dark.active,
|
||||||
.open > .dropdown-toggle.btn-dark {
|
.open > .dropdown-toggle.btn-dark {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
.btn-dark.disabled,
|
.btn-dark.disabled,
|
||||||
.btn-dark[disabled],
|
.btn-dark[disabled],
|
||||||
|
@ -388,8 +388,8 @@ fieldset[disabled] .btn-dark:active,
|
||||||
.btn-dark.disabled.active,
|
.btn-dark.disabled.active,
|
||||||
.btn-dark[disabled].active,
|
.btn-dark[disabled].active,
|
||||||
fieldset[disabled] .btn-dark.active {
|
fieldset[disabled] .btn-dark.active {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
.btn-dark.inactive:hover {
|
.btn-dark.inactive:hover {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
|
@ -398,30 +398,30 @@ fieldset[disabled] .btn-dark.active {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.btn-dark .badge {
|
.btn-dark .badge {
|
||||||
color: #e5e5e5;
|
color: #e5e5e5;
|
||||||
background-color: #3B3B3B;
|
background-color: #3B3B3B;
|
||||||
}
|
}
|
||||||
.btn-bright {
|
.btn-bright {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #cc7b19;
|
background-color: #cc7b19;
|
||||||
box-shadow: inset 0 1px 0 #e7993b;
|
box-shadow: inset 0 1px 0 #e7993b;
|
||||||
}
|
}
|
||||||
.btn-bright:focus,
|
.btn-bright:focus,
|
||||||
.btn-bright.focus {
|
.btn-bright.focus {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #eb8600;
|
background-color: #eb8600;
|
||||||
}
|
}
|
||||||
.btn-bright:hover {
|
.btn-bright:hover {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #e59029;
|
background-color: #e59029;
|
||||||
box-shadow: inset 0 1px 0 #ebac60;
|
box-shadow: inset 0 1px 0 #ebac60;
|
||||||
}
|
}
|
||||||
.btn-bright:active,
|
.btn-bright:active,
|
||||||
.btn-bright.active,
|
.btn-bright.active,
|
||||||
.open > .dropdown-toggle.btn-bright {
|
.open > .dropdown-toggle.btn-bright {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #cc7b19;
|
background-color: #cc7b19;
|
||||||
box-shadow: inset 0 1px 0 #e7993b;
|
box-shadow: inset 0 1px 0 #e7993b;
|
||||||
}
|
}
|
||||||
.btn-bright:active:hover,
|
.btn-bright:active:hover,
|
||||||
.btn-bright.active:hover,
|
.btn-bright.active:hover,
|
||||||
|
@ -432,14 +432,14 @@ fieldset[disabled] .btn-dark.active {
|
||||||
.btn-bright:active.focus,
|
.btn-bright:active.focus,
|
||||||
.btn-bright.active.focus,
|
.btn-bright.active.focus,
|
||||||
.open > .dropdown-toggle.btn-bright.focus {
|
.open > .dropdown-toggle.btn-bright.focus {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #cc7b19;
|
background-color: #cc7b19;
|
||||||
box-shadow: inset 0 1px 0 #e7993b;
|
box-shadow: inset 0 1px 0 #e7993b;
|
||||||
}
|
}
|
||||||
.btn-bright:active,
|
.btn-bright:active,
|
||||||
.btn-bright.active,
|
.btn-bright.active,
|
||||||
.open > .dropdown-toggle.btn-bright {
|
.open > .dropdown-toggle.btn-bright {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
.btn-bright.disabled,
|
.btn-bright.disabled,
|
||||||
.btn-bright[disabled],
|
.btn-bright[disabled],
|
||||||
|
@ -459,13 +459,13 @@ fieldset[disabled] .btn-bright:active,
|
||||||
.btn-bright.disabled.active,
|
.btn-bright.disabled.active,
|
||||||
.btn-bright[disabled].active,
|
.btn-bright[disabled].active,
|
||||||
fieldset[disabled] .btn-bright.active {
|
fieldset[disabled] .btn-bright.active {
|
||||||
background-color: #cc7b19;
|
background-color: #cc7b19;
|
||||||
border-color: #b56d16;
|
border-color: #b56d16;
|
||||||
}
|
}
|
||||||
.btn-bright .badge {
|
.btn-bright .badge {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #cc7b19;
|
background-color: #cc7b19;
|
||||||
box-shadow: inset 0 1px 0 #e7993b;
|
box-shadow: inset 0 1px 0 #e7993b;
|
||||||
}
|
}
|
||||||
.btn-danger.btn-edit {
|
.btn-danger.btn-edit {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
|
@ -479,14 +479,14 @@ fieldset[disabled] .btn-bright.active {
|
||||||
border-color: #ac2925;
|
border-color: #ac2925;
|
||||||
}
|
}
|
||||||
.btn-danger.btn-edit.active {
|
.btn-danger.btn-edit.active {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #c9302c;
|
background-color: #c9302c;
|
||||||
border-color: #ac2925;
|
border-color: #ac2925;
|
||||||
}
|
}
|
||||||
.btn-danger.btn-edit.active:hover {
|
.btn-danger.btn-edit.active:hover {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #ac2925;
|
background-color: #ac2925;
|
||||||
border-color: #761c19;
|
border-color: #761c19;
|
||||||
}
|
}
|
||||||
.btn-group select {
|
.btn-group select {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
@ -667,12 +667,12 @@ textarea.form-control:focus {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
-ms-touch-action: manipulation;
|
-ms-touch-action: manipulation;
|
||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: #3B3B3B;
|
background-color: #3B3B3B;
|
||||||
color: #e5e5e5;
|
color: #e5e5e5;
|
||||||
|
@ -690,10 +690,10 @@ textarea.form-control:focus {
|
||||||
}
|
}
|
||||||
.btn-filter.active,
|
.btn-filter.active,
|
||||||
.btn-filter.active.focus {
|
.btn-filter.active.focus {
|
||||||
background-color: #b7800a !important;
|
background-color: #b7800a !important;
|
||||||
}
|
}
|
||||||
.btn-filter.active:hover {
|
.btn-filter.active:hover {
|
||||||
background-color: #896007 !important;
|
background-color: #896007 !important;
|
||||||
}
|
}
|
||||||
.form-control-feedback {
|
.form-control-feedback {
|
||||||
color: #E5A00D;
|
color: #E5A00D;
|
||||||
|
@ -1281,7 +1281,7 @@ a .dashboard-activity-metadata-user-thumb:hover {
|
||||||
-webkit-backface-visibility: hidden;
|
-webkit-backface-visibility: hidden;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
-webkit-border-radius: 50%;
|
-webkit-border-radius: 50%;
|
||||||
-moz-border-radius: 50%;
|
-moz-border-radius: 50%;
|
||||||
border-radius: 350%;
|
border-radius: 350%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -2203,8 +2203,8 @@ span.settings-warning {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
#menu_link_show_advanced_settings.active {
|
#menu_link_show_advanced_settings.active {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
background-color: #cc7b19;
|
background-color: #cc7b19;
|
||||||
}
|
}
|
||||||
#configUpdate .form-group,
|
#configUpdate .form-group,
|
||||||
#configUpdate .checkbox{
|
#configUpdate .checkbox{
|
||||||
|
@ -2854,6 +2854,30 @@ a .home-platforms-list-cover-face:hover
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
}
|
}
|
||||||
|
.circle {
|
||||||
|
width: 1.55rem;
|
||||||
|
height: 1.55rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.2rem solid #eeeeee;
|
||||||
|
}
|
||||||
|
.circle-quarter {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(00deg, #2b2b2b 50%, transparent 50%),
|
||||||
|
linear-gradient(270deg, #eeeeee 50%, transparent 50%);
|
||||||
|
}
|
||||||
|
.circle-half {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, #2b2b2b 50%, transparent 50%),
|
||||||
|
linear-gradient(-90deg, #eeeeee 50%, transparent 50%);
|
||||||
|
}
|
||||||
|
.circle-three-quarter {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(180deg, transparent 50%, #eeeeee 50%),
|
||||||
|
linear-gradient(-90deg, #eeeeee 50%, transparent 50%);
|
||||||
|
}
|
||||||
|
.circle-full {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
#graph-tabs {
|
#graph-tabs {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
float: none;
|
float: none;
|
||||||
|
@ -2991,8 +3015,8 @@ a .home-platforms-list-cover-face:hover
|
||||||
border-left: 2px solid #444;
|
border-left: 2px solid #444;
|
||||||
border-top: 1px solid #2d2d2d;
|
border-top: 1px solid #2d2d2d;
|
||||||
-webkit-transition: all 0.3s ease;
|
-webkit-transition: all 0.3s ease;
|
||||||
-o-transition: all 0.3s ease;
|
-o-transition: all 0.3s ease;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
.stacked-configs > li > span:hover,
|
.stacked-configs > li > span:hover,
|
||||||
.stacked-configs > li > span:focus {
|
.stacked-configs > li > span:focus {
|
||||||
|
|
|
@ -263,13 +263,17 @@ history_table_options = {
|
||||||
"targets": [12],
|
"targets": [12],
|
||||||
"data": "watched_status",
|
"data": "watched_status",
|
||||||
"createdCell": function (td, cellData, rowData, row, col) {
|
"createdCell": function (td, cellData, rowData, row, col) {
|
||||||
|
var circleValue = "";
|
||||||
if (cellData == 1) {
|
if (cellData == 1) {
|
||||||
$(td).html('<span class="watched-tooltip" data-toggle="tooltip" title="' + rowData['percent_complete'] + '%"><i class="fa fa-lg fa-circle"></i></span>');
|
circleValue = " circle-full";
|
||||||
|
} else if (cellData == 0.75) {
|
||||||
|
circleValue = " circle-three-quarter";
|
||||||
} else if (cellData == 0.5) {
|
} else if (cellData == 0.5) {
|
||||||
$(td).html('<span class="watched-tooltip" data-toggle="tooltip" title="' + rowData['percent_complete'] + '%"><i class="fa fa-lg fa-adjust fa-rotate-180"></i></span>');
|
circleValue = " circle-half";
|
||||||
} else {
|
} else if (cellData == 0.25) {
|
||||||
$(td).html('<span class="watched-tooltip" data-toggle="tooltip" title="' + rowData['percent_complete'] + '%"><i class="fa fa-lg fa-circle-o"></i></span>');
|
circleValue = " circle-quarter";
|
||||||
}
|
}
|
||||||
|
$(td).html('<span class="watched-tooltip" data-toggle="tooltip" title="' + rowData['percent_complete'] + '%"><div class="circle' + circleValue + '" /></span>');
|
||||||
},
|
},
|
||||||
"searchable": false,
|
"searchable": false,
|
||||||
"orderable": false,
|
"orderable": false,
|
||||||
|
|
|
@ -281,13 +281,19 @@ class DataFactory(object):
|
||||||
if item['live']:
|
if item['live']:
|
||||||
item['percent_complete'] = 100
|
item['percent_complete'] = 100
|
||||||
|
|
||||||
|
base_watched_value = watched_percent[item['media_type']] / 4.0
|
||||||
|
|
||||||
if helpers.check_watched(
|
if helpers.check_watched(
|
||||||
item['media_type'], item['view_offset'], item['duration'],
|
item['media_type'], item['view_offset'], item['duration'],
|
||||||
item['marker_credits_first'], item['marker_credits_final']
|
item['marker_credits_first'], item['marker_credits_final']
|
||||||
):
|
):
|
||||||
watched_status = 1
|
watched_status = 1
|
||||||
elif item['percent_complete'] >= watched_percent[item['media_type']] / 2.0:
|
elif item['percent_complete'] >= base_watched_value * 3.0:
|
||||||
watched_status = 0.5
|
watched_status = 0.75
|
||||||
|
elif item['percent_complete'] >= base_watched_value * 2.0:
|
||||||
|
watched_status = 0.50
|
||||||
|
elif item['percent_complete'] >= base_watched_value:
|
||||||
|
watched_status = 0.25
|
||||||
else:
|
else:
|
||||||
watched_status = 0
|
watched_status = 0
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue