diff options
| -rw-r--r-- | assets/css/_bootstrap-selection.less | 2 | ||||
| -rw-r--r-- | assets/css/_room.less | 15 | ||||
| -rw-r--r-- | template/assemblies/switcher/video.phtml | 100 | ||||
| -rw-r--r-- | template/room.phtml | 18 |
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 ?> |