Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wtc 8 eating #32

Merged
merged 13 commits into from
Feb 1, 2017
Merged

Wtc 8 eating #32

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e3c6c5f
Add eating page and interact to apply movement to banana
skibinska Feb 1, 2017
81a22a3
Resolve merge conflict in main.css
skibinska Feb 1, 2017
d3ed5c1
Add dragable banana-slider
skibinska Feb 1, 2017
08564b4
Add slider, remove interact.js
skibinska Feb 1, 2017
308c940
Add banana as a slider
skibinska Feb 1, 2017
da5487d
Resolve conflict in main.css related #8
skibinska Feb 1, 2017
1ab5c36
Change description
skibinska Feb 1, 2017
c306fe4
Clean up files
skibinska Feb 1, 2017
0e003ab
Rename class
skibinska Feb 1, 2017
0041199
Clean js file
skibinska Feb 1, 2017
0ab2bc9
Add checkboxes
skibinska Feb 1, 2017
f799076
Remove unused file
skibinska Feb 1, 2017
8f48dd3
Wrap js file into function
skibinska Feb 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions eating.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
146 changes: 145 additions & 1 deletion main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ body {
}
.welcome,
.introduction,
.eating,
.finish,
.avatar,
.feelings {
Expand All @@ -20,6 +21,7 @@ body {
padding: 70px 100px;
}
.welcome__title,
.eating__title,
.avatar__title {
font-family: 'Henny Penny', cursive;
font-size: 4rem;
Expand All @@ -35,7 +37,7 @@ body {
}
.welcome__text,
.introduction__text,
.feelings__text,
.eating__text,
.finish__text {
margin: 40px 0;
padding: 0 25px;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
18 changes: 18 additions & 0 deletions slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
//lets populate reel numbers
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrap this up in a function, so you do not pollute global scope!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure 👍

var min = $(".slider__range").attr("min");
var max = $(".slider__range").attr("max");

updateOutput($(".slider__range").val());

var horizontal;
function updateOutput(figure) {
//displaying the static output
$(".slider__banana").html(figure);

//positioning .static-output and .reel
//horizontal positioning first
horizontal = figure/max*($(".eating__slider").width()-$(".slider__reel").width()) + 'px';

//applying the positions
$(".slider__banana, .slider__reel").css({left: horizontal});
}