Markup/CSS rework, visual me vs others mix slider. No back-end wireup yet.
This commit is contained in:
parent
d68b95cf73
commit
b6e4a3fcea
|
|
@ -137,7 +137,7 @@
|
|||
mixerIds.push(mixer.id);
|
||||
var gainPercent = percentFromMixerValue(
|
||||
mixer.range_low, mixer.range_high, mixer.volume_left);
|
||||
$volumeSlider.find('.slider-volume').css('left', gainPercent + '%');
|
||||
$volumeSlider.find('.handle').css('left', gainPercent + '%');
|
||||
}
|
||||
if (mixer.group_id === ChannelGroupIds.MonitorGroup) {
|
||||
mixerIds.push(mixer.id);
|
||||
|
|
@ -596,8 +596,8 @@
|
|||
$('#tracks').on('mousemove', faderMouseMove);
|
||||
$('body').on('mouseup', faderMouseUp);
|
||||
|
||||
$('#volume').on('click', 'div[control="fader"]', faderClick);
|
||||
$('#volume').on('mousedown', '.slider-volume', faderHandleDown);
|
||||
$('#session-controls .fader').on('click', 'div[control="fader"]', faderClick);
|
||||
$('#session-controls .fader').on('mousedown', '.handle', faderHandleDown);
|
||||
$('body').on('mousemove', faderMouseMove);
|
||||
$('body').on('mouseup', faderMouseUp);
|
||||
|
||||
|
|
|
|||
|
|
@ -105,38 +105,49 @@ table.vu td {
|
|||
|
||||
|
||||
/* Just bringing in Jeff's session.css file in entirety below */
|
||||
/* But have modified significantly to make things work. Needs cleanup */
|
||||
|
||||
#session-controls {
|
||||
.label {
|
||||
float:left;
|
||||
font-size:12px;
|
||||
color:#ccc;
|
||||
margin: 0px 0px 0px 4px;
|
||||
}
|
||||
|
||||
.master-volume-label {
|
||||
font-size:12px;
|
||||
position:absolute;
|
||||
left: 226px;
|
||||
top: 16px;
|
||||
}
|
||||
.block {
|
||||
float:left;
|
||||
margin: 6px 8px 0px 8px;
|
||||
}
|
||||
|
||||
#volume {
|
||||
position:absolute;
|
||||
top: 15px;
|
||||
left: 284px;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
font-size:12px;
|
||||
color:#ccc;
|
||||
background-image: url('/assets/content/bkg_volume.png');
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
#volume div[control="fader"] {
|
||||
position:absolute;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
}
|
||||
.fader {
|
||||
float:left;
|
||||
position: relative;
|
||||
margin: 0px 0px 0px 4px;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
}
|
||||
[control="fader"] {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.slider-volume {
|
||||
position:absolute;
|
||||
top:2px;
|
||||
right:30px;
|
||||
width:8px;
|
||||
height:17px;
|
||||
.fader.lohi {
|
||||
background-image: url('/assets/content/bkg_volume.png');
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
.fader.flat {
|
||||
background-image: url('/assets/content/bkg_playcontrols.png');
|
||||
height: 17px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.handle {
|
||||
position:absolute;
|
||||
top:2px;
|
||||
width:8px;
|
||||
height:17px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
|
|
|
|||
|
|
@ -18,15 +18,34 @@
|
|||
<%= image_tag "content/icon_share.png", {:align => "texttop", :height => 12, :width => 12} %>
|
||||
SHARE
|
||||
</a>
|
||||
<div class="master-volume-label">VOLUME</div>
|
||||
<div id="volume" mixer-id="">
|
||||
<div control="fader" orientation="horizontal">
|
||||
<div class="slider-volume" style="left:0%;" control="fader-handle">
|
||||
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
|
||||
|
||||
<!-- Volume Slider -->
|
||||
<div class="block">
|
||||
<div class="label">VOLUME:</div>
|
||||
<div id="volume" class="fader lohi" mixer-id="">
|
||||
<div control="fader" orientation="horizontal">
|
||||
<div class="handle" style="left:0%;" control="fader-handle">
|
||||
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mix: Me versus Others -->
|
||||
<div class="block">
|
||||
<div class="label">MIX:</div>
|
||||
<div class="label"><small>me</small></div>
|
||||
<div class="fader flat" mixer-id="">
|
||||
<div control="fader" orientation="horizontal">
|
||||
<div class="handle" style="left:0%;" control="fader-handle">
|
||||
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label"><small>others</small></div>
|
||||
</div>
|
||||
|
||||
<!-- Leave Button -->
|
||||
<a class="button-grey right leave" href="#/home">X LEAVE</a>
|
||||
</div>
|
||||
<!-- end session controls -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue