Formats-Selection styling

4 files changed, 77 insertions, 58 deletions

diff --git a/assets/css/_bootstrap-selection.less b/assets/css/_bootstrap-selection.less
index 55c51b8..14cf9eb 100644
--- a/assets/css/_bootstrap-selection.less
+++ b/assets/css/_bootstrap-selection.less
@@ -36,7 +36,7 @@
 //@import "bootstrap-3.3.2/list-group.less";
 @import "bootstrap-3.3.2/panels.less";
 //@import "bootstrap-3.3.2/responsive-embed.less";
-//@import "bootstrap-3.3.2/wells.less";
+@import "bootstrap-3.3.2/wells.less";
 //@import "bootstrap-3.3.2/close.less";
 
 // Components w/ JavaScript
diff --git a/assets/css/_room.less b/assets/css/_room.less
index fdc6b6d..911b4e3 100644
--- a/assets/css/_room.less
+++ b/assets/css/_room.less
@@ -6,12 +6,12 @@
 	padding: 40px 0;
 }
 
-.video.hd .tab-content {
+.video.hd .player-wrap.tab-content {
 	padding: 0;
 }
 
 @media (max-width: @screen-md-max) {
-	.video.sd .tab-content {
+	.video.sd .player-wrap.tab-content {
 		padding: 0;
 	}
 }
@@ -27,4 +27,15 @@
 
 .functions-wrap {
 	h3 { margin-top: 0; }
+
+	.row {
+		margin-bottom: 36px;
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.btn-group {
+		margin-bottom: @padding-base-horizontal;
+	}
 }
diff --git a/template/assemblies/switcher/video.phtml b/template/assemblies/switcher/video.phtml
index a4ac907..653847c 100644
--- a/template/assemblies/switcher/video.phtml
+++ b/template/assemblies/switcher/video.phtml
@@ -1,64 +1,72 @@
-<h3>Formats</h3>
-<ul class="formats">
-	<? foreach($videores as $iter): ?>
-		<li>
-			<span class="label filetype" title="<?=h(format_text($iter))?>"><?=h(strtoupper($iter))?></span>
+<div class="container-fluid">
+	<h3>Formats</h3>
+	<div class="formats row">
+		<? foreach($videores as $iter): ?>
+			<div class="col-lg-3 col-md-4 col-lg-5 col-xs-12">
+				<div class="btn-group" role="group">
+					 <div class="btn btn-primary" disabled><?=h(strtoupper($iter))?></div>
 
-			<? if($has_translation): ?>
-
-				<a href="<?=h(link_player($room, $iter))?>">
-					<span class="fa fa-flag-o"></span>
-					native
-				</a>
-				<a href="<?=h(link_player($room, $iter, true))?>">
-					<span class="fa fa-flag"></span>
-					translated
-				</a>
-
-			<? else: ?>
-
-				<a href="<?=h(link_player($room, $iter))?>">
-					<span class="fa fa-video-camera"></span>
-					video
-				</a>
-
-			<? endif ?>
-		</li>
-	<? endforeach ?>
-</ul>
-
-<? include("$assemblies/desktop-player.phtml") ?>
-
-<div class="directlinks">
-	<? foreach($protos as $proto): ?>
-		<h3>Directlinks (<?=h(strtoupper($proto))?>)</h3>
-		<ul>
-			<? foreach($formats as $format): ?>
-				<? if(!startswith($proto, $format)) continue ?>
-				<? $res = substr($format, -2) ?>
-				<li>
-					<span class="label filetype" title="<?=h(format_text($res))?>"><?=h(strtoupper($res))?></span>
 					<? if($has_translation): ?>
 
-						<a href="<?=h(link_stream($proto, $room, $res))?>">
+						<a href="<?=h(link_player($room, $iter))?>" class="btn btn-default">
 							<span class="fa fa-flag-o"></span>
 							native
 						</a>
-						<a href="<?=h(link_stream($proto, $room, $res, true))?>">
+						<a href="<?=h(link_player($room, $iter, true))?>" class="btn btn-default">
 							<span class="fa fa-flag"></span>
 							translated
 						</a>
 
 					<? else: ?>
 
-						<a href="<?=h(link_stream($proto, $room, $res))?>">
+						<a href="<?=h(link_player($room, $iter))?>" class="btn btn-default">
 							<span class="fa fa-video-camera"></span>
 							video
 						</a>
 
 					<? endif ?>
-				</li>
-			<? endforeach ?>
-		</ul>
-	<? endforeach ?>
+				</div>
+			</div>
+		<? endforeach ?>
+	</div>
+
+	<div class="notes well">
+		<? include("$assemblies/desktop-player.phtml") ?>
+	</div>
+
+	<div class="directlinks">
+		<? foreach($protos as $proto): ?>
+			<h3>Directlinks (<?=h(strtoupper($proto))?>)</h3>
+			<div class="row">
+				<? foreach($formats as $format): ?>
+					<? if(!startswith($proto, $format)) continue ?>
+					<? $res = substr($format, -2) ?>
+					<div class="col-lg-3 col-md-4 col-lg-5 col-xs-12">
+						<div class="btn-group" role="group">
+							<div class="btn btn-primary" disabled><?=h(strtoupper($res))?></div>
+							<? if($has_translation): ?>
+
+								<a href="<?=h(link_stream($proto, $room, $res))?>" class="btn btn-default">
+									<span class="fa fa-flag-o"></span>
+									native
+								</a>
+								<a href="<?=h(link_stream($proto, $room, $res, true))?>" class="btn btn-default">
+									<span class="fa fa-flag"></span>
+									translated
+								</a>
+
+							<? else: ?>
+
+								<a href="<?=h(link_stream($proto, $room, $res))?>" class="btn btn-default">
+									<span class="fa fa-video-camera"></span>
+									video
+								</a>
+
+							<? endif ?>
+						</div>
+					</div>
+				<? endforeach ?>
+			</div>
+		<? endforeach ?>
+	</div>
 </div>
diff --git a/template/room.phtml b/template/room.phtml
index 92f69b2..aa489fc 100644
--- a/template/room.phtml
+++ b/template/room.phtml
@@ -18,7 +18,7 @@
 	</ul>
 
 	<div class="player-wrap tab-content">
-		<div class="tab-pane active">
+		<div role="tabpanel" class="tab-pane active">
 			<? include("$assemblies/player/$tab.phtml") ?>
 		</div>
 	</div>
@@ -27,9 +27,9 @@
 		<li class="active">
 			<a href="#switcher" role="tab" data-toggle="tab">Formats</a>
 		</li>
-		<? if(get("ROOMS.$room.IRC") && has("IRC")): ?>
+		<? if((get("ROOMS.$room.IRC") && has("IRC")) || (get("ROOMS.$room.TWITTER") && has("TWITTER"))): ?>
 			<li>
-				<a href="#irc" role="tab" data-toggle="tab">IRC</a>
+				<a href="#chat" role="tab" data-toggle="tab">Chat</a>
 			</li>
 		<? endif ?>
 		<? if(get("ROOMS.$room.SCHEDULE") && has("SCHEDULE")): ?>
@@ -45,21 +45,21 @@
 	</ul>
 
 	<div class="functions-wrap tab-content">
-		<div class="tab-pane active" id="switcher">
+		<div role="tabpanel" class="tab-pane active" id="switcher">
 			<? include("$assemblies/switcher/$tab.phtml") ?>
 		</div>
-		<? if(get("ROOMS.$room.SCHEDULE") && has("SCHEDULE")): ?>
-			<div class="tab-pane" id="irc">
-				<? include("$assemblies/irc.phtml") ?>
+		<? if((get("ROOMS.$room.IRC") && has("IRC")) || (get("ROOMS.$room.TWITTER") && has("TWITTER"))): ?>
+			<div role="tabpanel" class="tab-pane" id="chat">
+				<? include("$assemblies/chat.phtml") ?>
 			</div>
 		<? endif ?>
 		<? if(get("ROOMS.$room.FEEDBACK") && has("FEEDBACK")): ?>
-			<div class="tab-pane" id="program">
+			<div role="tabpanel" class="tab-pane" id="program">
 				<? include("$assemblies/program.phtml") ?>
 			</div>
 		<? endif ?>
 		<? if(get("ROOMS.$room.FEEDBACK") && has("FEEDBACK")): ?>
-			<div class="tab-pane" id="feedback">
+			<div role="tabpanel" class="tab-pane" id="feedback">
 				<? include("$assemblies/feedback.phtml") ?>
 			</div>
 		<? endif ?>