dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Responsive movie details header

pull/5287/head
Ruud 10 years ago
parent
d7e88d32b7
commit
414f63b4b3
2 changed files with 36 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      couchpotato/core/media/movie/_base/static/movie.scss
  2. 25
      couchpotato/static/style/combined.min.css

28
couchpotato/core/media/movie/_base/static/movie.scss
View File

@ -581,14 +581,13 @@ $mass_edit_height: 44px;
> .head {
display: flex;
flex-flow: row nowrap;
flex-flow: row wrap;
padding: 0 $padding;
position: relative;
z-index: 2;
@include media-phablet {
flex-wrap: wrap;
padding: 0 $padding/2;
padding: 0;
line-height: 1em;
}
@ -603,11 +602,22 @@ $mass_edit_height: 44px;
@include media-phablet {
min-width: 100%;
line-height: $header_width_mobile;
margin-top: $padding;
.more_menu {
width: 100%;
}
}
.more_menu .icon-dropdown {
padding-right: $padding;
@include media-phablet {
&:before {
right: $padding/2;
}
}
}
}
.more_menu {
@ -624,17 +634,18 @@ $mass_edit_height: 44px;
line-height: $header_height;
@include media-phablet {
line-height: 1em;
line-height: $header_width_mobile/2;
}
}
.icon-dropdown {
position: relative;
padding: 0 $padding 0 $padding/2;
padding: 0 $padding/1.5 0 $padding/2;
&:before {
position: absolute;
right: 0;
top: -2px;
opacity: .2;
}
@ -708,9 +719,10 @@ $mass_edit_height: 44px;
.buttons {
display: flex;
flex-wrap: wrap;
@include media-phablet {
margin-left: auto;
margin: 0;
}
> a {
@ -719,6 +731,10 @@ $mass_edit_height: 44px;
color: $primary_color;
line-height: $header_height;
@include media-phablet {
line-height: $header_width_mobile/2;
}
&:hover {
color: #000;
}

25
couchpotato/static/style/combined.min.css
View File

@ -205,22 +205,24 @@
.page.movie_details .overlay .close{width:44px}
}
.page.movie_details .scroll_content{position:fixed;z-index:2;top:0;bottom:0;right:0;left:176px;background:#FFF;border-radius:3px 0 0 3px;overflow-y:auto;-webkit-transform:translateX(100%) rotateY(360deg);transform:translateX(100%) rotateY(360deg);transition:-webkit-transform 350ms cubic-bezier(.9,0,.1,1);transition:transform 350ms cubic-bezier(.9,0,.1,1)}
.page.movie_details .scroll_content>.head{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;padding:0 20px;position:relative;z-index:2}
@media (max-width:480px){.page.movie_details .scroll_content{left:44px}
.page.movie_details .scroll_content>.head{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 10px;line-height:1em}
}
.page.movie_details .scroll_content>.head{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:0 20px;position:relative;z-index:2}
.page.movie_details .scroll_content>.head h1{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;margin:0;font-size:24px;color:rgba(0,0,0,.5);font-weight:300;max-width:100%}
@media (max-width:480px){.page.movie_details .scroll_content>.head h1{min-width:100%;line-height:44px}
@media (max-width:480px){.page.movie_details .scroll_content{left:44px}
.page.movie_details .scroll_content>.head{padding:0;line-height:1em}
.page.movie_details .scroll_content>.head h1{min-width:100%;line-height:44px;margin-top:20px}
.page.movie_details .scroll_content>.head h1 .more_menu{width:100%}
}
.page.movie_details .scroll_content>.head h1 .more_menu .icon-dropdown{padding-right:20px}
.page.movie_details .scroll_content>.head .more_menu{display:inline-block;vertical-align:top;max-width:100%;margin-bottom:0}
.page.movie_details .scroll_content>.head .more_menu>a{line-height:80px}
.page.movie_details .scroll_content>.head .more_menu .icon-dropdown{position:relative;padding:0 20px 0 10px}
.page.movie_details .scroll_content>.head .more_menu .icon-dropdown:before{position:absolute;right:0;opacity:.2}
@media (max-width:480px){.page.movie_details .scroll_content>.head h1 .more_menu .icon-dropdown:before{right:10px}
.page.movie_details .scroll_content>.head .more_menu>a{line-height:22px}
}
.page.movie_details .scroll_content>.head .more_menu .icon-dropdown{position:relative;padding:0 13.33px 0 10px}
.page.movie_details .scroll_content>.head .more_menu .icon-dropdown:before{position:absolute;right:0;top:-2px;opacity:.2}
.page.movie_details .scroll_content>.head .more_menu .icon-dropdown:hover:before{opacity:1}
.page.movie_details .scroll_content>.head .more_menu .wrapper{top:70px;padding-top:4px;border-radius:3px 3px 0 0;font-size:14px}
@media (max-width:480px){.page.movie_details .scroll_content>.head .more_menu>a{line-height:1em}
.page.movie_details .scroll_content>.head .more_menu .wrapper{top:25px}
@media (max-width:480px){.page.movie_details .scroll_content>.head .more_menu .wrapper{top:25px}
}
.page.movie_details .scroll_content>.head .more_menu .wrapper:before{top:0;left:auto;right:22px}
.page.movie_details .scroll_content>.head .more_menu .wrapper ul{border-radius:3px 3px 0 0;max-height:215px;overflow-y:auto}
@ -230,12 +232,13 @@
.page.movie_details .scroll_content>.head .more_menu.title>a{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}
.page.movie_details .scroll_content>.head .more_menu.title .wrapper{-webkit-transform-origin:0 0;transform-origin:0 0;left:0;right:auto}
.page.movie_details .scroll_content>.head .more_menu.title .wrapper:before{left:22px;right:auto}
.page.movie_details .scroll_content>.head .buttons{display:-webkit-flex;display:-ms-flexbox;display:flex}
.page.movie_details .scroll_content>.head .buttons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.page.movie_details .scroll_content>.head .buttons>a{display:inline-block;padding:0 10px;color:#ac0000;line-height:80px}
.page.movie_details .scroll_content>.head .buttons>a:hover{color:#000}
.page.movie_details .scroll_content .section{padding:20px;border-top:1px solid rgba(0,0,0,.1)}
@media (max-width:480px){.page.movie_details .scroll_content>.head .more_menu.title .wrapper{top:30px;max-width:240px}
.page.movie_details .scroll_content>.head .buttons{margin-left:auto}
.page.movie_details .scroll_content>.head .buttons{margin:0}
.page.movie_details .scroll_content>.head .buttons>a{line-height:22px}
.page.movie_details .scroll_content .section{padding:10px}
}
.page.movie_details .files span,.page.movie_details .releases .item span{white-space:nowrap;padding:6.67px 0;overflow:hidden;text-overflow:ellipsis}

Write Preview
Loading…
Cancel
Save