ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improves the layout of the projector

Browse Source 
- Adds a grid-layout to have a flexible view for different devices
This commit is contained in:
GabrielMeyer 2019-08-28 10:14:10 +02:00
parent 899eedf403
commit 453e639d2f
3 changed files with 287 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,9 @@
</div> </div>
</os-head-bar> </os-head-bar>
<div class="content-container" *ngIf="projector"> <os-grid-layout *ngIf="projector">
<div class="column-left"> <os-tile [preferredSize]="projectorTileSizeLeft">
<div *ngIf="projector" class="column-left">
<a [routerLink]="['/projector', projector.id]"> <a [routerLink]="['/projector', projector.id]">
<div id="projector"> <div id="projector">
<os-projector [projector]="projector"></os-projector> <os-projector [projector]="projector"></os-projector>
@ -73,10 +74,14 @@
<mat-icon>refresh</mat-icon> <mat-icon>refresh</mat-icon>
</button> </button>
<!-- scroll indicator --> <!-- 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> </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"> <div class="control-group slide-controls">
<button <button
type="button" type="button"
@ -291,4 +296,5 @@
</mat-accordion> </mat-accordion>
</div> </div>
</div> </div>
</div> </os-tile>
</os-grid-layout>

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

@ -7,11 +7,6 @@
.column-left { .column-left {
color: black; 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 */ /* Do not let the a tag ruin the projector */
a { a {
@ -20,12 +15,6 @@
} }
} }
.column-right {
padding-top: 20px;
width: calc(40% - 30px);
float: right;
}
.control-group { .control-group {
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);

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

@ -15,6 +15,7 @@ import {
ScrollScaleDirection ScrollScaleDirection
} from 'app/core/repositories/projector/projector-repository.service'; } from 'app/core/repositories/projector/projector-repository.service';
import { DurationService } from 'app/core/ui-services/duration.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 { Countdown } from 'app/shared/models/core/countdown';
import { ProjectorElement } from 'app/shared/models/core/projector'; import { ProjectorElement } from 'app/shared/models/core/projector';
import { ProjectorMessage } from 'app/shared/models/core/projector-message'; import { ProjectorMessage } from 'app/shared/models/core/projector-message';
@ -52,6 +53,16 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
public projectorCount: number; 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 * true if the queue might be altered
*/ */