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 {
position: fixed;
z-index: 10; // should always be in top of everything else
right: 25px;
bottom: 25px;
right: 20px;
bottom: 55px;
}
.sticky-toolbar {

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

@ -1,5 +1,5 @@
<!-- 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">
<div class="jitsi-iframe-wrapper" #jitsi></div>
<div class="jitsi-dialog-actions">
@ -13,12 +13,7 @@
<mat-icon>open_in_new</mat-icon>
</button>
<button
type="button"
mat-button
color="primary"
(click)="hideJitsiDialog()"
>
<button type="button" mat-button color="primary" (click)="hideJitsiDialog()">
<span>{{ 'Minimize' | translate }}</span>
<mat-icon>fullscreen_exit</mat-icon>
</button>
@ -30,15 +25,9 @@
<!-- Audio-Conference-bar -->
<div
class="jitsi-bar"
[ngClass]="{
'cast-shadow': !showJitsiWindow
}"
>
<span
class="control-icon-wrapper apply-theme"
[ngClass]="{
'cast-shadow': showJitsiWindow
}"
>
<ng-container *ngIf="currentState == state.jitsi">
<!-- Exit jitsi -->
@ -97,7 +86,7 @@
<!-- open-window button -->
<button class="toggle-list-button" mat-button (click)="toggleShowJitsi()">
<ng-container *ngIf="currentState == state.jitsi">
<span> {{ 'Live conference' | translate }}</span>
<div class="ellipsis-overflow"> {{ 'Live conference' | translate }}</div>
<div class="one-line">
&nbsp;
<span *ngIf="currentDominantSpeaker">
@ -113,8 +102,8 @@
</ng-container>
<ng-container *ngIf="currentState == state.stream">
<!-- os-icon-container does weid things here -->
<span> {{ 'Livestream' | translate }}</span>
<!-- os-icon-container does weird things here -->
<div class="ellipsis-overflow">{{ 'Livestream' | translate }}</div>
</ng-container>
<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 {
z-index: 99;
position: fixed;
right: 0;
left: 0;
right: 20px;
bottom: 0;
.cast-shadow {
@ -40,7 +41,7 @@
.jitsi-bar {
display: flex;
margin-right: 20px;
justify-content: flex-end;
$wrapper-padding: 5px;
$bar-height: 40px;
@ -61,12 +62,14 @@
}
.stream-width-wrapper {
width: 500px;
width: 100%;
min-width: 100px;
max-width: 500px;
}
.audio-list-wrapper {
width: 300px;
width: 100%;
min-width: 100px;
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 {
padding-left: 5px;
@ -14,6 +16,9 @@
display: flex;
os-rounded-input {
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>
<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">
<h1>{{ assignment.getTitle() }}</h1>
</div>
@ -134,7 +134,7 @@
</ng-template>
<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>
<h3>{{ 'Candidates' | translate }}</h3>
<div>
@ -212,7 +212,7 @@
<!-- Form -->
<ng-template #assignmentFormTemplate>
<mat-card class="os-form-card">
<mat-card class="os-form-card spacer-bottom-60">
<form
class="content"
[formGroup]="assignmentForm"

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

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

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

@ -25,7 +25,7 @@
</div>
</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">
<h1>{{ topic.getListTitle() }}</h1>
</div>

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

@ -11,7 +11,7 @@
</div>
</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()">
<!-- textAreaImport-->
<mat-tab label="{{ 'Text import' | translate }}">
@ -116,7 +116,7 @@
</mat-card>
<!-- 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>
<div class="summary">
<!-- new entries -->

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

@ -55,7 +55,7 @@
</os-head-bar>
<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>
</mat-card>
</div>

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

@ -10,7 +10,7 @@
</button>
</div>
</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()">
<!-- textarea import tab -->
<mat-tab label="{{ 'Text import' | translate }}">
@ -126,7 +126,7 @@
</mat-card>
<!-- 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>
<div class="summary">
<!-- new entries -->