anonfunc/JellyPy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Swap left/right margin on cards and make cards fit better on mobile

Browse Source
This commit is contained in:
Sam Edwards
2020-10-06 22:35:33 -07:00
parent d268a7aa23
commit 58f2d22ef4
1 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
data/interfaces/default/css/tautulli.css
View File

@@ -757,9 +757,8 @@ a .users-poster-face:hover {
float: left; float: left;
position: relative; position: relative;
height: 290px; height: 290px;
min-width: 350px;
max-width: 500px; max-width: 500px;
margin-right: 25px; margin-left: 25px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.dashboard-activity-container { .dashboard-activity-container {
@@ -1160,9 +1159,8 @@ a .dashboard-activity-metadata-user-thumb:hover {
float: left; float: left;
position: relative; position: relative;
height: 160px; height: 160px;
min-width: 350px;
max-width: 500px; max-width: 500px;
margin-right: 25px; margin-left: 25px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.dashboard-stats-container { .dashboard-stats-container {
@@ -3295,23 +3293,36 @@ pre::-webkit-scrollbar-track {
pre::-webkit-scrollbar-thumb { pre::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.15); background-color: rgba(0,0,0,.15);
} }
#currentActivity,
#home-stats,
#library-stats {
margin-left: -25px;
}
#currentActivity > *,
#home-stats > *,
#library-stats > * {
margin-left: 25px;
}
@media only screen @media only screen
and (min-device-width: 300px) and (min-width: 300px)
and (max-device-width: 450px) { and (max-width: 450px) {
.home-platforms-instance { .home-platforms-instance {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
.dashboard-activity-instance { .dashboard-activity-instance,
width: 100%;
}
.dashboard-stats-instance { .dashboard-stats-instance {
width: 100%; width: 100%;
} }
#currentActivity,
#home-stats,
#library-stats {
margin-right: 25px;
}
} }
@media only screen @media only screen
and (min-device-width: 300px) and (min-width: 300px)
and (max-device-width: 740px) { and (max-width: 740px) {
.header-bar { .header-bar {
display: block; display: block;
float: none !important; float: none !important;
@@ -3338,8 +3349,8 @@ pre::-webkit-scrollbar-thumb {
} }
} }
@media only screen @media only screen
and (min-device-width: 740px) and (min-width: 740px)
and (max-device-width: 1024px) { and (max-width: 1024px) {
.button-bar { .button-bar {
float: right !important; float: right !important;
} }