From: nael Date: Mon, 15 Apr 2019 16:45:14 +0000 (+0200) Subject: WIP #2647 @7:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f1fecd4a16be1114f97d13f45edc9edafc103ff6;p=bonaquiz.git WIP #2647 @7:00 --- diff --git a/index.php b/index.php index 0366609..77d6b34 100644 --- a/index.php +++ b/index.php @@ -160,14 +160,12 @@ $question = [ -
+
- -
-
+

The Bona 100‑year

anniversary quiz

Think you know Bona?
Put it to the test by taking part in our short quiz.

@@ -255,10 +253,10 @@ $question = [ for ($z = 0; $z < $question[$i]['imagesnb']; $z++) { $numb = $z; $num = $numb + 65; - if ($z % 2 == 0) // pair - { - echo ''; - } +// if ($z % 2 == 0) // pair +// { +// echo ''; +// } $score = 0; $correct = $question[$i]['correct']; @@ -267,19 +265,16 @@ $question = [ if ($correct === $imgCorrect) { $score = 1; } - echo ''; - echo ' -
  • -
    - ' . chr($num) . ' -
    -
    • -     '; + echo '
  • +
    + ' . chr($num) . ' +
    +
    • '; - if ($z % 2 == 1) // impair - { - echo '    '; - } +// if ($z % 2 == 1) // impair +// { +// echo '    '; +// } } echo ' @@ -331,12 +326,10 @@ $question = [
    - -
    -
    -
    - +
    +
    +
    diff --git a/js/bonaquiz.js b/js/bonaquiz.js index af79f05..531d006 100644 --- a/js/bonaquiz.js +++ b/js/bonaquiz.js @@ -3,6 +3,7 @@ $(function () { $(window).on('orientationchange', function () { console.log('orientation'); + setTimeout(function () { resize() }, 3000); @@ -26,13 +27,14 @@ $('.btn-next').on('click', function () { TweenMax.to($(this).closest('div.section'), delay, {x: '-=350px', opacity: 0}); $(this).closest('div.section').delay(delay * 1000).queue(function () { - $(this).closest('div.section').removeClass('active') + $(this).closest('div.section').removeClass('active'); + $(this).closest('div.section').next().addClass('active'); }); TweenMax.from($(this).closest('div.section').next(), delay, { x: '+=350px', opacity: 0, delay: delay, onComplete: AfterTransition }); - $(this).closest('div.section').next().addClass('active'); + let width = ($('.section:visible').attr("data-question") / nbquestions) * 100; $('.progressbar-value').css('width', width + '%'); @@ -177,42 +179,65 @@ function displayProgress() { } } +// FUNCTION RESIZE CONTENT -let breakpoint = 640, // Stop scaling the height below this width (let it scroll) +let breakpoint = 750, // Stop scaling the height below this width (let it scroll) scaler = $('#container'); - function resize() { scaler.attr('style', ''); // Reset scaling so we can measure base size var ww = $(window).width(), wh = $(window).height(), - // TODO: measure all content screens to find the optimal overall scale - baseWidth = scaler.outerWidth(), - baseHeight = scaler.outerHeight(), + sections = $('.section'), + baseWidth, // = scaler.outerWidth(), + baseHeight, // = scaler.outerHeight(), scale, translateAmount; + // Measure all content screens to find the optimal overall scale + baseWidth = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerWidth(); })); + baseHeight = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerHeight(); })); + + console.log(baseWidth, baseHeight); + + //// background resize + // $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: wh, maxHeight: wh, minHeight: wh}); + // + // var vs = $("section:visible"); + // var home = vs.hasClass('home'); + // + // var sh = vs.outerHeight(); + // sh *= 1.1; // Margins + // if (home) { + // sh *= 1.1; + // } + // var cssSection = {}; + // cssSection.top = Math.max((wh - sh) / 2, wh * 0.05); + // if (home) { + // $("#projector").css('bottom', Math.max(cssSection.top, wh * 0.05)); + // } + /**************************************************************************/ // Work out how much content needs to be scaled down, if at all scale = Math.min(1, ww / baseWidth, wh / baseHeight); // Once we're below the breakpoint, only scale based on the width, not height - if (ww < breakpoint) { - scale = Math.min(1, ww / baseWidth); - } + // if (ww < breakpoint) { + // scale = Math.min(1, ww / baseWidth); + // } // When translating a scaled element, the translate value needs to be scaled (-50% / scale) translateAmount = (-50 / scale) + '%'; // Different translation needed when only scaling for width - if (ww < breakpoint) { - scaler.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')'); - scaler.css('transform-origin', 'top'); - scaler.css('top', 0); - } else { + // if (ww < breakpoint) { + // scaler.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')'); + // scaler.css('transform-origin', 'top'); + // scaler.css('top', 0); + // } else { scaler.css('transform', 'scale('+ scale +') translate('+ translateAmount +', '+ translateAmount +')'); - } + // } } @@ -221,39 +246,39 @@ function resize() { - -/* -function resize() { - var ww = $(window).outerWidth(); - var hh = $(window).outerHeight(); - - $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: hh, maxHeight: hh, minHeight: hh}); - - var vs = $("section:visible"); - var home = vs.hasClass('home'); - $("section:visible").css('font-size', 10); - var sh = vs.outerHeight(); - sh *= 1.1; // Margins - if (home) { - sh *= 1.1; - } - console.log('resize', sh, hh); - var cssSection = {}; - if (sh > hh) { - var scale = hh / sh; - console.log('scale', scale); - $("section:visible").css('font-size', 10 * scale); - sh = vs.outerHeight(); - if (home) { - sh *= 1.1; - } - } - cssSection.top = Math.max((hh - sh) / 2, hh * 0.05); - - $("section:visible").css(cssSection); - - if (home) { - $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05)); - } -} -*/ +// +// +// function resize() { +// var ww = $(window).outerWidth(); +// var hh = $(window).outerHeight(); +// +// $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: hh, maxHeight: hh, minHeight: hh}); +// +// var vs = $("section:visible"); +// var home = vs.hasClass('home'); +// $("section:visible").css('font-size', 10); +// var sh = vs.outerHeight(); +// sh *= 1.1; // Margins +// if (home) { +// sh *= 1.1; +// } +// console.log('resize', sh, hh); +// var cssSection = {}; +// if (sh > hh) { +// var scale = hh / sh; +// console.log('scale', scale); +// $("section:visible").css('font-size', 10 * scale); +// sh = vs.outerHeight(); +// if (home) { +// sh *= 1.1; +// } +// } +// cssSection.top = Math.max((hh - sh) / 2, hh * 0.05); +// +// $("section:visible").css(cssSection); +// +// if (home) { +// $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05)); +// } +// } +// diff --git a/style/style.sass b/style/style.sass index 68f3c1c..ffda9d8 100644 --- a/style/style.sass +++ b/style/style.sass @@ -1,6 +1,10 @@ $green: #669933 $darkblue: #18264f +$base-font-size: 16 // Default + +@function rem($pixels, $context: $base-font-size) + @return #{$pixels/$context}rem * margin: 0 @@ -16,9 +20,11 @@ html font-family: Helvetica, sans-serif height: 100% max-height: 100% + font-size: 16px body font-family: Helvetica, sans-serif + font-size: rem(30) height: 100% max-height: 100% background-color: #0a246e @@ -28,11 +34,9 @@ body max-width: 100% opacity: 0 transition: opacity 500ms - &.loaded opacity: 1 - #container //min-height: 100% //height: 100% @@ -40,18 +44,24 @@ body //min-width: 100% //overflow-x: hidden //overflow-y: auto + padding: 80px position: absolute z-index: 2 top: 50% left: 50% - //transform: translate(-50%, -50%) + transform: translate(-50%, -50%) + //width: 100% .active display: block !important .section display: none - height: 100% + //height: 100% + width: 1500px + + @media (max-width: 750px) + width: 750px a.btn-next text-decoration: none @@ -60,30 +70,28 @@ a.btn-next section z-index: 1 position: relative - max-width: 1200px - padding: 0 2em + //max-width: 1200px margin: 0 auto - font-size: 10px + //font-size: 10px text-align: center h1 - font-size: 9em + font-size: rem(90) h2 - font-size: 6em + font-size: rem(60) h3 - font-size: 3.7em + font-size: rem(37) margin-top: 1.62em - line-height: 1.5em + line-height: 1.5 h4 - font-size: 2.45em - line-height: 1.5em + line-height: 1.5 a.button display: inline-block - font-size: 5.6em + font-size: rem(55) color: #fff background-color: $green border-radius: 1.25em @@ -103,13 +111,15 @@ section #background position: absolute top: 0 + right: 0 + bottom: 0 left: 0 #projector position: absolute - bottom: 0 - width: 100% - height: 100% + top: 0 + right: 0 + bottom: 5% left: 0 background-image: url("../images/projector.svg") background-repeat: no-repeat @@ -125,13 +135,9 @@ section .questions position: static - padding-top: 3em - #questionNumber - margin-top: 1em text-transform: uppercase margin-bottom: 20px - &::after content: '' display: block @@ -144,7 +150,9 @@ section #questionAsk margin: 4em auto 2em auto - max-width: 31em + max-width: 800px + @media (max-width: 750px) + max-width: 1200px ul list-style: none @@ -154,16 +162,16 @@ section position: relative max-width: 40em min-width: 30em - height: 9em + height: 3.33em background: white margin: 0 auto border-radius: 5.25em margin-bottom: 2em cursor: pointer transition: 400ms all ease + font-size: rem(30) &--text - font-size: 1.9em color: $darkblue padding-left: 1.6em padding-right: 0.5em @@ -173,11 +181,11 @@ section &--letter color: white left: 1.8em - font-size: 2.2em + font-size: rem(25) &--circle - width: 5em - height: 5em + width: 2em + height: 2em background: #669933 border-radius: 50% position: relative @@ -229,7 +237,7 @@ section left: 0 .correctInfo - font-size: 2em + font-size: rem(30) .correctAnswer margin-top: 2em @@ -245,52 +253,56 @@ section color: white .response - font-size: 2.2em + font-size: rem(30) max-width: 27em margin: 2em auto 0 auto -section.questions a.button.next - font-size: 3.6em - z-index: 5 - position: relative - margin-top: 1.14em - margin-bottom: 2em +//section.questions a.button.next +// font-size: rem(44) +// z-index: 5 +// position: relative +// margin-top: 1.14em +// margin-bottom: 2em .circleContainer - span - display: inline-flex - justify-content: center - align-items: center + //span + // display: inline-flex + // justify-content: center + // align-items: center + display: flex !important + align-items: center + justify-content: space-around + flex-wrap: wrap + margin-bottom: -50px - .questionsCircle + .questionsCircle + width: 320px + height: 320px + background: white + //display: inline-block + cursor: pointer + //padding: 10em + margin-bottom: 50px + border-radius: 50% + position: relative + background-size: cover + border: 3px solid white + + &__container + display: flex + justify-content: center + align-items: center width: 2em height: 2em - background: white - display: inline-block - cursor: pointer - padding: 10em - margin: 2em + //padding: 2em + background: $green border-radius: 50% - position: relative - background-size: cover - border: 3px solid white - - &__container - display: flex - justify-content: center - align-items: center - width: 2em - height: 2em - padding: 2em - background: $green - border-radius: 50% - position: absolute - left: 1em - top: 1em - color: white - - &--letter - font-size: 1.5em + position: absolute + left: 1em + top: 1em + color: white + &--letter + font-size: rem(25) .answerCircle border: solid 3px $green !important @@ -310,7 +322,6 @@ section.questions a.button.next left: 50% !important transform: translateX(-50%) - .borderScore border-radius: 50% width: 10em @@ -335,7 +346,7 @@ section.questions a.button.next .inner color: $darkblue - font-size: 8em + font-size: rem(30) @media only screen and (max-width: 529px)