Merge pull request #398 from openforge/ys-fix-bugs

Ys fix bugs

Author: Wholloran

.firebase/hosting.d3d3.cache

@@ -12,6 +12,7 @@ log.txt
 *.sublime-project
 *.sublime-workspace
 
+.firebase/
 .idea/
 .vscode/
 .sass-cache/

.gitignore

@@ -50,6 +50,10 @@ export class AppBlogContent {
     }
   }
 
+  componentDidUnload() {
+    window.removeEventListener('resize', this.handleIcons, false);
+  }
+
   render() {
     const publishDate = new Date(this.blogPost.published);
     const contactIconsTop = (
@@ -70,8 +74,8 @@ export class AppBlogContent {
     return (
       <div class="blog-content">
         <div class="header">
-          <h1>{this.blogPost.title}</h1>
-          <p>{this.blogPost.summary}</p>
+          <h1 class="text-left">{this.blogPost.title}</h1>
+          <p class="text-left">{this.blogPost.summary}</p>
           <div>
             <div class="header--date">{formatDate(publishDate)}</div>
             <div class="header--author">
@@ -96,10 +100,10 @@ export class AppBlogContent {
             <div class="col-md-2">
               <div id="contact-icons-side">{contactIconsSide}</div>
             </div>
-            <div class="col-md-8">
+            <div class="text-left col-md-8">
               <div innerHTML={this.blogPost.body} class="blog-content-body" />
             </div>
-            <div class="col-md-2" />
+            <div class="col-md-2 col-sm-2" />
           </div>
         </div>
         <div class="blog-content-author">
@@ -112,7 +116,7 @@ export class AppBlogContent {
             <div class="col-md-6 blog-content-author-text">
               <h5>About the Author</h5>
               <h2>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</h2>
-              <p>{this.blogPost.author.bio}</p>
+              <p class="text-left">{this.blogPost.author.bio}</p>
             </div>
             <div class="col-md-2" />
           </div>

src/assets/work-example-juntoscope-mobile.jpg

@@ -1,4 +1,4 @@
-import { Component, State, h } from '@stencil/core';
+import { Component, State, h, Build } from '@stencil/core';
 import { BlogPost } from '../../model/blog-post.model';
 import { BlogMeta } from '../../model/blog-meta.model';
 import { BlogCategory } from '../../model/blog-category.model';
@@ -33,6 +33,8 @@ export class AppBlog {
   @State() searchIsLoading: boolean = false;
 
   pageSize = 3;
+  indexOfFeaturedPost = -1;  
+  pageOfFeaturedPost = 0;
   private filters: BlogCategory[] = [
     {
       name: 'All',
@@ -61,6 +63,9 @@ export class AppBlog {
   }
 
   componentDidLoad() {
+    if (Build.isBrowser) {
+      window.scrollTo(0, 0);
+    }
     const input = document.getElementById('blog-search');
     input.addEventListener('search', () => this.handleSearch(input.innerText));
 
@@ -80,8 +85,19 @@ export class AppBlog {
       this.allBlogPosts = resp.data;
       this.blogMeta = resp.meta;
       this.blogNumberOfPages = Math.ceil(resp.meta.count / this.pageSize);
-      this.getBlogPosts(1);
+
       this.getFeaturedPost();
+
+      // Find the index of the featuredPost.
+      this.indexOfFeaturedPost = this.allBlogPosts.findIndex(post => {
+        return (post.title == this.featuredPost.title && post.published == this.featuredPost.published);
+      });
+      // Find the page where the featuredPost is if found the featuredPost 
+      if (this.indexOfFeaturedPost > -1) {
+        this.pageOfFeaturedPost = Math.floor(this.indexOfFeaturedPost / this.pageSize) + 1;
+      }
+
+      this.getBlogPosts(1);
     }
     this.blogIsLoading = false;
   }
@@ -96,12 +112,19 @@ export class AppBlog {
 
   getSearchPosts(page) {
     this.searchIsLoading = true;
-    const pageSize = 3;
-    Fetch.fetchSearchPosts(this.searchQuery, page, pageSize).then(resp => {
+    Fetch.fetchSearchPosts(this.searchQuery, page, this.pageSize).then(resp => {
       if (resp.data) {
         this.searchPostsData = resp.data;
         this.searchMeta = resp.meta;
-        this.searchNumberOfPages = Math.ceil(resp.meta.count / pageSize);
+
+        // Find the index of the featuredPost from the searhchPostsData
+        const index = this.searchPostsData.findIndex(post => {
+          return (post.title == this.featuredPost.title && post.published == this.featuredPost.published);
+        });
+        // If found it, remove it from the searchPostsData to avoid display again.
+        if (index >= 0) this.searchPostsData.splice(index, 1);
+
+        this.searchNumberOfPages = Math.ceil(this.searchPostsData.length / this.pageSize);
         this.searchCurrentPage = page;
       } else {
         this.searchIsError = true;
@@ -114,15 +137,29 @@ export class AppBlog {
     this.blogIsLoading = true;
     if (this.blogFilter) {
       this.blogPostsData = await Fetch.fetchFilteredPosts(this.blogFilter, 1, this.pageSize, true);
+
+      // Find the index of the featuredPost from the blogPostsData
+      const index = this.blogPostsData.findIndex(post => {
+        return (post.title == this.featuredPost.title && post.published == this.featuredPost.published);
+      });
+      // If found it, remove it from the blogPostsData to avoid display again.
+      if (index >= 0) this.blogPostsData.splice(index, 1);
+
       this.blogNumberOfPages = Math.ceil(this.blogPostsData.length / this.pageSize);
       this.blogCurrentPage = 1;
     } else {
       this.blogNumberOfPages = Math.ceil(this.allBlogPosts.length / this.pageSize);
       this.blogPostsData = [];
       let index = (page - 1) * this.pageSize;
-      const endPoint = Math.min(this.allBlogPosts.length, page * this.pageSize);
+      let endPoint = Math.min(this.allBlogPosts.length, page * this.pageSize);
+
+      // Adjust the index and the endPoint by the index of the featuredPost
+      if (page > this.pageOfFeaturedPost) index++;
+      if (page == this.pageOfFeaturedPost) endPoint++;
+
       for (index; index < endPoint; index++) {
-        this.blogPostsData.push(this.allBlogPosts[index]);
+        // Don't push to the blogPostsData if it is the featuredPost.
+        if (index != this.indexOfFeaturedPost) this.blogPostsData.push(this.allBlogPosts[index]);
       }
     }
     this.blogIsLoading = false;
@@ -149,8 +186,6 @@ export class AppBlog {
     if (!this.searchQuery && this.blogFilter !== filterName) {
       this.blogFilter = filterName;
       this.getBlogPosts(1);
-      // if (this.blogFilter) this.getBlogPosts(1);
-      // else this.getAllBlogPosts();
     }
   }
 

src/components/app-blog-content/app-blog-content.tsx

@@ -55,7 +55,7 @@ export class AppCaseStudy {
           </div>
         </section>
         <section class="container product-section">
-          <app-img class="" src="/assets/work-example-juntoscope-mobile.png" alt="juntoscope mobile view" />
+          <app-img class="" src="/assets/work-example-juntoscope-mobile.jpg" alt="juntoscope mobile view" />
           <div class="text-container">
             <h2>The Product</h2>
             <p>

src/pages/app-blog/app-blog.tsx

@@ -1,4 +1,4 @@
-import { Component, State, Listen, Prop, h } from '@stencil/core';
+import { Component, State, Listen, Prop, h, Build } from '@stencil/core';
 import { translate } from '../../services/translation.service';
 
 @Component({
@@ -56,7 +56,10 @@ export class AppContact {
   }
 
   componentDidLoad() {
-    this.resetFormValues();
+    if (Build.isBrowser) {
+      this.resetFormValues();
+      window.scrollTo(0, 0);
+    }
   }
 
   validateField(e) {

src/pages/app-case-study/app-case-study.tsx

@@ -28,6 +28,9 @@ export class AppHome {
   }
 
   componentDidLoad() {
+    if (Build.isBrowser) {
+      window.scrollTo(0, 0);
+    }
     /* tslint:disable-next-line */
     window.addEventListener('scroll', () => {
       const innerPanel = document.getElementById('content-panel-inner');

src/pages/app-contact/app-contact.tsx

@@ -1,10 +1,15 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Build } from '@stencil/core';
 
 @Component({
   tag: 'app-services',
   styleUrl: 'app-services.scss',
 })
 export class AppServices {
+  componentDidLoad() {
+    if (Build.isBrowser) {
+      window.scrollTo(0, 0);
+    }
+  }
 
   changeMetadata() {
     // Change meta tags dynamically