midgard/zeus.ugent.be
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Put cammie controls in separate div

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/assets/scripts/cammie.coffee
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'

73
content/assets/stylesheets/includes/cammie.scss
View file

@ -20,49 +20,52 @@
position: relative; position: relative;
height: 100%; height: 100%;
#cammie-body { #cammie-body {
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
height: 100%; height: 100%;
#cammie-ctrls {
transition: opacity 1s ease-in-out;
opacity: 0;
&.display {
transition: opacity .5s ease-in-out;
opacity: 1;
}
.ctrl {
background-color: $cammie-controls-color;
color: white;
&:hover {
background-color: $zeus_orange;
cursor: pointer;
}
}
.row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column;
position: relative;
height: 100%;
// Space rows transition: opacity 1s ease-in-out;
&.top-row, &.middle-row, &.bottom-row { opacity: 0;
flex-basis: 0;
} &.display {
&.top-row, &.bottom-row { transition: opacity .5s ease-in-out;
flex-grow: 1; opacity: 1;
} }
&.middle-row { .ctrl {
flex-grow: 8;
background-color: $cammie-controls-color;
color: white;
&:hover {
background-color: $zeus_orange;
cursor: pointer;
}
} }
// Enlarge middle column .row {
.center { display: flex;
flex-grow: 8; justify-content: space-between;
// Space rows
&.top-row, &.middle-row, &.bottom-row {
flex-basis: 0;
}
&.top-row, &.bottom-row {
flex-grow: 1;
}
&.middle-row {
flex-grow: 8;
}
// Enlarge middle column
.center {
flex-grow: 8;
}
} }
} }
} }

56
content/cammie.erb
View file

@ -30,36 +30,38 @@ title: Cammie
--> -->
<div id="cammie-body"> <div id="cammie-body">
<div class="cammie-ctrls top-row row"> <div id="cammie-ctrls">
<div class="column ctrl left" data-x="-10" data-y="10"> <div class="top-row row">
diag up left <div class="column ctrl left" data-x="-10" data-y="10">
diag up left
</div>
<div class="column ctrl center" data-x="0" data-y="10">
up
</div>
<div class="column ctrl right" data-x="10" data-y="10">
diag up right
</div>
</div> </div>
<div class="column ctrl center" data-x="0" data-y="10">
up
</div>
<div class="column ctrl right" data-x="10" data-y="10">
diag up right
</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 class="column center">&nbsp;</div>
<div class="column ctrl right" data-x="10" data-y="0">
right
</div>
</div> </div>
<div class="column center">&nbsp;</div> <div class="row bottom-row">
<div class="column ctrl right" data-x="10" data-y="0"> <div class="column ctrl left" data-x="-10" data-y="-10">
right diag down left
</div> </div>
</div> <div class="column ctrl center" data-x="0" data-y="-10">
<div class="row bottom-row cammie-ctrls"> down
<div class="column ctrl left" data-x="-10" data-y="-10"> </div>
diag down left <div class="column ctrl right" data-x="10" data-y="-10">
</div> diag down right
<div class="column ctrl center" data-x="0" data-y="-10"> </div>
down
</div>
<div class="column ctrl right" data-x="10" data-y="-10">
diag down right
</div> </div>
</div> </div>
</div> </div>