Merge branch 'master' into cleaning-up-code

.github/workflows/node.js.yml

@@ -23,10 +23,10 @@ jobs:
 
     steps:
       - name: Repository checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Node.js setup
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '16.x'
 
@@ -58,13 +58,13 @@ jobs:
 
     steps:
       - name: Repository checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install AWSCLI
         run: pip install --user awscli
 
       - name: Node.js setup
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '16.x'
 
@@ -89,7 +89,7 @@ jobs:
           appDomain: https://${{ secrets.HOST_NAME }}
 
       - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v2
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-region: us-east-1
           role-to-assume: ${{ secrets.AWS_IAM_ROLE_ARN }}

embed/embed.js

@@ -18,7 +18,8 @@
     iframe.style.minHeight = '450px';
     iframe.setAttribute('allowtransparency', 'true');
     iframe.setAttribute('scrolling', 'no');
-    iframe.src = [baseUrl, '#', dataLang, dataBook].join('/');
+    iframe.src =
+      [baseUrl, '#', dataLang, dataBook].join('/') + '?embedded=true';
 
     knowGodEmbed.appendChild(iframe);
 

package.json

@@ -24,7 +24,7 @@
     "@angular/platform-browser": "^13.4.0",
     "@angular/platform-browser-dynamic": "^13.4.0",
     "@angular/router": "^13.4.0",
-    "@cruglobal/godtools-shared": "0.9.1",
+    "@cruglobal/godtools-shared": "0.9.2",
     "@rails/actioncable": "^7.0.0",
     "core-js": "^2.5.4",
     "eslint-config-prettier": "^8.8.0",

src/app/_tests/mocks.ts

@@ -17,7 +17,8 @@ import {
   MultiselectOption,
   Flow,
   FlowItem,
-  Card
+  Card,
+  Spacer
 } from 'src/app/services/xml-parser-service/xmp-parser.service';
 import { org } from '@cruglobal/godtools-shared';
 
@@ -542,3 +543,14 @@ export const mockPageComponent = {
     }
   }
 };
+
+export const mockSpacer = (height = 100): Spacer => {
+  return {
+    height,
+    mode: {
+      name: 'FIXED',
+      ordinal: 0
+    },
+    ...standardTypeValues()
+  };
+};

src/app/header/header.component.css

@@ -28,7 +28,8 @@
   flex-direction: row;
   height: 100%;
   align-items: center;
-  justify-content: center;  
+  justify-content: center;
+  cursor: pointer;
 }
 
 #homeHeader > .bs-container > .language-switcher > div.selector > img {
@@ -101,7 +102,12 @@
 }
 
 #languageSwitchModal > div.modal-content {
-  margin: 5%; 
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
   background: #ffffff;
   border-radius: 6px;
   height: 90%;
@@ -112,10 +118,9 @@
 #languageSwitchModal > div.modal-content > div.modal-close {
   width: 100%;
   height: 36px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
+  display: block;
+  text-align: right;
+  margin-top: 10px;
 }
 
 #languageSwitchModal > div.modal-content > div.modal-close > i {
@@ -127,33 +132,52 @@
   font-weight: 400;
 }
 
-#languageSwitchModal > div.modal-content > div.languages-grid {
-  height: calc(100% - 48px);
+#languageSwitchModal > div.modal-content > ul.languages-grid {
   width: 100%;
   overflow-y: scroll;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  columns: 4;
+  column-gap: 10px;
+  margin: 5px 0 0 0;
+  padding: 0 15px 5px 5px;
 }
 
-#languageSwitchModal > div.modal-content > div.languages-grid > div.language {
-  width: calc(25% - 8px);
+#languageSwitchModal > div.modal-content > ul.languages-grid > li.language {
   height: 36px;
-  margin: 4px 4px;
+  width: 100%;
+  display: inline-flex;
+  margin: 4px;
+  padding: 0 8px;
+  align-items: center;
   font-size: 13px;
-  color: #666666;
-  display: flex;
+  color: #666;
   align-items: center;
-  padding: 0 8px;
   white-space: nowrap;
   overflow: hidden;
   border-radius: 4px;
   border: 1px solid #efefef;
   cursor: pointer;
 }
 
-#languageSwitchModal > div.modal-content > div.languages-grid > div.language:hover {
-  background-color: rgba(0, 0, 0, 0.05);  
+#languageSwitchModal
+  > div.modal-content
+  > ul.languages-grid
+  > li.language:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+#languageSwitchModal
+  > div.modal-content
+  > ul.languages-grid
+  > li.language:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+#languageSwitchModal > div.modal-content > div.modal-close > i:hover {
+  opacity: 0.4;
+}
+
+#languageSwitchModal > div.modal-content > div.modal-close > i:active {
+  opacity: 0.5;
 }
 
 /***** Responsive *****/
@@ -170,8 +194,8 @@
     font-size: 14px;
   }
 
-  #languageSwitchModal > div.modal-content > div.languages-grid > div.language {
-    width: calc(50% - 8px);
+  #languageSwitchModal > div.modal-content > ul.languages-grid {
+    columns: 2;
   }
 }
 
@@ -194,7 +218,7 @@
   }
 
   #homeHeader .bs-container {
-    position: relative; 
+    position: relative;
   }
 
   #homeHeader .language-switcher {
@@ -203,7 +227,6 @@
     top: 0;
     bottom: 0;
     font-size: 14px;
-    cursor: pointer;
   }
 }
 @media screen and (min-width: 992px) {

src/app/header/header.component.html

@@ -61,14 +61,14 @@ <h5 class="bs-card-title" dir="{{ dispLanguageDirection }}">
     <div class="modal-close">
       <i class="fas fa-times" (click)="onSwitchLanguage()"></i>
     </div>
-    <div class="languages-grid">
-      <div
+    <ul class="languages-grid">
+      <li
         class="language"
         *ngFor="let lang of availableLangs"
         (click)="onSelectLanguage(lang.code)"
       >
         {{ lang.name }}
-      </div>
-    </div>
+      </li>
+    </ul>
   </div>
 </div>

src/app/page/component/content-spacer/content-spacer.component.css

@@ -0,0 +1,4 @@
+.spacer {
+  display: block;
+  width: 100%;
+}

src/app/page/component/content-spacer/content-spacer.component.html

@@ -1 +1,7 @@
 <!-- Content Spacer Goes Here -->
+<!-- Content Spacer Goes Here -->
+<div
+  class="spacer"
+  *ngIf="mode === 'FIXED'"
+  [ngStyle]="{ 'height.px': height }"
+></div>

src/app/page/component/content-spacer/content-spacer.component.spec.ts

@@ -0,0 +1,27 @@
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { mockSpacer } from '../../../_tests/mocks';
+import { ContentSpacerComponent } from './content-spacer.component';
+
+describe('ContentSpacerComponent', () => {
+  let component: ContentSpacerComponent;
+  let fixture: ComponentFixture<ContentSpacerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContentSpacerComponent]
+    }).compileComponents();
+    fixture = TestBed.createComponent(ContentSpacerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('Values are assigned correctly', async () => {
+    component.item = mockSpacer(200);
+    component.ngOnChanges({
+      item: new SimpleChange(null, mockSpacer(200), true)
+    });
+    expect(component.height).toEqual(200);
+    expect(component.mode).toBe('FIXED');
+  });
+});

src/app/page/component/content-spacer/content-spacer.component.ts

@@ -37,8 +37,8 @@ export class ContentSpacerComponent implements OnChanges {
               !changes['item'].previousValue ||
               changes['item'].currentValue !== changes['item'].previousValue
             ) {
-              this.mode = '';
-              this.height = 0;
+              this.mode = this.item.mode.name;
+              this.height = this.item.height;
               this.spacer = this.item;
               this.ready = false;
               this.init();

src/app/page/page.component.css

@@ -1,6 +1,6 @@
 /***** Elements *****/
 html {
-    background-color: white !important;
+  background-color: white !important;
 }
 
 h1,
@@ -10,17 +10,17 @@ h4,
 h5,
 h6,
 p {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 h4 {
-    font-size: 24px;
-    line-height: 30px;
-    font-weight: 300;
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 300;
 }
 
 p {
-    line-height: 24px;
+  line-height: 24px;
 }
 
 /***** High level *****/
@@ -57,6 +57,8 @@ p {
   line-height: 36px;
   padding: 12px 24px;
   cursor: pointer;
+  position: absolute;
+  left: 0;
 }
 
 .language-selector-toggle .fas {
@@ -75,6 +77,10 @@ p {
   position: relative;
   z-index: 1;
 }
+#toolHeader .logo img {
+  height: 24px;
+  margin: 20px 0 0 0;
+}
 
 #languageList {
   background-color: #f0f0f0;
@@ -105,6 +111,24 @@ p {
   }
 }
 
+@media screen and (max-width: 440px) {
+  #toolHeader .logo img {
+    margin: 12px 0 0 0;
+  }
+  #toolHeader .logo {
+    display: block;
+  }
+  .language-selector-toggle {
+    position: relative;
+  }
+  .language-selector-toggle > .langicon {
+    float: none;
+  }
+  .header {
+    height: auto;
+  }
+}
+
 /***** Tool Footer *****/
 #toolFooter {
   margin-top: 48px !important;
@@ -138,4 +162,4 @@ footer span {
   footer span:last-child {
     float: right;
   }
-}
+}

src/app/page/page.component.html

@@ -4,14 +4,21 @@
   <div class="outerbox">
     <header id="toolHeader">
       <div class="header tc relative">
+        <app-sharing-modal [book]="selectedBookName"></app-sharing-modal>
+        <a
+          [attr.href]="embedded ? 'https://knowgod.com' : '/'"
+          [attr.target]="embedded ? '_blank' : null"
+          class="logo"
+        >
+          <img src="assets/img/kg-logo-blue.png"
+        /></a>
         <span
-          class="l absolute kg-gray-dark ng-binding language-selector-toggle"
+          class="kg-gray-dark ng-binding language-selector-toggle"
           (click)="onToggleLanaguageSelect()"
         >
           <img src="assets/img/lang.png" class="langicon" /> {{ selectedLang }}
           <i class="fas fa-chevron-up flip"></i>
         </span>
-        <app-sharing-modal [book]="selectedBookName"></app-sharing-modal>
       </div>
       <div id="languageList" class="py25 ng-hide" *ngIf="languagesVisible">
         <div class="mw568">