Merge pull request #3847 from jsaalfeld/fix_footer

inserting fixed footer (with @tsiegleauq)

client/src/app/shared/animations.ts

@@ -2,6 +2,8 @@ import { trigger, animate, transition, style, query, stagger, group } from '@ang
 
 export const pageTransition = trigger('pageTransition', [
     transition('* => *', [
+        /** this will avoid the dom-copy-effect */
+        query(':enter, :leave', style({ position: 'absolute', width: '100%' }), { optional: true }),
         /** keep the dom clean - let all items "just" enter */
         query(':enter mat-card', [style({ opacity: 0 })], { optional: true }),
         query(':enter .on-transition-fade', [style({ opacity: 0 })], { optional: true }),
@@ -11,19 +13,63 @@ export const pageTransition = trigger('pageTransition', [
         /** parallel vanishing */
         group([
             /** animate fade out for the selected components */
-            query(':leave .on-transition-fade', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
+            query(
-                optional: true
+                ':leave .on-transition-fade',
-            }),
+                [
-            /** how the material cards are leaving */
+                    style({ opacity: 1 }),
-            query(':leave mat-card', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
+                    animate(
-                optional: true
+                        '200ms ease-in-out',
-            }),
+                        style({
-            query(':leave mat-row', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
+                            transform: 'translateY(0%)',
-                optional: true
+                            opacity: 0
-            }),
-            query(':leave mat-expansion-panel', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], {
-                optional: true
                         })
+                    )
+                ],
+                { optional: true }
+            ),
+            /** how the material cards are leaving */
+            query(
+                ':leave mat-card',
+                [
+                    style({ transform: 'translateY(0%)', opacity: 1 }),
+                    animate(
+                        '200ms ease-in-out',
+                        style({
+                            transform: 'translateY(0%)',
+                            opacity: 0
+                        })
+                    )
+                ],
+                { optional: true }
+            ),
+            query(
+                ':leave mat-row',
+                [
+                    style({ transform: 'translateY(0%)', opacity: 1 }),
+                    animate(
+                        '200ms ease-in-out',
+                        style({
+                            transform: 'translateY(0%)',
+                            opacity: 0
+                        })
+                    )
+                ],
+                { optional: true }
+            ),
+            query(
+                ':leave mat-expansion-panel',
+                [
+                    style({ transform: 'translateY(0%)', opacity: 1 }),
+                    animate(
+                        '200ms ease-in-out',
+                        style({
+                            transform: 'translateY(0%)',
+                            opacity: 0
+                        })
+                    )
+                ],
+                { optional: true }
+            )
         ]),
 
         /** parallel appearing */

client/src/app/shared/components/footer/footer.component.html

@@ -0,0 +1,12 @@
+<mat-toolbar color='primary' class="footer">
+    <mat-toolbar-row>
+        <button mat-button class="footer-link" [routerLink]="['/legalnotice']">
+            <span translate>Legal Notice</span>
+        </button>
+        <button mat-button class="footer-link" [routerLink]="['/privacypolicy']">
+            <span translate>Privacy Policy</span>
+        </button>
+        <span class="footer-right">© <span translate>Copyright by</span>&#160;<a href='https://openslides.org/'>OpenSlides</a>
+        </span>
+    </mat-toolbar-row>
+</mat-toolbar>

client/src/app/shared/components/footer/footer.component.scss

@@ -0,0 +1,11 @@
+.footer-link,
+.footer-right {
+    font-size: 12px;
+    z-index: inherit;
+}
+
+.footer-right {
+    a {
+        color: white;
+    }
+}

client/src/app/shared/components/footer/footer.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+    let component: FooterComponent;
+    let fixture: ComponentFixture<FooterComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [FooterComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FooterComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

client/src/app/shared/components/footer/footer.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+
+/**
+ * Reusable footer Apps.
+ *
+ * ## Examples:
+ *
+ * ### Usage of the selector:
+ *
+ * ```html
+ * <os-footer></os-footer>
+ * ```
+ */
+@Component({
+    selector: 'os-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+    /**
+     * Empty constructor
+     */
+    public constructor() {}
+
+    /**
+     * empty onInit
+     */
+    public ngOnInit() {}
+}

client/src/app/shared/shared.module.ts

@@ -35,6 +35,9 @@ import { TranslateModule } from '@ngx-translate/core';
 import { PermsDirective } from './directives/perms.directive';
 import { DomChangeDirective } from './directives/dom-change.directive';
 import { HeadBarComponent } from './components/head-bar/head-bar.component';
+import { FooterComponent } from './components/footer/footer.component';
+
+import { RouterModule } from '@angular/router';
 
 library.add(fas);
 
@@ -70,7 +73,8 @@ library.add(fas);
         MatSnackBarModule,
         MatDialogModule,
         TranslateModule.forChild(),
-        FontAwesomeModule
+        FontAwesomeModule,
+        RouterModule
     ],
     exports: [
         FormsModule,
@@ -96,8 +100,9 @@ library.add(fas);
         TranslateModule,
         PermsDirective,
         DomChangeDirective,
+        FooterComponent,
         HeadBarComponent
     ],
-    declarations: [PermsDirective, DomChangeDirective, HeadBarComponent]
+    declarations: [PermsDirective, DomChangeDirective, HeadBarComponent, FooterComponent]
 })
 export class SharedModule {}

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

@@ -1,7 +1,10 @@
 <!-- The actual form -->
+<header>
     <mat-toolbar class="login-logo-bar" color="primary">
         <img src='/assets/img/openslides-logo-h-dark-transparent.svg' alt='OpenSlides-logo'>
     </mat-toolbar>
+</header>
+<main>
     <div class="form-wrapper">
 
         <mat-spinner *ngIf="inProcess"></mat-spinner>
@@ -24,8 +27,12 @@
             <br>
             <!-- TODO: Next to each other...-->
             <button mat-raised-button color="primary" class='login-button' type="submit" translate>Login</button>
-        <button mat-raised-button *ngIf="areGuestsEnabled()" color="primary" class='login-button'
+            <button mat-raised-button *ngIf="areGuestsEnabled()" color="primary" class='login-button' type="button" (click)="guestLogin()" translate>Login as Guest</button>
-            type="button" (click)="guestLogin()" translate>Login as Guest</button>
         </form>
 
     </div>
+
+</main>
+<footer class="page-footer">
+    <os-footer></os-footer>
+</footer>

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

@@ -2,16 +2,22 @@ mat-form-field {
     width: 100%;
 }
 
+header {
+    width: 100%;
+    flex: 1;
+    mat-toolbar {
+        min-height: 200px !important;
+    }
     .login-logo-bar {
-    height: 45% !important;
-
         img {
             margin-left: auto;
             margin-right: auto;
             width: 90%;
+            height: 90%;
             max-width: 400px;
         }
     }
+}
 
 .forgot-password-button {
     float: right;
@@ -29,7 +35,6 @@ mat-form-field {
 .form-wrapper {
     padding-left: 30px;
     padding-right: 30px;
-
     mat-spinner {
         position: absolute;
         left: 0;
@@ -44,3 +49,7 @@ mat-form-field {
     margin: 0 auto;
     max-width: 400px;
 }
+
+footer {
+    bottom: 0; //black magic to keep the toolbar active here
+}

client/src/app/site/privacy-policy/privacy-policy.component.scss

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

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

@@ -80,26 +80,9 @@
                 <span translate>Projector</span>
             </a>
         </mat-nav-list>
-
-
-        <footer>
-            <button mat-button>
-                <a routerLink='/legalnotice' (click)='toggleSideNav()'>
-                    <span translate>Legal Notice</span>
-                </a>
-            </button>
-            <button mat-button>
-                <a routerLink='/privacypolicy' (click)='toggleSideNav()'>
-                    <span translate>Privacy Policy</span>
-                </a>
-            </button>
-            <br>
-            <span align="center">© Copyright by
-                <a href='https://openslides.org/'>OpenSlides</a>
-            </span>
-        </footer>
     </mat-sidenav>
-
+    <div class="content">
+        <header>
             <!-- the first toolbar row is (still) a global element
             the second one shall be handled by the apps  -->
             <mat-toolbar color='primary'>
@@ -115,9 +98,15 @@
                     <fa-icon icon='search'></fa-icon>
                 </button>
             </mat-toolbar>
+        </header>
 
-    <!-- continue with <mat-toolbar> in the app-->
+        <div class="relax">
             <main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
                 <router-outlet #o="outlet"></router-outlet>
             </main>
+            <footer>
+                <os-footer></os-footer>
+            </footer>
+        </div>
+    </div>
 </mat-sidenav-container>

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

@@ -1,12 +1,3 @@
-mat-sidenav-container {
-    height: 100%;
-
-    main {
-        flex: 1;
-        position: relative;
-    }
-}
-
 .projector-button {
     position: fixed;
     bottom: 10px;
@@ -25,14 +16,30 @@ mat-sidenav-container {
     box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2);
 }
 
-footer {
+.content {
-    position: fixed;
+    min-height: 100%;
-    bottom: 0;
+    position: relative;
+}
 
-    span {
+mat-sidenav-container {
-        // width: 100%;
+    height: 100vh;
+    width: 100%;
+}
+
+.relax {
+    position: initial;
+    padding-bottom: 70px;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    z-index: 50;
+    flex: 1;
+    > *:not(router-outlet) {
+        flex: 1;
         display: block;
-        text-align: center;
-        margin-bottom: 5px;
     }
 }

client/src/assets/i18n/de.json

@@ -1,21 +1,56 @@
 {
     "Agenda": "Tagesordnung",
     "Assignments": "Wahlen",
+    "Category": "",
     "Change Password": "Passwort ändern",
+    "Content": "",
+    "Cookies": "",
+    "Copyright by": "Copyright by",
+    "Database": "",
+    "DeleteMotion": "",
+    "Deleting Files": "",
     "Edit Profile": "Profil bearbeiten",
     "English": "Englisch",
+    "Export As": {
+        "0": {
+            "0": {
+                "0": ""
+            }
+        }
+    },
+    "FILTER": "",
     "Files": "Dateien",
     "French": "Französisch",
     "German": "Deutsch",
-    "Hello user": "Hallo {{user}}",
     "Home": "Startseite",
+    "Identifier": "",
     "Legal Notice": "Impressum",
-    "Log In": "Anmelden",
+    "Logfiles": "",
+    "Login": "",
+    "Login as Guest": "",
     "Logout": "Abmelden",
+    "Meta information": "",
+    "Motion": "",
     "Motions": "Anträge",
+    "OK": "",
+    "Offline mode: You can use OpenSlides but changes are not saved": {
+        "0": ""
+    },
+    "Origin": "",
     "Participants": "Teilnehmer",
+    "Personal note": "",
     "Privacy Policy": "Datenschutz",
+    "Project": "",
+    "Projector": "",
+    "Reason": "",
+    "Reset State": "",
+    "Reset recommendation": "",
+    "SORT": "",
     "Settings": "Einstellungen",
-    "Users": "Benutzer",
+    "State": "",
-    "Welcome to OpenSlides": "Willkommen bei OpenSlides"
+    "Submitters": "",
+    "Supporters": "",
+    "The assembly may decide:": "",
+    "Welcome to OpenSlides": "Willkommen bei OpenSlides",
+    "by": ""
 }

client/src/assets/i18n/en.json

@@ -1,21 +1,56 @@
 {
     "Agenda": "",
     "Assignments": "",
+    "Category": "",
     "Change Password": "",
+    "Content": "",
+    "Cookies": "",
+    "Copyright by": "",
+    "Database": "",
+    "DeleteMotion": "",
+    "Deleting Files": "",
     "Edit Profile": "",
     "English": "",
+    "Export As": {
+        "0": {
+            "0": {
+                "0": ""
+            }
+        }
+    },
+    "FILTER": "",
     "Files": "",
     "French": "",
     "German": "",
-    "Hello user": "Hello {{user}}",
     "Home": "",
+    "Identifier": "",
     "Legal Notice": "",
-    "Log In": "",
+    "Logfiles": "",
+    "Login": "",
+    "Login as Guest": "",
     "Logout": "",
+    "Meta information": "",
+    "Motion": "",
     "Motions": "",
+    "OK": "",
+    "Offline mode: You can use OpenSlides but changes are not saved": {
+        "0": ""
+    },
+    "Origin": "",
     "Participants": "",
+    "Personal note": "",
     "Privacy Policy": "",
+    "Project": "",
+    "Projector": "",
+    "Reason": "",
+    "Reset State": "",
+    "Reset recommendation": "",
+    "SORT": "",
     "Settings": "",
-    "Users": "",
+    "State": "",
-    "Welcome to OpenSlides": ""
+    "Submitters": "",
+    "Supporters": "",
+    "The assembly may decide:": "",
+    "Welcome to OpenSlides": "",
+    "by": ""
 }

client/src/assets/i18n/fr.json

@@ -1,21 +1,56 @@
 {
     "Agenda": "",
     "Assignments": "",
+    "Category": "",
     "Change Password": "",
+    "Content": "",
+    "Cookies": "",
+    "Copyright by": "",
+    "Database": "",
+    "DeleteMotion": "",
+    "Deleting Files": "",
     "Edit Profile": "",
     "English": "",
+    "Export As": {
+        "0": {
+            "0": {
+                "0": ""
+            }
+        }
+    },
+    "FILTER": "",
     "Files": "",
     "French": "",
     "German": "",
-    "Hello user": "",
     "Home": "",
+    "Identifier": "",
     "Legal Notice": "",
-    "Log In": "",
+    "Logfiles": "",
+    "Login": "",
+    "Login as Guest": "",
     "Logout": "",
+    "Meta information": "",
+    "Motion": "",
     "Motions": "",
+    "OK": "",
+    "Offline mode: You can use OpenSlides but changes are not saved": {
+        "0": ""
+    },
+    "Origin": "",
     "Participants": "",
+    "Personal note": "",
     "Privacy Policy": "",
+    "Project": "",
+    "Projector": "",
+    "Reason": "",
+    "Reset State": "",
+    "Reset recommendation": "",
+    "SORT": "",
     "Settings": "",
-    "Users": "",
+    "State": "",
-    "Welcome to OpenSlides": ""
+    "Submitters": "",
+    "Supporters": "",
+    "The assembly may decide:": "",
+    "Welcome to OpenSlides": "",
+    "by": ""
 }

client/src/styles.scss

@@ -1,11 +1,9 @@
 @import '~@angular/material/theming';
-
 @include mat-core();
 
 /** Import brand theme and (new) component themes */
 @import './assets/styles/openslides-theme';
 @import './app/site/site.component.scss-theme';
-
 @mixin openslides-components-theme($theme) {
     @include os-site-theme($theme);
     /** More components are added here */
@@ -13,35 +11,16 @@
 
 @include angular-material-theme($openslides-theme);
 @include openslides-components-theme($openslides-theme);
-
 * {
     font-family: Arial, Helvetica, sans-serif !important;
 }
 
-html,
-body {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: 0;
-    padding: 0;
-    height: 100% !important;
-}
-
 body {
     // background: #e8eaed;
     margin: 0 auto;
     padding: 0;
 }
 
-router-outlet ~ * {
-    position: absolute;
-    height: 100% !important;
-    width: 100%;
-}
-
 /**the plus button in Motion, Agenda, etc*/
 .generic-plus-button {
     bottom: -30px;
@@ -52,6 +31,7 @@ router-outlet ~ * {
     bottom: -28px;
     z-index: 100;
 }
+
 .os-card {
     max-width: 90%;
     margin-top: 10px;
@@ -83,3 +63,11 @@ router-outlet ~ * {
 .on-transition-fade {
     z-index: 100;
 }
+
+footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    z-index: 1;
+}