Commit 07ac9068 authored by Lukas Haase's avatar Lukas Haase
Browse files

Dialog rework WIP

parent a2d9c4ef
<script src="models/rescale.ts"></script>
<div fxLayout="column" fxFill appTheme>
<div fxLayout="column" fxFill appTheme id="outer_main_container">
<header class="header" id="header_rescale">
<app-header #header></app-header>
</header>
......
<h1 tabindex="0" class="modal" mat-dialog-title>{{ 'introduction.title' | translate }}</h1>
<mat-divider></mat-divider>
<mat-dialog-content>
<div id="setFocus" class="intro-text" tabindex="0">
<app-demo-en *ngIf="currentLang=='en'"></app-demo-en>
<app-demo-de *ngIf="currentLang=='de'"></app-demo-de>
<!--
<div class="dialog-content">
<h1 tabindex="0" class="modal" mat-dialog-title>{{ 'introduction.title' | translate }}</h1>
<mat-divider></mat-divider>
<mat-dialog-content>
<div id="setFocus" class="intro-text" tabindex="0">
<app-demo-en *ngIf="currentLang=='en'"></app-demo-en>
<app-demo-de *ngIf="currentLang=='de'"></app-demo-de>
</div>
</mat-dialog-content>
<app-dialog-action-buttons
buttonsLabelSection="introduction"
[cancelButtonClickAction]="buildCloseDialogActionCallback()"
></app-dialog-action-buttons>
</div>
-->
<div class="dialog-wrapper">
<div class="dialog-row">
<h1 tabindex="0" class="modal" mat-dialog-title>{{ 'introduction.title' | translate }}</h1>
</div>
</mat-dialog-content>
<app-dialog-action-buttons
buttonsLabelSection="introduction"
[cancelButtonClickAction]="buildCloseDialogActionCallback()"
></app-dialog-action-buttons>
<div class="dialog-fill">
<div id="setFocus" class="intro-text" tabindex="0">
<app-demo-en *ngIf="currentLang=='en'"></app-demo-en>
<app-demo-de *ngIf="currentLang=='de'"></app-demo-de>
</div>
</div>
<div class="dialog-row">
<app-dialog-action-buttons [spacing]="false"
buttonsLabelSection="introduction"
[cancelButtonClickAction]="buildCloseDialogActionCallback()"
></app-dialog-action-buttons>
</div>
</div>
......@@ -74,7 +74,7 @@ export class FooterComponent implements OnInit {
showDemo() {
const dialogRef = this.dialog.open(DemoVideoComponent, {
width: '80%'
panelClass:'full-width'
});
dialogRef.componentInstance.deviceType = this.deviceType;
}
......
......@@ -65,4 +65,57 @@ body{
color: var(--on-surface);
}
/*Mat-Dialog-Container - Full-Width*/
.full-width .mat-dialog-container{
width:1000px;
min-width: 1000px;
max-width: 1000px;
height:calc( 100% - 50px );
margin:0;
padding:25px;
position:fixed;
left:calc( 50% - 500px );
top:25px;
}
@media (max-width: 1100px) {
.full-width .mat-dialog-container{
width:calc( 100% - 10px );
min-width:calc( 100% - 10px );
max-width:calc( 100% - 10px );
height:calc( 100% - 10px );
left:5px;
top:5px;
}
}
@media (max-width: 350px) {
.full-width .mat-dialog-container{
padding:10px;
}
}
/*Mat-Dialog-Container - Content-Layout*/
.dialog-wrapper{
width:100%;
height:100%;
float:left;
display:flex;
justify-content: space-between;
flex-direction: column;
}
.dialog-row{
width:100%;
height:50px;
flex-shrink: 0;
}
.dialog-fill{
display:flex;
flex-grow: 1;
overflow-x:hidden;
overflow-y:auto;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment