administration.component.html

<mat-sidenav-container class="maarch-container">
    <mat-sidenav-content>
        <div class="bg-head">
            <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                <div class="bg-head-title-label">
                    <header-left></header-left>
                </div>
                <div class="bg-head-title-tool">
                    <header-right></header-right>
                </div>
            </div>
            <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
            </div>
        </div>
        <div class="container" [class.fullContainer]="appService.getViewMode()">
            <div class="container-content" style="display: flex;flex-direction: column;">
                <div class="loading" *ngIf="loading">
                    <mat-spinner style="margin:auto;"></mat-spinner>
                </div>
                <div style="display: grid;grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));gap: 20px;padding:20px;">
                    <mat-card class="countCard" *ngFor="let shortcut of shortcutsAdmin" matRipple (click)="goToSpecifiedAdministration(shortcut)">
                        <div mat-card-avatar class="{{shortcut.style}} avatarCount">
                        </div>
                        <span style="font-size: 40px;">{{shortcut.count}}</span>
                        {{shortcut.label}}
                    </mat-card>
                </div>
                <mat-divider></mat-divider>
                <mat-form-field style="padding:10px;font-size: 10px;width: 250px !important;">
                    <input matInput #searchServiceInput [formControl]="searchService" [placeholder]="lang.filterBy">
                </mat-form-field>
                <div style="margin: 20px;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;padding:20px;padding-top:0px;margin-top:0px;">
                    <button mat-button  *ngFor="let administration of filteredAdministrations | async | sortBy : 'label'" [title]="administration.comment" style="font-size:20px;height:80px;" (click)="goToSpecifiedAdministration(administration)">
                        <div style="display: flex;align-items: center;gap: 10px;">
                            <i class="{{administration.style}} fa-4x avatarCount2"></i>
                            <span class="countLabel" style="white-space: initial;text-align: left;">
                                {{administration.label}}
                            </span>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </mat-sidenav-content>
    <mat-sidenav #snav2 [fixedInViewport]="appService.getViewMode()" position='end'
        [opened]="appService.getViewMode() ? false : false" [mode]="appService.getViewMode() ? 'over' : 'side'"
        class="panel-right" style="overflow-x:hidden;" [ngStyle]="{'width': appService.getViewMode() ? '80%' : '30%'}"
        autoFocus="false">
    </mat-sidenav>
</mat-sidenav-container>