This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch fix-link-login-page in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit af61cb826cb1fb60be5e9a8b7745cd4edaab2d2d Author: Dominik Riemer <[email protected]> AuthorDate: Mon Dec 4 20:08:26 2023 +0100 Fix docs link on login page, improve layout --- .../components/auth-box/auth-box.component.html | 90 ++++++++++------------ .../components/auth-box/auth-box.component.scss | 50 ++++++++++++ .../components/auth-box/auth-box.component.ts | 5 +- 3 files changed, 94 insertions(+), 51 deletions(-) diff --git a/ui/src/app/login/components/auth-box/auth-box.component.html b/ui/src/app/login/components/auth-box/auth-box.component.html index 220880a35..d3d29b4ad 100644 --- a/ui/src/app/login/components/auth-box/auth-box.component.html +++ b/ui/src/app/login/components/auth-box/auth-box.component.html @@ -17,62 +17,56 @@ --> <div - class="md-padding full-background sp-fade light-mode" - fxLayout="row" + class="full-background sp-fade light-mode" + fxLayout="row wrap" fxLayoutAlign="center center" style="min-height: 100vh !important" > - <div fxFlex="40" fxLayout="column" fxLayoutAlign="center center"> - <mat-card - class="card-100-center box-shadow-login" - style="padding: 20px; position: relative; top: -25px" - > - <div fxFlex="100" fxLayout="column"> - <div - fxLayout="row" - fxFlex="60" - fxLayoutAlign="center center" - style="margin-left: auto; margin-right: auto" - > - <div - fxFlex="60" - fxLayoutAlign="center center" - fxLayout="row" - style="color: white; width: 100%" - > - <img - alt="icon" - src="../../../../assets/img/sp/logo.png" - style="width: 100%" - /> - </div> + <div + fxFlex.gt-md="50" + fxFlex.lt-md="100" + fxLayout="row" + fxLayoutAlign="start start" + class="full-height" + > + <div fxFlex="100" fxLayout="column" class="full-height"> + <div fxLayoutAlign="end end" fxLayout="row" class="logo-outer"> + <img + alt="icon" + src="../../../../assets/img/sp/logo.png" + class="logo" + /> + </div> + <div fxLayout="row" fxFlex fxLayoutAlign="center center"> + <div fxLayout="column" class="content-box"> + <ng-content></ng-content> </div> - <ng-content></ng-content> </div> - </mat-card> - <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center"> - <button - mat-button - mat-raised-button - color="accent" - (click)="openDocumentation()" - style=" - min-width: 0px; - padding-left: 20px; - padding-right: 20px; - font-size: 18px; - " - > - View Docs - </button> - <span style="margin-top: 10px" - ><a + <div fxLayout="row" fxLayoutAlign="end end" class="auth-box-footer"> + <a + class="footer-link" + href="https://streampipes.apache.org/docs/user-guide-introduction"; + > + Documentation + </a> + <span style="margin-left: 10px; margin-right: 10px"> | </span> + <a + class="footer-link" data-cy="view-api-docs-link" routerLink="/apidocs" routerLinkActive="active" - >View API docs</a - ></span - > + >API Documentation</a + > + </div> </div> </div> + <div + fxFlex.gt-md="50" + fxFlex.lt-md="100" + fxLayout="column wrap" + fxLayoutAlign="center center" + class="background-auth-box full-height" + > + <h1 class="app-name-text">{{ appConstants.APP_NAME }}</h1> + </div> </div> diff --git a/ui/src/app/login/components/auth-box/auth-box.component.scss b/ui/src/app/login/components/auth-box/auth-box.component.scss index 13cbc4aac..f75c66a6b 100644 --- a/ui/src/app/login/components/auth-box/auth-box.component.scss +++ b/ui/src/app/login/components/auth-box/auth-box.component.scss @@ -15,3 +15,53 @@ * limitations under the License. * */ + +.background-auth-box { + background: var(--color-navigation-bg); +} + +.auth-box-footer { + margin-bottom: 20px; + margin-right: 20px; +} + +.footer-link { + color: var(--color-accent); + text-decoration: none; +} + +.footer-link:hover { + text-decoration: underline; +} + +.full-height { + height: 100vh; +} + +.logo-outer { + margin-top: 20px; + margin-left: 20px; +} + +.logo { + margin-right: auto; + max-height: 55px; + max-width: 300px; +} + +.content-box { + max-width: 500px; + min-width: 60%; + padding: 20px; + box-shadow: + rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, + rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; + border-radius: 1rem; + background: var(--color-bg-0); +} + +.app-name-text { + padding: 30px; + color: var(--color-navigation-link-text); + font-size: 6vmax; +} diff --git a/ui/src/app/login/components/auth-box/auth-box.component.ts b/ui/src/app/login/components/auth-box/auth-box.component.ts index c0b721092..cae0835d6 100644 --- a/ui/src/app/login/components/auth-box/auth-box.component.ts +++ b/ui/src/app/login/components/auth-box/auth-box.component.ts @@ -17,6 +17,7 @@ */ import { Component } from '@angular/core'; +import { AppConstants } from '../../../services/app.constants'; @Component({ selector: 'sp-auth-box', @@ -24,7 +25,5 @@ import { Component } from '@angular/core'; styleUrls: ['./auth-box.component.scss'], }) export class AuthBoxComponent { - openDocumentation() { - window.open('https://streampipes.apache.org/docs', '_blank'); - } + constructor(public appConstants: AppConstants) {} }
