Fixed the multimedia responsiveness (See #3843)

wet-boew · Dec 2, 2013 · ed7ba26 · ed7ba26
1 parent b77f26c
commit ed7ba26
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 13 deletions.
diff --git a/src/plugins/multimedia/assets/mediacontrols.html b/src/plugins/multimedia/assets/mediacontrols.html
@@ -19,11 +19,11 @@
 		</div>
 
 		<div tabindex="0" class="tline">
-			<div class="visible-xs textonly">
+			<div class="wb-mm-txtonly">
 				<p class="wb-mm-tmln-crrnt"><span class="wb-inv">{{position}}</span><span>00:00:00</span></p>
 				<p class="wb-mm-tmln-ttl"><span class="wb-inv">{{duration}}</span><span>--:--:--</span></p>
 			</div>
-			<div class="hidden-xs">
+			<div class="wb-mm-prgrss">
 				<progress aria-live="off" max="100" value="0"></progress>
 			</div>
 

diff --git a/src/plugins/multimedia/multimedia.scss b/src/plugins/multimedia/multimedia.scss
@@ -2,6 +2,14 @@
   Multimedia Player Code
  */
 
+ %multimedia-display-none {
+    display: none;
+}
+
+%multimedia-display-block {
+    display: block;
+}
+
  @keyframes spin {
 	from {
 		transform: rotate(0deg);
@@ -155,18 +163,20 @@
 	}
 	.tline {
 		@extend %pnl;
-		.textonly {
-			.wb-mm-tmln-crrnt, .wb-mm-tmln-ttl {
-				display: inline !important;
-				margin:0;
-			}
-			.wb-mm-tmln-crrnt {
-				float: left;
-			}
-			.wb-mm-tmln-ttl {
-				float:right;
-			}
+		.wb-mm-tmln-crrnt, .wb-mm-tmln-ttl {
+			display: inline !important;
+			margin:0;
+		}
+		.wb-mm-tmln-crrnt {
+			float: left;
 		}
+		.wb-mm-tmln-ttl {
+			float:right;
+		}
+	}
+
+	.wb-mm-txtonly {
+		@extend %multimedia-display-none;
 	}
 
 	/* Progress Bar */
@@ -186,3 +196,26 @@
 		}
 	}
 }
+
+//TODO: Cleanup placeholders when libsass supports nested selectors
+.xxsmallview {
+    .wb-mm-txtonly {
+        @extend %multimedia-display-block;
+    }
+
+    .wb-mm-prgrss {
+        @extend %multimedia-display-none;
+    }
+}
+
+.mediumview, .largeview, .xlargeview, .xxlargeview {
+    .col-md-1, .col-md-2, .col-md-3 {
+        .wb-mm-txtonly {
+            @extend %multimedia-display-block;
+        }
+
+        .wb-mm-prgrss {
+            @extend %multimedia-display-none;
+        }
+    }
+}