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
2020-07-06 14:32:53 +02:00 · 2020-07-06 14:32:53 +02:00 · 656fcccee1
commit 656fcccee1
parent e35b658731
11 changed files with 31 additions and 34 deletions
--- a/client/src/app/shared/components/head-bar/head-bar.component.scss
+++ b/client/src/app/shared/components/head-bar/head-bar.component.scss
@ -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 {
--- a/client/src/app/shared/components/jitsi/jitsi.component.html
+++ b/client/src/app/shared/components/jitsi/jitsi.component.html
@ -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>
--- a/client/src/app/shared/components/jitsi/jitsi.component.scss
+++ b/client/src/app/shared/components/jitsi/jitsi.component.scss
@ -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;
        }

--- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
+++ b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
@ -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;
+        }
    }
 }

--- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
+++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
@ -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"
--- a/client/src/app/site/motions/modules/motion-import/motion-import-list.component.html
+++ b/client/src/app/site/motions/modules/motion-import/motion-import-list.component.html
@ -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>
--- a/client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html
+++ b/client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html
@ -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 -->
--- a/client/src/app/site/topics/components/topic-detail/topic-detail.component.html
+++ b/client/src/app/site/topics/components/topic-detail/topic-detail.component.html
@ -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>
--- a/client/src/app/site/topics/components/topic-import-list/topic-import-list.component.html
+++ b/client/src/app/site/topics/components/topic-import-list/topic-import-list.component.html
@ -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 -->
--- a/client/src/app/site/users/components/user-detail/user-detail.component.html
+++ b/client/src/app/site/users/components/user-detail/user-detail.component.html
@ -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>
--- a/client/src/app/site/users/components/user-import/user-import-list.component.html
+++ b/client/src/app/site/users/components/user-import/user-import-list.component.html
@ -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 -->