github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-10 15:32:38 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Flexbox activity card metadata

Browse source
This commit is contained in:
JonnyWong16 2017-11-05 13:28:10 -08:00
parent 1bd2f332d9
commit d77696be59
2 changed files with 292 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

64
data/interfaces/default/css/plexpy.css
View file

@ -762,9 +762,17 @@ a .users-poster-face:hover {
.dashboard-activity-terminate-session:hover { .dashboard-activity-terminate-session:hover {
color: #e9a049; color: #e9a049;
} }
.dashboard-activity-info-container {
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 225px;
width: 385px;
overflow: hidden;
}
.dashboard-activity-info-scroller { .dashboard-activity-info-scroller {
height: 225px; height: 225px;
width: 335px; width: 100%;
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
z-index: 1; z-index: 1;
@ -807,7 +815,8 @@ a .users-poster-face:hover {
text-align: right; text-align: right;
text-transform: uppercase; text-transform: uppercase;
line-height: 14px; line-height: 14px;
float: left; -webkit-flex-shrink: 0;
flex-shrink: 0;
} }
.dashboard-activity-info-item .sub-value { .dashboard-activity-info-item .sub-value {
margin-left: 10px; margin-left: 10px;
@ -909,38 +918,59 @@ a:hover .dashboard-activity-cover {
font-size: 13px; font-size: 13px;
padding: 0px 3px 0 3px; padding: 0px 3px 0 3px;
} }
.dashboard-activity-metadata-title-container {
display: flex;
flex-direction: row;
font-size: 13px;
font-weight: bold;
line-height: 25px;
color: #fff;
}
.dashboard-activity-metadata-play_state-icon {
flex-basis: 25px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.dashboard-activity-metadata-title { .dashboard-activity-metadata-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 350px;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.dashboard-activity-metadata-subtitle-container {
display: flex;
flex-direction: row;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
line-height: 25px; line-height: 25px;
color: #fff; color: #999;
max-width: 100%; }
.dashboard-activity-metadata-media_type-icon {
flex-basis: 25px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
} }
.dashboard-activity-metadata-subtitle { .dashboard-activity-metadata-subtitle {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 13px; -webkit-flex-grow: 1;
font-weight: bold; flex-grow: 1;
line-height: 25px;
color: #999;
max-width: 320px;
float: left;
} }
.dashboard-activity-metadata-user { .dashboard-activity-metadata-user {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 13px;
font-weight: bold;
line-height: 25px;
color: #999;
text-align: right; text-align: right;
width: 124px; max-width: 124px;
float: right; flex-basis: 124px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
} }
.dashboard-activity-metadata-user-thumb { .dashboard-activity-metadata-user-thumb {
background-color: #282828; background-color: #282828;
@ -3062,7 +3092,7 @@ pre::-webkit-scrollbar-thumb {
.home-platforms-instance { .home-platforms-instance {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
.dashboard-instance { .dashboard-activity-instance {
width: 100%; width: 100%;
} }
} }

22
data/interfaces/default/current_activity_instance.html
View file

@ -123,6 +123,7 @@ DOCUMENTATION :: END
</div> </div>
% endif % endif
</div> </div>
<div class="dashboard-activity-info-container">
<div class="dashboard-activity-info-scroller scrollbar-macosx"> <div class="dashboard-activity-info-scroller scrollbar-macosx">
<div class="dashboard-activity-info"> <div class="dashboard-activity-info">
<ul class="list-unstyled dashboard-activity-info-list"> <ul class="list-unstyled dashboard-activity-info-list">
@ -325,6 +326,7 @@ DOCUMENTATION :: END
</div> </div>
% endif % endif
</div> </div>
</div>
<div class="dashboard-activity-progress"> <div class="dashboard-activity-progress">
<div class="dashboard-activity-progress-bar"> <div class="dashboard-activity-progress-bar">
<div id="buffer-bar-${sk}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div> <div id="buffer-bar-${sk}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
@ -340,8 +342,8 @@ DOCUMENTATION :: END
% else: % else:
<div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${data['user_thumb']});"></div> <div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${data['user_thumb']});"></div>
% endif % endif
<div class="dashboard-activity-metadata-title"> <div class="dashboard-activity-metadata-title-container">
<span id="play-state-${sk}" title="${data['state'].capitalize()}"> <div id="play-state-${sk}" class="dashboard-activity-metadata-play_state-icon" title="${data['state'].capitalize()}">
% if data['state'] == 'playing': % if data['state'] == 'playing':
<i class="fa fa-fw fa-play"></i>&nbsp; <i class="fa fa-fw fa-play"></i>&nbsp;
% elif data['state'] == 'paused': % elif data['state'] == 'paused':
@ -349,7 +351,8 @@ DOCUMENTATION :: END
% elif data['state'] == 'buffering': % elif data['state'] == 'buffering':
<i class="fa fa-fw fa-spinner"></i>&nbsp; <i class="fa fa-fw fa-spinner"></i>&nbsp;
% endif % endif
</span> </div>
<div class="dashboard-activity-metadata-title">
% if data['channel_stream'] == '0': % if data['channel_stream'] == '0':
% if data['media_type'] == 'movie': % if data['media_type'] == 'movie':
<a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a> <a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
@ -373,9 +376,10 @@ DOCUMENTATION :: END
<span title="${data['title']}">${data['title']}</span> <span title="${data['title']}">${data['title']}</span>
% endif % endif
</div> </div>
<div class="dashboard-activity-metadata-subtitle"> </div>
<div class="dashboard-activity-metadata-subtitle-container">
% if data['channel_stream'] == '0': % if data['channel_stream'] == '0':
<span id="media-type-${sk}" title="${data['media_type'].capitalize()}"> <div id="media-type-${sk}" class="dashboard-activity-metadata-media_type-icon" title="${data['media_type'].capitalize()}">
% if data['media_type'] == 'movie': % if data['media_type'] == 'movie':
<i class="fa fa-fw fa-film"></i>&nbsp; <i class="fa fa-fw fa-film"></i>&nbsp;
% elif data['media_type'] == 'episode': % elif data['media_type'] == 'episode':
@ -387,12 +391,13 @@ DOCUMENTATION :: END
% elif data['media_type'] == 'clip': % elif data['media_type'] == 'clip':
<i class="fa fa-fw fa-video-camera"></i>&nbsp; <i class="fa fa-fw fa-video-camera"></i>&nbsp;
% endif % endif
</span> </div>
% else: % else:
<span id="media-type-${sk}" title="Channel"> <div id="media-type-${sk}" title="Channel">
<i class="fa fa-fw fa-cloud"></i>&nbsp; <i class="fa fa-fw fa-cloud"></i>&nbsp;
</span> </div>
% endif % endif
<div class="dashboard-activity-metadata-subtitle">
% if data['channel_stream'] == '0': % if data['channel_stream'] == '0':
% if data['media_type'] == 'movie': % if data['media_type'] == 'movie':
<span title="${data['year']}" class="sub-heading">${data['year']}</span> <span title="${data['year']}" class="sub-heading">${data['year']}</span>
@ -432,5 +437,6 @@ DOCUMENTATION :: END
% endif % endif
</div> </div>
</div> </div>
</div>
</div> </div>
% endif % endif