From 38f735e7afacc092f3a1c1a5a4d2b80654e761e5 Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 00:13:02 +0200 Subject: [PATCH 01/12] Reworked cammie grid --- .../assets/stylesheets/includes/cammie.scss | 77 ++++++++++--------- content/cammie.erb | 27 +++---- 2 files changed, 50 insertions(+), 54 deletions(-) diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index 50a2685..8450183 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -20,49 +20,50 @@ position: relative; height: 100%; #cammie-body { + display: flex; + justify-content: space-between; + flex-direction: column; position: relative; height: 100%; - } - .ctrl { - background-color: $cammie-controls-color; - color: white; - z-index: 100; - position: absolute; + transition: opacity 1s ease-in-out; + opacity: 0; - // Chevron centering - display: flex; - justify-content: center; - align-items: center; + &.display { + transition: opacity .5s ease-in-out; + opacity: 1; + } - &:hover { - background-color: $zeus_orange; - z-index: 200; - cursor: pointer; + .ctrl { + + background-color: $cammie-controls-color; + 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; - } } diff --git a/content/cammie.erb b/content/cammie.erb index 0495361..4ada9f2 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -30,29 +30,24 @@ title: Cammie -->
-
-
-
- diag up left -
+
+
+ diag up left
-
-
- up -
+
+ up
-
-
- diag up right -
+
+ diag up right
-
+ +
left
-
home?
+
 
right
-
+
diag down left
down
diag down right
From a2c7746161e98d1fb39b9f00c7af7e51ad3ed470 Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 00:13:12 +0200 Subject: [PATCH 02/12] Only show cammie controls when moving mouse --- content/assets/scripts/cammie.coffee | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/content/assets/scripts/cammie.coffee b/content/assets/scripts/cammie.coffee index e69de29..e245013 100644 --- a/content/assets/scripts/cammie.coffee +++ b/content/assets/scripts/cammie.coffee @@ -0,0 +1,21 @@ +# Reworked version of the underscorejs debounce +debounce = (func, wait, initial = () -> ) -> + timeout = false + () -> + context = this + args = arguments + later = () -> + timeout = null + func.apply context, args + callNow = !timeout + clearTimeout timeout + timeout = setTimeout later, wait + initial.apply context, args if callNow + +$ "#cammie-body" + .mousemove debounce () -> + $ this + .removeClass 'display' + , 3000, () -> + $ this + .addClass 'display' \ No newline at end of file From 80f1602a147c38e68112bb794b2c2b1a52b69ff8 Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 00:43:21 +0200 Subject: [PATCH 03/12] Cammie controls --- content/assets/scripts/cammie.coffee | 13 ++++++++++++- content/cammie.erb | 26 ++++++++++++++++++-------- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/content/assets/scripts/cammie.coffee b/content/assets/scripts/cammie.coffee index e245013..4896afa 100644 --- a/content/assets/scripts/cammie.coffee +++ b/content/assets/scripts/cammie.coffee @@ -12,10 +12,21 @@ debounce = (func, wait, initial = () -> ) -> timeout = setTimeout later, wait initial.apply context, args if callNow +# Display controls when moving mouse $ "#cammie-body" .mousemove debounce () -> $ this .removeClass 'display' , 3000, () -> $ this - .addClass 'display' \ No newline at end of file + .addClass 'display' + +# Cammie controls +$ '.ctrl' + .click -> + $context = $ this + $.ajax "//kelder.zeus.ugent.be/webcam/cgi/ptdc.cgi", + data: + command: 'set_relative_pos' + posX: $context.data 'x' + posY: $context.data 'y' \ No newline at end of file diff --git a/content/cammie.erb b/content/cammie.erb index 4ada9f2..22cfd34 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -31,26 +31,36 @@ title: Cammie
-
+
diag up left
-
+
up
-
+
diag up right
-
left
+
+ left +
 
-
right
+
+ right +
-
diag down left
-
down
-
diag down right
+
+ diag down left +
+
+ down +
+
+ diag down right +
From 57873aeafb9e0e6259ce1d1644f4ef7bca58720a Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 15:03:14 +0200 Subject: [PATCH 04/12] Fix up button --- content/cammie.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/cammie.erb b/content/cammie.erb index 22cfd34..2025de2 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -34,7 +34,7 @@ title: Cammie
diag up left
-
+
up
From dfdf87d2ac2aa52c4786a86f8e6fb13386bbbe8f Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 15:10:08 +0200 Subject: [PATCH 05/12] Put cammie controls in separate div --- content/assets/scripts/cammie.coffee | 2 +- .../assets/stylesheets/includes/cammie.scss | 73 ++++++++++--------- content/cammie.erb | 56 +++++++------- 3 files changed, 68 insertions(+), 63 deletions(-) diff --git a/content/assets/scripts/cammie.coffee b/content/assets/scripts/cammie.coffee index 4896afa..cfb7288 100644 --- a/content/assets/scripts/cammie.coffee +++ b/content/assets/scripts/cammie.coffee @@ -13,7 +13,7 @@ debounce = (func, wait, initial = () -> ) -> initial.apply context, args if callNow # Display controls when moving mouse -$ "#cammie-body" +$ "#cammie-ctrls" .mousemove debounce () -> $ this .removeClass 'display' diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index 8450183..0c82ffa 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -20,49 +20,52 @@ position: relative; height: 100%; #cammie-body { - display: flex; - justify-content: space-between; - flex-direction: column; - position: relative; height: 100%; - - transition: opacity 1s ease-in-out; - opacity: 0; - - &.display { - transition: opacity .5s ease-in-out; - opacity: 1; - } - - .ctrl { - - background-color: $cammie-controls-color; - color: white; - &:hover { - background-color: $zeus_orange; - cursor: pointer; - } - } - - .row { + #cammie-ctrls { display: flex; justify-content: space-between; + flex-direction: column; + position: relative; + height: 100%; - // Space rows - &.top-row, &.middle-row, &.bottom-row { - flex-basis: 0; - } - &.top-row, &.bottom-row { - flex-grow: 1; + transition: opacity 1s ease-in-out; + opacity: 0; + + &.display { + transition: opacity .5s ease-in-out; + opacity: 1; } - &.middle-row { - flex-grow: 8; + .ctrl { + + background-color: $cammie-controls-color; + color: white; + &:hover { + background-color: $zeus_orange; + cursor: pointer; + } } - // Enlarge middle column - .center { - flex-grow: 8; + .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; + } } } } diff --git a/content/cammie.erb b/content/cammie.erb index 2025de2..96addc2 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -30,36 +30,38 @@ title: Cammie -->
-
-
- diag up left +
+
+
+ diag up left +
+
+ up +
+
+ diag up right +
-
- up -
-
- diag up right -
-
-
-
- left +
+
+ left +
+
 
+
+ right +
-
 
-
- right -
-
-
-
- diag down left -
-
- down -
-
- diag down right +
+
+ diag down left +
+
+ down +
+
+ diag down right +
From 5d80f013839575904cddddc8fc3ad499cf08d185 Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 15:36:23 +0200 Subject: [PATCH 06/12] Use generic layout for cammie --- Rules | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/Rules b/Rules index b894eac..80bce75 100644 --- a/Rules +++ b/Rules @@ -45,16 +45,6 @@ compile '/feed.xml' do write '/feed.xml' end -# -# CAMMIE -# -compile '/cammie.*' do - layout '/default.*' - filter :erb - - filter :relativize_paths, type: :html -end - # # ARCHIVES # From 6408c84f69d08483c085e94e856b03c095f0becf Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 15:37:50 +0200 Subject: [PATCH 07/12] Fix cammie feed --- content/assets/stylesheets/includes/cammie.scss | 11 +++++++++-- content/cammie.erb | 5 ++--- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index 0c82ffa..18dbd53 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -20,13 +20,20 @@ position: relative; height: 100%; #cammie-body { - height: 100%; + //background-image: url("//kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2"); + // background-size: cover; + + position: relative; + #cammie-ctrls { display: flex; justify-content: space-between; flex-direction: column; - position: relative; + position: absolute; + top: 0; + z-index: 5; height: 100%; + width: 100%; transition: opacity 1s ease-in-out; opacity: 0; diff --git a/content/cammie.erb b/content/cammie.erb index 96addc2..57caef8 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -5,9 +5,7 @@ title: Cammie
-
- <%= render '/partials/_navbar.*' %> -
+
+
From 8d5e5d79f93d33ce8408c4b2a9638e45277e42a7 Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Mon, 29 Aug 2016 15:49:27 +0200 Subject: [PATCH 08/12] Cammie arrows --- .../assets/stylesheets/includes/cammie.scss | 10 ++++++++ content/cammie.erb | 24 +++++++++---------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index 18dbd53..f62857d 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -45,12 +45,21 @@ .ctrl { + // 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 { @@ -61,6 +70,7 @@ &.top-row, &.middle-row, &.bottom-row { flex-basis: 0; } + &.top-row, &.bottom-row { flex-grow: 1; } diff --git a/content/cammie.erb b/content/cammie.erb index 57caef8..c6b04de 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -31,35 +31,35 @@ title: Cammie
-
- diag up left +
+ <%= fa 'chevron-circle-left' %>
- up + <%= fa 'chevron-circle-up' %>
-
- diag up right +
+ <%= fa 'chevron-circle-up' %>
- left + <%= fa 'chevron-circle-left' %>
 
- right + <%= fa 'chevron-circle-right' %>
-
- diag down left +
+ <%= fa 'chevron-circle-down' %>
- down + <%= fa 'chevron-circle-down' %>
-
- diag down right +
+ <%= fa 'chevron-circle-right' %>
From 58a85c72b017358bb30b433e1edb40fd8e308e38 Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Tue, 30 Aug 2016 18:16:19 +0200 Subject: [PATCH 09/12] Three fixed buttons --- content/assets/stylesheets/includes/cammie.scss | 16 +++++++++++++++- content/cammie.erb | 16 +++++++++++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index f62857d..bd72efd 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -21,7 +21,7 @@ height: 100%; #cammie-body { //background-image: url("//kelder.zeus.ugent.be/webcam/video/mjpg.cgi?profileid=2"); - // background-size: cover; + // background-size: cover; position: relative; @@ -77,6 +77,20 @@ &.middle-row { flex-grow: 8; + + .center { + .ctrl-half { + width: 100%; + height: 50%; + display: flex; + justify-content: space-around; + align-items: center; + + .ctrl { + padding: 15px; + } + } + } } // Enlarge middle column diff --git a/content/cammie.erb b/content/cammie.erb index c6b04de..1fb694c 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -46,7 +46,21 @@ title: Cammie
<%= fa 'chevron-circle-left' %>
-
 
+
+
+
+ Kleine tafel +
+
+ Grote tafel +
+
+
+
+ Zetel +
+
+
<%= fa 'chevron-circle-right' %>
From 25faaaf01ae13ef6d6c200e35b5261bc7b226b13 Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Tue, 30 Aug 2016 18:28:14 +0200 Subject: [PATCH 10/12] Coffeescript for absolute controls --- content/assets/scripts/cammie.coffee | 2 +- content/cammie.erb | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/content/assets/scripts/cammie.coffee b/content/assets/scripts/cammie.coffee index cfb7288..912d754 100644 --- a/content/assets/scripts/cammie.coffee +++ b/content/assets/scripts/cammie.coffee @@ -27,6 +27,6 @@ $ '.ctrl' $context = $ this $.ajax "//kelder.zeus.ugent.be/webcam/cgi/ptdc.cgi", data: - command: 'set_relative_pos' + command: $context.data 'command' posX: $context.data 'x' posY: $context.data 'y' \ No newline at end of file diff --git a/content/cammie.erb b/content/cammie.erb index 1fb694c..e279be8 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -31,48 +31,48 @@ title: Cammie
-
+
<%= fa 'chevron-circle-left' %>
-
+
<%= fa 'chevron-circle-up' %>
-
+
<%= fa 'chevron-circle-up' %>
-
+
<%= fa 'chevron-circle-left' %>
-
+
Kleine tafel
-
+
Grote tafel
-
+
Zetel
-
+
<%= fa 'chevron-circle-right' %>
-
+
<%= fa 'chevron-circle-down' %>
-
+
<%= fa 'chevron-circle-down' %>
-
+
<%= fa 'chevron-circle-right' %>
From 9f553db2c6e6bcefa3c30eb6ee6d8cd42f83349c Mon Sep 17 00:00:00 2001 From: David Vandorpe Date: Tue, 30 Aug 2016 18:30:19 +0200 Subject: [PATCH 11/12] Border radius on absolute controls --- content/assets/stylesheets/includes/cammie.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index bd72efd..4435745 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -88,6 +88,7 @@ .ctrl { padding: 15px; + border-radius: 5px; } } } From 62115f72ecc206abc9e8873b5af092e6e9340508 Mon Sep 17 00:00:00 2001 From: Lorin Werthen Date: Tue, 30 Aug 2016 21:45:27 +0200 Subject: [PATCH 12/12] simplify stuff --- .../assets/stylesheets/includes/cammie.scss | 126 +++++------------- content/cammie.erb | 86 ++++-------- 2 files changed, 63 insertions(+), 149 deletions(-) diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index 4435745..d8f6030 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -1,103 +1,51 @@ -#cammie-container { - display: flex; - justify-content: center; - +#cammie-body { position: relative; - width: 100%; -} + #cammie-ctrls { + display: flex; + justify-content: space-between; + flex-direction: column; + height: 100%; + width: 100%; -.fullpage { - min-width: 100%; - min-height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - background-color: black; -} + transition: opacity 1s ease-in-out; + z-index: 5; + opacity: 0; -#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: absolute; + top: 0; + left: 0; - position: relative; + .columns { + margin: 0; + } - #cammie-ctrls { - display: flex; - justify-content: space-between; - flex-direction: column; - position: absolute; - top: 0; - z-index: 5; + .center { + flex: 1; + } + + &.display { + transition: opacity .5s ease-in-out; + opacity: 1; + } + + .ctrl { height: 100%; - width: 100%; - transition: opacity 1s ease-in-out; - opacity: 0; + // Center arrows + display: flex; + justify-content: space-around; + align-items: center; - &.display { - transition: opacity .5s ease-in-out; - opacity: 1; + background-color: $cammie-controls-color; + color: white; + &:hover { + background-color: $zeus_orange; + cursor: pointer; } - .ctrl { - - // 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; - } + &.diag i { + transform: rotate(45deg); } } } diff --git a/content/cammie.erb b/content/cammie.erb index e279be8..6a02aed 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -2,94 +2,60 @@ navigable: true title: Cammie --- - -
- - - - - +
-
-
+
+
<%= fa 'chevron-circle-left' %>
<%= fa 'chevron-circle-up' %>
-
+
<%= fa 'chevron-circle-up' %>
-
-
+
+
<%= fa 'chevron-circle-left' %>
-
-
-
- Kleine tafel -
-
- Grote tafel -
-
-
-
- Zetel -
-
+
+
-
+
<%= fa 'chevron-circle-right' %>
-
-
+ +
+
<%= fa 'chevron-circle-down' %>
<%= fa 'chevron-circle-down' %>
-
+
<%= fa 'chevron-circle-right' %>
- -
- -
+