From b671ab981780fdc350379f0086422704add59752 Mon Sep 17 00:00:00 2001 From: Michael Q Larson Date: Sat, 18 Apr 2015 15:00:31 -0700 Subject: [PATCH] move checkboxes to the left of the showVideo view --- public/css/main.less | 7 ++++++- public/js/main.js | 6 +++--- seed_data/coursewares.json | 22 +++++++++++----------- views/coursewares/showVideo.jade | 11 ++++++----- 4 files changed, 26 insertions(+), 20 deletions(-) diff --git a/public/css/main.less b/public/css/main.less index 7a0f333d14..d6e905c8ea 100644 --- a/public/css/main.less +++ b/public/css/main.less @@ -911,7 +911,6 @@ iframe.iphone { } .step-text { - margin-left: -10px; line-height: 120%; padding-bottom: 10px; } @@ -928,6 +927,12 @@ iframe.iphone { padding-top: 5px; } +.checklist-element { + margin-left: -60px; + margin-right: -20px; +} + + //uncomment this to see the dimensions of all elements outlined in red //* { // border-color: red; diff --git a/public/js/main.js b/public/js/main.js index 91c4462aaa..f88e579349 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -39,19 +39,19 @@ $(document).ready(function() { }); $('.step-text').on('click', function() { - $(this).siblings().children('input').trigger('click'); + $(this).parent().parent().parent().children().children('input').trigger('click'); }); $('.challenge-list-checkbox').on('change', function() { var checkboxId = $(this).parent().parent().attr('id'); if ($(this).is(":checked")) { - $(this).parent().parent().children('.step-text').addClass('faded'); + $(this).parent().siblings().children().addClass('faded'); if (!localStorage || !localStorage[checkboxId]) { localStorage[checkboxId] = true; } } if (!$(this).is(":checked")) { - $(this).parent().parent().children('.step-text').removeClass('faded'); + $(this).parent().siblings().children().removeClass('faded'); if (localStorage[checkboxId]) { localStorage.removeItem(checkboxId); } diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index 012c366e07..3a001a05db 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -172,56 +172,56 @@ "jQuery is a powerful tool for manipulating HTML elements.", "It's a lot easier to use than JavaScript itself, so we'll learn it first.", "It's also extremely popular with employers, so we're going to learn it well.", - "Code School has an excellent free course that will walk us through the basics of jQuery.", - "Go to http://try.jquery.com/levels/1/challenges/1 and complete the first section." + "CodeCademy has an excellent free course that will walk us through the basics of jQuery.", + "Go to http://try.jquery.com/levels/1/challenges/1 and complete the first section." ], "challengeType": 2, "tests": [] }, { "_id": "bd7113d8c441eddfaeb5bdef", - "name": "Traverse the DOM", + "name": "Write Functions with jQuery", "difficulty": 0.12, "challengeSeed": "114591805", "description": [ "Now let's learn more about DOM traversal - that is, moving from one HTML element to the next.", - "Go to http://try.jquery.com/levels/2/challenges/1 and complete the second section." + "Go to http://www.codecademy.com/courses/web-beginner-en-GfjC6/0/1 and complete the second section." ], "challengeType": 2, "tests": [] }, { "_id": "bd7114d8c441eddfaeb5bdef", - "name": "Work with the DOM", + "name": "Harness Dynamic HTML", "difficulty": 0.13, "challengeSeed": "114591804", "description": [ "Let's learn some more advanced ways to use jQuery to manipulate the DOM.", - "Go to http://try.jquery.com/levels/3/challenges/1 and complete the third section." + "Go to http://www.codecademy.com/courses/web-beginner-en-v6phg/0/1 and complete the third section." ], "challengeType": 2, "tests": [] }, { "_id": "bd7115d8c441eddfaeb5bdef", - "name": "Listen for DOM Events", + "name": "Listen for jQuery Events", "difficulty": 0.14, "challengeSeed": "114591802", "description": [ "Now let's learn how to use jQuery Listeners. These will \"listen\" for something to happen, and then trigger a subsequent event", - "Go to http://try.jquery.com/levels/4/challenges/1 and complete the fourth section." + "Go to http://www.codecademy.com/courses/web-beginner-en-JwhI1/0/1 and complete the fourth section." ], "challengeType": 2, "tests": [] }, { "_id": "bd7116d8c441eddfaeb5bdef", - "name": "Use jQuery for Styling", + "name": "Trigger jQuery Effects", "difficulty": 0.15, "challengeSeed": "114591801", "description": [ "Finally, let's use jQuery to manipulate the way websites look by changing the CSS of elements.", - "Go to http://try.jquery.com/levels/5/challenges/1 and complete the fifth section." + "Go to http://www.codecademy.com/courses/web-beginner-en-jtFIC/0/1 and complete the fifth section." ], "challengeType": 2, "tests": [] @@ -461,7 +461,7 @@ "description": [ "Code School has a short, free Angular.js course. This will give us a quick tour of Angular.js's mechanics and features.", "In this course, we'll build a virtual shop entirely in Angular.js.", - "Go to http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/video/1 and complete the section." + "Go to http://www.codecademy.com/en/learn/learn-angularjs/topics/your-first-app/exercises/your-first-app-hello-angularjs-i and complete the section." ], "challengeType": 2, "tests": [] diff --git a/views/coursewares/showVideo.jade b/views/coursewares/showVideo.jade index aba672bada..155dd499da 100644 --- a/views/coursewares/showVideo.jade +++ b/views/coursewares/showVideo.jade @@ -7,11 +7,12 @@ block content h4 ol for step, index in details - .row - li.checklist-element(id="#{dashedName + index}") - .col-xs-2 - input(type='checkbox' class='challenge-list-checkbox') - .col-xs-10.step-text!= step + .row.checklist-element(id="#{dashedName + index}") + .col-xs-2.col-sm-1.col-md-2.padded-ionic-icon.text-center + input(type='checkbox' class='challenge-list-checkbox') + .col-xs-10.col-sm-11.col-md-10 + li + .step-text!= step .col-xs-12.col-sm-12.col-md-8 .embed-responsive.embed-responsive-16by9 iframe.embed-responsive-item(src='//player.vimeo.com/video/#{video}')