GT-2201 Add image that links to homepage within tools (#148)

Add logo to the tools pages header

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);
 

src/app/new-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/new-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">

src/app/new-page/page.component.ts

@@ -75,6 +75,7 @@ export class PageNewComponent implements OnInit, OnDestroy {
   totalPages: number;
   bookNotAvailableInLanguage: boolean;
   bookNotAvailable: boolean;
+  embedded: boolean;
 
   constructor(
     private loaderService: LoaderService,
@@ -107,6 +108,9 @@ export class PageNewComponent implements OnInit, OnDestroy {
     this.awaitPageParameters();
     this.awaitEmailFormSignupDataSubmitted();
     this.awaitLiveShareStream();
+    this.route.queryParams.subscribe((queryParam) => {
+      this.embedded = queryParam.embedded === 'true';
+    });
   }
 
   ngOnDestroy() {