mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-10 07:22:37 -07:00
Flexbox activity card metadata
This commit is contained in:
parent
1bd2f332d9
commit
d77696be59
2 changed files with 292 additions and 256 deletions
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
% elif data['state'] == 'paused':
|
||||
|
@ -349,7 +351,8 @@ DOCUMENTATION :: END
|
|||
% elif data['state'] == 'buffering':
|
||||
<i class="fa fa-fw fa-spinner"></i>
|
||||
% 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>
|
||||
% 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>
|
||||
% 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>
|
||||
</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>
|
||||
|
@ -432,5 +437,6 @@ DOCUMENTATION :: END
|
|||
% endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
Loading…
Add table
Add a link
Reference in a new issue