feat(#228): display notes differently if portrait or landscape

remote/src/app/components/app-notes/app-notes.scss

@@ -14,4 +14,20 @@ app-notes {
     --sheet-content-padding-top: 4px;
     --sheet-z-index: 1000;
   }
+
+  div.landscape-notes {
+    border-radius: 10px;
+    height: calc(100% - 32px);
+    box-shadow: 0 4px 4px rgba(0, 0, 0, .12);
+    border: 1px dotted var(--ion-color-light-shade);
+    overflow: scroll;
+    margin: 16px 16px 0 0;
+  }
+
+  @media screen and (orientation: landscape) {
+    bottom-sheet {
+      display: none;
+    }
+  }
 }
+

remote/src/app/components/app-notes/app-notes.tsx

@@ -1,4 +1,4 @@
-import {Component, h, State} from '@stencil/core';
+import {Component, h, Listen, State} from '@stencil/core';
 
 import {Subscription} from 'rxjs';
 
@@ -16,6 +16,9 @@ export class AppNotes {
 
     private subscription: Subscription;
 
+    @State()
+    private portrait: boolean = true;
+
     @State()
     private currentSlide: DeckdeckgoSlideDefinition;
 
@@ -24,9 +27,13 @@ export class AppNotes {
     }
 
     componentWillLoad() {
-        this.subscription = this.notesService.watch().subscribe((slide:  DeckdeckgoSlideDefinition) => {
+        this.subscription = this.notesService.watch().subscribe((slide: DeckdeckgoSlideDefinition) => {
             this.currentSlide = slide;
-        })
+        });
+    }
+
+    componentDidLoad() {
+        this.initPortrait();
     }
 
     componentDidUnload() {
@@ -35,14 +42,41 @@ export class AppNotes {
         }
     }
 
+    @Listen('resize', {target: 'window'})
+    onOrientationchange() {
+        this.initPortrait();
+    }
+
+    private initPortrait() {
+        this.portrait = window.matchMedia('(orientation: portrait)').matches;
+
+        console.log(this.portrait);
+    }
+
     render() {
-        if (!this.currentSlide || ! this.currentSlide.notes || this.currentSlide.notes === '') {
+        if (this.portrait) {
+            return <bottom-sheet arrow={true}>
+                {this.renderNotes()}
+            </bottom-sheet>;
+        } else {
+            return <div class="ion-padding landscape-notes">
+                {this.renderNotes()}
+            </div>
+        }
+    }
+
+    private renderNotes() {
+        return [
+            <ion-label class="notes-title" slot="sheet-header">Notes</ion-label>,
+            this.renderNote()
+        ]
+    }
+
+    private renderNote() {
+        if (!this.currentSlide || !this.currentSlide.notes || this.currentSlide.notes === '') {
             return undefined;
         }
 
-        return <bottom-sheet arrow={true}>
-            <ion-label class="notes-title" slot="sheet-header">Notes</ion-label>
-            <p class="ion-padding-top ion-padding-bottom ion-margin-top notes">{this.currentSlide.notes.replace(/<(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*>/gmi, '')}</p>
-        </bottom-sheet>;
+        return <p class="ion-padding-top ion-padding-bottom ion-margin-top notes">{this.currentSlide.notes.replace(/<(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*>/gmi, '')}</p>;
     }
 }

remote/src/app/pages/app-remote/app-remote.scss

@@ -4,9 +4,27 @@ app-remote {
     grid-template-rows: calc((100% - 64px) / 2) calc((100% - 64px) / 2) 64px;
     height: 100%;
 
+    @media screen and (orientation: landscape) {
+      grid-template-rows: 50% 50%;
+      grid-template-columns: 50% 50%;
+
+      div.deck, div.deck-navigation-buttons {
+        grid-column-start: 1;
+        grid-column-end: 2;
+      }
+
+      app-notes {
+        grid-column-start: 2;
+
+        grid-row-start: 1;
+        grid-row-end: 3;
+      }
+    }
+
     div.deck  {
       position: relative;
       display: block;
+      overflow: hidden;
     }
 
     div.deck-navigation-buttons {

remote/src/app/pages/app-remote/app-remote.tsx

@@ -510,8 +510,8 @@ export class AppRemote {
 
                         {this.renderExtraActions()}
                     </div>
-                </main>,
-                <app-notes></app-notes>
+                    <app-notes></app-notes>
+                </main>
             ];
         } else if (this.connectionState !== ConnectionState.DISCONNECTED) {
             let text: string = 'Not connected';