eventstuff

This commit is contained in:
Lorin Werthen 2016-08-26 23:21:58 +02:00
parent ec990ac755
commit 57733198e3
7 changed files with 89 additions and 139 deletions

View file

@ -1,69 +0,0 @@
# All the cammie controls
commands =
up:
command: 'set_relative_pos'
posX: 0
posY: 10
down:
command: 'set_relative_pos'
posX: 0
posY: -10
left:
command: 'set_relative_pos'
posX: -10
posY: 0
right:
command: 'set_relative_pos'
posX: 10
posY: 0
# Initially hide all the controls
$('.ctrl').hide()
$('.ctrl').click ->
$.ajax "//kelder.zeus.ugent.be/webcam/cgi/ptdc.cgi",
data: commands[$(this).attr('id')]
timer = undefined
fade_buffer = false
blocking = false
clear_timer = () ->
clearTimeout timer
timer = 0
set_timer = () ->
timer = setTimeout((->
ctrl_hide()
fade_buffer = true
), 3000)
ctrl_show = () ->
$('.ctrl').fadeIn()
ctrl_hide = () ->
$('.ctrl').fadeOut()
block_hide = () ->
clear_timer()
blocking = true
unblock_hide = () ->
set_timer()
blocking = false
$(document).mousemove ->
if !blocking
if !fade_buffer
clear_timer() if timer
else
fade_buffer = false
ctrl_show()
set_timer()
$('.ctrl').mouseover(block_hide)
$('.ctrl').mouseout(unblock_hide)
# Timeout when we leave the window
$(document).mouseleave(unblock_hide)

View file

@ -16,46 +16,53 @@
background-color: black; background-color: black;
} }
.ctrl { #cammie-section {
background-color: $cammie-controls-color; position: relative;
color: white; height: 100%;
position: absolute; #cammie-body {
z-index: 100; position: relative;
height: 100%;
}
// Chevron centering .ctrl {
display: flex; background-color: $cammie-controls-color;
justify-content: center; color: white;
align-items: center; z-index: 100;
position: absolute;
&:hover { // Chevron centering
background-color: $zeus_orange; display: flex;
z-index: 200; justify-content: center;
cursor: pointer; align-items: center;
&:hover {
background-color: $zeus_orange;
z-index: 200;
cursor: pointer;
}
}
.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;
} }
} }
#left {
height: 100%;
width: 100px;
top: 0;
left: 0;
}
#right {
height: 100%;
width: 100px;
top: 0;
right: 0;
}
#up {
height: 100px;
width: 100%;
top: 0;
}
#down {
height: 100px;
width: 100%;
bottom: 0;
}

View file

@ -0,0 +1,3 @@
.subevent {
margin-left: 20px;
}

View file

@ -16,4 +16,5 @@ $family-sans-serif: 'Open Sans', sans-serif;
@import "includes/variables"; @import "includes/variables";
@import "includes/cammie"; @import "includes/cammie";
@import "includes/events";
@import "includes/general"; @import "includes/general";

View file

@ -3,36 +3,14 @@ navigable: true
title: Cammie title: Cammie
--- ---
<section class="hero is-fullheight"> <section id="cammie-section" class="hero is-fullheight">
<!-- Hero header: will stick at the top --> <!-- Hero header: will stick at the top -->
<div class="hero-head"> <div class="hero-head">
<%= render '/partials/_navbar.*' %> <%= render '/partials/_navbar.*' %>
</div> </div>
<!-- Hero content: will be in the middle --> <!--
<div class="hero-body"> <div id="cammie-body">
<!--
<div id="cammie-container">
<img id="cammie" src="https://kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2" alt="" />
</div>
-->
<div class="columns">
<div class="column">top</div>
<div class="column">top</div>
<div class="column">top</div>
</div>
<div class="columns">
<div class="column">mid</div>
<div class="column">mid</div>
<div class="column">mid</div>
</div>
<div class="columns">
<div class="column">bot</div>
<div class="column">bot</div>
<div class="column">bot</div>
</div>
<div id="left" class="ctrl"> <div id="left" class="ctrl">
<%= fa 'chevron-left', size: '2x' %> <%= fa 'chevron-left', size: '2x' %>
</div> </div>
@ -49,7 +27,37 @@ title: Cammie
<%= fa 'chevron-down', size: '2x' %> <%= fa 'chevron-down', size: '2x' %>
</div> </div>
</div> </div>
-->
<div id="cammie-body">
<div class="columns">
<div class="column">
<div class="ctrl left">
diag up left
</div>
</div>
<div class="column">
<div class="ctrl up">
up
</div>
</div>
<div class="column">
<div class="ctrl right">
diag up right
</div>
</div>
</div>
<div class="columns cammie-ctrls">
<div class="column ctrl left">left</div>
<div class="column ctrl center">home?</div>
<div class="column ctrl right">right</div>
</div>
<div class="columns cammie-ctrls">
<div class="column ctrl left">diag down left</div>
<div class="column ctrl center">down</div>
<div class="column ctrl right">diag down right</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom --> <!-- Hero footer: will stick at the bottom -->
<div class="hero-foot"> <div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth"> <nav class="tabs is-boxed is-fullwidth">

View file

@ -14,11 +14,11 @@ title: Events
<%= event[:title] %> <%= event[:title] %>
</a> </a>
<% sub_events(event).each do |sub_event| %> <% sub_events(event).each do |sub_event| %>
[ <div class="subevent">
<a href="<%= relative_path_to(sub_event) %>"> <a href="<%= relative_path_to(sub_event) %>">
<%= sub_event[:title] %> <%= sub_event[:title] %>
</a> </a>
] </div>
<% end %> <% end %>
</div> </div>
<% end %> <% end %>

View file

@ -1,5 +1,5 @@
<a href="<%= relative_path_to(@article) %>"> <a href="<%= relative_path_to(@article) %>">
<div class="box"> <div class="notification is-info">
<div class="event"> <div class="event">
<div class="content"> <div class="content">
<h1> <h1>