diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index a34c550ad..d0ea8e868 100644 --- a/.github/workflows/node.js.yml +++ b/.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 }} diff --git a/embed/embed.js b/embed/embed.js index 6839dbfa1..0e1f13682 100644 --- a/embed/embed.js +++ b/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); diff --git a/package.json b/package.json index bf148a669..50881dac7 100644 --- a/package.json +++ b/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", diff --git a/src/app/_tests/mocks.ts b/src/app/_tests/mocks.ts index 438dbf330..c4be745f3 100644 --- a/src/app/_tests/mocks.ts +++ b/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() + }; +}; diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index 0b15f9676..6163785b1 100755 --- a/src/app/header/header.component.css +++ b/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,24 +132,25 @@ 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; @@ -152,8 +158,26 @@ 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) { diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 888aa2bb2..9ad0b4624 100755 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -61,14 +61,14 @@
-
-
+
  • {{ lang.name }} -
    • -
    + + diff --git a/src/app/page/component/content-spacer/content-spacer.component.css b/src/app/page/component/content-spacer/content-spacer.component.css index e69de29bb..2cd321df5 100644 --- a/src/app/page/component/content-spacer/content-spacer.component.css +++ b/src/app/page/component/content-spacer/content-spacer.component.css @@ -0,0 +1,4 @@ +.spacer { + display: block; + width: 100%; +} \ No newline at end of file diff --git a/src/app/page/component/content-spacer/content-spacer.component.html b/src/app/page/component/content-spacer/content-spacer.component.html index 8605915c5..2231b24e8 100644 --- a/src/app/page/component/content-spacer/content-spacer.component.html +++ b/src/app/page/component/content-spacer/content-spacer.component.html @@ -1 +1,7 @@ + +
    diff --git a/src/app/page/component/content-spacer/content-spacer.component.spec.ts b/src/app/page/component/content-spacer/content-spacer.component.spec.ts new file mode 100644 index 000000000..7afd16c22 --- /dev/null +++ b/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; + + 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'); + }); +}); diff --git a/src/app/page/component/content-spacer/content-spacer.component.ts b/src/app/page/component/content-spacer/content-spacer.component.ts index fc46ecb91..59d69a617 100644 --- a/src/app/page/component/content-spacer/content-spacer.component.ts +++ b/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(); diff --git a/src/app/page/page.component.css b/src/app/page/page.component.css index f200cf74a..6c46d9cf8 100644 --- a/src/app/page/page.component.css +++ b/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; } -} \ No newline at end of file +} diff --git a/src/app/page/page.component.html b/src/app/page/page.component.html index 1926c56ce..8722e7333 100644 --- a/src/app/page/page.component.html +++ b/src/app/page/page.component.html @@ -4,14 +4,21 @@
    + + {{ selectedLang }} -
    diff --git a/src/app/page/page.component.ts b/src/app/page/page.component.ts index acd5e00a4..d6af84f42 100644 --- a/src/app/page/page.component.ts +++ b/src/app/page/page.component.ts @@ -75,6 +75,7 @@ export class PageComponent implements OnInit, OnDestroy { totalPages: number; bookNotAvailableInLanguage: boolean; bookNotAvailable: boolean; + embedded: boolean; constructor( private loaderService: LoaderService, @@ -107,6 +108,9 @@ export class PageComponent implements OnInit, OnDestroy { this.awaitPageParameters(); this.awaitEmailFormSignupDataSubmitted(); this.awaitLiveShareStream(); + this.route.queryParams.subscribe((queryParam) => { + this.embedded = queryParam.embedded === 'true'; + }); } ngOnDestroy() { diff --git a/src/assets/img/kg-logo-blue.png b/src/assets/img/kg-logo-blue.png new file mode 100644 index 000000000..02f2c2be9 Binary files /dev/null and b/src/assets/img/kg-logo-blue.png differ diff --git a/yarn.lock b/yarn.lock index 38de09480..e4c3e3434 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1277,11 +1277,12 @@ resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== -"@cruglobal/godtools-shared@0.9.1": - version "0.9.1" - resolved "https://registry.yarnpkg.com/@cruglobal/godtools-shared/-/godtools-shared-0.9.1.tgz#ff9163256815289a93d1ff3ff3729919a8fe97b9" - integrity sha512-4QRlGN1ODnTmzsGOc+HgD3BR+adkWXtfzFUWoX6ky37aKnRfwLkW7k5sQFf26go2W1CzmqKJCKh1AiV5Dg9mZQ== +"@cruglobal/godtools-shared@0.9.2": + version "0.9.2" + resolved "https://registry.yarnpkg.com/@cruglobal/godtools-shared/-/godtools-shared-0.9.2.tgz#778a795760c69739ffff953d45a8766af9370716" + integrity sha512-Xla2sOaO8LGKmc43uFGcgJz2Fx4RAmslsQYH2P6vk3qvFDjyGSKEt1SW+nG9tfmFQe02RS4uDEm3mG0EGZBOAg== dependencies: + format-util "^1.0.5" sax "1.2.4" "@csstools/postcss-progressive-custom-properties@^1.1.0": @@ -4448,6 +4449,11 @@ form-data@~2.3.2: combined-stream "^1.0.6" mime-types "^2.1.12" +format-util@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/format-util/-/format-util-1.0.5.tgz#1ffb450c8a03e7bccffe40643180918cc297d271" + integrity sha512-varLbTj0e0yVyRpqQhuWV+8hlePAgaoFRhNFj50BNjEIrw1/DphHSObtqwskVCPWNgzwPoQrZAbfa/SBiicNeg== + forwarded@0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"