mirror of
https://gitlab.com/walljm/dynamicbible.git
synced 2025-07-23 15:30:14 -04:00
Merge branch '23-bug-fix-modal-scroll-issues' into 'main'
Resolve "BUG: Fix modal scroll issues" Closes #23 See merge request walljm/dynamicbible!18
This commit is contained in:
commit
43cd9a6188
@ -5,20 +5,21 @@
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
<mat-dialog-content class="content">
|
||||
<mat-selection-list #pageList>
|
||||
<mat-list-option
|
||||
*ngFor="let page of this.pages$ | async"
|
||||
[value]="page"
|
||||
[checkBoxPosition]="before"
|
||||
>
|
||||
{{ page.title }}
|
||||
</mat-list-option>
|
||||
<div class="page-list">
|
||||
<mat-selection-list #pageList>
|
||||
<mat-list-option
|
||||
*ngFor="let page of this.pages$ | async"
|
||||
[value]="page"
|
||||
[checkBoxPosition]="before"
|
||||
>
|
||||
{{ page.title }}
|
||||
</mat-list-option>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
</mat-selection-list>
|
||||
<br /><br />
|
||||
<mat-divider></mat-divider>
|
||||
</mat-selection-list>
|
||||
</div>
|
||||
<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-label>Title</mat-label>
|
||||
<input formControlName="title" matInput /> </mat-form-field
|
||||
@ -32,8 +33,8 @@
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</form>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="save()">Save</button>
|
||||
<button mat-button (click)="cancel()">Cancel</button>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="save()">Save</button>
|
||||
<button mat-button (click)="cancel()">Cancel</button>
|
||||
</div>
|
||||
|
@ -13,13 +13,25 @@
|
||||
|
||||
.content {
|
||||
min-width: 60vw;
|
||||
min-height: 50vh;
|
||||
min-height: 80vh;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.add-page-form {
|
||||
padding-left: 16px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.page-title {
|
||||
width: calc(100% - 42px);
|
||||
}
|
||||
.page-list {
|
||||
overflow-y: auto;
|
||||
height: calc(80vh - 195px);
|
||||
}
|
||||
.mat-dialog-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
@ -11,8 +11,9 @@
|
||||
<input formControlName="title" matInput />
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="save()">Save</button>
|
||||
<button mat-button (click)="cancel()">Cancel</button>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="save()">Save</button>
|
||||
<button mat-button (click)="cancel()">Cancel</button>
|
||||
</div>
|
||||
|
@ -18,4 +18,11 @@
|
||||
|
||||
.page-title {
|
||||
min-width: 50vw;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.mat-dialog-content {
|
||||
min-width: 60vw;
|
||||
min-height: 20vh;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
@ -15,6 +15,7 @@
|
||||
<div class="card-content" *ngIf="cardItem" #strongs>
|
||||
<app-strongs
|
||||
[data]="cardItem.data"
|
||||
[isCard]="true"
|
||||
(onOpenPassage)="openPassage($event)"
|
||||
(onOpenStrongs)="openStrongs($event)"
|
||||
></app-strongs>
|
||||
|
@ -22,3 +22,4 @@ mat-toolbar {
|
||||
padding: 0px 16px 0px 16px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
<ng-container *ngIf="data">
|
||||
<div class="strongs-container">
|
||||
<div class="strongs-def">
|
||||
<p>
|
||||
<b>{{ data.def.tr }}</b>
|
||||
@ -25,7 +26,7 @@
|
||||
<h2>Cross References</h2>
|
||||
Translated as
|
||||
{{ data.crossrefs.ss.length }} word(s)
|
||||
<div class="strongs-crossrefs">
|
||||
<div [ngClass]="isCard ? 'card-strongs-crossrefs' : ''">
|
||||
<dl>
|
||||
<dd *ngFor="let wrd of data.crossrefs.ss">
|
||||
<strong>{{ wrd.w }}, {{ wrd.rs.length }}</strong
|
||||
@ -38,4 +39,5 @@
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
@ -1,4 +1,13 @@
|
||||
.strongs-crossrefs {
|
||||
max-height: 20em;
|
||||
|
||||
.strongs-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.card-strongs-crossrefs {
|
||||
max-height: 20rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
@ -12,6 +12,9 @@ export class StrongsComponent {
|
||||
@Input()
|
||||
data: StrongsResult;
|
||||
|
||||
@Input()
|
||||
isCard = false;
|
||||
|
||||
@Output()
|
||||
onOpenPassage = new EventEmitter<string>();
|
||||
|
||||
|
@ -185,6 +185,7 @@ p {
|
||||
}
|
||||
.mat-dialog-container {
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.mat-dialog-content {
|
||||
padding: 0 12px !important;
|
||||
@ -194,6 +195,11 @@ p {
|
||||
margin: 0 0 2px !important;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
margin-bottom: 0px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.cdk-overlay-pane {
|
||||
max-width: 95vw !important;
|
||||
|
Loading…
x
Reference in New Issue
Block a user