simplify stuff

This commit is contained in:
Lorin Werthen 2016-08-30 21:45:27 +02:00
parent 9f553db2c6
commit 62115f72ec
2 changed files with 63 additions and 149 deletions

View file

@ -1,49 +1,36 @@
#cammie-container { #cammie-body {
display: flex;
justify-content: center;
position: relative;
width: 100%;
}
.fullpage {
min-width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
}
#cammie-section {
position: relative;
height: 100%;
#cammie-body {
//background-image: url("//kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
// background-size: cover;
position: relative; position: relative;
#cammie-ctrls { #cammie-ctrls {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
position: absolute;
top: 0;
z-index: 5;
height: 100%; height: 100%;
width: 100%; width: 100%;
transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;
z-index: 5;
opacity: 0; opacity: 0;
position: absolute;
top: 0;
left: 0;
.columns {
margin: 0;
}
.center {
flex: 1;
}
&.display { &.display {
transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out;
opacity: 1; opacity: 1;
} }
.ctrl { .ctrl {
height: 100%;
// Center arrows // Center arrows
display: flex; display: flex;
@ -61,44 +48,5 @@
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
.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;
.center {
.ctrl-half {
width: 100%;
height: 50%;
display: flex;
justify-content: space-around;
align-items: center;
.ctrl {
padding: 15px;
border-radius: 5px;
}
}
}
}
// Enlarge middle column
.center {
flex-grow: 8;
}
}
}
} }
} }

View file

@ -2,94 +2,60 @@
navigable: true navigable: true
title: Cammie title: Cammie
--- ---
<section id="cammie-section">
<section id="cammie-section" class="hero is-fullheight">
<!-- Hero header: will stick at the top -->
<!--
<div id="cammie-body">
<div id="left" class="ctrl">
<%= fa 'chevron-left', size: '2x' %>
</div>
<div id="right" class="ctrl">
<%= fa 'chevron-right', size: '2x' %>
</div>
<div id="up" class="ctrl">
<%= fa 'chevron-up', size: '2x' %>
</div>
<div id="down" class="ctrl">
<%= fa 'chevron-down', size: '2x' %>
</div>
</div>
-->
<div id="cammie-body"> <div id="cammie-body">
<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="columns">
<div class="column ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="10"> <div class="column is-1 ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="10">
<%= fa 'chevron-circle-left' %> <%= fa 'chevron-circle-left' %>
</div> </div>
<div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="10"> <div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="10">
<%= fa 'chevron-circle-up' %> <%= fa 'chevron-circle-up' %>
</div> </div>
<div class="column ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="10"> <div class="column is-1 ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="10">
<%= fa 'chevron-circle-up' %> <%= fa 'chevron-circle-up' %>
</div> </div>
</div> </div>
<div class="row middle-row"> <div class="columns center">
<div class="column ctrl left" data-command="set_relative_pos" data-x="-10" data-y="0"> <div class="column is-1 ctrl left" data-command="set_relative_pos" data-x="-10" data-y="0">
<%= fa 'chevron-circle-left' %> <%= fa 'chevron-circle-left' %>
</div> </div>
<div class="column center"> <div class="column">
<div class="ctrl-half"> <!-- blank space -->
<div class="ctrl" data-command="set_pos" data-x="0" data-y="12">
Kleine tafel
</div> </div>
<div class="ctrl" data-command="set_pos" data-x="50" data-y="10"> <div class="column is-1 ctrl right" data-command="set_relative_pos" data-x="10" data-y="0">
Grote tafel
</div>
</div>
<div class="ctrl-half">
<div class="ctrl" data-command="set_pos" data-x="50" data-y="22">
Zetel
</div>
</div>
</div>
<div class="column ctrl right" data-command="set_relative_pos" data-x="10" data-y="0">
<%= fa 'chevron-circle-right' %> <%= fa 'chevron-circle-right' %>
</div> </div>
</div> </div>
<div class="row bottom-row">
<div class="column ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="-10"> <div class="columns">
<div class="column is-1 ctrl diag left" data-command="set_relative_pos" data-x="-10" data-y="-10">
<%= fa 'chevron-circle-down' %> <%= fa 'chevron-circle-down' %>
</div> </div>
<div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="-10"> <div class="column ctrl center" data-command="set_relative_pos" data-x="0" data-y="-10">
<%= fa 'chevron-circle-down' %> <%= fa 'chevron-circle-down' %>
</div> </div>
<div class="column ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="-10"> <div class="column is-1 ctrl diag right" data-command="set_relative_pos" data-x="10" data-y="-10">
<%= fa 'chevron-circle-right' %> <%= fa 'chevron-circle-right' %>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Hero footer: will stick at the bottom --> <nav class="nav">
<div class="hero-foot"> <div class="nav-center">
<nav class="tabs is-boxed is-fullwidth"> <a class="nav-item ctrl" href="#" data-command="set_pos" data-x="0" data-y="12">
<div class="container"> Kleine tafel
<ul> </a>
<li><a>Kleine Tafel</a></li> <a class="nav-item ctrl" href="#" data-command="set_pos" data-x="50" data-y="10">
<li><a>Grote Tafel</a></li> Grote tafel
<li><a>Zetel</a></li> </a>
</ul> <a class="nav-item ctrl" href="#" data-command="set_pos" data-x="50" data-y="22">
Zetel
</a>
</div> </div>
</nav> </nav>
</div>
</section> </section>