UI make-up

open-template-hub · Sep 16, 2021 · 4802b83 · 4802b83
1 parent fcd0e9a
commit 4802b83
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 78 deletions.
diff --git a/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss b/src/app/component/common/swiper-wrapper/swiper-wrapper.component.scss
@@ -55,7 +55,7 @@ app-swiper-wrapper {
 }
 
 .swiper-pagination-bullet-active {
-  background: var(--theme-color);
+  background: var(--theme-color-lighter-2);
 }
 
 /*

diff --git a/src/app/component/nav/common/footer/footer.component.html b/src/app/component/nav/common/footer/footer.component.html
@@ -29,7 +29,7 @@
         JOBS
     </span>
   </a>
-  <app-ext-link [target]="'_self'" class="footer-link-content"
+  <app-ext-link class="footer-link-content"
                 [href]="environmentCommon.website.github.url + '/' + environmentCommon.oth.social.github">
     <div body class="footer-link-content-inner">
       <i aria-hidden="true" class="material-icons">code</i>

diff --git a/src/app/data/testimonial/testimonial.data.ts b/src/app/data/testimonial/testimonial.data.ts
@@ -6,7 +6,7 @@ export const TESTIMONIALS: Testimonial[] = [
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elit blandit, tempus risus vitae, elementum eros. Suspendisse nec orci at neque molestie dignissim. ',
     reviewer: {
       name: 'Furkan Yavuz',
-      title: 'Co-Founder @ Open Template Hub',
+      title: 'Co-Founder & Contributor @ Open Template Hub',
       photoUri:
           'https://avatars0.githubusercontent.com/u/2248168?s=460&u=435ef6ade0785a7a135ce56cae751fb3ade1d126&v=4',
       social: {
@@ -21,7 +21,7 @@ export const TESTIMONIALS: Testimonial[] = [
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elit blandit, tempus risus vitae, elementum eros. Suspendisse nec orci at neque molestie dignissim. ',
     reviewer: {
       name: 'Fatih Turker',
-      title: 'Co-Founder @ Open Template Hub',
+      title: 'Co-Founder & Contributor @ Open Template Hub',
       photoUri:
           'https://avatars1.githubusercontent.com/u/2202179?s=460&u=261b1129e7106c067783cb022ab9999aad833bdc&v=4',
       social: {
@@ -36,7 +36,7 @@ export const TESTIMONIALS: Testimonial[] = [
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elit blandit, tempus risus vitae, elementum eros. Suspendisse nec orci at neque molestie dignissim. ',
     reviewer: {
       name: 'Mert Sarac',
-      title: 'Software Developer @ Open Template Hub',
+      title: 'Contributor @ Open Template Hub',
       photoUri:
           'https://avatars1.githubusercontent.com/u/38442589?s=400&u=aa3cda11724fc297a0bfa6beb35c9be81687cf3c&v=4',
       social: {

diff --git a/src/app/page/landing-layout/home/home.component.html b/src/app/page/landing-layout/home/home.component.html
@@ -47,7 +47,7 @@ <h6>
     </div>
   </div>
   <div class="in-page-title">
-    <h4 class="testimonial-header">Customer reviews</h4>
+    <h4 class="testimonial-header">Customer Reviews</h4>
     <h6 class="testimonial-description">What our customers are saying...</h6>
   </div>
   <div class="card-area">

diff --git a/src/app/page/landing-layout/home/home.component.scss b/src/app/page/landing-layout/home/home.component.scss
@@ -122,7 +122,7 @@
 
 app-swiper-wrapper {
   height: 200px;
-  width: 80%;
+  width: 75%;
 }
 
 @media only screen and (max-width: 999px) {
@@ -161,8 +161,7 @@ app-swiper-wrapper {
   .counters {
     width: 100%;
     flex-direction: column;
-    padding-top: 50px;
-    padding-bottom: 0;
+    padding: 50px 0;
   }
 
   .counter-wrapper {
@@ -185,6 +184,10 @@ app-swiper-wrapper {
   app-swiper-wrapper {
     margin-bottom: 50px;
   }
+
+  .card-area {
+    padding: 10px 0;
+  }
 }
 
 @media only screen and (min-width: 1000px) {
@@ -249,6 +252,10 @@ app-swiper-wrapper {
     justify-content: center;
     align-items: center;
   }
+
+  .card-area {
+    padding: 20px 0;
+  }
 }
 
 @media (hover: hover) {

diff --git a/src/app/page/landing-layout/home/home.component.ts b/src/app/page/landing-layout/home/home.component.ts
@@ -1,29 +1,29 @@
-import { AfterViewInit, Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
-import { Router } from "@angular/router";
-import { CountUp } from "countup.js";
-import { PARTNERS } from "src/app/data/partner/partner.data";
-import { TESTIMONIALS } from "src/app/data/testimonial/testimonial.data";
-import { NpmProviderService } from "src/app/service/provider/npm-provider.service";
-import { environment } from "../../../../environments/environment";
-import { environmentCommon } from "../../../../environments/environment-common";
-import { URLS } from "../../../data/constant";
-import { Partner } from "../../../model/partner/partner.model";
-import { AuthenticationService } from "../../../service/auth/authentication.service";
-import { ThemeService } from "../../../service/theme/theme.service";
-
-@Component({
-  selector: "app-home",
-  templateUrl: "./home.component.html",
-  styleUrls: ["./home.component.scss", "../landing-layout.component.scss"],
-})
+import { AfterViewInit, Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Router } from '@angular/router';
+import { CountUp } from 'countup.js';
+import { PARTNERS } from 'src/app/data/partner/partner.data';
+import { TESTIMONIALS } from 'src/app/data/testimonial/testimonial.data';
+import { NpmProviderService } from 'src/app/service/provider/npm-provider.service';
+import { environment } from '../../../../environments/environment';
+import { environmentCommon } from '../../../../environments/environment-common';
+import { URLS } from '../../../data/constant';
+import { Partner } from '../../../model/partner/partner.model';
+import { AuthenticationService } from '../../../service/auth/authentication.service';
+import { ThemeService } from '../../../service/theme/theme.service';
+
+@Component( {
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: [ './home.component.scss', '../landing-layout.component.scss' ],
+} )
 export class HomeComponent implements AfterViewInit {
   downloadCounter = 0;
   serverTypesCounter = 5;
   uiTypesCounter = 3;
 
   brand = {
-    brandLogo: "",
+    brandLogo: '',
   };
 
   URLS = URLS;
@@ -37,15 +37,15 @@ export class HomeComponent implements AfterViewInit {
   environmentCommon = environmentCommon;
 
   constructor(
-    private formBuilder: FormBuilder,
-    public router: Router,
-    private authenticationService: AuthenticationService,
-    private themeService: ThemeService,
-    private npmProviderService: NpmProviderService
+      private formBuilder: FormBuilder,
+      public router: Router,
+      private authenticationService: AuthenticationService,
+      private themeService: ThemeService,
+      private npmProviderService: NpmProviderService
   ) {
     // redirect to home if already logged in
-    if (this.authenticationService.currentUserValue) {
-      this.router.navigate([URLS.dashboard.root]);
+    if ( this.authenticationService.currentUserValue ) {
+      this.router.navigate( [ URLS.dashboard.root ] );
     }
 
     this.brand = this.themeService.brand;
@@ -55,7 +55,7 @@ export class HomeComponent implements AfterViewInit {
     this.initCountUps();
   }
 
-  private initCountUps = async() => {
+  private initCountUps = async () => {
     const options = {
       useGrouping: false,
       duration: undefined,
@@ -64,83 +64,83 @@ export class HomeComponent implements AfterViewInit {
 
     this.downloadCounter = await this.npmProviderService.getNpmPackagesDownloadCount();
 
-    options.formattingFn = (n: number) => {
-      return this.countUpFormatter(n, this.downloadCounter);
+    options.formattingFn = ( n: number ) => {
+      return this.countUpFormatter( n, this.downloadCounter );
     };
 
-    if (this.downloadCounter < this.KILO) {
+    if ( this.downloadCounter < this.KILO ) {
       options.duration = 2;
-    } else if (this.downloadCounter < this.MILLION) {
+    } else if ( this.downloadCounter < this.MILLION ) {
       options.duration = 3;
     } else {
       options.duration = 4;
     }
 
     const eventCountUp = new CountUp(
-      "npmCounterElement",
-      this.downloadCounter,
-      options
+        'npmCounterElement',
+        this.downloadCounter,
+        options
     );
 
-    options.formattingFn = (n: number) => {
-      return this.countUpFormatter(n, this.serverTypesCounter);
+    options.formattingFn = ( n: number ) => {
+      return this.countUpFormatter( n, this.serverTypesCounter );
     };
-    if (this.serverTypesCounter < this.KILO) {
+    if ( this.serverTypesCounter < this.KILO ) {
       options.duration = 2;
-    } else if (this.serverTypesCounter < this.MILLION) {
+    } else if ( this.serverTypesCounter < this.MILLION ) {
       options.duration = 3;
     } else {
       options.duration = 4;
     }
 
     const studentCountUp = new CountUp(
-      "githubStarCounterElement",
-      this.serverTypesCounter,
-      options
+        'githubStarCounterElement',
+        this.serverTypesCounter,
+        options
     );
 
-    options.formattingFn = (n: number) => {
-      return this.countUpFormatter(n, this.uiTypesCounter);
+    options.formattingFn = ( n: number ) => {
+      return this.countUpFormatter( n, this.uiTypesCounter );
     };
-    if (this.uiTypesCounter < this.KILO) {
+    if ( this.uiTypesCounter < this.KILO ) {
       options.duration = 2;
-    } else if (this.uiTypesCounter < this.MILLION) {
+    } else if ( this.uiTypesCounter < this.MILLION ) {
       options.duration = 3;
     } else {
       options.duration = 4;
     }
 
     const userCountUp = new CountUp(
-      "serverTypesCounterElement",
-      this.uiTypesCounter,
-      options
+        'serverTypesCounterElement',
+        this.uiTypesCounter,
+        options
     );
 
-    if (!eventCountUp.error) {
+    if ( !eventCountUp.error ) {
       eventCountUp.start();
     } else {
-      console.error(eventCountUp.error);
+      console.error( eventCountUp.error );
     }
-    if (!studentCountUp.error) {
+    if ( !studentCountUp.error ) {
       studentCountUp.start();
     } else {
-      console.error(studentCountUp.error);
+      console.error( studentCountUp.error );
     }
-    if (!userCountUp.error) {
+    if ( !userCountUp.error ) {
       userCountUp.start();
     } else {
-      console.error(userCountUp.error);
+      console.error( userCountUp.error );
     }
-  }
+  };
 
-  countUpFormatter(n: number, lastNumber: number) {
-    if (n < this.KILO) {
-      return n + "";
+  countUpFormatter( n: number, lastNumber: number ) {
+    if ( n < this.KILO ) {
+      return n + '';
     } else {
-      if (n < this.MILLION) {
-        return Math.round((n / this.KILO) * 10) / 10 + "k";
+      if ( n < this.MILLION ) {
+        return Math.round( ( n / this.KILO ) * 10 ) / 10 + 'k';
       } else {
-        return Math.round((n / this.MILLION) * 10) / 10 + "M";
+        return Math.round( ( n / this.MILLION ) * 10 ) / 10 + 'M';
       }
     }
   }

diff --git a/src/app/page/landing-layout/product/product.component.html b/src/app/page/landing-layout/product/product.component.html
@@ -23,7 +23,7 @@
       </div>
       <div class="product-content-right">
         <img
-          *ngIf="product.presentationType === 1"
+          *ngIf="product.presentationType === 1 && product.heroImage"
           class="demonstration"
           [src]="product.heroImage"
           alt="oth-packages"

diff --git a/src/app/service/information/information.service.ts b/src/app/service/information/information.service.ts
@@ -46,12 +46,8 @@ export class InformationService {
       return;
     }
 
-    let layout = '';
     let currentChild = this.router.routerState.snapshot.root.firstChild;
     do {
-      if ( currentChild.data.layout ) {
-        layout = currentChild.data.layout;
-      }
       currentChild = currentChild.firstChild;
     } while ( currentChild );
 

diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
@@ -85,7 +85,7 @@
   }
 
   .in-page-title {
-    padding-bottom: 50px;
+    padding: 20px 0;
   }
 
   .top-layer {
@@ -120,7 +120,7 @@
   }
 
   .in-page-title {
-    padding-bottom: 60px;
+    padding: 30px 0;
   }
 
   .top-layer {