Merge pull request #7 from mazyn/release/1.0.3

Release/1.0.3
mazyn · Sep 9, 2022 · 6a3bd27 · 6a3bd27
2 parents 3678ad5 + 0d1a5e9
commit 6a3bd27
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 35 deletions.
diff --git 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
@@ -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
@@ -7,6 +7,8 @@
   >
     <div
       class="relative w-full xl:w-[370px] h-[60vw] sm:h-[420px] md:h-60 lg:h-80 xl:h-[370px] xl:ml-auto"
+      data-aos="fade-right"
+      data-aos-duration="1500"
     >
       <img
         class="object-cover object-center w-full h-full rounded-3xl relative z-10"
@@ -24,17 +26,40 @@
   <section
     class="md:flex-1 2xl:flex-none lg:w-[60%] xl:w-full 2xl:w-[60%] px-4 xl:px-28 md:pl-12 lg:pl-20 lg:pr-6 mb-14 sm:mb-16"
   >
-    <h2 class="font-semibold text-3xl sm:text-4xl mb-4">{{ breed?.name }}</h2>
-    <p class="font-medium leading-6 text-sm sm:text-lg mb-8">
+    <h2
+      class="font-semibold text-3xl sm:text-4xl mb-4"
+      data-aos="fade-up"
+      data-aos-delay="100"
+    >
+      {{ breed?.name }}
+    </h2>
+    <p
+      class="font-medium leading-6 text-sm sm:text-lg mb-8"
+      data-aos="fade-left"
+      data-aos-delay="250"
+      data-aos-duration="1250"
+    >
       {{ breed?.description }}
     </p>
-    <div class="sm:w-[80%] md:w-auto lg:w-[85%] 2xl:w-[75%]">
+    <div
+      class="sm:w-[80%] md:w-auto lg:w-[85%] 2xl:w-[75%] detail-list-anchor"
+      data-aos="fade"
+      data-aos-delay="750"
+      data-aos-duration="1500"
+    >
       <ul
         class="text-xs sm:text-base leading-5"
         [innerHTML]="getSimpleDetailList()"
       ></ul>
       <ul class="text-xs sm:text-base leading-5">
-        <li class="mb-3 sm:mb-6" *ngFor="let indicator of segmentedIndicators">
+        <li
+          class="mb-3 sm:mb-6"
+          *ngFor="let indicator of segmentedIndicators; let i = index"
+          data-aos="fade-left"
+          [attr.data-aos-delay]="850 + i * 100"
+          data-aos-duration="1500"
+          data-aos-anchor=".detail-list-anchor"
+        >
           <app-breed-details-stats-indicator
             [statusName]="indicator.name"
             [currentLevel]="getSegmentCurrentValue(indicator.acessor)"
@@ -48,13 +73,17 @@ <h2 class="font-semibold text-2xl sm:text-3xl mb-8">Other photos</h2>
     <div
       class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 sm:gap-8 xl:gap-10 2xl:gap-x-12 2xl:gap-y-14"
     >
-      <img
-        class="w-full h-[40vw] sm:h-64 md:h-52 xl:h-[270px] 2xl:h-[320px] object-cover object-center rounded-xl cursor-pointer"
+      <div
         *ngFor="let photo of breed?.photos?.slice(1); let i = index"
-        [src]="photo"
-        alt="A photo of the cat breed"
+        class="w-full h-[40vw] sm:h-64 md:h-52 xl:h-[270px] 2xl:h-[320px] rounded-xl cursor-pointer overflow-hidden"
         (click)="openPhotoGallery(i)"
-      />
+      >
+        <img
+          class="object-cover object-center w-full h-full lg:transition-transform lg:hover:scale-105"
+          [src]="photo"
+          alt="A photo of the cat breed"
+        />
+      </div>
     </div>
   </section>
 </div>

diff --git 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/...ding-page/components/landing-page-most-searched/landing-page-most-searched.component.html b/...ding-page/components/landing-page-most-searched/landing-page-most-searched.component.html
@@ -50,15 +50,19 @@ <h2 class="font-medium text-xs sm:text-sm md:text-base lg:text-lg">
             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"
           ></span>
           <a [routerLink]="['breed', breed.externalId]">
-            <img
-              [src]="breed.imageUrl"
-              class="object-center object-cover w-full h-[35vw] sm:h-56 md:h-72 lg:h-44 xl:h-[220px] 2xl:h-[284px] max-h-40 sm:max-h-full rounded-xl sm:rounded-2xl md:rounded-3xl relative z-10"
-              alt="A photo of a cat breed"
-            />
+            <div
+              class="w-full h-[35vw] sm:h-56 md:h-72 lg:h-44 xl:h-[220px] 2xl:h-[284px] max-h-40 sm:max-h-full rounded-xl sm:rounded-2xl md:rounded-3xl relative z-10 overflow-hidden"
+            >
+              <img
+                [src]="breed.imageUrl"
+                class="object-center object-cover w-full h-full lg:transition-transform lg:hover:scale-105"
+                alt="A photo of a cat breed"
+              />
+            </div>
           </a>
           <a [routerLink]="['breed', breed.externalId]">
             <span
-              class="block mt-2 sm:mt-3 md:mt-4 lg:mt-3 xl:mt-4 text-xs sm:text-sm md:text-base lg:text-lg font-semibold leading-5"
+              class="inline-block mt-2 sm:mt-3 md:mt-4 lg:mt-3 xl:mt-4 text-xs sm:text-sm md:text-base lg:text-lg font-semibold leading-5 lg:transition-all lg:border-b-4 lg:border-transparent lg:hover:border-primary"
             >
               {{ breed.name }}
             </span>

diff --git a/src/app/landing-page/pages/landing-page.component.html b/src/app/landing-page/pages/landing-page.component.html
@@ -13,29 +13,42 @@
         <span
           class="block absolute w-12 sm:w-16 h-[3px] bg-primary left-0 top-1 rounded-full"
           aria-hidden="true"
+          data-aos="fade-right"
         ></span>
-        <h1 class="font-bold text-[40px] sm:text-5xl leading-[48px]">
+        <h1
+          class="font-bold text-[40px] sm:text-5xl leading-[48px]"
+          data-aos="fade-left"
+        >
           Why should you have a cat?
         </h1>
       </div>
     </div>
-    <p class="font-medium text-lg leading-6 mb-6 lg:mb-10 xl:mb-14">
+    <p
+      class="font-medium text-lg leading-6 mb-6 lg:mb-10 xl:mb-14"
+      data-aos="fade-up"
+      data-aos-delay="300"
+    >
       Having a cat around you can actually trigger the release of calming
       chemicals in your body which lower your stress and anxiety levels
     </p>
     <a
-      class="flex items-center text-xs md:text-base opacity-60 hover:opacity-100 uppercase font-bold"
+      class="inline-block text-xs md:text-base uppercase font-bold"
       href="https://www.helpguide.org/articles/healthy-living/joys-of-owning-a-cat.htm"
       target="__blank"
       rel="noopener noreferrer"
+      data-aos="fade-up"
+      data-aos-delay="500"
     >
-      <span class="mr-3 md:mr-2">Read more</span>
-      <span class="material-icons !text-base md:!text-lg">trending_flat</span>
+      <span class="inline-flex items-center opacity-60 hover:opacity-100">
+        <span class="mr-3 md:mr-2">Read more</span>
+        <span class="material-icons !text-base md:!text-lg">trending_flat</span>
+      </span>
     </a>
   </div>
 
   <div
     class="inline-flex flex-initial flex-wrap w-full sm:w-[85%] lg:w-[54%] xl:w-[51%] 2xl:w-[52%] mx-auto lg:ml-auto lg:mr-0"
+    data-aos="fade-left"
   >
     <div class="w-[54%]">
       <figure class="p-2">

diff --git 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
@@ -1,11 +1,22 @@
-<h1 class="text-4xl font-bold mb-16">Top 10 most searched breeds</h1>
+<h1
+  class="text-4xl font-bold mb-16"
+  data-aos="fade-up"
+  data-aos-duration="1000"
+>
+  Top 10 most searched breeds
+</h1>
 <ul
-  class="mb-24"
+  class="mb-24 aos-list-anchor"
   *skeleton="isLoading; repeat: 5; className: 'w-full h-48 mb-8 rounded-2xl'"
 >
-  <li *ngFor="let breed of mostSearchedBreeds; let i = index">
+  <li
+    *ngFor="let breed of mostSearchedBreeds; let i = index"
+    data-aos="fade-left"
+    data-aos-anchor=".aos-list-anchor"
+    [attr.data-aos-delay]="0 + i * 150"
+  >
     <a
-      class="block cursor-pointer transition lg:hover:bg-accent lg:hover:bg-opacity-20 rounded-xl lg:p-4 mb-14 lg:mb-16"
+      class="block cursor-pointer rounded-xl transition lg:hover:bg-accent lg:hover:bg-opacity-20 lg:hover:scale-[1.02] lg:p-4 mb-14 lg:mb-16"
       routerLink="/breed/{{ breed.externalId }}"
     >
       <section

diff --git a/src/app/most-searched-page/pages/most-searched-page.component.ts b/src/app/most-searched-page/pages/most-searched-page.component.ts
@@ -1,4 +1,6 @@
-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';
 
 import { Breed } from 'src/app/shared/models';
 import { CatApiService } from 'src/app/shared/services';
@@ -11,9 +13,20 @@ export class MostSearchedPageComponent implements OnInit {
   mostSearchedBreeds: Breed[] = [];
   isLoading: boolean = false;
 
-  constructor(private readonly catApiService: CatApiService) {}
+  constructor(
+    private readonly catApiService: CatApiService,
+    @Inject(PLATFORM_ID) private readonly platformId: Object,
+  ) {}
 
   ngOnInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      AOS.init({
+        disable: window.innerWidth < 1024,
+        duration: 1500,
+        once: true,
+      });
+    }
+
     this.isLoading = true;
     this.catApiService.getMostSearchedBreeds().subscribe({
       next: (breeds) => (this.mostSearchedBreeds = breeds),

diff --git a/src/assets/styles/aos-fix.scss b/src/assets/styles/aos-fix.scss
@@ -0,0 +1,15 @@
+@media screen and (max-width: 1023px) {
+  [data-aos] {
+    pointer-events: auto !important;
+  }
+
+  html:not(.no-js) [data-aos^='fade'][data-aos^='fade'] {
+    opacity: 1 !important;
+  }
+
+  html:not(.no-js) [data-aos='fade-up'],
+  html:not(.no-js) [data-aos='fade-left'],
+  html:not(.no-js) [data-aos='fade-right'] {
+    transform: none !important;
+  }
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  catApiUrl: 'http://localhost:3000/v1',
+  catApiUrl: 'https://cat-wiki-api-mazyn.herokuapp.com/v1',
 };
 
 /*

diff --git a/src/styles.scss b/src/styles.scss
@@ -23,6 +23,7 @@
 
 // Animations
 @import './assets/styles/animations.scss';
+@import './assets/styles/aos-fix.scss';
 
 html {
   height: -webkit-fill-available;