diff --git a/couchpotato/core/media/_base/search/static/search.scss b/couchpotato/core/media/_base/search/static/search.scss index 93bbfba..cfeab6d 100644 --- a/couchpotato/core/media/_base/search/static/search.scss +++ b/couchpotato/core/media/_base/search/static/search.scss @@ -72,6 +72,10 @@ .wrapper { display: block; width: 380px; + + @include media-phablet { + width: 250px; + } } .input { @@ -101,6 +105,10 @@ height: 50px; position: relative; + @include media-phablet { + font-size: 12px; + } + .options { position: absolute; height: 100%; @@ -110,6 +118,10 @@ padding: 10px; background: rgba(0,0,0,.3); + @include media-phablet { + left: 0; + } + > .in_library_wanted { margin-top: -7px; } @@ -129,6 +141,10 @@ margin-right: 10px; min-width: 70px; flex: 1 auto; + + @include media-phablet { + min-width: 0; + } } .button { @@ -152,6 +168,10 @@ display: block; margin: 0; vertical-align: top; + + @include media-phablet { + display: none; + } } .data { @@ -166,6 +186,10 @@ transform: translateX(0); background: $background_color; + @include media-phablet { + left: 0; + } + &.open { transform: translateX(100%); } diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss index 1b645a7..4527b50 100644 --- a/couchpotato/core/media/movie/_base/static/movie.scss +++ b/couchpotato/core/media/movie/_base/static/movie.scss @@ -8,6 +8,10 @@ .page.movies_wanted, .page.movies_manage { top: $header_height; padding: 0; + + @include media-phablet { + top: $header_width_mobile; + } } .movie { @@ -67,14 +71,39 @@ .data { padding: $padding/2 $padding; + + @include media-phablet { + padding: $padding/2; + } + .info { display: flex; flex-flow: row nowrap; + @include media-phablet { + display: block; + } + .title { flex: 1 auto; + @include media-phablet { + display: flex; + flex-flow: row nowrap; + } + + span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + @include media-phablet { + width: 100%; + } + + } + .year { display: inline-block; margin: 0 10px; @@ -82,10 +111,19 @@ } } - .quality span { - float: left; - font-size: .7em; - margin: 2px 0 0 2px; + .quality { + clear: both; + overflow: hidden; + + span { + float: left; + font-size: .7em; + margin: 2px 0 0 2px; + + @include media-phablet { + margin: 2px 2px 0 0; + } + } } } } @@ -114,6 +152,10 @@ &:hover .actions { display: block; + + @include media-phablet { + display: none; + } } } } @@ -141,10 +183,14 @@ position: relative; cursor: pointer; flex: 1 1 auto; - max-width: 16.666666667%; + max-width: 14.285%; border: 0 solid transparent; border-width: 0 $padding/2; + @include media-desktop-plus { + max-width: 16.666666667%; + } + @include media-desktop { max-width: 20%; } @@ -220,6 +266,10 @@ &:hover .actions { display: block; + + @include media-phablet { + display: none; + } } .mask { @@ -479,6 +529,10 @@ .alph_nav { + @include media-phablet { + display: none; + } + .mass_edit_form { display: none; } diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss index 1fc2def..eac7ef6 100644 --- a/couchpotato/static/style/main.scss +++ b/couchpotato/static/style/main.scss @@ -4,9 +4,8 @@ * { margin: 0; padding: 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; box-sizing: border-box; + text-rendering: optimizeSpeed; } body, html { @@ -83,7 +82,6 @@ input, textarea, select { font-size: 38px; line-height: $header_height; height: $header_height; - opacity: .1; span { position: absolute; @@ -173,6 +171,10 @@ input, textarea, select { .wrapper { width: 320px; + + @include media-phablet { + width: 250px; + } } ul { @@ -316,7 +318,9 @@ input, textarea, select { color: rgba(0,0,0,.5); @include media-phablet { + font-size: 18px; line-height: $header_width_mobile; + padding: $padding/2; } } } @@ -454,6 +458,7 @@ input, textarea, select { font-size: 1.1em; font-weight: normal; transform: scale(0); + transform-origin: 100% 50%; background: $primary_color; margin-bottom: 4px; border-radius: $border_radius;