zaphar/dynamicbible
1
0
Fork 0
mirror of https://gitlab.com/walljm/dynamicbible.git synced 2025-07-23 07:19:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix add to page modal

Browse Source
This commit is contained in:
jason.wall 2021-12-22 12:48:01 -05:00
parent 28930da115
commit f1213622f1
5 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/src/app/components/add-to-page-modal/add-to-page-modal.component.html
View File

@ -5,20 +5,21 @@
</mat-toolbar> </mat-toolbar>
</div> </div>
<mat-dialog-content class="content"> <mat-dialog-content class="content">
<mat-selection-list #pageList> <div class="page-list">
<mat-list-option <mat-selection-list #pageList>
*ngFor="let page of this.pages$ | async" <mat-list-option
[value]="page" *ngFor="let page of this.pages$ | async"
[checkBoxPosition]="before" [value]="page"
> [checkBoxPosition]="before"
{{ page.title }} >
</mat-list-option> {{ page.title }}
</mat-list-option>
<mat-divider></mat-divider> <mat-divider></mat-divider>
</mat-selection-list> </mat-selection-list>
<br /><br /> </div>
<form [formGroup]="form" class="add-page-form"> <form [formGroup]="form" class="add-page-form">
<h4>Create New Page</h4> <h4>Or create a New Page</h4>
<mat-form-field class="page-title"> <mat-form-field class="page-title">
<mat-label>Title</mat-label> <mat-label>Title</mat-label>
<input formControlName="title" matInput /> </mat-form-field <input formControlName="title" matInput /> </mat-form-field
@ -32,8 +33,8 @@
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
</form> </form>
<div mat-dialog-actions>
<button mat-button (click)="save()">Save</button>
<button mat-button (click)="cancel()">Cancel</button>
</div>
</mat-dialog-content> </mat-dialog-content>
<div mat-dialog-actions>
<button mat-button (click)="save()">Save</button>
<button mat-button (click)="cancel()">Cancel</button>
</div>

14
src/src/app/components/add-to-page-modal/add-to-page-modal.component.scss
View File

@ -13,13 +13,25 @@
.content { .content {
min-width: 60vw; min-width: 60vw;
min-height: 50vh; min-height: 80vh;
max-height: 80vh; max-height: 80vh;
display: flex;
flex-flow: column;
align-content: flex-start;
align-items: stretch;
} }
.add-page-form { .add-page-form {
padding-left: 16px; padding-left: 16px;
margin-top: 2rem;
} }
.page-title { .page-title {
width: calc(100% - 42px); width: calc(100% - 42px);
} }
.page-list {
overflow-y: auto;
height: calc(80vh - 195px);
}
.mat-dialog-content {
padding: 0 !important;
}

9
src/src/app/components/page-edit-modal/page-edit-modal.component.html
View File

@ -11,8 +11,9 @@
<input formControlName="title" matInput /> <input formControlName="title" matInput />
</mat-form-field> </mat-form-field>
</form> </form>
<div mat-dialog-actions>
<button mat-button (click)="save()">Save</button>
<button mat-button (click)="cancel()">Cancel</button>
</div>
</mat-dialog-content> </mat-dialog-content>
<div mat-dialog-actions>
<button mat-button (click)="save()">Save</button>
<button mat-button (click)="cancel()">Cancel</button>
</div>

7
src/src/app/components/page-edit-modal/page-edit-modal.component.scss
View File

@ -18,4 +18,11 @@
.page-title { .page-title {
min-width: 50vw; min-width: 50vw;
padding-top: 12px;
}
.mat-dialog-content {
min-width: 60vw;
min-height: 20vh;
max-height: 80vh;
} }

4
src/src/styles/app.scss
View File

@ -195,6 +195,10 @@ p {
margin: 0 0 2px !important; margin: 0 0 2px !important;
} }
.mat-dialog-actions {
margin-bottom: 0px;
}
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.cdk-overlay-pane { .cdk-overlay-pane {
max-width: 95vw !important; max-width: 95vw !important;