diff --git a/projects/editor/src/app/components/canvas/canvas.component.html b/projects/editor/src/app/components/canvas/canvas.component.html index 8f130d24db7e979cbbdf3673e53e1141b395668f..496d8322ed8ebf76a349de7799840320e3c54549 100644 --- a/projects/editor/src/app/components/canvas/canvas.component.html +++ b/projects/editor/src/app/components/canvas/canvas.component.html @@ -1,4 +1,4 @@ -<div class="canvasBackground" fxFlex +<div class="canvasBackground fx-flex" (click)="selectionService.clearElementSelection()"> <div [style.width.px]="page.hasMaxWidth ? page.maxWidth : null" [style.padding.px]="page.margin" @@ -6,7 +6,7 @@ <div cdkDropListGroup> <div *ngFor="let section of page.sections; let i = index" [style.position]="'relative'"> <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'" [section]="section" [sectionIndex]="i" [allowMoveUp]="i != 0" diff --git a/projects/editor/src/app/components/canvas/canvas.component.ts b/projects/editor/src/app/components/canvas/canvas.component.ts index ff640c329afa5b5068e0d9c279038fe0d7fcef39..7695b93bb3da2aca825d9cee1f1169958dcee1c9 100644 --- a/projects/editor/src/app/components/canvas/canvas.component.ts +++ b/projects/editor/src/app/components/canvas/canvas.component.ts @@ -14,13 +14,41 @@ import { SectionDynamicComponent } from './section-dynamic.component'; @Component({ selector: 'aspect-page-canvas', templateUrl: './canvas.component.html', - styles: [ - '.canvasBackground {background-color: lightgrey; padding: 20px 50px; height: 100%; 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;}' - ] + styles: [` + .canvasBackground { + background-color: lightgrey; + padding: 20px 50px; + height: 100%; + 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 { @Input() page!: Page;