From 75e7b911417f15d9709069f3f273e93dea532352 Mon Sep 17 00:00:00 2001
From: Jason Wall <jason@walljm.com>
Date: Fri, 27 Nov 2020 17:05:39 -0500
Subject: [PATCH] * fixed strong cross refs taking to much space (added
 scrolling and max-height) * fixed the way the notes headings are rendered

---
 src/README.md                                 |  2 --
 .../components/note/note-card.component.html  |  1 +
 .../components/note/note-card.component.scss  |  2 ++
 .../components/note/note-card.component.ts    | 18 +++++++++--
 .../passage/passage-card.component.html       |  5 ++-
 .../components/strongs/strongs.component.scss |  4 +++
 .../components/strongs/strongs.component.ts   |  1 +
 src/src/styles/app.scss                       | 31 +++++++++++++++++--
 8 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 src/src/app/components/strongs/strongs.component.scss

diff --git a/src/README.md b/src/README.md
index 3903aec5..13934d91 100644
--- a/src/README.md
+++ b/src/README.md
@@ -20,5 +20,3 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 - setup CI/CD
 - strongs numbers with more than one number should appear in tabs or you need to update your text to assign only one number per word(s)
 - strongs references need a scrolling box to prevent massive cards
-- fix the toString error
-- fix headings/formatting of notes
diff --git a/src/src/app/components/note/note-card.component.html b/src/src/app/components/note/note-card.component.html
index 38bdafcd..9a36dff5 100644
--- a/src/src/app/components/note/note-card.component.html
+++ b/src/src/app/components/note/note-card.component.html
@@ -17,6 +17,7 @@
 </div>
 <div class="card-content" *ngIf="cardItem" #note>
   <ngx-md class="markdown" *ngIf="this.data">{{ this.data.content }}</ngx-md>
+  <p class="center grey" *ngIf="cardItem && this.data.xref !== ''">&#10018;</p>
   <mat-expansion-panel *ngIf="cardItem && this.data.xref !== ''">
     <mat-expansion-panel-header>
       <mat-panel-title>
diff --git a/src/src/app/components/note/note-card.component.scss b/src/src/app/components/note/note-card.component.scss
index 2f073366..8f8adcfb 100644
--- a/src/src/app/components/note/note-card.component.scss
+++ b/src/src/app/components/note/note-card.component.scss
@@ -14,3 +14,5 @@
   width: 100%;
   margin: 3px;
 }
+
+
diff --git a/src/src/app/components/note/note-card.component.ts b/src/src/app/components/note/note-card.component.ts
index 8f2746c7..e4d638f5 100644
--- a/src/src/app/components/note/note-card.component.ts
+++ b/src/src/app/components/note/note-card.component.ts
@@ -1,5 +1,6 @@
-import { Component, ViewChild, ElementRef, Input } from '@angular/core';
+import { Component, ViewChild, ElementRef, Input, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { NgxMdService } from 'ngx-md';
 import { NoteEditModalComponent } from './edit-modal/note-edit-modal.component';
 import { CardComponent } from '../../components/card.component';
 import { AppService } from '../../services/app.service';
@@ -12,7 +13,7 @@ import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-ca
   templateUrl: './note-card.component.html',
   styleUrls: ['./note-card.component.scss'],
 })
-export class NoteCardComponent extends CardComponent {
+export class NoteCardComponent extends CardComponent implements OnInit {
   @ViewChild('note') noteElement: ElementRef;
 
   @Input()
@@ -22,12 +23,23 @@ export class NoteCardComponent extends CardComponent {
     return this.cardItem.data as NoteItem;
   }
 
-  constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
+  constructor(
+    protected elementRef: ElementRef,
+    protected appService: AppService,
+    public dialog: MatDialog,
+    private markdown: NgxMdService
+  ) {
     super(elementRef, dialog, appService);
 
     this.icon$ = appService.select((state) => state.settings.value.cardIcons.note);
   }
 
+  ngOnInit(): void {
+    this.markdown.renderer.heading = (text: string, level: number) => {
+      return `<h${level + 1}>${text}</h${level + 1}>\n`;
+    };
+  }
+
   copy() {
     const html = this.noteElement.nativeElement.innerHTML;
     const text = this.noteElement.nativeElement.innerText;
diff --git a/src/src/app/components/passage/passage-card.component.html b/src/src/app/components/passage/passage-card.component.html
index 66986627..0991b8e2 100644
--- a/src/src/app/components/passage/passage-card.component.html
+++ b/src/src/app/components/passage/passage-card.component.html
@@ -53,11 +53,10 @@
     </div>
   </ng-container>
   <ng-container *ngIf="notes$ | async as notes">
+    <p class="center grey" *ngIf="notes.length > 0">&#10018;</p>
     <mat-expansion-panel *ngIf="notes.length > 0">
       <mat-expansion-panel-header>
-        <mat-panel-title>
-          Note References
-        </mat-panel-title>
+        <mat-panel-title> Note References </mat-panel-title>
       </mat-expansion-panel-header>
       <div *ngFor="let note of notes">
         <button mat-raised-button class="reference" (click)="openNote(note)">
diff --git a/src/src/app/components/strongs/strongs.component.scss b/src/src/app/components/strongs/strongs.component.scss
new file mode 100644
index 00000000..cfe3ca18
--- /dev/null
+++ b/src/src/app/components/strongs/strongs.component.scss
@@ -0,0 +1,4 @@
+.strongs-crossrefs {
+  max-height: 20em;
+  overflow-y: auto;
+}
diff --git a/src/src/app/components/strongs/strongs.component.ts b/src/src/app/components/strongs/strongs.component.ts
index 3176853b..d8f7fe05 100644
--- a/src/src/app/components/strongs/strongs.component.ts
+++ b/src/src/app/components/strongs/strongs.component.ts
@@ -5,6 +5,7 @@ import { StrongsResult } from '../../models/strongs-state';
 @Component({
   selector: 'app-strongs',
   templateUrl: 'strongs.component.html',
+  styleUrls: ['./strongs.component.scss'],
   preserveWhitespaces: true,
 })
 export class StrongsComponent {
diff --git a/src/src/styles/app.scss b/src/src/styles/app.scss
index 3b1ea088..31cce624 100644
--- a/src/src/styles/app.scss
+++ b/src/src/styles/app.scss
@@ -33,6 +33,15 @@ body {
   font-size: 12pt;
 }
 
+.center {
+  text-align: center;
+}
+
+.grey {
+  color: #777;
+}
+
+
 .card-title {
   font-size: 1.5rem;
   font-family: "Roboto Condensed";
@@ -111,6 +120,7 @@ a {
 .mat-h1,
 .mat-headline,
 .mat-typography h1 {
+  font-weight: bold !important;
   font-family: var(--card-heading-font-family) !important;
   font-size: calc(var(--card-font-size) * 2) !important;
   line-height: calc(var(--card-font-size) * 2.5) !important;
@@ -119,6 +129,7 @@ a {
 .mat-h2,
 .mat-title,
 .mat-typography h2 {
+  font-weight: bold !important;
   font-family: var(--card-heading-font-family) !important;
   font-size: calc(var(--card-font-size) * 1.5) !important;
   line-height: calc(var(--card-font-size) * 1.7) !important;
@@ -127,17 +138,27 @@ a {
 .mat-h3,
 .mat-subheading-2,
 .mat-typography h3 {
+  font-weight: bold !important;
   font-family: var(--card-heading-font-family) !important;
-  font-size: calc(var(--card-font-size) * 1.1) !important;
-  line-height: calc(var(--card-font-size) * 1.2) !important;
+  font-size: calc(var(--card-font-size) * 1.3) !important;
+  line-height: calc(var(--card-font-size) * 1.5) !important;
 }
 
 .mat-h4,
 .mat-subheading-1,
 .mat-typography h4 {
+  font-weight: bold !important;
+  font-family: var(--card-heading-font-family) !important;
+  font-size: calc(var(--card-font-size) * 1.1) !important;
+  line-height: calc(var(--card-font-size) * 1.3) !important;
+}
+
+.mat-h5,
+.mat-typography h5 {
+  font-weight: bold !important;
   font-family: var(--card-heading-font-family) !important;
   font-size: var(--card-font-size) !important;
-  line-height: calc(var(--card-font-size) * 1.1) !important;
+  line-height: calc(var(--card-font-size)) !important;
 }
 
 .mat-expansion-panel:not([class*="mat-elevation-z"]) {
@@ -148,3 +169,7 @@ a {
 .full-width {
   width: 100%;
 }
+
+p {
+  font-size: var(--card-font-size);
+}