Merge pull request #32 from CYPIAPT-LNDSE/WTC-8-eating

Wtc 8 eating
CYPIAPT-LNDSE · Feb 1, 2017 · 7e06d8e · 7e06d8e
2 parents 022929e + 8f48dd3
commit 7e06d8e
Show file tree

Hide file tree

Showing 3 changed files with 206 additions and 1 deletion.
diff --git a/eating.html b/eating.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Henny+Penny|Montserrat+Alternates">
+  <link rel="stylesheet" href="main.css">
+
+  <title>Welcome to CAMHS</title>
+</head>
+<body>
+  <div class="eating">
+    <h1 class="eating__title">How are you eating?</h1>
+    <p class="eating__text">
+      Slide to choose how many fruit and vegetables you eat per day.
+    </p>
+    <div class="eating__slider">
+      <input class="slider__range" type="range" min="0" max="5" value="0" step="1"
+      oninput="updateOutput(value)">
+      <div class="slider__reel"></div>
+      <div class="slider__banana"></div>
+    </div>
+    <div class="eating__meals">
+      <p class="eating__text">
+        Do you usually have
+      </p>
+      <form class="" action="#">
+        <p>
+          <input type="checkbox" name="breakfast" value="breakfast">
+          <span>breakfast</span>
+        </p>
+        <p>
+          <input type="checkbox" name="lunch" value="lunch" checked="checked">
+          <span>lunch</span>
+        </p>
+        <p>
+          <input type="checkbox" name="dinner" value="dinner">
+          <span>dinner</span>
+        </p>
+      </form>
+    </div>
+  </div>
+
+  <script src="lib/jquery-3.1.1.min.js"></script>
+  <script src="slider.js"></script>
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -11,6 +11,7 @@ body {
 }
 .welcome,
 .introduction,
+.eating,
 .finish,
 .avatar,
 .feelings {
@@ -20,6 +21,7 @@ body {
   padding: 70px 100px;
 }
 .welcome__title,
+.eating__title,
 .avatar__title {
   font-family: 'Henny Penny', cursive;
   font-size: 4rem;
@@ -35,7 +37,7 @@ body {
 }
 .welcome__text,
 .introduction__text,
-.feelings__text,
+.eating__text,
 .finish__text {
   margin: 40px 0;
   padding: 0 25px;
@@ -85,6 +87,74 @@ body {
 .feelings__title {
   margin-bottom: 50px;
 }
+.eating__slider {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+  padding-top: 160px;
+  padding-bottom: 160px;
+  overflow-x: hidden;
+}
+.slider__range {
+  display: block;
+  -webkit-appearance: none;
+  outline: none;
+  height: 5px;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.3);
+}
+.slider__range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  cursor: pointer;
+  height: 10px;
+  width: 54px;
+  position: relative;
+}
+.slider__range::-webkit-slider-thumb:after {
+  content: '< >';
+  word-spacing: 20px;
+  text-align: center;
+  font: bold 17px/25px 'Montserrat Alternates', sans-serif;
+  color: white;
+  width: 54px;
+  height: 25px;
+  position: absolute;
+  top: -10px;
+  left: 0;
+  color: transparent;
+  transition: color 0.25s;
+}
+.slider__range::-webkit-slider-thumb:before {
+  content: '';
+  height: 5px;
+  width: 400px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  /*prevent click obstruction for the real slider track beneath*/
+  pointer-events: none;
+}
+.slider__reel {
+  width: 25%;
+  height: 100px;
+  overflow: hidden;
+  position: absolute;
+  top: 0; /*left pos will be controlled by JS*/
+}
+.slider__banana {
+  font: bold 3rem/1rem 'Montserrat Alternates', sans-serif;
+  color: white;
+  position: absolute;
+  bottom: 110px;
+  height: 125px;
+  width: 25%;;
+  text-align: center;
+  /*disable clicks so that the slider thumb can be controlled*/
+  pointer-events: none;
+  transition: all 0.25s;
+  background-image: url('assets/banana.svg');
+  background-repeat: no-repeat;
+}
 .download-button {
   margin-top: 20px;
   border: none;
@@ -132,3 +202,77 @@ body {
 .finished__header {
   color: black;
 }
+.eating__meals {
+  font: bold 1.5rem/1rem 'Montserrat Alternates', sans-serif;
+  position: relative;
+  top: -50px;
+}
+
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+}
+[type="checkbox"]:not(:checked) + span,
+[type="checkbox"]:checked + span {
+  position: relative;
+  padding-left: 60px;
+  cursor: pointer;
+  left: 100px;
+}
+[type="checkbox"] + span:before,
+[type="checkbox"]:checked + span:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: -1px;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #bbb;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
+}
+[type="checkbox"]:not(:checked) + span:before,
+[type="checkbox"]:checked + span:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: -1px;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #bbb;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
+}
+/* checked mark aspect */
+[type="checkbox"]:not(:checked) + span:after,
+[type="checkbox"]:checked + span:after {
+  content: '✔';
+  position: absolute;
+  top: 1px;
+  left: 4px;
+  font-size: 40px;
+  line-height: 0.8;
+  color: #09ad7e;
+  transition: all .2s;
+}
+/* checked mark aspect changes */
+[type="checkbox"]:not(:checked) + span:after {
+  opacity: 0;
+  transform: scale(0);
+}
+[type="checkbox"]:checked + span:after {
+  opacity: 1;
+  transform: scale(1);
+}
+[type="checkbox"]:checked:focus + span:before,
+[type="checkbox"]:not(:checked):focus + span:before {
+  border: 1px dotted blue;
+}
+
+/* hover style just for information */
+span:hover:before {
+  border: 1px solid #4778d9!important;
+}
diff --git a/slider.js b/slider.js
@@ -0,0 +1,13 @@
+(function($){
+	'use strict';
+	var min = $(".slider__range").attr("min");
+	var max = $(".slider__range").attr("max");
+	var horizontal;
+
+	window.updateOutput = function (figure) {
+		$(".slider__banana").html(figure);
+		horizontal = figure/max*($(".eating__slider").width()-$(".slider__reel").width()) + 'px';
+		$(".slider__banana, .slider__reel").css({left: horizontal});
+	}
+	updateOutput($(".slider__range").val());
+})(jQuery);