From 7a092da1d2930ecb26517ff2c61792a59e21eee1 Mon Sep 17 00:00:00 2001 From: silas Date: Sat, 24 Apr 2021 10:01:39 +0200 Subject: [PATCH] design ready --- src/client/js/Sites/LevelSite.ts | 26 ++++++++++++++------------ src/client/js/Sites/MainMenuSite.ts | 6 +++--- src/client/js/Sites/TutorialSite.ts | 5 +++++ src/client/sass/_navbarOverride.scss | 7 +++++++ src/client/sass/_themeBlue.scss | 22 +++++++++++----------- src/client/sass/wordRotator.scss | 9 ++++----- 6 files changed, 44 insertions(+), 31 deletions(-) create mode 100644 src/client/js/Sites/TutorialSite.ts diff --git a/src/client/js/Sites/LevelSite.ts b/src/client/js/Sites/LevelSite.ts index 0ddc59c..d3f67b4 100644 --- a/src/client/js/Sites/LevelSite.ts +++ b/src/client/js/Sites/LevelSite.ts @@ -82,7 +82,7 @@ export class LevelSite extends MenuSite { async onConstruct(args) { this.levelCounter = Helper.nonNull(await NativeStoragePromise.getItem("levelCounter"), 1); - // this.levelCounter = 987; + // this.levelCounter = 9999; this.levelScaler = () => { }; this.wonParams = { @@ -180,7 +180,7 @@ export class LevelSite extends MenuSite { let levelSegment = this.findBy("#level"); ViewHelper.removeAllChildren(levelSegment).appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 1, level.words[0].length * 1.5, null, 0); + this.levelScaler = await scaleHelper.scaleTo(1, levelSegment, levelSegment.parentElement, false, false, 1, level.words[0].length * 1.5, null, 0); this.level = level; Matomo.push(["trackEvent", "LevelSite", "LoadLastLevel"]); @@ -380,7 +380,7 @@ export class LevelSite extends MenuSite { let leafs = level.getLeafSegments(); leafs.forEach((leaf, i) => { let elem = leaf.getElement(); - elem.style.animationDelay = i*50+"ms"; + elem.style.animationDelay = i * 50 + "ms"; elem.classList.add("jump-animation"); }) @@ -421,6 +421,8 @@ export class LevelSite extends MenuSite { } async tutorial() { + const tutorialScale = 0.01; + if (this.level.id === LevelSite.TUTORIAL.FIRST_LEVEL) { let currentStep = Helper.nonNull(await NativeStoragePromise.getItem("tutorial-step"), "1"); @@ -436,10 +438,10 @@ export class LevelSite extends MenuSite { this.tutorial(); }); - let textElem = this.findBy(".tutorial-text .step-1"); + // let textElem = this.findBy(".tutorial-text .step-1"); await this.levelScaler(); - scaleHelper.scaleTo(0.4, textElem, textElem.parentElement, null, true, 2, 2); + // scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 2, 2); break; } @@ -456,13 +458,12 @@ export class LevelSite extends MenuSite { this.coinAction.setName(Helper.nonNull(await NativeStoragePromise.getItem("coins"), "0")); // this.coinAction.redraw(); }); - // this.levelScaler(); }); - let textElem = this.findBy(".tutorial-text .step-2"); + // let textElem = this.findBy(".tutorial-text .step-2"); await this.levelScaler(); - scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2); + // scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2); break; } @@ -489,10 +490,10 @@ export class LevelSite extends MenuSite { }; this.findBy(".help-action").addEventListener("click", eventListener); - let textElem = this.findBy(".tutorial-text .step-3"); + // let textElem = this.findBy(".tutorial-text .step-3"); await this.levelScaler(); - scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2); + // scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2); break; } default: { @@ -525,10 +526,11 @@ export class LevelSite extends MenuSite { } }); - let textElem = this.findBy(".tutorial-text .step-4"); + // let textElem = this.findBy(".tutorial-text .step-4"); await this.levelScaler(); - scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2); + // debugger; + // scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2); break; } diff --git a/src/client/js/Sites/MainMenuSite.ts b/src/client/js/Sites/MainMenuSite.ts index db249b5..3002318 100644 --- a/src/client/js/Sites/MainMenuSite.ts +++ b/src/client/js/Sites/MainMenuSite.ts @@ -170,10 +170,10 @@ export class MainMenuSite extends MenuSite { let levelStyle = getComputedStyle(levelSegment); playButton.style.width = levelStyle.getPropertyValue("width"); - scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, 4, null, false); + scaleHelper.scaleTo(0.65, playButton.children[0], playButton, null, null, null, 4, null, false); - await scaleHelper.scaleTo(0.2, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false); - scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false); + await scaleHelper.scaleTo(0.1, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false); + scaleHelper.scaleTo(1, levelNumber, levelNumber.parentElement, false, false, 5, null, null, false); }; // this.listener(); diff --git a/src/client/js/Sites/TutorialSite.ts b/src/client/js/Sites/TutorialSite.ts new file mode 100644 index 0000000..aa1e990 --- /dev/null +++ b/src/client/js/Sites/TutorialSite.ts @@ -0,0 +1,5 @@ +import {MenuSite} from "cordova-sites/dist/client"; + +export class TutorialSite extends MenuSite { + +} diff --git a/src/client/sass/_navbarOverride.scss b/src/client/sass/_navbarOverride.scss index 9d6e83a..5562eea 100644 --- a/src/client/sass/_navbarOverride.scss +++ b/src/client/sass/_navbarOverride.scss @@ -24,11 +24,18 @@ nav.top-bar { top: 0; left: 0; right: 0; + //padding-right: 0; > .grid-padding-x { display: block; padding: 0.5rem; margin: 0; + padding-right: 0; + + > .small-12{ + padding: 0; + } + } } diff --git a/src/client/sass/_themeBlue.scss b/src/client/sass/_themeBlue.scss index 348bcc4..d7d0123 100644 --- a/src/client/sass/_themeBlue.scss +++ b/src/client/sass/_themeBlue.scss @@ -6,12 +6,12 @@ //$textColor: white; //$svgColor: black; -// Blue different Accent -//$primaryColor: #427081; -//$secondaryColor: #4d575a; -//$accentColor: #d3e7eb; -//$textColor: white; -//$svgColor: black; + //Blue different Accent +$primaryColor: #427081; +$secondaryColor: #4d575a; +$accentColor: #d3e7eb; +$textColor: white; +$svgColor: black; // Blau Invers //$primaryColor: #4d575a; @@ -21,11 +21,11 @@ //$svgColor: black; // Grün -$primaryColor: #6b8778; -$secondaryColor: #012f25; -$accentColor: #b8acaa; -$textColor: white; -$svgColor: black; +//$primaryColor: #6b8778; +//$secondaryColor: #012f25; +//$accentColor: #c2ceca; +//$textColor: white; +//$svgColor: black; // Grün 2 //$primaryColor: #234c42; diff --git a/src/client/sass/wordRotator.scss b/src/client/sass/wordRotator.scss index 660050f..7ed930c 100644 --- a/src/client/sass/wordRotator.scss +++ b/src/client/sass/wordRotator.scss @@ -81,20 +81,19 @@ nav.top-bar.title-bar { &.level-counter { position: fixed !important; - font-size: 2rem; + font-size: 1.8rem; &.num-10 { - font-size: 1.4rem; + font-size: 1.3rem; } &.num-100 { - font-size: 1rem; + font-size: 0.9rem; } &.num-1000 { - font-size: 0.7rem; + font-size: 0.65rem; } - } &.in-main-menu {