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
# Display controls when moving mouse
$ "#cammie-body"
$ "#cammie-ctrls"
.mousemove debounce () ->
$ this
.removeClass 'display'

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

@ -20,49 +20,52 @@
position: relative;
height: 100%;
#cammie-body {
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
height: 100%;
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 {
#cammie-ctrls {
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
height: 100%;
// Space rows
&.top-row, &.middle-row, &.bottom-row {
flex-basis: 0;
}
&.top-row, &.bottom-row {
flex-grow: 1;
transition: opacity 1s ease-in-out;
opacity: 0;
&.display {
transition: opacity .5s ease-in-out;
opacity: 1;
}
&.middle-row {
flex-grow: 8;
.ctrl {
background-color: $cammie-controls-color;
color: white;
&:hover {
background-color: $zeus_orange;
cursor: pointer;
}
}
// Enlarge middle column
.center {
flex-grow: 8;
.row {
display: flex;
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 class="cammie-ctrls top-row row">
<div class="column ctrl left" data-x="-10" data-y="10">
diag up left
<div id="cammie-ctrls">
<div class="top-row row">
<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 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="column ctrl left" data-x="-10" data-y="0">
left
<div class="row middle-row">
<div class="column ctrl left" data-x="-10" data-y="0">
left
</div>
<div class="column center">&nbsp;</div>
<div class="column ctrl right" data-x="10" data-y="0">
right
</div>
</div>
<div class="column center">&nbsp;</div>
<div class="column ctrl right" data-x="10" data-y="0">
right
</div>
</div>
<div class="row bottom-row cammie-ctrls">
<div class="column ctrl left" data-x="-10" data-y="-10">
diag down left
</div>
<div class="column ctrl center" data-x="0" data-y="-10">
down
</div>
<div class="column ctrl right" data-x="10" data-y="-10">
diag down right
<div class="row bottom-row">
<div class="column ctrl left" data-x="-10" data-y="-10">
diag down left
</div>
<div class="column ctrl center" data-x="0" data-y="-10">
down
</div>
<div class="column ctrl right" data-x="10" data-y="-10">
diag down right
</div>
</div>
</div>
</div>