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

Improve Jitsi on mobile 

Improves Jitsi and various other stuff for small to smallest devices.
The mobile main action button is a little higher and aligns with the
jitsi bar.
Some mat-cards have extra space to be more jitsi-bar-friendly.
Hides the list filter option on phones
This commit is contained in:
Sean 2020-07-06 14:32:53 +02:00 committed by Emanuel Schütze
parent e35b658731
commit 656fcccee1
11 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/shared/components/head-bar/head-bar.component.scss
View File

@ -1,8 +1,8 @@
.head-button { .head-button {
position: fixed; position: fixed;
z-index: 10; // should always be in top of everything else z-index: 10; // should always be in top of everything else
right: 25px; right: 20px;
bottom: 25px; bottom: 55px;
} }
.sticky-toolbar { .sticky-toolbar {

21
client/src/app/shared/components/jitsi/jitsi.component.html
View File

@ -1,5 +1,5 @@
<!-- iFrame Dialog --> <!-- iFrame Dialog -->
<div class="jitsi-fake-dialog-wrapper" [ngClass]="{'jitsi-dialog-hide': !isJitsiDialogOpen}"> <div class="jitsi-fake-dialog-wrapper" [ngClass]="{ 'jitsi-dialog-hide': !isJitsiDialogOpen }">
<mat-card class="jitsi-fake-dialog"> <mat-card class="jitsi-fake-dialog">
<div class="jitsi-iframe-wrapper" #jitsi></div> <div class="jitsi-iframe-wrapper" #jitsi></div>
<div class="jitsi-dialog-actions"> <div class="jitsi-dialog-actions">
@ -13,12 +13,7 @@
<mat-icon>open_in_new</mat-icon> <mat-icon>open_in_new</mat-icon>
</button> </button>
<button <button type="button" mat-button color="primary" (click)="hideJitsiDialog()">
type="button"
mat-button
color="primary"
(click)="hideJitsiDialog()"
>
<span>{{ 'Minimize' | translate }}</span> <span>{{ 'Minimize' | translate }}</span>
<mat-icon>fullscreen_exit</mat-icon> <mat-icon>fullscreen_exit</mat-icon>
</button> </button>
@ -30,15 +25,9 @@
<!-- Audio-Conference-bar --> <!-- Audio-Conference-bar -->
<div <div
class="jitsi-bar" class="jitsi-bar"
[ngClass]="{
'cast-shadow': !showJitsiWindow
}"
> >
<span <span
class="control-icon-wrapper apply-theme" class="control-icon-wrapper apply-theme"
[ngClass]="{
'cast-shadow': showJitsiWindow
}"
> >
<ng-container *ngIf="currentState == state.jitsi"> <ng-container *ngIf="currentState == state.jitsi">
<!-- Exit jitsi --> <!-- Exit jitsi -->
@ -97,7 +86,7 @@
<!-- open-window button --> <!-- open-window button -->
<button class="toggle-list-button" mat-button (click)="toggleShowJitsi()"> <button class="toggle-list-button" mat-button (click)="toggleShowJitsi()">
<ng-container *ngIf="currentState == state.jitsi"> <ng-container *ngIf="currentState == state.jitsi">
<span> {{ 'Live conference' | translate }}</span> <div class="ellipsis-overflow"> {{ 'Live conference' | translate }}</div>
<div class="one-line"> <div class="one-line">
&nbsp; &nbsp;
<span *ngIf="currentDominantSpeaker"> <span *ngIf="currentDominantSpeaker">
@ -113,8 +102,8 @@
</ng-container> </ng-container>
<ng-container *ngIf="currentState == state.stream"> <ng-container *ngIf="currentState == state.stream">
<!-- os-icon-container does weid things here --> <!-- os-icon-container does weird things here -->
<span> {{ 'Livestream' | translate }}</span> <div class="ellipsis-overflow">{{ 'Livestream' | translate }}</div>
</ng-container> </ng-container>
<mat-icon class="opened-indicator" *ngIf="!showJitsiWindow">keyboard_arrow_up</mat-icon> <mat-icon class="opened-indicator" *ngIf="!showJitsiWindow">keyboard_arrow_up</mat-icon>

11
client/src/app/shared/components/jitsi/jitsi.component.scss
View File

@ -31,7 +31,8 @@
.jitsi-integration { .jitsi-integration {
z-index: 99; z-index: 99;
position: fixed; position: fixed;
right: 0; left: 0;
right: 20px;
bottom: 0; bottom: 0;
.cast-shadow { .cast-shadow {
@ -40,7 +41,7 @@
.jitsi-bar { .jitsi-bar {
display: flex; display: flex;
margin-right: 20px; justify-content: flex-end;
$wrapper-padding: 5px; $wrapper-padding: 5px;
$bar-height: 40px; $bar-height: 40px;
@ -61,12 +62,14 @@
} }
.stream-width-wrapper { .stream-width-wrapper {
width: 500px; width: 100%;
min-width: 100px;
max-width: 500px; max-width: 500px;
} }
.audio-list-wrapper { .audio-list-wrapper {
width: 300px; width: 100%;
min-width: 100px;
max-width: 300px; max-width: 300px;
} }

5
client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
View File

@ -1,3 +1,5 @@
@import '~assets/styles/variables.scss';
.filter-menu-head { .filter-menu-head {
padding-left: 5px; padding-left: 5px;
@ -14,6 +16,9 @@
display: flex; display: flex;
os-rounded-input { os-rounded-input {
margin: 0 10px; margin: 0 10px;
@include phone {
display: none;
}
} }
} }

6
client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
View File

@ -86,7 +86,7 @@
</div> </div>
<ng-template #metaInfoTemplate> <ng-template #metaInfoTemplate>
<mat-card class="os-card" *ngIf="assignment"> <mat-card class="os-card spacer-bottom-60" *ngIf="assignment">
<div *ngIf="!editAssignment && assignment.getTitle"> <div *ngIf="!editAssignment && assignment.getTitle">
<h1>{{ assignment.getTitle() }}</h1> <h1>{{ assignment.getTitle() }}</h1>
</div> </div>
@ -134,7 +134,7 @@
</ng-template> </ng-template>
<ng-template #candidatesTemplate> <ng-template #candidatesTemplate>
<mat-card class="os-card" *ngIf="assignment && !assignment.isFinished"> <mat-card class="os-card spacer-bottom-60" *ngIf="assignment && !assignment.isFinished">
<ng-container> <ng-container>
<h3>{{ 'Candidates' | translate }}</h3> <h3>{{ 'Candidates' | translate }}</h3>
<div> <div>
@ -212,7 +212,7 @@
<!-- Form --> <!-- Form -->
<ng-template #assignmentFormTemplate> <ng-template #assignmentFormTemplate>
<mat-card class="os-form-card"> <mat-card class="os-form-card spacer-bottom-60">
<form <form
class="content" class="content"
[formGroup]="assignmentForm" [formGroup]="assignmentForm"

2
client/src/app/site/motions/modules/motion-import/motion-import-list.component.html
View File

@ -11,7 +11,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<mat-card class="os-form-card import-table"> <mat-card class="os-form-card import-table spacer-bottom-60">
<span>{{ <span>{{
'Required comma or semicolon separated values with these column header names in the first row:' | translate 'Required comma or semicolon separated values with these column header names in the first row:' | translate
}}</span> }}</span>

4
client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html
View File

@ -11,7 +11,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<mat-card class="os-form-card import-table"> <mat-card class="os-form-card import-table spacer-bottom-60">
<span>{{ <span>{{
'Required comma or semicolon separated values with these column header names in the first row:' | translate 'Required comma or semicolon separated values with these column header names in the first row:' | translate
}}</span> }}</span>
@ -76,7 +76,7 @@
</mat-card> </mat-card>
<!-- preview table --> <!-- preview table -->
<mat-card *ngIf="hasFile" class="os-form-card import-table"> <mat-card *ngIf="hasFile" class="os-form-card import-table spacer-bottom-60">
<h3>{{ 'Preview' | translate }}</h3> <h3>{{ 'Preview' | translate }}</h3>
<div class="summary"> <div class="summary">
<!-- new entries --> <!-- new entries -->

2
client/src/app/site/topics/components/topic-detail/topic-detail.component.html
View File

@ -25,7 +25,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<mat-card *ngIf="topic || editTopic" [ngClass]="editTopic ? 'os-form-card' : 'os-card'"> <mat-card *ngIf="topic || editTopic" class="spacer-bottom-60" [ngClass]="editTopic ? 'os-form-card' : 'os-card'">
<div *ngIf="!editTopic"> <div *ngIf="!editTopic">
<h1>{{ topic.getListTitle() }}</h1> <h1>{{ topic.getListTitle() }}</h1>
</div> </div>

4
client/src/app/site/topics/components/topic-import-list/topic-import-list.component.html
View File

@ -11,7 +11,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<mat-card class="os-form-card import-table"> <mat-card class="os-form-card import-table spacer-bottom-60">
<mat-tab-group (selectedTabChange)="onTabChange()"> <mat-tab-group (selectedTabChange)="onTabChange()">
<!-- textAreaImport--> <!-- textAreaImport-->
<mat-tab label="{{ 'Text import' | translate }}"> <mat-tab label="{{ 'Text import' | translate }}">
@ -116,7 +116,7 @@
</mat-card> </mat-card>
<!-- preview table --> <!-- preview table -->
<mat-card *ngIf="hasFile" class="os-form-card import-table"> <mat-card *ngIf="hasFile" class="os-form-card import-table spacer-bottom-60">
<h3>{{ 'Preview' | translate }}</h3> <h3>{{ 'Preview' | translate }}</h3>
<div class="summary"> <div class="summary">
<!-- new entries --> <!-- new entries -->

2
client/src/app/site/users/components/user-detail/user-detail.component.html
View File

@ -55,7 +55,7 @@
</os-head-bar> </os-head-bar>
<div class="content-container"> <div class="content-container">
<mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')"> <mat-card class="spacer-bottom-60" [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')">
<ng-container *ngIf="editUser; then editView; else showView"></ng-container> <ng-container *ngIf="editUser; then editView; else showView"></ng-container>
</mat-card> </mat-card>
</div> </div>

4
client/src/app/site/users/components/user-import/user-import-list.component.html
View File

@ -10,7 +10,7 @@
</button> </button>
</div> </div>
</os-head-bar> </os-head-bar>
<mat-card class="os-form-card import-table"> <mat-card class="os-form-card import-table spacer-bottom-60">
<mat-tab-group (selectedTabChange)="onTabChange()"> <mat-tab-group (selectedTabChange)="onTabChange()">
<!-- textarea import tab --> <!-- textarea import tab -->
<mat-tab label="{{ 'Text import' | translate }}"> <mat-tab label="{{ 'Text import' | translate }}">
@ -126,7 +126,7 @@
</mat-card> </mat-card>
<!-- preview table --> <!-- preview table -->
<mat-card *ngIf="hasFile" class="os-form-card import-table"> <mat-card *ngIf="hasFile" class="os-form-card import-table spacer-bottom-60">
<h3>{{ 'Preview' | translate }}</h3> <h3>{{ 'Preview' | translate }}</h3>
<div class="summary"> <div class="summary">
<!-- new entries --> <!-- new entries -->