mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-08-19 21:03:21 -07:00
Merge pull request #160 from JonnyWong16/miscellaneous-fixes
Fix mobile layout for home and info pages
This commit is contained in:
commit
39ae387e0e
1 changed files with 28 additions and 18 deletions
|
@ -473,12 +473,12 @@ a .users-poster-face:hover {
|
|||
position: relative;
|
||||
height: 260px;
|
||||
width: 350px;
|
||||
margin-right: 25px;
|
||||
margin-bottom: 25px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dashboard-activity-poster {
|
||||
height: 200px;
|
||||
width: 350px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
@ -490,8 +490,8 @@ a:hover .dashboard-activity-poster {
|
|||
.dashboard-activity-poster-face {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 200px;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
@ -503,13 +503,11 @@ a:hover .dashboard-activity-poster {
|
|||
z-index: -3;
|
||||
}
|
||||
.dashboard-activity-cover-face-bg {
|
||||
}
|
||||
.dashboard-activity-poster-music-bg {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
@ -528,22 +526,22 @@ a:hover .dashboard-activity-poster {
|
|||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
-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);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 77px;
|
||||
left: calc(50% - 100px);
|
||||
z-index: -3;
|
||||
}
|
||||
.dashboard-activity-clip-face-bg {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
@ -562,7 +560,7 @@ a:hover .dashboard-activity-poster {
|
|||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
height: 100%;
|
||||
width: 130px;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
|
||||
|
@ -570,7 +568,7 @@ a:hover .dashboard-activity-poster {
|
|||
box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 110px;
|
||||
left: calc(50% - 65px);
|
||||
z-index: -3;
|
||||
}
|
||||
.dashboard-activity-info-details-overlay {
|
||||
|
@ -605,7 +603,7 @@ a:hover .dashboard-activity-poster {
|
|||
}
|
||||
.dashboard-activity-info-details-content {
|
||||
height: 200px;
|
||||
width: 350px;
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
@ -698,7 +696,7 @@ a:hover .dashboard-activity-poster {
|
|||
}
|
||||
.dashboard-activity-metadata-wrapper {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 13px;
|
||||
padding: 0 3px;
|
||||
|
@ -932,6 +930,7 @@ a .dashboard-activity-metadata-user-thumb:hover {
|
|||
background-clip: content-box;
|
||||
min-height: calc(100% - 200px);
|
||||
position: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
.summary-content-poster {
|
||||
float: left;
|
||||
|
@ -1892,7 +1891,7 @@ a .home-platforms-instance-list-oval:hover,
|
|||
}
|
||||
.home-platforms-instance .slider {
|
||||
background-color: #2d2d2d;
|
||||
width: 350px;
|
||||
width: calc(100% + 20px);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 128px;
|
||||
|
@ -2329,3 +2328,14 @@ a .home-platforms-instance-list-oval:hover,
|
|||
border-radius: 8px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 300px)
|
||||
and (max-device-width: 400px) {
|
||||
.home-platforms-instance {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
.dashboard-instance {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue