diff --git a/angular.json b/angular.json index 98070bb..91b9a60 100644 --- a/angular.json +++ b/angular.json @@ -28,7 +28,8 @@ ], "styles": [ "src/styles.scss", - "node_modules/ngx-toastr/toastr.css" + "node_modules/ngx-toastr/toastr.css", + "node_modules/aos/dist/aos.css" ], "scripts": [], "allowedCommonJsDependencies": [ @@ -100,7 +101,8 @@ ], "styles": [ "src/styles.scss", - "node_modules/ngx-toastr/toastr.css" + "node_modules/ngx-toastr/toastr.css", + "node_modules/aos/dist/aos.css" ], "scripts": [] } diff --git a/package.json b/package.json index 417290d..d9b608f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cat-wiki-app", - "version": "1.0.2", + "version": "1.0.3", "scripts": { "ng": "ng", "start": "ng serve --host 0.0.0.0", @@ -26,6 +26,7 @@ "@angular/router": "^14.1.0", "@ng-select/ng-select": "^9.0.2", "@nguniversal/express-engine": "^14.0.3", + "aos": "^2.3.4", "express": "^4.15.2", "material-icons": "1.11.8", "ngx-toastr": "^15.0.0", @@ -41,6 +42,7 @@ "@nguniversal/builders": "^14.0.3", "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.4", + "@types/aos": "^3.0.4", "@types/express": "^4.17.0", "@types/jasmine": "~4.0.0", "@types/node": "^14.15.0", diff --git a/src/app/breed-details/pages/breed-details-page.component.html b/src/app/breed-details/pages/breed-details-page.component.html index c91c7c7..b8064ed 100644 --- a/src/app/breed-details/pages/breed-details-page.component.html +++ b/src/app/breed-details/pages/breed-details-page.component.html @@ -7,6 +7,8 @@ >
-

{{ breed?.name }}

-

+

+ {{ breed?.name }} +

+

{{ breed?.description }}

-
+
      -
    • +
    • Other photos
      - A photo of the cat breed + > + A photo of the cat breed +
    diff --git a/src/app/breed-details/pages/breed-details-page.component.ts b/src/app/breed-details/pages/breed-details-page.component.ts index f69d557..e669a23 100644 --- a/src/app/breed-details/pages/breed-details-page.component.ts +++ b/src/app/breed-details/pages/breed-details-page.component.ts @@ -1,12 +1,20 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { + Component, + Inject, + OnInit, + PLATFORM_ID, + ViewChild, +} from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; import { take } from 'rxjs'; import SwiperCore, { Pagination, A11y, SwiperOptions } from 'swiper'; +import * as AOS from 'aos'; import { DialogComponent } from 'src/app/shared/components/dialog/dialog.component'; import { CatApiBreedPhoto } from 'src/app/shared/models'; import { CatApiService } from 'src/app/shared/services'; +import { isPlatformBrowser } from '@angular/common'; SwiperCore.use([Pagination, A11y]); @@ -44,9 +52,18 @@ export class BreedDetailsPageComponent implements OnInit { private readonly route: ActivatedRoute, private readonly catApiService: CatApiService, private readonly toastr: ToastrService, + @Inject(PLATFORM_ID) private readonly platformId: Object, ) {} ngOnInit(): void { + if (isPlatformBrowser(this.platformId)) { + AOS.init({ + disable: window.innerWidth < 1024, + duration: 1000, + once: true, + }); + } + this.isLoading = true; this.route.paramMap.pipe(take(1)).subscribe((map) => { diff --git a/src/app/landing-page/components/landing-page-most-searched/landing-page-most-searched.component.html b/src/app/landing-page/components/landing-page-most-searched/landing-page-most-searched.component.html index 8f407a4..0bb8aee 100644 --- a/src/app/landing-page/components/landing-page-most-searched/landing-page-most-searched.component.html +++ b/src/app/landing-page/components/landing-page-most-searched/landing-page-most-searched.component.html @@ -50,15 +50,19 @@

    class="hidden lg:block absolute w-6 2xl:w-8 h-[135px] xl:h-44 2xl:h-[233px] rounded-full bg-accent -left-3 2xl:-left-4 top-[12%] z-0" > - A photo of a cat breed +
    + A photo of a cat breed +
    {{ breed.name }} diff --git a/src/app/landing-page/pages/landing-page.component.html b/src/app/landing-page/pages/landing-page.component.html index 2cf69e8..9adffd7 100644 --- a/src/app/landing-page/pages/landing-page.component.html +++ b/src/app/landing-page/pages/landing-page.component.html @@ -13,29 +13,42 @@ -

    +

    Why should you have a cat?

    -

    +

    Having a cat around you can actually trigger the release of calming chemicals in your body which lower your stress and anxiety levels

    - Read more - trending_flat + + Read more + trending_flat +
    diff --git a/src/app/landing-page/pages/landing-page.component.ts b/src/app/landing-page/pages/landing-page.component.ts index afaf920..714eb9b 100644 --- a/src/app/landing-page/pages/landing-page.component.ts +++ b/src/app/landing-page/pages/landing-page.component.ts @@ -1,11 +1,21 @@ -import { Component, OnInit } from '@angular/core'; +import { isPlatformBrowser } from '@angular/common'; +import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import * as AOS from 'aos'; @Component({ selector: 'app-landing-page', templateUrl: './landing-page.component.html', }) export class LandingPageComponent implements OnInit { - constructor() {} + constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {} - ngOnInit(): void {} + ngOnInit(): void { + if (isPlatformBrowser(this.platformId)) { + AOS.init({ + disable: window.innerWidth < 1024, + duration: 1500, + once: true, + }); + } + } } diff --git a/src/app/most-searched-page/pages/most-searched-page.component.html b/src/app/most-searched-page/pages/most-searched-page.component.html index 870244e..bc53233 100644 --- a/src/app/most-searched-page/pages/most-searched-page.component.html +++ b/src/app/most-searched-page/pages/most-searched-page.component.html @@ -1,11 +1,22 @@ -

    Top 10 most searched breeds

    +

    + Top 10 most searched breeds +