Merge pull request #5429 from tsiegleauq/main-page-cleanup

Cleanup main routing page and ngrid lists

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,6 +2,24 @@
 
 $pbl-height: var(--pbl-height);
 
+.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;
@@ -11,9 +29,8 @@ $pbl-height: var(--pbl-height);
             height: $pbl-height;
         }
 
-// additional space if the jitsi integration is active
         .pbl-ngrid-row:last-of-type {
-    margin-bottom: 30px !important;
+            margin-bottom: 60px !important;
         }
 
         .pbl-ngrid-cell {
@@ -25,3 +42,5 @@ $pbl-height: var(--pbl-height);
                 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>
@@ -78,6 +79,7 @@
     </mat-table>
 
     <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,10 +5,10 @@
     </div>
 </os-head-bar>
 
+<mat-card class="spacer-bottom-60">
     <div class="hint-text">
         <span>{{ 'All your changes are saved immediately.' | translate }}</span>
     </div>
-
     <mat-accordion *ngFor="let app of appPermissions">
         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
             <mat-expansion-panel-header>
@@ -52,6 +52,7 @@
             </div>
         </mat-expansion-panel>
     </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,14 +505,15 @@ 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)
+ * Select the first ever container pbl-ngrid-container div and hide
+ */
 .pbl-ngrid-container {
     > div {
         height: 0;
     }
 }
-}
 
 .cdk-column-menu {
     padding: 0 16px 0 0 !important;