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

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;
+    right: 20px;
-    bottom: 25px;
+    bottom: 55px;
 }
 
 .sticky-toolbar {

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
+            <button type="button" mat-button color="primary" (click)="hideJitsiDialog()">
-                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 -->
+                    <!-- os-icon-container does weird things here -->
-                    <span> {{ 'Livestream' | translate }}</span>
+                    <div class="ellipsis-overflow">{{ 'Livestream' | translate }}</div>
                 </ng-container>
 
                 <mat-icon class="opened-indicator" *ngIf="!showJitsiWindow">keyboard_arrow_up</mat-icon>

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;
         }
 

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;
+        }
     }
 }
 

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"

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>

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

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>

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

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>

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