Cleanup main routing page and ngrid lists

Sets the main container to absolute,
makes it easier to detect the pages height
ngrid lists can dynamically detect the page height using flexbox,
remove external class injection from list-views,
add "spacer-bottom-60" class for the jitsi-container,
add it everywhere where the jitsi container could hide the content.

client/src/app/shared/components/list-view-table/list-view-table.component.html

@@ -1,5 +1,7 @@
-<mat-drawer-container *ngIf="columns && columnSet">
+<mat-drawer-container class="list-view-frame" *ngIf="columns && columnSet">
+    <div class="list-view-table-wrapper">
         <os-sort-filter-bar
+            class="sort-filter-bar"
             *ngIf="showFilterBar"
             [totalCount]="totalCount"
             [filterCount]="countFilter"
@@ -10,13 +12,12 @@
         >
         </os-sort-filter-bar>
 
-    <!-- vScrollFixed="110" -->
-    <!-- vScrollAuto () -->
         <pbl-ngrid
-        [ngClass]="cssClasses"
+            class="vscroll-list-view"
             [attr.vScrollFixed]="vScrollFixed !== -1 ? vScrollFixed : false"
             [attr.vScrollAuto]="vScrollFixed === -1"
             [showHeader]="!showFilterBar || !fullScreen"
+            [showHeader]="false"
             matCheckboxSelection="selection"
             [dataSource]="dataSource"
             [columns]="columnSet"
@@ -67,4 +68,5 @@
                 ></os-speaker-button>
             </div>
         </pbl-ngrid>
+    </div>
 </mat-drawer-container>

client/src/app/shared/components/list-view-table/list-view-table.component.scss

@@ -2,26 +2,45 @@
 
 $pbl-height: var(--pbl-height);
 
-.projector-button {
+.list-view-frame {
+    // remove the height of the top-bar
+    height: calc(100vh - 64px);
+}
+
+.list-view-table-wrapper {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+
+    .sort-filter-bar {
+        flex: 0 1 auto;
+        display: block;
+    }
+
+    .vscroll-list-view {
+        flex: 1 1 auto;
+
+        .projector-button {
             margin: auto;
             display: flex;
-}
+        }
 
-.pbl-ngrid-row {
+        .pbl-ngrid-row {
             height: $pbl-height;
-}
+        }
 
-// additional space if the jitsi integration is active
+        .pbl-ngrid-row:last-of-type {
-.pbl-ngrid-row:last-of-type {
+            margin-bottom: 60px !important;
-    margin-bottom: 30px !important;
+        }
-}
 
-.pbl-ngrid-cell {
+        .pbl-ngrid-cell {
             height: inherit;
-}
+        }
 
-.multiselect {
+        .multiselect {
             .pbl-ngrid-cell {
                 cursor: pointer;
             }
+        }
+    }
 }

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -214,31 +214,6 @@ export class ListViewTableComponent<V extends BaseViewModel | BaseViewModelWithC
     @Input()
     public fullScreen = true;
 
-    /**
-     * Option to apply additional classes to the virtual-scrolling-list.
-     */
-    @Input()
-    public set cssClasses(values: CssClassDefinition) {
-        this._cssClasses = values;
-    }
-
-    /**
-     * Returns the list of classes, that are applied to the virtual-scrolling-list.
-     * Already prepared for the `[ngClass]`-property.
-     *
-     * `Warning: The defaultClasses will overwrite custom classes with the same key.`
-     *
-     * @returns An object looking like `{ [key: string]: boolean }`.
-     */
-    public get cssClasses(): CssClassDefinition {
-        const defaultClasses = {
-            'virtual-scroll-with-head-bar ngrid-hide-head': this.fullScreen && this.showFilterBar,
-            'virtual-scroll-full-page': this.fullScreen && !this.showFilterBar,
-            multiselect: this.multiSelect
-        };
-        return Object.assign(this._cssClasses, defaultClasses);
-    }
-
     /**
      * Inform about changes in the dataSource
      */
@@ -275,11 +250,6 @@ export class ListViewTableComponent<V extends BaseViewModel | BaseViewModelWithC
      */
     public inputValue: string;
 
-    /**
-     * Private variable to hold all classes for the virtual-scrolling-list.
-     */
-    private _cssClasses: CssClassDefinition = {};
-
     /**
      * Collect subsciptions
      */

client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.html

@@ -1,4 +1,4 @@
-<mat-card [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
+<mat-card class="spacer-bottom-60" [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
     <ng-container *ngIf="!isEditing">
         <div *ngIf="privacyPolicy" [innerHtml]="privacyPolicy | trust: 'html'"></div>
         <div *ngIf="!privacyPolicy">

client/src/app/shared/components/privacy-policy-content/privacy-policy-content.component.scss

@@ -1,3 +0,0 @@
-mat-card {
-    height: 100%;
-}

client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html

@@ -10,7 +10,7 @@
     </div>
 </os-head-bar>
 
-<mat-card class="os-card">
+<mat-card class="os-card spacer-bottom-60">
     <ng-container [ngTemplateOutlet]="viewTemplate"></ng-container>
 </mat-card>
 
@@ -46,6 +46,7 @@
             <div class="named-result-table" *ngIf="poll.type === 'named'">
                 <h3>{{ 'Single votes' | translate }}</h3>
                 <os-list-view-table
+                    class="single-votes-table"
                     *ngIf="votesDataObservable"
                     [listObservable]="votesDataObservable"
                     [columns]="columnDefinitionSingleVotes"
@@ -56,7 +57,6 @@
                     listStorageKey="assignment-poll-vote"
                     [showListOfSpeakers]="false"
                     [showMenu]="false"
-                    [cssClasses]="{ 'single-votes-table': true }"
                 >
                     <!-- Header -->
                     <div *pblNgridHeaderCellDef="'user'; col as col">

client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss

@@ -13,6 +13,10 @@
             display: block;
             height: 500px;
 
+            .list-view-frame {
+                height: 100%;
+            }
+
             .single-vote-result + .single-vote-result {
                 margin-top: 1em;
             }

client/src/app/site/common/components/legal-notice/legal-notice.component.html

@@ -54,7 +54,7 @@
     </mat-card>
 </mat-card>
 
-<mat-card class="os-card" *osPerms="'users.can_manage'">
+<mat-card class="os-card spacer-bottom-60" *osPerms="'users.can_manage'">
     <h2>{{ 'Statistics' | translate }}</h2>
     <div>
         <h3>{{ 'Active users' | translate }}</h3>

client/src/app/site/common/components/start/start.component.html

@@ -12,7 +12,7 @@
     </div>
 </os-head-bar>
 
-<mat-card [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
+<mat-card class="spacer-bottom-60" [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
     <ng-container *ngIf="!isEditing">
         <div class="app-content">
             <h1>{{ startContent.general_event_welcome_title | translate }}</h1>

client/src/app/site/common/components/user-statistics/user-statistics.component.html

@@ -20,6 +20,7 @@
         </tr>
     </table>
     <os-list-view-table
+        class="user-statistics-table--virtual-scroll "
         [listObservable]="statisticsByStructureLevelObservable"
         [columns]="columnDefinition"
         [filterProps]="filterProps"
@@ -27,7 +28,6 @@
         [allowProjector]="false"
         [fullScreen]="false"
         [showListOfSpeakers]="false"
-        [cssClasses]="{ 'user-statistics-table--virtual-scroll': true }"
     >
         <!-- Header -->
         <div *pblNgridHeaderCellDef="'*'; col as col">

client/src/app/site/common/components/user-statistics/user-statistics.component.scss

@@ -17,9 +17,10 @@
 }
 
 .user-statistics-table--virtual-scroll {
+    display: block;
     height: 500px;
 
-    .pbl-ngrid-header-cell:not(:first-child):before {
+    .list-view-frame {
-        display: none;
+        height: 100%;
     }
 }

client/src/app/site/config/components/config-list/config-list.component.html

@@ -22,7 +22,7 @@
 
 <div class="spacer-top-20"></div>
 
-<mat-card class="os-card" *ngIf="configGroup">
+<mat-card class="os-card spacer-bottom-60" *ngIf="configGroup">
     <div id="wrapper">
         <ng-container *ngFor="let subgroup of configGroup.subgroups; trackBy: trackByIndex">
             <h3 class="accent" *ngIf="configGroup.subgroups.length > 1">{{ subgroup.name | translate }}</h3>

client/src/app/site/history/components/history-list/history-list.component.html

@@ -11,7 +11,8 @@
     </div>
 </os-head-bar>
 
-<div class="custom-table-header">
+<mat-card class="os-card spacer-bottom-60">
+    <div class="history-table-header">
         <div>
             <span [formGroup]="modelSelectForm">
                 <mat-form-field>
@@ -37,9 +38,9 @@
                 <mat-icon matSuffix>search</mat-icon>
             </mat-form-field>
         </div>
-</div>
+    </div>
 
-<mat-table [dataSource]="dataSource" matSort class="os-headed-listview-table">
+    <mat-table [dataSource]="dataSource" matSort class="os-headed-listview-table">
         <!-- Timestamp -->
         <ng-container matColumnDef="time">
             <mat-header-cell *matHeaderCellDef>{{ 'Timestamp' | translate }}</mat-header-cell>
@@ -75,9 +76,10 @@
 
         <mat-header-row *matHeaderRowDef="getRowDef()"></mat-header-row>
         <mat-row *matRowDef="let row; columns: getRowDef()" (click)="onClickRow(row)"></mat-row>
-</mat-table>
+    </mat-table>
 
-<mat-paginator [pageSizeOptions]="pageSizes"></mat-paginator>
+    <mat-paginator [pageSizeOptions]="pageSizes"></mat-paginator>
+</mat-card>
 
 <mat-menu #historyMenu="matMenu">
     <button mat-menu-item class="red-warning-text" (click)="clearHistory()">

client/src/app/site/history/components/history-list/history-list.component.scss

@@ -1,13 +1,16 @@
 .no-info {
     font-style: italic;
-    color: slategray; // TODO: Colors per theme
 }
 
-.custom-table-header {
+.history-table-header {
+    display: flex;
     justify-content: space-between;
-    text-align: left;
+}
 
-    & > div {
+.os-headed-listview-table {
-        padding: 0 20px;
+    .mat-header-cell,
+    .mat-cell {
+        padding-left: 5px;
+        padding-right: 5px;
     }
 }

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

@@ -82,7 +82,7 @@
 
 <!-- the actual file manager -->
 <pbl-ngrid
-    class="virtual-scroll-with-head-bar ngrid-hide-head file-manager-table"
+    class="file-manager-table"
     showHeader="false"
     vScrollAuto
     [dataSource]="dataSource"

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss

@@ -51,6 +51,9 @@ $navbar-size: 64px;
 }
 
 .file-manager-table {
+    display: block;
+    height: calc(100vh - 130px);
+
     .file-title {
         font-weight: 500;
         font-size: 16px;
@@ -68,4 +71,8 @@ $navbar-size: 64px;
             height: $size !important;
         }
     }
+
+    .pbl-ngrid-row:last-of-type {
+        margin-bottom: 60px !important;
+    }
 }

client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss

@@ -1,22 +1 @@
 @import '~assets/styles/tables.scss';
-
-.os-headed-listview-table {
-    // Title
-    .mat-column-title {
-        flex: 9 0 0;
-    }
-
-    // Amount
-    .mat-column-amount {
-        flex: 1 0 60px;
-    }
-
-    // Menu
-    .mat-column-menu {
-        flex: 0 0 40px;
-    }
-}
-
-.mat-cell > div {
-    z-index: 1 !important;
-}

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html

@@ -6,7 +6,6 @@
 </os-head-bar>
 
 <os-list-view-table
-    class="block-list"
     [vScrollFixed]="64"
     [listObservableProvider]="repo"
     [showFilterBar]="true"

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.scss

@@ -1,13 +1,5 @@
 @import '~assets/styles/tables.scss';
 
-.block-list {
-    display: block;
-
-    .virtual-scroll-full-page {
-        height: calc(100vh - 150px);
-    }
-}
-
 .mat-dialog-container {
     .mat-dialog-title {
         margin: 0;

client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html

@@ -115,7 +115,7 @@
     </mat-menu>
 </os-head-bar>
 
-<div class="content-container" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
+<div class="content-container spacer-bottom-60" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
     <!-- Title -->
     <div class="title" *ngIf="motion && !editMotion">
         <div class="title-line">

client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html

@@ -10,7 +10,7 @@
     </div>
 </os-head-bar>
 
-<mat-card class="os-card">
+<mat-card class="os-card spacer-bottom-60">
     <ng-container [ngTemplateOutlet]="viewTemplate"></ng-container>
 </mat-card>
 
@@ -40,6 +40,7 @@
                 <h2>{{ 'Single votes' | translate }}</h2>
                 <os-list-view-table
                     *ngIf="votesDataObservable"
+                    class="single-votes-table"
                     [listObservable]="votesDataObservable"
                     [columns]="columnDefinition"
                     [filterProps]="filterProps"
@@ -47,7 +48,6 @@
                     [fullScreen]="true"
                     [vScrollFixed]="-1"
                     listStorageKey="motion-poll-vote"
-                    [cssClasses]="{ 'single-votes-table': true }"
                 >
                     <!-- Header -->
                     <div *pblNgridHeaderCellDef="'*'; col as col">

client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss

@@ -26,7 +26,12 @@
 }
 
 .single-votes-table {
+    display: block;
     height: 500px;
+
+    .list-view-frame {
+        height: 100%;
+    }
 }
 
 .openslides-theme .pbl-ngrid-no-data {

client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.scss

@@ -1,14 +0,0 @@
-.os-headed-listview-table {
-    /** name */
-    .mat-column-name {
-        width: 100%;
-        flex: 1 0 200px;
-        padding-left: 10px;
-    }
-
-    /** delete */
-    .mat-column-delete {
-        flex: 0 0 190px;
-        justify-content: flex-end !important;
-    }
-}

client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html

@@ -12,8 +12,9 @@
     </div>
 </os-head-bar>
 
-<cdk-virtual-scroll-viewport itemSize="50" [ngClass]="statuteParagraphs.length ? 'virtual-scroll-full-page' : ''">
+<cdk-virtual-scroll-viewport class="statute-vscroll-wrapper" itemSize="50">
-    <mat-accordion class="os-card">
+    <mat-card>
+        <mat-accordion>
             <mat-expansion-panel *cdkVirtualFor="let statuteParagraph of statuteParagraphs" multiple="false">
                 <mat-expansion-panel-header>
                     <mat-panel-title>
@@ -36,6 +37,7 @@
                 </mat-action-row>
             </mat-expansion-panel>
         </mat-accordion>
+    </mat-card>
 </cdk-virtual-scroll-viewport>
 
 <mat-card *ngIf="statuteParagraphs.length === 0">

client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.scss

@@ -1,16 +1,11 @@
-.head-spacer {
+.statute-vscroll-wrapper {
-    width: 100%;
+    height: calc(100vh - 64px);
-    height: 60px;
-    line-height: 60px;
-    text-align: right;
-    background: white; /* TODO: remove this and replace with theme */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
 
-mat-card {
+    .mat-card {
         margin-bottom: 20px;
 
-    mat-form-field {
+        .mat-form-field {
             width: 100%;
         }
+    }
 }

client/src/app/site/polls/components/poll-progress/poll-progress.component.html

@@ -1,4 +1,6 @@
-<div *ngIf="poll" class="poll-progress-wrapper">
+out of poll
+<div class="poll-progress-wrapper">
+    in the poll
     <div class="vote-number">
         <span>{{ votescast }} / {{ max }}</span>
     </div>

client/src/app/site/site.component.html

@@ -95,9 +95,7 @@
             </main>
         </div>
         <div class="toolbars">
-            <!-- test -->
             <os-jitsi></os-jitsi>
-            <!-- <os-live-stream></os-live-stream> -->
         </div>
     </mat-sidenav-content>
 </mat-sidenav-container>

client/src/app/site/site.component.scss

@@ -122,12 +122,11 @@ mat-sidenav-container {
     position: relative;
 
     main {
+        position: absolute;
         display: flex;
         flex-direction: column;
         width: 100%;
-        position: relative;
         z-index: 50;
-        flex: 1;
         > *:not(router-outlet) {
             flex: 1;
             display: block;

client/src/app/site/users/components/group-list/group-list.component.html

@@ -5,11 +5,11 @@
     </div>
 </os-head-bar>
 
-<div class="hint-text">
+<mat-card class="spacer-bottom-60">
+    <div class="hint-text">
         <span>{{ 'All your changes are saved immediately.' | translate }}</span>
-</div>
+    </div>
-
+    <mat-accordion *ngFor="let app of appPermissions">
-<mat-accordion *ngFor="let app of appPermissions">
         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
             <mat-expansion-panel-header>
                 <mat-panel-title>
@@ -51,7 +51,8 @@
                 </table>
             </div>
         </mat-expansion-panel>
-</mat-accordion>
+    </mat-accordion>
+</mat-card>
 
 <ng-template #groupEditDialog>
     <h1 mat-dialog-title>

client/src/app/site/users/components/group-list/group-list.component.scss

@@ -20,7 +20,7 @@ table {
 }
 
 .hint-text {
-    padding-top: 30px;
+    padding-top: 1em;
     padding-left: 25px;
 }
 

client/src/styles.scss

@@ -309,11 +309,6 @@ b,
     @extend %os-table;
 }
 
-/* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */
-.mat-paginator {
-    min-height: 800px;
-}
-
 /* hide scrollbars caused by hidden filter dialog outside of the viewport */
 .mat-drawer-content {
     overflow-x: hidden !important;
@@ -447,6 +442,10 @@ button.mat-menu-item.selected {
     margin-bottom: 40px !important;
 }
 
+.spacer-bottom-60 {
+    margin-bottom: 60px !important;
+}
+
 .spacer-left-10 {
     margin-left: 10px;
 }
@@ -499,19 +498,6 @@ button.mat-menu-item.selected {
     }
 }
 
-/**
- * cdk-virtual-scroll-viewport requires a hight, otherwise it would always be 0
- * Depending in mobile-mode and desktop mode we need to subtract different values
- * from 100vh
- */
-.virtual-scroll-full-page {
-    height: calc(100vh - 64px);
-}
-
-.virtual-scroll-with-head-bar {
-    height: calc(100vh - 129px);
-}
-
 /** css hacks https://codepen.io/edge0703/pen/iHJuA */
 .innerTable {
     display: inline-block;
@@ -519,13 +505,14 @@ button.mat-menu-item.selected {
     width: -webkit-fill-available;
 }
 
-.ngrid-hide-head {
+/**
-    // For some reason, hiding the table header adds an empty meta bar.
+ * Compilcated ngrid hack: The meta row won't disappear (just like that)
-    .pbl-ngrid-container {
+ * Select the first ever container pbl-ngrid-container div and hide
+ */
+.pbl-ngrid-container {
     > div {
         height: 0;
     }
-    }
 }
 
 .cdk-column-menu {