Merge pull request #5429 from tsiegleauq/main-page-cleanup
Cleanup main routing page and ngrid lists
This commit is contained in:
Emanuel Schütze
GitHub
commit
55f1d02fcc
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
mat-card {
|
||||
height: 100%;
|
||||
}
|
||||
@ -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">
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
display: block;
|
||||
height: 500px;
|
||||
|
||||
.list-view-frame {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.single-vote-result + .single-vote-result {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -17,9 +17,10 @@
|
||||
}
|
||||
|
||||
.user-statistics-table--virtual-scroll {
|
||||
display: block;
|
||||
height: 500px;
|
||||
|
||||
.pbl-ngrid-header-cell:not(:first-child):before {
|
||||
display: none;
|
||||
.list-view-frame {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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()">
|
||||
|
||||
@ -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 {
|
||||
padding: 0 20px;
|
||||
.os-headed-listview-table {
|
||||
.mat-header-cell,
|
||||
.mat-cell {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
</os-head-bar>
|
||||
|
||||
<os-list-view-table
|
||||
class="block-list"
|
||||
[vScrollFixed]="64"
|
||||
[listObservableProvider]="repo"
|
||||
[showFilterBar]="true"
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -26,7 +26,12 @@
|
||||
}
|
||||
|
||||
.single-votes-table {
|
||||
display: block;
|
||||
height: 500px;
|
||||
|
||||
.list-view-frame {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.openslides-theme .pbl-ngrid-no-data {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -12,8 +12,9 @@
|
||||
</div>
|
||||
</os-head-bar>
|
||||
|
||||
<cdk-virtual-scroll-viewport itemSize="50" [ngClass]="statuteParagraphs.length ? 'virtual-scroll-full-page' : ''">
|
||||
<mat-accordion class="os-card">
|
||||
<cdk-virtual-scroll-viewport class="statute-vscroll-wrapper" itemSize="50">
|
||||
<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">
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
.head-spacer {
|
||||
width: 100%;
|
||||
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);
|
||||
}
|
||||
.statute-vscroll-wrapper {
|
||||
height: calc(100vh - 64px);
|
||||
|
||||
mat-card {
|
||||
.mat-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
mat-form-field {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -20,7 +20,7 @@ table {
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
padding-top: 30px;
|
||||
padding-top: 1em;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user