Responsive stuff

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%);
 					}

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;
 	}

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;