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

Reworked cammie grid

Browse source
This commit is contained in:
David Vandorpe 2016-08-29 00:13:02 +02:00
parent aa20bbf8d6
commit 38f735e7af
2 changed files with 50 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,49 +20,50 @@
position: relative; position: relative;
height: 100%; height: 100%;
#cammie-body { #cammie-body {
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative; position: relative;
height: 100%; height: 100%;
}
.ctrl { transition: opacity 1s ease-in-out;
background-color: $cammie-controls-color; opacity: 0;
color: white;
z-index: 100;
position: absolute;
// Chevron centering &.display {
display: flex; transition: opacity .5s ease-in-out;
justify-content: center; opacity: 1;
align-items: center; }
&:hover { .ctrl {
background-color: $zeus_orange;
z-index: 200; background-color: $cammie-controls-color;
cursor: pointer; color: white;
&:hover {
background-color: $zeus_orange;
cursor: pointer;
}
}
.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;
}
} }
} }
.left {
height: 100%;
width: 50px;
left: 0;
}
.right {
height: 100%;
width: 100px;
right: 0;
}
.up {
height: 100px;
width: 100%;
top: 0;
}
.down {
height: 100px;
width: 100%;
bottom: 0;
}
} }

27
content/cammie.erb
View file

@ -30,29 +30,24 @@ title: Cammie
--> -->
<div id="cammie-body"> <div id="cammie-body">
<div class="columns"> <div class="cammie-ctrls top-row row">
<div class="column"> <div class="column ctrl left">
<div class="ctrl left"> diag up left
diag up left
</div>
</div> </div>
<div class="column"> <div class="column ctrl center">
<div class="ctrl up"> up
up
</div>
</div> </div>
<div class="column"> <div class="column ctrl right">
<div class="ctrl right"> diag up right
diag up right
</div>
</div> </div>
</div> </div>
<div class="columns cammie-ctrls">
<div class="row middle-row cammie-ctrls">
<div class="column ctrl left">left</div> <div class="column ctrl left">left</div>
<div class="column ctrl center">home?</div> <div class="column center">&nbsp;</div>
<div class="column ctrl right">right</div> <div class="column ctrl right">right</div>
</div> </div>
<div class="columns cammie-ctrls"> <div class="row bottom-row cammie-ctrls">
<div class="column ctrl left">diag down left</div> <div class="column ctrl left">diag down left</div>
<div class="column ctrl center">down</div> <div class="column ctrl center">down</div>
<div class="column ctrl right">diag down right</div> <div class="column ctrl right">diag down right</div>