From 810f165a10910a0497503bc4bb79f03c14332120 Mon Sep 17 00:00:00 2001
From: MaZderMind
Date: Sun, 1 Mar 2015 11:17:27 +0100
Subject: Formats-Selection styling

---
 template/assemblies/switcher/video.phtml | 100 +++++++++++++++++--------------
 template/room.phtml                      |  18 +++---
 2 files changed, 63 insertions(+), 55 deletions(-)

(limited to 'template')

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 ?>
-- 
cgit v1.2.3