FEAT #11347 TIME 1:30 class and refactoring css

src/frontend/app/administration/administration-routing.module.ts

 import { NgModule }     from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { AdministrationComponent }                      from './administration.component';
+import { AdministrationComponent }                      from './home/administration.component';
 import { UsersAdministrationComponent }                 from './user/users-administration.component';
 import { UserAdministrationComponent }                  from './user/user-administration.component';
 import { GroupsAdministrationComponent }                from './group/groups-administration.component';

src/frontend/app/administration/administration.component.html

-<div class="admin-container" [class.admin-is-mobile]="mobileQuery.matches">
-    <mat-sidenav-container autosize class="admin-sidenav-container" >
-        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
-            [opened]="mobileQuery.matches ? false : true">
-            <menu-shortcut></menu-shortcut>
-            <menu-nav></menu-nav>
-        </mat-sidenav>
-        <mat-sidenav-content>
-            <div *ngIf="loading" style="display:flex;height:100%;">
-                <mat-spinner style="margin:auto;"></mat-spinner>
-            </div>
-            <mat-card *ngIf="!loading" class="card-app-content">
-                <div class="row adminArea">
-                    <div class="col-md-6 adminArea_1" *ngIf="organisationServices">
-                        <div style="font-size: 20px;
-                        font-weight: bolder;
-                        opacity: 0.2;
-                        text-align: center">{{lang.organization}}</div>
-                        <button style="white-space:inherit;height: 100px;line-height:20px;" class="col-md-4 col-xs-6" mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of organisationServices"
-                            (click)="goToSpecifiedAdministration(modService)">
-                            <i class="{{modService.style}} fa-4x"></i>
-                            <br/>{{modService.name}}</button>
-                    </div>
-
-                    <div class="col-md-6 adminArea_2" *ngIf="productionServices">
-                        <div style="font-size: 20px;
-                        font-weight: bolder;
-                        opacity: 0.2;
-                        text-align: center">{{lang.production}}</div>
-                        <button style="white-space:inherit;height: 100px;line-height:20px;" class="col-md-4 col-xs-6" mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of productionServices"
-                            (click)="goToSpecifiedAdministration(modService)">
-                            <i class="{{modService.style}} fa-4x"></i>
-                            <br/>{{modService.name}}</button>
-                    </div>
-                    <div class="col-md-6 adminArea_3" *ngIf="classementServices">
-                        <div style="font-size: 20px;
-                        font-weight: bolder;
-                        opacity: 0.2;
-                        text-align: center">{{lang.classement}}</div>
-                        <button style="white-space:inherit;height: 100px;line-height:20px;" class="col-md-4 col-xs-6" mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of classementServices"
-                            (click)="goToSpecifiedAdministration(modService)">
-                            <i class="{{modService.style}} fa-4x"></i>
-                            <br/>{{modService.name}}</button>
-                    </div>
-                    <div class="col-md-6 adminArea_4" *ngIf="supervisionServices">
-                        <div style="font-size: 20px;
-                        font-weight: bolder;
-                        opacity: 0.2;
-                        text-align: center">{{lang.supervision}}</div>
-                        <ng-container>
-                            <button style="white-space:inherit;height: 100px;line-height:20px;" class="col-md-4 col-xs-6" mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of supervisionServices"
-                            (click)="goToSpecifiedAdministration(modService)">
-                            <i class="{{modService.style}} fa-4x"></i>
-                            <br/>{{modService.name}}</button>
-                        </ng-container>
-                    </div>
-                </div>
-            </mat-card>
-        </mat-sidenav-content>
-        <mat-sidenav #snav2 [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
-            position='end' [opened]="mobileQuery.matches ? false : false">
-            <mat-nav-list>
-            </mat-nav-list>
-        </mat-sidenav>
-    </mat-sidenav-container>
-</div>
\ No newline at end of file

src/frontend/app/administration/administration.module.ts

@@ -8,7 +8,7 @@ import { SharedModule }                         from '../app-common.module';
 
 import { AdministrationRoutingModule }          from './administration-routing.module';
 
-import { AdministrationComponent }                      from './administration.component';
+import { AdministrationComponent }                      from './home/administration.component';
 import { UsersAdministrationComponent, UsersAdministrationRedirectModalComponent }      from './user/users-administration.component';
 import { AccountLinkComponent }      from './user/account-link/account-link.component';
 import { GroupsAdministrationComponent, GroupsAdministrationRedirectModalComponent }    from './group/groups-administration.component';

src/frontend/app/administration/group/indexing/indexing-administration.component.html

 <div class="row" style="margin:0px;">
     <div class="col-md-12">
-        <div *ngIf="!indexingInfo.canIndex" class="alert-message alert-message-danger" role="alert"
-            style="margin-top: 30px;">Le groupe ne peut pas enregistrer de document. <a
-                (click)="indexingInfo.canIndex=true">Activer l'indexation pour ce groupe</a></div>
-        <button *ngIf="indexingInfo.canIndex" color="warn" mat-raised-button (click)="indexingInfo.canIndex=false">Désactiver l'indexation pour ce groupe</button>
+        <div *ngIf="!indexingInfo.canIndex" class="alert-message alert-message-danger" role="alert" style="margin-top: 30px;">Le
+            groupe ne peut pas enregistrer de document. <a (click)="indexingInfo.canIndex=true">Activer l'indexation
+                pour ce groupe</a></div>
+        <button *ngIf="indexingInfo.canIndex" color="warn" mat-raised-button (click)="indexingInfo.canIndex=false">Désactiver
+            l'indexation pour ce groupe</button>
     </div>
     <div class="col-md-8">
         <div class="formType">
             <div class="formType-title">
                 Action(s) choisie(s)
             </div>
-            <plugin-autocomplete [labelPlaceholder]="'Associer une nouvelle action'" [labelList]="'Action(s) disponible(s)'" [datas]="actionList" [targetSearchKey]="'label_action'" (triggerEvent)="addAction($event)"></plugin-autocomplete>
+            <plugin-autocomplete [labelPlaceholder]="'Associer une nouvelle action'" [labelList]="'Action(s) disponible(s)'"
+                [datas]="actionList" [targetSearchKey]="'label_action'" (triggerEvent)="addAction($event)"></plugin-autocomplete>
             <mat-list class="selectedActionList" role="list">
-                <mat-list-item class="selectedAction" role="listitem"
-                    *ngFor="let action of indexingInfo.actions;let i=index">
+                <mat-list-item class="selectedAction" role="listitem" *ngFor="let action of indexingInfo.actions;let i=index">
                     <div class="actionLabel">{{action.label_action}}</div>
                     <div>
                         <button mat-icon-button color="warn" (click)="removeAction(i)">

src/frontend/app/administration/home/administration.component.html

+<mat-sidenav-container class="maarch-container">
+    <mat-sidenav #snavLeft mode="side" opened class="panel-left" #snav [mode]="mobileMode ? 'over' : 'side'"
+        [fixedInViewport]="mobileMode" [opened]="mobileMode ? false : true" autoFocus="false" style="overflow-x:hidden;"
+        [ngStyle]="{'width': mobileMode ? '80%' : '350px'}">
+        <header-panel [snavLeft]="snav"></header-panel>
+        <menu-shortcut></menu-shortcut>
+        <menu-nav></menu-nav>
+        <mat-divider></mat-divider>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <div class="bg-head">
+            <div class="bg-head-title" [class.customContainerRight]="mobileMode">
+                <div class="bg-head-title-label">
+                    <header-left [snavLeft]="snav"></header-left>
+                </div>
+                <div class="bg-head-title-tool">
+                    <header-right></header-right>
+                </div>
+            </div>
+            <div class="bg-head-content" [class.fullContainer]="mobileMode">
+            </div>
+        </div>
+        <div class="container" [class.fullContainer]="mobileMode">
+            <div class="container-content">
+                <div class="loading" *ngIf="loading">
+                    <mat-spinner style="margin:auto;"></mat-spinner>
+                </div>
+                <div *ngIf="!loading" class="row adminArea">
+                    <div class="col-md-6 adminArea_1" *ngIf="organisationServices">
+                        <div class="adminArea-label">{{lang.organization}}</div>
+                        <button class="col-md-4 col-xs-6 adminArea-button"
+                            mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of organisationServices"
+                            (click)="goToSpecifiedAdministration(modService)">
+                            <i class="{{modService.style}} fa-4x"></i>
+                            <br />{{modService.name}}</button>
+                    </div>
+
+                    <div class="col-md-6 adminArea_2" *ngIf="productionServices">
+                        <div class="adminArea-label">{{lang.production}}</div>
+                        <button class="col-md-4 col-xs-6 adminArea-button"
+                            mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of productionServices"
+                            (click)="goToSpecifiedAdministration(modService)">
+                            <i class="{{modService.style}} fa-4x"></i>
+                            <br />{{modService.name}}</button>
+                    </div>
+                    <div class="col-md-6 adminArea_3" *ngIf="classementServices">
+                        <div class="adminArea-label">{{lang.classement}}</div>
+                        <button class="col-md-4 col-xs-6 adminArea-button"
+                            mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of classementServices"
+                            (click)="goToSpecifiedAdministration(modService)">
+                            <i class="{{modService.style}} fa-4x"></i>
+                            <br />{{modService.name}}</button>
+                    </div>
+                    <div class="col-md-6 adminArea_4" *ngIf="supervisionServices">
+                        <div class="adminArea-label">{{lang.supervision}}</div>
+                        <ng-container>
+                            <button class="col-md-4 col-xs-6 adminArea-button"
+                                mat-button color="primary" matTooltip="{{modService.comment}}" *ngFor="let modService of supervisionServices"
+                                (click)="goToSpecifiedAdministration(modService)">
+                                <i class="{{modService.style}} fa-4x"></i>
+                                <br />{{modService.name}}</button>
+                        </ng-container>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </mat-sidenav-content>
+    <mat-sidenav #snav2 [fixedInViewport]="mobileQuery.matches" position='end' [opened]="mobileQuery.matches ? false : false"
+        [mode]="mobileMode ? 'over' : 'side'" class="panel-right" style="overflow-x:hidden;" [ngStyle]="{'width': mobileMode ? '80%' : '30%'}"
+        autoFocus="false">
+    </mat-sidenav>
+</mat-sidenav-container>
\ No newline at end of file

src/frontend/app/administration/home/administration.component.scss

+.adminArea {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  
+  .adminArea_1{
+    flex: 1;
+    overflow: hidden;
+    padding:20px;
+  }
+  
+  .adminArea_2{
+    overflow: hidden;
+    padding:20px;
+  }
+  
+  .adminArea_3{
+    overflow: hidden;
+    padding:20px;
+  }
+  
+  .adminArea_4{
+    overflow: hidden;
+    padding:20px;
+  }
+
+.loading {
+    display:flex;
+    height:100%;
+}
+
+.adminArea-label {
+    font-size: 20px;
+    font-weight: bolder;
+    opacity: 0.2;
+    text-align: center
+}
+
+.adminArea-button {
+    white-space:inherit;
+    height: 100px;
+    line-height:20px;
+}
\ No newline at end of file

src/frontend/app/administration/administration.component.ts → src/frontend/app/administration/home/administration.component.ts

-import { ChangeDetectorRef, Component, OnInit, Input, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
-import { LANG } from '../translate.component';
+import { LANG } from '../../translate.component';
 import { MatSidenav, MatBottomSheet } from '@angular/material';
-import { HeaderService } from "../../service/header.service";
-import { TechnicalAdministrationComponent } from "../administration/technical/technical-administration.component";
+import { HeaderService } from "../../../service/header.service";
+import { TechnicalAdministrationComponent } from "../technical/technical-administration.component";
 
 declare function $j(selector: any): any;
 
@@ -14,12 +14,13 @@ declare const angularGlobals: any;
 
 @Component({
     templateUrl: "administration.component.html",
+    styleUrls: ['administration.component.scss'],
 })
 export class AdministrationComponent implements OnInit {
 
     private _mobileQueryListener    : () => void;
     mobileQuery                     : MediaQueryList;
-
+    mobileMode: boolean = false;
     coreUrl                         : string;
     lang                            : any       = LANG;
     loading                         : boolean   = false;
@@ -33,6 +34,7 @@ export class AdministrationComponent implements OnInit {
     @ViewChild('snav2') public sidenavRight: MatSidenav;
 
     constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, public http: HttpClient, private router: Router, private headerService: HeaderService, private bottomSheet: MatBottomSheet) {
+        this.mobileMode = angularGlobals.mobileMode;
         $j("link[href='merged_css.php']").remove();
         this.mobileQuery = media.matchMedia('(max-width: 768px)');
         this._mobileQueryListener = () => changeDetectorRef.detectChanges();

src/frontend/css/engine_2.scss

@@ -50,6 +50,10 @@ html,body {
         padding-right: 30px;
         padding-bottom: 90px;
     }
+
+    &-content:empty {
+        padding-bottom: 60px;
+    }
 }
 
 .panel-left,
@@ -65,8 +69,11 @@ html,body {
     padding-right: 30px;
     margin-top: -60px;
     width: 100%;
+    overflow: hidden;
 
     &-content {
+        overflow-y: auto;
+        overflow-x: hidden;
         position: relative;
         height: 100%;
         min-height: 200px;

src/frontend/css/maarch-material.scss

@@ -87,32 +87,6 @@ $theme: mat-light-theme($primary, $accent, $warn);
   cursor:not-allowed;
 }
 
-.adminArea {
-  display: flex;
-  flex-flow: row wrap;
-}
-
-.adminArea_1{
-  flex: 1;
-  overflow: hidden;
-  padding:20px;
-}
-
-.adminArea_2{
-  overflow: hidden;
-  padding:20px;
-}
-
-.adminArea_3{
-  overflow: hidden;
-  padding:20px;
-}
-
-.adminArea_4{
-  overflow: hidden;
-  padding:20px;
-}
-
 .dndFile{
   border: dashed 5px grey;
   padding:10px;