Merge pull request #13 from robi-bobi/master

Implemented changes for #8, #9 and wip for #10
Gris styled black, desktop view has clues on right, some not-yet-complete changes to smartphone view

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/)
 

demos/src/basic.mustache

@@ -1,6 +1,6 @@
-<div style="width: 100%;">
+<div style="width: 100%;" id="main-container">
 	<div class="o-crossword" data-o-component="o-crossword" data-o-crossword-data="https://cdn.rawgit.com/ftlabs/o-crossword/001d79ac8f4146c244e64760f60a42c788e12ddc/demos/examples/crossword_ft_daily_2016_03_03_15179_ADA_REFORMAT.json">
-		<ul class="o-crossword-clues"></ul>
 		<table class="o-crossword-table"></table>
+    <ul class="o-crossword-clues"></ul>
 	</div>
 </div>

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;

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 @@
 		}
 	}
 }
+

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');

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;
+  }
+}