add: some styling and tune for definitions

angular.json

@@ -30,7 +30,9 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/ngx-spinner/animations/ball-8bits.css",
+              "node_modules/ngx-spinner/animations/ball-scale-multiple.css"
             ],
             "scripts": []
           },

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
+    "ngx-spinner": "^16.0.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

src/app/app.module.ts

@@ -4,13 +4,15 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MainModule } from './components/main/main.module';
 import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
     AppComponent,
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     MainModule,
     HttpClientModule

src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html

@@ -1,4 +1,4 @@
-<div class="daily-word-and-phrase">
+<div class="daily-word-and-phrase container">
     <div class="card">
         <h2 class="card__title">Bir Kelime</h2>
         <div class="card--inner" *ngFor="let word of words">

src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss

@@ -1,6 +1,6 @@
 .daily-word-and-phrase {
-    width: 90%;
-    margin-inline: auto;
+    // width: 90%;
+    // margin-inline: auto;
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;

src/app/components/main/definition/definition.component.html

@@ -1,35 +1,49 @@
+<!-- <ngx-spinner type="ball-8bits" color="371B58" name="mySpinner"></ngx-spinner> -->
+<ngx-spinner type="ball-scale-multiple" name="scale">
+</ngx-spinner>
 <ng-container *ngIf="word$ | async as word">
-    <div class="container definition" *ngFor="let word of (word$|async); let wordIndex = index">
-        <h1>
-            {{word.madde}}
-        </h1>
-        <p>
-            <i *ngIf="word.cogul_mu === '1'">
-                Çokluk,
-            </i>
-            <span *ngIf="word.telaffuz">
-                ({{word.telaffuz}}),
-            </span>
-            <span>
-                {{word.lisan}}
-            </span>
-        </p>
-        <ng-container *ngFor="let anlam of anlamList[wordIndex]; let i = index">
-            <p>
-                {{anlam}}
-                <i *ngIf="word.ozel_mi === '1'">
-                    özel
-                </i>
-            </p>
-            <p>{{ word.anlamlarListe[i].anlam }}</p>
-            <ng-container *ngIf="word.anlamlarListe[i].orneklerListe">
-                <q>
-                    {{word.anlamlarListe[i].orneklerListe[0].ornek}}
-                </q>
-                <span *ngFor="let yazar of word.anlamlarListe[i].orneklerListe[0].yazar">
-                    - {{yazar.tam_adi}}
-                </span>
+    <div [@sliding]="word ? 'void' : 'sliding-in'" class="container definition">
+        <div *ngFor="let word of (word$|async); let wordIndex = index">
+            <div>
+                <h1 class="definition__title">
+                    {{word.madde }}
+                </h1>
+                <p>
+                    <i *ngIf="word.cogul_mu === '1'">
+                        Çokluk,
+                    </i>
+                    <i *ngIf="word.telaffuz">
+                        ({{word.telaffuz}}),
+                    </i>
+                    <i>
+                        {{word.lisan}}
+                    </i>
+                </p>
+            </div>
+            <ng-container *ngFor="let anlam of anlamList[wordIndex]; let i = index">
+                <div class="definition__meaning">
+                    <ng-container *ngIf="word.anlamlarListe[i]">
+                        <span>
+                            {{i+1}}.
+                            <i>{{anlam}}</i>
+                            <i *ngIf="word.ozel_mi === '1'">
+                                <span>, özel</span>
+                            </i>
+                            {{ word.anlamlarListe[i].anlam }}
+                        </span>
+                        <ng-container *ngIf="word.anlamlarListe[i].orneklerListe">
+                            <div class="definition__example">
+                                <q>
+                                    {{word.anlamlarListe[i].orneklerListe[0].ornek}}
+                                </q>
+                                <span *ngFor="let yazar of word.anlamlarListe[i].orneklerListe[0].yazar">
+                                    - {{yazar.tam_adi}}
+                                </span>
+                            </div>
+                        </ng-container>
+                    </ng-container>
+                </div>
             </ng-container>
-        </ng-container>
+        </div>
     </div>
 </ng-container>

src/app/components/main/definition/definition.component.scss

@@ -0,0 +1,32 @@
+.definition {
+    background-color: var(--secondary-bg-color);
+    padding: clamp(0rem, 2vw, 2rem);
+    box-shadow: 0px 0px 10px var(--secondary-bg-color);
+    font-size: clamp(1rem, 5vw, 2rem);
+    transition: background-color .5s;
+
+    &__title {
+        padding: 0;
+        margin: 0;
+        text-align: center;
+    }
+
+    &__meaning {
+        >* {
+            margin: 1rem 0 1rem 0;
+        }
+
+        padding: 1rem;
+
+        // &:not(:last-child) {
+        //     border-bottom: 1px solid var(--main-bg-color);
+        // }
+
+        border-bottom: 2px solid var(--main-bg-color);
+    }
+
+    &__example {
+        font-size: clamp(1rem, 5vw, 1.5rem);
+        text-align: center;
+    }
+}

src/app/components/main/definition/definition.component.ts

@@ -1,27 +1,57 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
 import { Observable, map, switchMap } from 'rxjs';
 import { WordResponse } from 'src/app/models/word-response';
 import { WordRequestService } from 'src/app/services/word-request.service';
 
+
+//sliding animation
 @Component({
   selector: 'sozluk-definition',
   templateUrl: './definition.component.html',
-  styleUrls: ['./definition.component.scss']
+  styleUrls: ['./definition.component.scss'],
+  animations: [
+    trigger('sliding', [
+      state('sliding', style({
+        transform: 'translateX(-100%)'
+      })),
+      state('sliding-out', style({
+        transform: 'translateX(100%)'
+      }
+      )),
+      state('sliding-in', style({
+        transform: 'translateX(0%)'
+      }
+      )),
+      transition('void => sliding', animate(0)),
+      transition('sliding => sliding-out', animate(250)),
+    ])
+  ]
 })
 export class DefinitionComponent implements OnInit {
   ngOnInit(): void {
 
   }
   private wordService: WordRequestService = inject(WordRequestService);
   private activatedRoute: ActivatedRoute = inject(ActivatedRoute);
+  private spinner: NgxSpinnerService = inject(NgxSpinnerService);
   anlamList: Array<string[]> = [];
+  searchedWord !: string;
   word$: Observable<WordResponse[]> = this.activatedRoute.paramMap.pipe(
     map((param) => param.get('word')!),
-    switchMap((word) => this.wordService.requestWordMeaning(word)),
+    switchMap((word) => {
+      if (word === this.searchedWord) { }
+      return this.wordService.requestWordMeaning(word)
+    }),
     map((httpResponse) => {
+      this.spinner.show('scale', {
+        type: 'ball-scale-multiple'
+      })
       this.anlamList = new Array<string[]>()
       httpResponse.forEach((wordResponse, index) => {
+        this.searchedWord = wordResponse.madde
         let anlamCount = parseInt(wordResponse.anlam_say, 10)
         let anlamOzellik !: string;
         let anlamOzellikListe = new Array<string>()
@@ -32,6 +62,7 @@ export class DefinitionComponent implements OnInit {
         }
         this.anlamList.push(anlamOzellikListe)
       })
+      this.spinner.hide('scale', 250)
       return httpResponse;
     })
   );

src/app/components/main/definition/definition.module.ts

@@ -2,9 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DefinitionComponent } from './definition.component';
 import { RouterModule } from '@angular/router';
-
-
-
+import { NgxSpinnerModule } from 'ngx-spinner';
 @NgModule({
   declarations: [
     DefinitionComponent
@@ -13,7 +11,8 @@ import { RouterModule } from '@angular/router';
     CommonModule,
     RouterModule.forChild([
       { path: '', component: DefinitionComponent }
-    ])
+    ]),
+    NgxSpinnerModule
   ]
 })
 export class DefinitionModule { }

src/app/components/main/main.module.ts

@@ -6,10 +6,6 @@ import { SearchInputComponent } from './search-input/search-input.component';
 import { RouterModule } from '@angular/router';
 import { DailyWordAndPhraseComponent } from './daily-word-and-phrase/daily-word-and-phrase.component';
 import { FormsModule } from '@angular/forms';
-
-
-
-
 @NgModule({
   declarations: [
     MainComponent,

src/app/components/main/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<nav class="nav container">
+<nav class="nav">
     <div class="nav--wrapper">
         <div class="nav__logo">
             <img src="../../../assets/svg/logo.svg" alt="" />

src/app/components/main/navbar/navbar.component.scss

@@ -7,9 +7,10 @@
     box-shadow: 0px 2px 3px var(--secondary-bg-color);
     position: sticky;
     top: 0;
+    z-index: 99;
 
     &--wrapper {
-        width: min(98%, 900px);
+        width: min(98%, 1200px);
         margin-inline: auto;
         display: flex;
         flex-direction: row;

src/app/components/main/search-input/search-input.component.html

@@ -1,4 +1,3 @@
-{{wordInput}}
 <section class="search container">
     <form (ngSubmit)="onSubmit()" #searchForm="ngForm" class="search__form">
         <label class="search__label" for="word">

src/app/components/main/search-input/search-input.component.scss

@@ -1,4 +1,5 @@
 .search {
+    z-index: 0;
     margin-top: 4rem;
 
     &__label {

src/styles.scss

@@ -34,4 +34,10 @@ body {
     color: var(--main-color);
     color-scheme: var(--color-scheme);
     transition: background-color 0.5s ease-out, color 0.5s ease-out;
+}
+
+.container {
+    width: min(1200px, 80%);
+    margin-inline: auto;
+    margin-top: 2rem;
 }