From 9f226c75eebd809a5fcf6ab4548346632b38db4c Mon Sep 17 00:00:00 2001 From: Jochen Saalfeld Date: Tue, 4 Sep 2018 11:35:50 +0200 Subject: [PATCH] inserting fixed footer (with @tsiegleauq) --- client/src/app/shared/animations.ts | 70 +++++++++++++++---- .../components/footer/footer.component.html | 12 ++++ .../components/footer/footer.component.scss | 11 +++ .../footer/footer.component.spec.ts | 24 +++++++ .../components/footer/footer.component.ts | 29 ++++++++ client/src/app/shared/shared.module.ts | 9 ++- .../src/app/site/login/login.component.html | 59 +++++++++------- .../src/app/site/login/login.component.scss | 27 ++++--- .../privacy-policy.component.scss | 3 + client/src/app/site/site.component.html | 61 +++++++--------- client/src/app/site/site.component.scss | 39 ++++++----- client/src/assets/i18n/de.json | 43 ++++++++++-- client/src/assets/i18n/en.json | 43 ++++++++++-- client/src/assets/i18n/fr.json | 43 ++++++++++-- client/src/styles.scss | 30 +++----- 15 files changed, 369 insertions(+), 134 deletions(-) create mode 100644 client/src/app/shared/components/footer/footer.component.html create mode 100644 client/src/app/shared/components/footer/footer.component.scss create mode 100644 client/src/app/shared/components/footer/footer.component.spec.ts create mode 100644 client/src/app/shared/components/footer/footer.component.ts diff --git a/client/src/app/shared/animations.ts b/client/src/app/shared/animations.ts index 7ad7d442e..fc40c68b8 100644 --- a/client/src/app/shared/animations.ts +++ b/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 }))], { - optional: true - }), + query( + ':leave .on-transition-fade', + [ + style({ opacity: 1 }), + animate( + '200ms ease-in-out', + style({ + transform: 'translateY(0%)', + opacity: 0 + }) + ) + ], + { optional: true } + ), /** how the material cards are leaving */ - query(':leave mat-card', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], { - optional: true - }), - query(':leave mat-row', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], { - optional: true - }), - query(':leave mat-expansion-panel', [style({ opacity: 1 }), animate('0.2s', style({ opacity: 0 }))], { - optional: true - }) + 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 */ diff --git a/client/src/app/shared/components/footer/footer.component.html b/client/src/app/shared/components/footer/footer.component.html new file mode 100644 index 000000000..505ab5842 --- /dev/null +++ b/client/src/app/shared/components/footer/footer.component.html @@ -0,0 +1,12 @@ + + + + + © Copyright by OpenSlides + + + diff --git a/client/src/app/shared/components/footer/footer.component.scss b/client/src/app/shared/components/footer/footer.component.scss new file mode 100644 index 000000000..381793a75 --- /dev/null +++ b/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; + } +} diff --git a/client/src/app/shared/components/footer/footer.component.spec.ts b/client/src/app/shared/components/footer/footer.component.spec.ts new file mode 100644 index 000000000..b16b22195 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [FooterComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/client/src/app/shared/components/footer/footer.component.ts b/client/src/app/shared/components/footer/footer.component.ts new file mode 100644 index 000000000..bfcd35c66 --- /dev/null +++ b/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 + * + * ``` + */ +@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() {} +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 6d734cbf4..56fabd408 100644 --- a/client/src/app/shared/shared.module.ts +++ b/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 {} diff --git a/client/src/app/site/login/login.component.html b/client/src/app/site/login/login.component.html index e73e9a07a..129d7bd7e 100644 --- a/client/src/app/site/login/login.component.html +++ b/client/src/app/site/login/login.component.html @@ -1,31 +1,38 @@ - -
+
+ +
+
+
- - + +
+ + + + -
\ No newline at end of file +
+ + +
+ +
diff --git a/client/src/app/site/login/login.component.scss b/client/src/app/site/login/login.component.scss index 7a5b318ed..7a160142a 100644 --- a/client/src/app/site/login/login.component.scss +++ b/client/src/app/site/login/login.component.scss @@ -2,14 +2,20 @@ mat-form-field { width: 100%; } -.login-logo-bar { - height: 45% !important; - - img { - margin-left: auto; - margin-right: auto; - width: 90%; - max-width: 400px; +header { + width: 100%; + flex: 1; + mat-toolbar { + min-height: 200px !important; + } + .login-logo-bar { + img { + margin-left: auto; + margin-right: auto; + width: 90%; + height: 90%; + max-width: 400px; + } } } @@ -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 +} diff --git a/client/src/app/site/privacy-policy/privacy-policy.component.scss b/client/src/app/site/privacy-policy/privacy-policy.component.scss index e69de29bb..7caed3739 100644 --- a/client/src/app/site/privacy-policy/privacy-policy.component.scss +++ b/client/src/app/site/privacy-policy/privacy-policy.component.scss @@ -0,0 +1,3 @@ +mat-card { + height: 100%; +} diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html index c72ca2700..b62f5a6b7 100644 --- a/client/src/app/site/site.component.html +++ b/client/src/app/site/site.component.html @@ -80,44 +80,33 @@ Projector - - - +
+
+ + - - + + - - + + + + +
- - - - - - -
- -
+
+
+ +
+ +
+
diff --git a/client/src/app/site/site.component.scss b/client/src/app/site/site.component.scss index 575e82c65..e2f2ea3d2 100644 --- a/client/src/app/site/site.component.scss +++ b/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 { - position: fixed; - bottom: 0; +.content { + min-height: 100%; + position: relative; +} - span { - // width: 100%; +mat-sidenav-container { + 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; } } diff --git a/client/src/assets/i18n/de.json b/client/src/assets/i18n/de.json index ff659e2a3..0bb64570b 100644 --- a/client/src/assets/i18n/de.json +++ b/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", - "Welcome to OpenSlides": "Willkommen bei OpenSlides" + "State": "", + "Submitters": "", + "Supporters": "", + "The assembly may decide:": "", + "Welcome to OpenSlides": "Willkommen bei OpenSlides", + "by": "" } diff --git a/client/src/assets/i18n/en.json b/client/src/assets/i18n/en.json index 82e9d9e5a..3efd45af3 100644 --- a/client/src/assets/i18n/en.json +++ b/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": "", - "Welcome to OpenSlides": "" + "State": "", + "Submitters": "", + "Supporters": "", + "The assembly may decide:": "", + "Welcome to OpenSlides": "", + "by": "" } diff --git a/client/src/assets/i18n/fr.json b/client/src/assets/i18n/fr.json index adfe4fed6..3efd45af3 100644 --- a/client/src/assets/i18n/fr.json +++ b/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": "", - "Welcome to OpenSlides": "" + "State": "", + "Submitters": "", + "Supporters": "", + "The assembly may decide:": "", + "Welcome to OpenSlides": "", + "by": "" } diff --git a/client/src/styles.scss b/client/src/styles.scss index ed1cfc45a..b02499c9c 100644 --- a/client/src/styles.scss +++ b/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; +}