From d7bcacf8719bd8b0c9be7dc34dd0d3a5e67fe421 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Sat, 21 Jan 2017 21:07:52 +0200 Subject: [PATCH 1/3] Iteration 1: Ensure the clues are listed to the right of the grid in desktop view #8 --- demos/src/basic.mustache | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/src/basic.mustache b/demos/src/basic.mustache index b4d5685..f6f29cc 100644 --- a/demos/src/basic.mustache +++ b/demos/src/basic.mustache @@ -1,6 +1,6 @@ -
+
-
    +
      \ No newline at end of file From 622c192c12e1c2afa0911de18fd537067784a70b Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Sat, 21 Jan 2017 21:08:37 +0200 Subject: [PATCH 2/3] Iteration 1: Ensure the grid and clues are styled black #9 --- src/scss/_base.scss | 3 ++- src/scss/_color-use-cases.scss | 12 ++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 1639e6e..27f7fc0 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -165,7 +165,7 @@ padding-bottom: 0.5em; margin-left: 1em; .has-hover { - color: green; + color: grey; } } } @@ -283,3 +283,4 @@ } } } + diff --git a/src/scss/_color-use-cases.scss b/src/scss/_color-use-cases.scss index 5325699..9d12cb6 100644 --- a/src/scss/_color-use-cases.scss +++ b/src/scss/_color-use-cases.scss @@ -1,7 +1,7 @@ @include oColorsSetUseCase(o-crossword, background, 'white'); -@include oColorsSetUseCase(o-crossword-border, border, 'section-green'); -@include oColorsSetUseCase(o-crossword-empty, background, 'section-green'); -@include oColorsSetUseCase(o-crossword-hidden-across, background, 'section-light-green'); -@include oColorsSetUseCase(o-crossword-hidden-down, background, 'section-light-blue'); -@include oColorsSetUseCase(o-crossword-hidden-across, text, 'section-light-green'); -@include oColorsSetUseCase(o-crossword-hidden-down, text, 'section-light-blue'); +@include oColorsSetUseCase(o-crossword-border, border, 'black'); +@include oColorsSetUseCase(o-crossword-empty, background, 'black'); +@include oColorsSetUseCase(o-crossword-hidden-across, background, 'grey-tint1'); +@include oColorsSetUseCase(o-crossword-hidden-down, background, 'grey-tint1'); +@include oColorsSetUseCase(o-crossword-hidden-across, text, 'black'); +@include oColorsSetUseCase(o-crossword-hidden-down, text, 'black'); From f598fafcd7aca0e65e156cce21a95479ee718e78 Mon Sep 17 00:00:00 2001 From: Robert Ivanov Date: Sat, 21 Jan 2017 21:09:23 +0200 Subject: [PATCH 3/3] WIP - Iteration 1: ensure smartphone view is portrait locked, single column #10 --- README.md | 2 +- main.scss | 1 + src/scss/_orientation.scss | 12 ++++++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/scss/_orientation.scss diff --git a/README.md b/README.md index a0abf8d..22f78fb 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ An experimental Origami component to implement a responsive crossword. * $ `obt build` * deploy locally as described in the [Origami build tools doc](https://github.com/Financial-Times/origami-build-tools#developing-modules-locally) * $ `obt demo --runServer --watch` - * $ see a demo of it running at http://localhost:8080/demos/local/basic.html + * see a demo of it running at http://localhost:8080/demos/local/basic.html * [Bower linking a component](https://oncletom.io/2013/live-development-bower-component/) * general Origami [Developer Guide](http://origami.ft.com/docs/developer-guide/) diff --git a/main.scss b/main.scss index 9290576..2d487cc 100644 --- a/main.scss +++ b/main.scss @@ -7,6 +7,7 @@ $o-crossword-is-silent: true !default; @import "src/scss/color-use-cases"; @import "src/scss/mixins"; @import "src/scss/base"; +@import "src/scss/orientation"; @if ($o-crossword-is-silent == false) { @include oCrosswordAll; diff --git a/src/scss/_orientation.scss b/src/scss/_orientation.scss new file mode 100644 index 0000000..ca43397 --- /dev/null +++ b/src/scss/_orientation.scss @@ -0,0 +1,12 @@ +//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: 767px) { + #main-container { + background-color: #4f1828; + transform: rotate(-90deg); + width: 100% /* screen width */ ; + height: 100% /* screen height */ ; + overflow: scroll; + } +} \ No newline at end of file