Merge pull request #487 from iqb-berlin/refactor/remove_flex_layout

Refactor/remove flex layout module in player

projects/player/modules/key-input/components/keyboard/keyboard.component.html

 <div class="keyboard-container"
      (mousedown)="$event.preventDefault(); $event.stopPropagation()">
   <div *ngIf="showFrenchCharacters"
-       fxLayout="row wrap"
-       fxLayoutAlign="space-between center"
-       class="specialCharacters">
+       class="specialCharacters fx-space-between-center-wrap">
     <aspect-keyboard-key *ngFor="let key of frenchRow; let i = index"
                   class="key"
                   [key]="key"

projects/player/modules/key-input/components/keyboard/keyboard.component.scss

@@ -10,6 +10,15 @@
   background-color: grey;
 }
 
+.fx-space-between-center-wrap {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .key {
   margin: 4px;
   min-height: 50px;

projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html

 <div class="pages-container"
      cdkScrollable
-     [fxLayout]="layoutAlignment">
+     [class.fx-column-start-stretch]="layoutAlignment === 'column'"
+     [class.fx-row-start-stretch]="layoutAlignment === 'row'">
   <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
     alwaysVisiblePageView :
     scrollPagesView"></ng-container>

projects/player/src/app/components/layouts/pages-layout/pages-layout.component.css → projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss

@@ -2,6 +2,22 @@
   scroll-snap-align: start;
 }
 
+.fx-column-start-stretch {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: stretch;
+}
+
+.fx-row-start-stretch {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: stretch;
+}
+
 .concat-scroll-snap {
   scroll-snap-type: y mandatory;
   scroll-padding: 0;

projects/player/src/app/components/layouts/pages-layout/pages-layout.component.ts

@@ -13,7 +13,7 @@ import { NativeEventService } from '../../../services/native-event.service';
 @Component({
   selector: 'aspect-pages-layout',
   templateUrl: './pages-layout.component.html',
-  styleUrls: ['./pages-layout.component.css']
+  styleUrls: ['./pages-layout.component.scss']
 })
 
 export class PagesLayoutComponent implements OnInit, AfterViewInit, OnDestroy {

projects/player/src/app/components/page-scroll-button/page-scroll-button.component.html

 <ng-content></ng-content>
-<div fxLayout="column" fxLayoutAlign="center center"
-     class="scroll-button-container">
+<div class="fx-column-center-center scroll-button-container">
   <button *ngIf="isVisible.value"
           mat-fab
           class="scroll-button"

projects/player/src/app/components/page-scroll-button/page-scroll-button.component.scss

@@ -16,3 +16,11 @@
   pointer-events: none;
   z-index: 100;
 }
+
+.fx-column-center-center {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}