github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-10 07:22:37 -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 {
color: #e9a049;
}
.dashboard-activity-info-container {
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 225px;
width: 385px;
overflow: hidden;
}
.dashboard-activity-info-scroller {
height: 225px;
width: 335px;
width: 100%;
-webkit-flex-grow: 1;
flex-grow: 1;
z-index: 1;
@ -807,7 +815,8 @@ a .users-poster-face:hover {
text-align: right;
text-transform: uppercase;
line-height: 14px;
float: left;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.dashboard-activity-info-item .sub-value {
margin-left: 10px;
@ -909,38 +918,59 @@ a:hover .dashboard-activity-cover {
font-size: 13px;
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 {
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;
overflow: hidden;
white-space: nowrap;
font-size: 13px;
font-weight: bold;
line-height: 25px;
color: #fff;
max-width: 100%;
color: #999;
}
.dashboard-activity-metadata-media_type-icon {
flex-basis: 25px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.dashboard-activity-metadata-subtitle {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 13px;
font-weight: bold;
line-height: 25px;
color: #999;
max-width: 320px;
float: left;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.dashboard-activity-metadata-user {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 13px;
font-weight: bold;
line-height: 25px;
color: #999;
text-align: right;
width: 124px;
float: right;
max-width: 124px;
flex-basis: 124px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.dashboard-activity-metadata-user-thumb {
background-color: #282828;
@ -3062,7 +3092,7 @@ pre::-webkit-scrollbar-thumb {
.home-platforms-instance {
width: calc(100% - 20px);
}
.dashboard-instance {
.dashboard-activity-instance {
width: 100%;
}
}

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

@ -123,6 +123,7 @@ DOCUMENTATION :: END
</div>
% endif
</div>
<div class="dashboard-activity-info-container">
<div class="dashboard-activity-info-scroller scrollbar-macosx">
<div class="dashboard-activity-info">
<ul class="list-unstyled dashboard-activity-info-list">
@ -325,6 +326,7 @@ DOCUMENTATION :: END
</div>
% endif
</div>
</div>
<div class="dashboard-activity-progress">
<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>
@ -340,8 +342,8 @@ DOCUMENTATION :: END
% else:
<div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${data['user_thumb']});"></div>
% endif
<div class="dashboard-activity-metadata-title">
<span id="play-state-${sk}" title="${data['state'].capitalize()}">
<div class="dashboard-activity-metadata-title-container">
<div id="play-state-${sk}" class="dashboard-activity-metadata-play_state-icon" title="${data['state'].capitalize()}">
% if data['state'] == 'playing':
<i class="fa fa-fw fa-play"></i>&nbsp;
% elif data['state'] == 'paused':
@ -349,7 +351,8 @@ DOCUMENTATION :: END
% elif data['state'] == 'buffering':
<i class="fa fa-fw fa-spinner"></i>&nbsp;
% endif
</span>
</div>
<div class="dashboard-activity-metadata-title">
% if data['channel_stream'] == '0':
% if data['media_type'] == 'movie':
<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>
% endif
</div>
<div class="dashboard-activity-metadata-subtitle">
</div>
<div class="dashboard-activity-metadata-subtitle-container">
% 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':
<i class="fa fa-fw fa-film"></i>&nbsp;
% elif data['media_type'] == 'episode':
@ -387,12 +391,13 @@ DOCUMENTATION :: END
% elif data['media_type'] == 'clip':
<i class="fa fa-fw fa-video-camera"></i>&nbsp;
% endif
</span>
</div>
% else:
<span id="media-type-${sk}" title="Channel">
<div id="media-type-${sk}" title="Channel">
<i class="fa fa-fw fa-cloud"></i>&nbsp;
</span>
</div>
% endif
<div class="dashboard-activity-metadata-subtitle">
% if data['channel_stream'] == '0':
% if data['media_type'] == 'movie':
<span title="${data['year']}" class="sub-heading">${data['year']}</span>
@ -433,4 +438,5 @@ DOCUMENTATION :: END
</div>
</div>
</div>
</div>
% endif