diff --git a/client/less/challenge.less b/client/less/challenge.less index f10bac56a4..f9c1b566a9 100644 --- a/client/less/challenge.less +++ b/client/less/challenge.less @@ -1,39 +1,114 @@ -.bonfire-instructions h4 { - margin-bottom: 0; +.challenge-step-description { + font-size: 1.5em; + text-align: center; +} +.challenge-step-counter { + font-size: 20px; + line-height: 44px; } -.bonfire-instructions blockquote { - font-size: 90%; - font-family: @font-family-monospace; - color: @code-color; - background-color: #fffbe5; - border-radius: @border-radius-base; - border: 1px solid @pre-border-color; - white-space: pre; - padding: 5px 10px; - margin-bottom: 10px; - margin-top: -10px; - overflow: auto; +.challenge-instructions-title { + margin-top: 0; + i { + margin-left: 5px; + line-height: 20px; + } } -.bonfire-instructions dfn { - font-family: @font-family-monospace; - color: @code-color; - background-color: @code-bg; - border-radius: @border-radius-base; +.challenge-instructions { + margin-bottom: 5px; + h4 { + margin-bottom: 0; + } + blockquote { + font-size: 90%; + font-family: @font-family-monospace; + color: @code-color; + background-color: #fffbe5; + border-radius: @border-radius-base; + border: 1px solid @pre-border-color; + white-space: pre; + padding: 5px 10px; + margin-bottom: 10px; + margin-top: -10px; + overflow: auto; + } + dfn { + font-family: @font-family-monospace; + color: @code-color; + background-color: @code-bg; + border-radius: @border-radius-base; + } + & a, #MDN-links a { + color: #31708f; + } + & a::after, #MDN-links a::after { + font-size: 70%; + font-family: FontAwesome; + content: " \f08e"; + } + ol { + font-size: 16px; + } } -.bonfire-instructions a, #MDN-links a { - color: #31708f; +#testSuite { + margin-top: 10px; + > div >.row { + margin: 0!important; + } } -.bonfire-instructions a::after, #MDN-links a::after { - font-size: 70%; - font-family: FontAwesome; - content: " \f08e"; +.test-output { + font-size: 15px; + font-family: "Ubuntu Mono"; + margin-top: 8px; + line-height:20px; } -.bonfire-instructions ol { - font-size: 16px; +.grayed-out-test-output { + color: @gray-light; } +.big-error-icon { + font-size: 30px; + color: @brand-danger; + top:50%; +} + +.big-success-icon { + font-size: 30px; + color: @brand-primary; +} + +iframe.iphone { + border: none; + @media(min-width: 992px) { + width: 280px; + height: 500px; + position: absolute; + top: 70px; + right: 35px; + overflow-y: scroll; + } + @media(max-width: 991px) { + width: 100%; + border-radius: 5px; + overflow-y: visible; + height: 500px; + } + @media (min-width: 1200px) and (max-width: 1250px){ + right: 22px; + } +} + +// To adjust right margin, negative values bring the image closer to the edge of the screen +.iphone-position { + position: absolute; + top: -50px; + z-index: -1; + right: -195px; + @media (min-width: 1200px) and (max-width: 1250px){ + right: -207px; + } +} diff --git a/client/less/lib/bootstrap/variables.less b/client/less/lib/bootstrap/variables.less index ad85a1261b..49ecd0c331 100755 --- a/client/less/lib/bootstrap/variables.less +++ b/client/less/lib/bootstrap/variables.less @@ -348,7 +348,7 @@ // Basics of a navbar @navbar-height: 50px; -@navbar-margin-bottom: @line-height-computed; +@navbar-margin-bottom: @line-height-computed+10px; @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor((@grid-gutter-width / 2)); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); diff --git a/client/less/main.less b/client/less/main.less index 52d88bb4ea..69bc7c4017 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -65,7 +65,7 @@ body.top-and-bottom-margins { } body.no-top-and-bottom-margins { - margin: 70px 20px 0px 20px; + margin: 75px 20px 0px 20px; } h1, h2 { @@ -655,10 +655,6 @@ thead { font-size: 15px; } -.bonfire-instructions { - margin-bottom: 5px; -} - .graph-rect { fill: #ddd !important } @@ -695,22 +691,6 @@ form.code span { overflow-y: auto; } -.big-error-icon { - font-size: 40px; - color: @brand-danger; -} - -.big-success-icon { - font-size: 40px; - color: @brand-primary; -} - -.test-output { - font-size: 15px; - font-family: "Ubuntu Mono"; - margin-top: 8px; -} - #mainEditorPanel .panel-body { padding-bottom: 0px; } @@ -726,41 +706,6 @@ div.CodeMirror-scroll { .cm-s-monokai.CodeMirror { border-radius: 5px; } -.bonfire-flames { - margin-top: -20px; - margin-bottom: -2px; -} - -.bonfire-top { - margin-top: -30px; -} - -iframe.iphone { - border: none; - @media(min-width: 992px) { - width: 280px; - height: 500px; - position: absolute; - top: 70px; - right: 25px; - overflow-y: scroll; - } - @media(max-width: 991px) { - width: 100%; - border-radius: 5px; - overflow-y: visible; - height: 500px; - } -} - -// To adjust right margin, negative values bring the image closer to the edge of the screen -.iphone-position { - position: absolute; - top: -50px; - right: -205px; - z-index: -1; -} - .courseware-height { min-height: 650px; } @@ -867,7 +812,7 @@ iframe.iphone { } .button-spacer { - padding: 5px 0 2px 0; + padding: 5px 0; } .spacer { @@ -1023,10 +968,6 @@ hr { border-radius: 5px; } -.grayed-out-test-output { - color: @gray-light; -} - code { padding: 0; } @@ -1064,10 +1005,6 @@ code { shape-rendering: crispEdges; } -#testSuite > div >.row { - margin: 0!important; -} - .gitter-chat-embed { z-index: 20000 !important; } diff --git a/client/less/map.less b/client/less/map.less index a8633661dc..e0560b9969 100644 --- a/client/less/map.less +++ b/client/less/map.less @@ -132,6 +132,9 @@ position:relative; #nested { margin:0 15px; + @media (max-width: 400px) { + margin:0; + } } a:focus { text-decoration: none; @@ -170,7 +173,10 @@ p { text-indent: -15px; margin-left: 60px; - padding-right: 20px + padding-right: 20px; + @media (max-width: 400px) { + margin-left:30px; + } } } diff --git a/server/views/challenges/showBonfire.jade b/server/views/challenges/showBonfire.jade index 0b4179b58e..8ab0684c4a 100644 --- a/server/views/challenges/showBonfire.jade +++ b/server/views/challenges/showBonfire.jade @@ -9,14 +9,14 @@ block content .scroll-locker(id = "scroll-locker") .innerMarginFix(style=' width: 99%') #testCreatePanel - h4.text-center= name + h4.text-center.challenge-instructions-title= name if (isCompleted) |   i.ion-checkmark-circled.text-primary(title="Completed") hr .row .col-xs-12 - .bonfire-instructions + .challenge-instructions for sentence in description if (/blockquote|h4|table/.test(sentence)) !=sentence diff --git a/server/views/challenges/showHTML.jade b/server/views/challenges/showHTML.jade index ac1b3588eb..f5cbfeb9a6 100644 --- a/server/views/challenges/showHTML.jade +++ b/server/views/challenges/showHTML.jade @@ -10,12 +10,12 @@ block content .innerMarginFix(style = "width: 99%;") .row .col-xs-12 - h4.text-center= name + h4.text-center.challenge-instructions-title= name if (isCompleted) |   i.ion-checkmark-circled.text-primary(title="Completed") hr - .bonfire-instructions + .challenge-instructions for sentence in description if (/blockquote|h4|table/.test(sentence)) !=sentence diff --git a/server/views/challenges/showJS.jade b/server/views/challenges/showJS.jade index d7246ff53f..69ede288ab 100644 --- a/server/views/challenges/showJS.jade +++ b/server/views/challenges/showJS.jade @@ -9,14 +9,14 @@ block content .scroll-locker(id = "scroll-locker") .innerMarginFix(style = "width: 99%;") #testCreatePanel - h4.text-center= name + h4.text-center.challenge-instructions-title= name if (isCompleted) |   i.ion-checkmark-circled.text-primary(title="Completed") hr .row .col-xs-12 - .bonfire-instructions + .challenge-instructions for sentence in description if (/blockquote|h4|table/.test(sentence)) !=sentence diff --git a/server/views/challenges/showStep.jade b/server/views/challenges/showStep.jade index 199b52e1ae..1249b842a2 100644 --- a/server/views/challenges/showStep.jade +++ b/server/views/challenges/showStep.jade @@ -2,29 +2,29 @@ extends ../layout-wide block content .row .col-md-8.col-md-offset-2 - for step, index in description - .challenge-step(class=index !== 0 ? 'hidden': '') - a(href=step[0] data-lightbox='img-enlarge') - img.gif-block.img-center.img-responsive(src='#{step[0]}' alt='#{step[1]}') - .row - .spacer - .col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2 - p!= step[2] + for step, index in description + .challenge-step(class=index !== 0 ? 'hidden': '') + a(href=step[0] data-lightbox='img-enlarge') + img.gif-block.img-center.img-responsive(src='#{step[0]}' alt='#{step[1]}') + .row .spacer - .challenge-button-block - if step[3] - a.btn.btn-block.btn-primary.challenge-step-btn-action.btn-lg(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab (this unlocks the next step) - .button-spacer - if index === 0 - .col-sm-5.hidden-xs   - else - .btn.btn-primary.btn-primary-ghost.col-sm-5.col-xs-12.challenge-step-btn-prev.btn-lg(id='#{index - 1}') Go to my previous step - .challenge-step-counter.large-p.col-sm-2.col-xs-12.text-center (#{index + 1} / #{description.length}) - if index + 1 === description.length - .btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-finish.btn-lg(id='last' class=step[3] && !isCompleted ? 'disabled' : '') Finish challenge - else - .btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-next.btn-lg(id='#{index}' class=step[3] && !isCompleted ? 'disabled' : '') Go to my next step - .clearfix + .col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2 + p.challenge-step-description!= step[2] + .spacer + .challenge-button-block + if step[3] + a.btn.btn-block.btn-primary.challenge-step-btn-action.btn-lg(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab (this unlocks the next step) + .button-spacer + if index === 0 + .col-sm-4.hidden-xs   + else + .btn.btn-primary.btn-primary-ghost.col-sm-4.col-xs-12.challenge-step-btn-prev.btn-lg(id='#{index - 1}') Go to my previous step + .challenge-step-counter.large-p.col-sm-4.col-xs-12.text-center (#{index + 1} / #{description.length}) + if index + 1 === description.length + .btn.btn-primary.col-sm-4.col-xs-12.challenge-step-btn-finish.btn-lg(id='last' class=step[3] && !isCompleted ? 'disabled' : '') Finish challenge + else + .btn.btn-primary.col-sm-4.col-xs-12.challenge-step-btn-next.btn-lg(id='#{index}' class=step[3] && !isCompleted ? 'disabled' : '') Go to my next step + .clearfix .spacer #challenge-step-modal.modal(tabindex='-1') .modal-dialog.animated.fadeIn.fast-animation diff --git a/server/views/challenges/showVideo.jade b/server/views/challenges/showVideo.jade index 2fac658e7a..0e37f3bb9f 100644 --- a/server/views/challenges/showVideo.jade +++ b/server/views/challenges/showVideo.jade @@ -1,8 +1,8 @@ extends ../layout-wide block content .row - .col-xs-12.col-sm-12.col-md-4.bonfire-top - h4.text-center= name + .col-xs-12.col-sm-12.col-md-4 + h4.text-center.challenge-instructions-title= name hr ol for step, index in description diff --git a/server/views/challenges/showZiplineOrBasejump.jade b/server/views/challenges/showZiplineOrBasejump.jade index b50cd75467..29aa937356 100644 --- a/server/views/challenges/showZiplineOrBasejump.jade +++ b/server/views/challenges/showZiplineOrBasejump.jade @@ -2,14 +2,14 @@ extends ../layout-wide block content .row .col-md-4 - h4.text-center= name + h4.text-center.challenge-instructions-title= name hr ol for step, index in description .row.checklist-element(id="#{dashedName + index}") - .col-xs-2.col-sm-1.col-md-2.padded-ionic-icon.text-right + .col-xs-3.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 + .col-xs-9.col-sm-11.col-md-10 li.step-text.wrappable!= step .col-xs-12.col-sm-12.col-md-8 .embed-responsive.embed-responsive-16by9