Skip to content
Snippets Groups Projects
Commit 3b408cfc authored by jojohoch's avatar jojohoch
Browse files

[editor] Replace Flex layout module with classes in CanvasComponent

- Reformat styles
parent 87c4e0ac
No related branches found
No related tags found
No related merge requests found
<div class="canvasBackground" fxFlex <div class="canvasBackground fx-flex"
(click)="selectionService.clearElementSelection()"> (click)="selectionService.clearElementSelection()">
<div [style.width.px]="page.hasMaxWidth ? page.maxWidth : null" <div [style.width.px]="page.hasMaxWidth ? page.maxWidth : null"
[style.padding.px]="page.margin" [style.padding.px]="page.margin"
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div cdkDropListGroup> <div cdkDropListGroup>
<div *ngFor="let section of page.sections; let i = index" [style.position]="'relative'"> <div *ngFor="let section of page.sections; let i = index" [style.position]="'relative'">
<aspect-section-menu [class.hidden]="selectionService.selectedPageSectionIndex !== i" <aspect-section-menu [class.hidden]="selectionService.selectedPageSectionIndex !== i"
class="section-menu" fxLayout="column" class="section-menu fx-column-start-stretch"
[style.left.px]="-45" [style.z-index]="1" [style.position]="'absolute'" [style.left.px]="-45" [style.z-index]="1" [style.position]="'absolute'"
[section]="section" [sectionIndex]="i" [section]="section" [sectionIndex]="i"
[allowMoveUp]="i != 0" [allowMoveUp]="i != 0"
......
...@@ -14,13 +14,41 @@ import { SectionDynamicComponent } from './section-dynamic.component'; ...@@ -14,13 +14,41 @@ import { SectionDynamicComponent } from './section-dynamic.component';
@Component({ @Component({
selector: 'aspect-page-canvas', selector: 'aspect-page-canvas',
templateUrl: './canvas.component.html', templateUrl: './canvas.component.html',
styles: [ styles: [`
'.canvasBackground {background-color: lightgrey; padding: 20px 50px; height: 100%; overflow: auto;}', .canvasBackground {
'.add-section-button {width: 100%; height: 25px; background-color: #BABABA; margin-top: 10px; border-radius: 10%}', background-color: lightgrey;
'::ng-deep .add-section-button span.mat-button-wrapper {padding: 0}', padding: 20px 50px;
'::ng-deep .add-section-button span.mat-button-wrapper mat-icon {vertical-align: unset}', height: 100%;
'.hidden {display: none !important;}' overflow: auto;
] }
.add-section-button {
width: 100%;
height: 25px;
background-color: #BABABA;
margin-top: 10px;
border-radius: 10%;
}
::ng-deep .add-section-button span.mat-button-wrapper {
padding: 0;
}
::ng-deep .add-section-button span.mat-button-wrapper mat-icon {
vertical-align: unset;
}
.hidden {
display: none !important;
}
.fx-flex {
flex: 1 1 0%;
box-sizing: border-box;
}
.fx-column-start-stretch {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
}
`]
}) })
export class CanvasComponent { export class CanvasComponent {
@Input() page!: Page; @Input() page!: Page;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment