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

Cammie arrows

Browse source
This commit is contained in:
David Vandorpe 2016-08-29 15:49:27 +02:00
parent 6408c84f69
commit 8d5e5d79f9
2 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,12 +45,21 @@
.ctrl { .ctrl {
// Center arrows
display: flex;
justify-content: space-around;
align-items: center;
background-color: $cammie-controls-color; background-color: $cammie-controls-color;
color: white; color: white;
&:hover { &:hover {
background-color: $zeus_orange; background-color: $zeus_orange;
cursor: pointer; cursor: pointer;
} }
&.diag i {
transform: rotate(45deg);
}
} }
.row { .row {
@ -61,6 +70,7 @@
&.top-row, &.middle-row, &.bottom-row { &.top-row, &.middle-row, &.bottom-row {
flex-basis: 0; flex-basis: 0;
} }
&.top-row, &.bottom-row { &.top-row, &.bottom-row {
flex-grow: 1; flex-grow: 1;
} }

24
content/cammie.erb
View file

@ -31,35 +31,35 @@ title: Cammie
<img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2"> <img id="cammie-feed" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2">
<div id="cammie-ctrls"> <div id="cammie-ctrls">
<div class="top-row row"> <div class="top-row row">
<div class="column ctrl left" data-x="-10" data-y="10"> <div class="column ctrl diag left" data-x="-10" data-y="10">
diag up left <%= fa 'chevron-circle-left' %>
</div> </div>
<div class="column ctrl center" data-x="0" data-y="10"> <div class="column ctrl center" data-x="0" data-y="10">
up <%= fa 'chevron-circle-up' %>
</div> </div>
<div class="column ctrl right" data-x="10" data-y="10"> <div class="column ctrl diag right" data-x="10" data-y="10">
diag up right <%= fa 'chevron-circle-up' %>
</div> </div>
</div> </div>
<div class="row middle-row"> <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 <%= fa 'chevron-circle-left' %>
</div> </div>
<div class="column center">&nbsp;</div> <div class="column center">&nbsp;</div>
<div class="column ctrl right" data-x="10" data-y="0"> <div class="column ctrl right" data-x="10" data-y="0">
right <%= fa 'chevron-circle-right' %>
</div> </div>
</div> </div>
<div class="row bottom-row"> <div class="row bottom-row">
<div class="column ctrl left" data-x="-10" data-y="-10"> <div class="column ctrl diag left" data-x="-10" data-y="-10">
diag down left <%= fa 'chevron-circle-down' %>
</div> </div>
<div class="column ctrl center" data-x="0" data-y="-10"> <div class="column ctrl center" data-x="0" data-y="-10">
down <%= fa 'chevron-circle-down' %>
</div> </div>
<div class="column ctrl right" data-x="10" data-y="-10"> <div class="column ctrl diag right" data-x="10" data-y="-10">
diag down right <%= fa 'chevron-circle-right' %>
</div> </div>
</div> </div>
</div> </div>