From fa44e6a6b69275437f03a31b41dbf66b7fe85835 Mon Sep 17 00:00:00 2001 From: Jake Champion Date: Tue, 26 Mar 2019 17:16:16 +0000 Subject: [PATCH] do not output css when silent mode is turned on --- main.scss | 4 +--- src/js/oCrossword.js | 10 +++++----- src/scss/_base.scss | 4 ++++ src/scss/_mixins.scss | 4 ++++ src/scss/_mobile.scss | 4 +++- src/scss/_orientation.scss | 14 ++++++++------ src/scss/_print.scss | 4 +++- 7 files changed, 28 insertions(+), 16 deletions(-) diff --git a/main.scss b/main.scss index 807ddc5..4313341 100644 --- a/main.scss +++ b/main.scss @@ -1,6 +1,4 @@ $o-crossword-is-silent: true !default; -$o-buttons-is-silent: false; - @import "o-colors/main"; @import "o-grid/main"; @import "o-typography/main"; @@ -12,6 +10,7 @@ $o-buttons-is-silent: false; @import "src/scss/base"; @import "src/scss/orientation"; @import "src/scss/print"; +@import "src/scss/mobile"; @if ($o-crossword-is-silent == false) { @include oCrosswordAll; @@ -20,4 +19,3 @@ $o-buttons-is-silent: false; $o-crossword-is-silent: true !global; } -@import "src/scss/mobile"; diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js index 688815e..2b9e195 100644 --- a/src/js/oCrossword.js +++ b/src/js/oCrossword.js @@ -493,7 +493,7 @@ OCrossword.prototype.assemble = function assemble() { this.rootEl.insertBefore(buttonRow, wrapper); const resetButton = document.createElement('button'); - resetButton.classList.add('o-crossword-reset', 'o-buttons', 'o-buttons--mono'); + resetButton.classList.add('o-crossword-reset', 'o-buttons', 'o-crossword-button'); if(answersEmpty() || isAnswerVersion) { resetButton.classList.add('hidden'); } @@ -503,28 +503,28 @@ OCrossword.prototype.assemble = function assemble() { buttonRow.appendChild(resetButton); const toggleViewButtonAboveGrid = document.createElement('button'); - toggleViewButtonAboveGrid.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono'); + toggleViewButtonAboveGrid.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button'); toggleViewButtonAboveGrid.textContent = isGridView?'List view':'Grid view'; this.addEventListener(toggleViewButtonAboveGrid, 'click', toggleMobileViews); this.rootEl.insertBefore(toggleViewButtonAboveGrid, gridWrapper); const toggleViewButtonTop = document.createElement('button'); - toggleViewButtonTop.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono'); + toggleViewButtonTop.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button'); toggleViewButtonTop.textContent = isGridView?'List view':'Grid view'; this.addEventListener(toggleViewButtonTop, 'click', toggleMobileViews); buttonRow.appendChild(toggleViewButtonTop); const toggleColumnsButton = document.createElement('button'); - toggleColumnsButton.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono'); + toggleColumnsButton.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button'); toggleColumnsButton.textContent = isSingleColumnView?'2 col':'1 col'; this.addEventListener(toggleColumnsButton, 'click', toggleColumnView); buttonRow.appendChild(toggleColumnsButton); const toggleViewButtonBottom = document.createElement('button'); - toggleViewButtonBottom.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono'); + toggleViewButtonBottom.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button'); toggleViewButtonBottom.textContent = isGridView?'List view':'Grid view'; this.addEventListener(toggleViewButtonBottom, 'click', toggleMobileViews); diff --git a/src/scss/_base.scss b/src/scss/_base.scss index a702c71..b58c0b5 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -58,6 +58,10 @@ box-sizing: border-box; } + .o-crossword-button { + @include oButtons($theme: "mono"); + } + .hidden { display: none; } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 7c236a0..006e661 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -11,4 +11,8 @@ .#{$classname} { @include oCrosswordBase; } + @include _oCrosswordOrientation; + @include _oCrosswordPrint; + @include _oCrosswordMobile; + } diff --git a/src/scss/_mobile.scss b/src/scss/_mobile.scss index 9097ac2..a1bd06d 100644 --- a/src/scss/_mobile.scss +++ b/src/scss/_mobile.scss @@ -1,5 +1,6 @@ // sass-lint:disable no-vendor-prefixes -@media screen and (max-width: $break-phone) { +@mixin _oCrosswordMobile () { + @media screen and (max-width: $break-phone) { .o-crossword table, .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input { font-size: 1.2rem; @@ -57,4 +58,5 @@ } } } + } } diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss index 4a778e8..7474681 100644 --- a/src/scss/_orientation.scss +++ b/src/scss/_orientation.scss @@ -2,11 +2,13 @@ //below forces portrait mode on mobile phones //it uses "min-aspect-ratio" to detect landscape, //since keyboard popping will make "orientation" wrong in some cases -@media screen and (min-aspect-ratio: 13/9) and (max-width: $break-phone) { - body:not(.iOS) #main-container { - transform: rotate(-90deg); - width: 100% /* screen width */ ; - height: 100% /* screen height */ ; - overflow: scroll; +@mixin _oCrosswordOrientation () { + @media screen and (min-aspect-ratio: 13/9) and (max-width: $break-phone) { + body:not(.iOS) #main-container { + transform: rotate(-90deg); + width: 100% /* screen width */ ; + height: 100% /* screen height */ ; + overflow: scroll; + } } } diff --git a/src/scss/_print.scss b/src/scss/_print.scss index 2dbc026..d70471e 100644 --- a/src/scss/_print.scss +++ b/src/scss/_print.scss @@ -1,5 +1,6 @@ // sass-lint:disable no-qualifying-elements, no-important, no-vendor-prefixes -@media print { +@mixin _oCrosswordPrint () { + @media print { @page { margin: 1cm 0.5cm; } @@ -140,4 +141,5 @@ .o-crossword-reset { display: none; } + } }