Improves the layout of the projector

- Adds a grid-layout to have a flexible view for different devices

client/src/app/site/projector/components/projector-detail/projector-detail.component.html

@@ -5,8 +5,9 @@
     </div>
 </os-head-bar>
 
-<div class="content-container" *ngIf="projector">
-    <div class="column-left">
+<os-grid-layout *ngIf="projector">
+    <os-tile [preferredSize]="projectorTileSizeLeft">
+        <div *ngIf="projector" class="column-left">
             <a [routerLink]="['/projector', projector.id]">
                 <div id="projector">
                     <os-projector [projector]="projector"></os-projector>
@@ -73,10 +74,14 @@
                     <mat-icon>refresh</mat-icon>
                 </button>
                 <!-- scroll indicator -->
-            <div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">{{ projector.scroll }}</div>
+                <div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">
+                    {{ projector.scroll }}
                 </div>
             </div>
-    <div class="column-right" *osPerms="'core.can_manage_projector'">
+        </div>
+    </os-tile>
+    <os-tile [preferredSize]="projectorTileSizeRight">
+        <div *osPerms="'core.can_manage_projector'">
             <div class="control-group slide-controls">
                 <button
                     type="button"
@@ -291,4 +296,5 @@
                 </mat-accordion>
             </div>
         </div>
-</div>
+    </os-tile>
+</os-grid-layout>

client/src/app/site/projector/components/projector-detail/projector-detail.component.scss

@@ -7,11 +7,6 @@
 
 .column-left {
     color: black;
-    display: inline-block;
-    padding-top: 20px;
-    width: 60%;
-    min-width: 200px;
-    padding-right: 25px;
 
     /* Do not let the a tag ruin the projector */
     a {
@@ -20,12 +15,6 @@
     }
 }
 
-.column-right {
-    padding-top: 20px;
-    width: calc(40% - 30px);
-    float: right;
-}
-
 .control-group {
     color: rgba(0, 0, 0, 0.5);
 

client/src/app/site/projector/components/projector-detail/projector-detail.component.ts

@@ -15,6 +15,7 @@ import {
     ScrollScaleDirection
 } from 'app/core/repositories/projector/projector-repository.service';
 import { DurationService } from 'app/core/ui-services/duration.service';
+import { SizeObject } from 'app/shared/components/tile/tile.component';
 import { Countdown } from 'app/shared/models/core/countdown';
 import { ProjectorElement } from 'app/shared/models/core/projector';
 import { ProjectorMessage } from 'app/shared/models/core/projector-message';
@@ -52,6 +53,16 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
 
     public projectorCount: number;
 
+    /**
+     * Defines the used sizes for different devices for the left column.
+     */
+    public projectorTileSizeLeft: SizeObject = { medium: 8, large: 10 };
+
+    /**
+     * Defines the used sizes for different devices for the right column.
+     */
+    public projectorTileSizeRight: SizeObject = { medium: 4, large: 6 };
+
     /**
      * true if the queue might be altered
      */