Merge pull request #4956 from GabrielInTheWorld/projectorUI

Improves the layout of the projector
This commit is contained in:
Emanuel Schütze 2019-08-28 12:18:36 +02:00 committed by GitHub
commit 4400d805f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 287 additions and 281 deletions

View File

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

View File

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

View File

@ -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
*/