mirror of
https://github.com/voc/streaming-website
synced 2024-11-10 06:34:17 +00:00
Formats-Selection styling
This commit is contained in:
MaZderMind
parent
510e6cdbf2
commit
810f165a10
4 changed files with 77 additions and 58 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue