Put cammie controls in separate div

This commit is contained in:
David Vandorpe 2016-08-29 15:10:08 +02:00
parent 57873aeafb
commit dfdf87d2ac
3 changed files with 68 additions and 63 deletions

View file

@ -13,7 +13,7 @@ debounce = (func, wait, initial = () -> ) ->
initial.apply context, args if callNow initial.apply context, args if callNow
# Display controls when moving mouse # Display controls when moving mouse
$ "#cammie-body" $ "#cammie-ctrls"
.mousemove debounce () -> .mousemove debounce () ->
$ this $ this
.removeClass 'display' .removeClass 'display'

View file

@ -20,6 +20,8 @@
position: relative; position: relative;
height: 100%; height: 100%;
#cammie-body { #cammie-body {
height: 100%;
#cammie-ctrls {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
@ -67,3 +69,4 @@
} }
} }
} }
}

View file

@ -30,7 +30,8 @@ title: Cammie
--> -->
<div id="cammie-body"> <div id="cammie-body">
<div class="cammie-ctrls top-row row"> <div id="cammie-ctrls">
<div class="top-row row">
<div class="column ctrl left" data-x="-10" data-y="10"> <div class="column ctrl left" data-x="-10" data-y="10">
diag up left diag up left
</div> </div>
@ -42,7 +43,7 @@ title: Cammie
</div> </div>
</div> </div>
<div class="row middle-row cammie-ctrls"> <div class="row middle-row">
<div class="column ctrl left" data-x="-10" data-y="0"> <div class="column ctrl left" data-x="-10" data-y="0">
left left
</div> </div>
@ -51,7 +52,7 @@ title: Cammie
right right
</div> </div>
</div> </div>
<div class="row bottom-row cammie-ctrls"> <div class="row bottom-row">
<div class="column ctrl left" data-x="-10" data-y="-10"> <div class="column ctrl left" data-x="-10" data-y="-10">
diag down left diag down left
</div> </div>
@ -63,6 +64,7 @@ title: Cammie
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Hero footer: will stick at the bottom --> <!-- Hero footer: will stick at the bottom -->
<div class="hero-foot"> <div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth"> <nav class="tabs is-boxed is-fullwidth">