dani/vroom
1
0
Fork 0
mirror of https://github.com/dani/vroom.git synced 2024-06-28 17:53:42 +02:00
Code Issues Projects Releases Wiki Activity

Do not hide the main div on XS screen

Browse Source 
Instead, reduce the previews size (up to 4 previews in a row), and place the main div just under, using all the available width
Not perfect yet, but much better than before, so fix #73
This commit is contained in:
Daniel Berteaud 2014-06-17 14:05:05 +02:00
parent cc106a6691
commit 64fdb9bf33
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/css/vroom.css
View File

@ -39,8 +39,15 @@
margin-bottom: 5px;
display: none;
}
.previewContainer:nth-child(2n+1){
clear: left;
@media screen and (min-width: 768px) {
.previewContainer:nth-child(2n+1){
clear: left;
}
}
@media screen and (max-width: 767px) {
.previewContainer:nth-child(4n+1){
clear: left;
}
}
.volumeBar {
position: absolute;

2
public/js/vroom.js
View File

@ -513,7 +513,7 @@ function initVroom(room) {
playSound('join.mp3');
// The div continer of this new video
// will contain the video preview plus all other info like displayName, overlay and volume bar
var div = $('<div></div>').addClass('col-xs-6 col-sm-12 col-lg-6 previewContainer').append(video).appendTo('#webRTCVideo');
var div = $('<div></div>').addClass('col-xs-3 col-sm-12 col-lg-6 previewContainer').append(video).appendTo('#webRTCVideo');
var id;
// Peer isn't defined ? it's our own local screen
if (!peer){

6
templates/default/join.html.ep
View File

@ -36,7 +36,7 @@
</button>
</div>
<% if ($etherpad eq 'true'){ %>
<div class="btn-group hidden-xs" data-toggle="buttons">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default help" id="etherpadLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
<input type = "checkbox" id="etherpadButton">
<span class="glyphicon glyphicon-pencil">
@ -869,7 +869,7 @@
<audio id="mohPlayer" src="<%= $self->get_url('/') %>snd/moh/<%= $moh %>" loop></audio>
<div id="view" class="view row-fluid">
<div id="webRTCVideo" class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-12 col-lg-6 previewContainer" id="videoLocalContainer">
<div class="col-xs-3 col-sm-12 col-lg-6 previewContainer" id="videoLocalContainer">
<video id="webRTCVideoLocal" class="webRTCVideo latencyUnknown" muted oncontextmenu="return false;">
</video>
<div id="localVolume" class="volumeBar">
@ -878,7 +878,7 @@
</div>
</div>
</div>
<div id="mainView" class="col-sm-8 hidden-xs">
<div id="mainView" class="col-xs-12 col-sm-8">
<% if ($etherpad eq 'true'){ %>
<div id="etherpadContainer"></div>
<% } %>