simplify stuff
This commit is contained in:
Lorin Werthen
parent
9f553db2c6
commit
62115f72ec
2 changed files with 63 additions and 149 deletions
|
|
@ -1,103 +1,51 @@
|
||||||
#cammie-container {
|
#cammie-body {
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
width: 100%;
|
#cammie-ctrls {
|
||||||
}
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.fullpage {
|
transition: opacity 1s ease-in-out;
|
||||||
min-width: 100%;
|
z-index: 5;
|
||||||
min-height: 100%;
|
opacity: 0;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cammie-section {
|
position: absolute;
|
||||||
position: relative;
|
top: 0;
|
||||||
height: 100%;
|
left: 0;
|
||||||
#cammie-body {
|
|
||||||
//background-image: url("//kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2");
|
|
||||||
// background-size: cover;
|
|
||||||
|
|
||||||
position: relative;
|
.columns {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#cammie-ctrls {
|
.center {
|
||||||
display: flex;
|
flex: 1;
|
||||||
justify-content: space-between;
|
}
|
||||||
flex-direction: column;
|
|
||||||
position: absolute;
|
&.display {
|
||||||
top: 0;
|
transition: opacity .5s ease-in-out;
|
||||||
z-index: 5;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctrl {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
transition: opacity 1s ease-in-out;
|
// Center arrows
|
||||||
opacity: 0;
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&.display {
|
background-color: $cammie-controls-color;
|
||||||
transition: opacity .5s ease-in-out;
|
color: white;
|
||||||
opacity: 1;
|
&:hover {
|
||||||
|
background-color: $zeus_orange;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ctrl {
|
&.diag i {
|
||||||
|
transform: rotate(45deg);
|
||||||
// Center arrows
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
background-color: $cammie-controls-color;
|
|
||||||
color: white;
|
|
||||||
&:hover {
|
|
||||||
background-color: $zeus_orange;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.diag i {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 class="ctrl" data-command="set_pos" data-x="50" data-y="10">
|
|
||||||
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>
|
||||||
<div class="column ctrl right" data-command="set_relative_pos" data-x="10" data-y="0">
|
<div class="column is-1 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">
|
||||||
</div>
|
Zetel
|
||||||
</nav>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue