From e02000bddde86b4d48b8ce2d78fd9e2a2cf97818 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Fri, 15 Jan 2016 17:19:39 -0800 Subject: [PATCH 1/3] start adding accordion map --- client/less/lib/bootstrap/variables.less | 6 +-- client/less/main.less | 2 +- server/views/map/show.jade | 58 +++++++++++++++++++++++- 3 files changed, 61 insertions(+), 5 deletions(-) diff --git a/client/less/lib/bootstrap/variables.less b/client/less/lib/bootstrap/variables.less index 86168ec0b3..99210569f7 100755 --- a/client/less/lib/bootstrap/variables.less +++ b/client/less/lib/bootstrap/variables.less @@ -14,9 +14,9 @@ @gray-light: lighten(@gray-base, 46.7%); // #777 @gray-lighter: lighten(@gray-base, 93.5%); // #eee -@brand-primary: forestgreen; -@brand-success: #457e86; -@brand-info: #2b414f; +@brand-primary: darkgreen; +@brand-success: #457E86; +@brand-info: #4A2B0F; @brand-warning: #f0ad4e; @brand-danger: #d9534f; diff --git a/client/less/main.less b/client/less/main.less index 5461b43c63..40233c8f9e 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -333,7 +333,7 @@ a { } p { - font-size: 20px; + font-size: 16px; } .map-aside-body p { diff --git a/server/views/map/show.jade b/server/views/map/show.jade index 477c6777f4..953d5a8d01 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -1,5 +1,61 @@ extends ../layout-wide block content + #accordion.panel-group + for superBlock, index in superBlocks + .panel.panel-default + .panel-heading + h4.panel-title + a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) + | #{superBlock.name} + div(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse") + .panel-body + #nested.panel-group + for challengeBlock in superBlock.blocks + .panel.panel-default + .panel-heading + h4.panel-title + a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.split(' ').join('-')) + | #{challengeBlock.name} + div(id = "nested-collapse"+challengeBlock.name.split(' ').join('-') class = "panel-collapse collapse") + .panel-body + for challenge in challengeBlock.challenges + if challenge.completed + p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   + a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') + = challenge.title + span.sr-only= " Complete" + else if challenge.isRequired + p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   + a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') + span= challenge.title + span.sr-only= " Incomplete" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + span.text-primary     + strong * + else + p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   + a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') + span= challenge.title + span.sr-only= " Incomplete" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + + + + .row .col-xs-12.col-md-6.col-md-offset-3 for superBlock, index in superBlocks @@ -18,7 +74,7 @@ block content .col-xs-12.col-sm-9.col-md-10 if challenge.completed p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a(href="/challenges/#{challenge.dashedName}" target='_parent') + a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') = challenge.title span.sr-only= " Complete" else if challenge.isRequired From 932a0a975b29d3e2103753a6fe695fb5590ebcb2 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Fri, 15 Jan 2016 18:00:13 -0800 Subject: [PATCH 2/3] improve the challenge accordion --- client/less/main.less | 2 +- .../00-getting-started/getting-started.json | 2 +- server/views/map/show.jade | 173 ++++++------------ 3 files changed, 55 insertions(+), 122 deletions(-) diff --git a/client/less/main.less b/client/less/main.less index 40233c8f9e..533378af8d 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -400,7 +400,7 @@ p { } h4 { - font-size: 26px; + font-size: 22px; } .btn-responsive { diff --git a/seed/challenges/00-getting-started/getting-started.json b/seed/challenges/00-getting-started/getting-started.json index 17820d4ba1..2fef1f3c6e 100644 --- a/seed/challenges/00-getting-started/getting-started.json +++ b/seed/challenges/00-getting-started/getting-started.json @@ -1,5 +1,5 @@ { - "name": "Getting Started", + "name": "Join the Free Code Camp Community", "order": 1, "time": "15 minutes", "helpRoom": "Help", diff --git a/server/views/map/show.jade b/server/views/map/show.jade index 953d5a8d01..d567ffc60d 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -1,125 +1,58 @@ extends ../layout-wide block content + .text-center + h1 Challenge Map + p Required challenges are marked with a * + p Click the   + i.fa.fa-external-link + |  button to view this map in full screen. + hr #accordion.panel-group for superBlock, index in superBlocks - .panel.panel-default - .panel-heading - h4.panel-title - a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) - | #{superBlock.name} - div(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse") - .panel-body - #nested.panel-group + h3 + a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) + | #{superBlock.name} + ul(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse") + #nested.panel-group for challengeBlock in superBlock.blocks - .panel.panel-default - .panel-heading - h4.panel-title - a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.split(' ').join('-')) - | #{challengeBlock.name} - div(id = "nested-collapse"+challengeBlock.name.split(' ').join('-') class = "panel-collapse collapse") - .panel-body - for challenge in challengeBlock.challenges - if challenge.completed - p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') - = challenge.title - span.sr-only= " Complete" - else if challenge.isRequired - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') - span= challenge.title - span.sr-only= " Incomplete" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - span.text-primary     - strong * - else - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') - span= challenge.title - span.sr-only= " Incomplete" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - - - - - .row - .col-xs-12.col-md-6.col-md-offset-3 - for superBlock, index in superBlocks - if index > 0 - .row - h2.text-center #{superBlock.name} - .text-center.small Requires completion of the below challenges marked with a * - hr - for challengeBlock in superBlock.blocks - .row - a(href='#' name=challengeBlock.dashedName) - .spacer.negative-55 - .row - h3.bold #{challengeBlock.name} (#{challengeBlock.time}) - for challenge in challengeBlock.challenges - .col-xs-12.col-sm-9.col-md-10 - if challenge.completed - p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') - = challenge.title - span.sr-only= " Complete" - else if challenge.isRequired - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') - span= challenge.title - span.sr-only= " Incomplete" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - span.text-primary     - strong * - else - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') - span= challenge.title - span.sr-only= " Incomplete" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - .row - h2.text-center Full Stack Development Certification - hr - p.ion-locked.padded-ionic-icon.negative-15   Greenfield Nonprofit Project 1 - p.ion-locked.padded-ionic-icon.negative-15   Greenfield Nonprofit Project 2 - p.ion-locked.padded-ionic-icon.negative-15   Legacy Nonprofit Project 1 - p.ion-locked.padded-ionic-icon.negative-15   Legacy Nonprofit Project 2 - p.ion-locked.padded-ionic-icon.negative-15   Claim your Full Stack Development Certification - - .row - h2.text-center Coding Interview Preparation - hr - p.ion-locked.padded-ionic-icon.negative-15   Whiteboard Coding Interview Training - p.ion-locked.padded-ionic-icon.negative-15   Critical Thinking Interview Training - p.ion-locked.padded-ionic-icon.negative-15   Mock Interview 1 - p.ion-locked.padded-ionic-icon.negative-15   Mock Interview 2 - p.ion-locked.padded-ionic-icon.negative-15   Mock Interview 3 - .spacer + h4 + a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) + | #{challengeBlock.name} + div(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse") + ul + br + for challenge in challengeBlock.challenges + if challenge.completed + p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   + a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') + = challenge.title + span.sr-only= " Complete" + else if challenge.isRequired + p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   + a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') + span= challenge.title + span.sr-only= " Incomplete" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + span.text-primary     + strong * + else + p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   + a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') + span= challenge.title + span.sr-only= " Incomplete" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + .spacer From 2f992e3df9c5ba4f5d41e03a41426727d8a6dc2c Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Fri, 15 Jan 2016 20:05:34 -0800 Subject: [PATCH 3/3] improve accordion. It is not done but way better than before --- client/less/main.less | 12 +++++ server/views/map/show.jade | 105 +++++++++++++++++++++---------------- 2 files changed, 71 insertions(+), 46 deletions(-) diff --git a/client/less/main.less b/client/less/main.less index 533378af8d..3eac391f5f 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -403,6 +403,18 @@ h4 { font-size: 22px; } +.no-transition { + -webkit-transition: height 0.001s; + -moz-transition: height 0.001s; + -ms-transition: height 0.001s; + -o-transition: height 0.001s; + transition: height 0.001s; +} + +.margin-left-10 { + margin-left: 10px; +} + .btn-responsive { @media (max-width: 768px) { font-size: 15px; diff --git a/server/views/map/show.jade b/server/views/map/show.jade index d567ffc60d..433800dc68 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -3,56 +3,69 @@ block content .text-center h1 Challenge Map p Required challenges are marked with a * - p Click the   - i.fa.fa-external-link - |  button to view this map in full screen. + .row + .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4 + a.btn.btn-primary.btn-block(href='/map' target='_blank') View this map in full screen + // .btn.btn-primary.btn-block#showAll Expand hr - #accordion.panel-group + #accordion for superBlock, index in superBlocks - h3 + h2 + i.fa.fa-caret-right + |   a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) | #{superBlock.name} - ul(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse") + div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse no-transition") #nested.panel-group for challengeBlock in superBlock.blocks - h4 + h3 + i.fa.fa-caret-right + |   a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) - | #{challengeBlock.name} - div(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse") - ul - br - for challenge in challengeBlock.challenges - if challenge.completed - p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') - = challenge.title - span.sr-only= " Complete" - else if challenge.isRequired - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') - span= challenge.title - span.sr-only= " Incomplete" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - span.text-primary     - strong * - else - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   - a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') - span= challenge.title - span.sr-only= " Incomplete" - if challenge.markNew - span.text-success.small     - strong - em New - if challengeBlock.isComingSoon - span.text-success.small     - strong - em Coming Soon - .spacer + | #{challengeBlock.name} (#{challengeBlock.time}) + div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse no-transition") + for challenge in challengeBlock.challenges + if challenge.completed + p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     + a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') + = challenge.title + span.sr-only= " Complete" + else if challenge.isRequired + p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     + a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') + span= challenge.title + span.sr-only= " Incomplete" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + span.text-primary     + strong * + else + p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     + a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') + span= challenge.title + span.sr-only= " Incomplete" + if challenge.markNew + span.text-success.small     + strong + em New + if challengeBlock.isComingSoon + span.text-success.small     + strong + em Coming Soon + .spacer +script. + $(document).ready(function(){ + $('#accordProfile').on('shown', function () { + $(".fa-caret-right").removeClass("icon-chevron-down").addClass("icon-chevron-up"); + }); + + $('#accordProfile').on('hidden', function () { + $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down"); + }); + });