From a3fecb6add67b1e00af72c72ebc2bfbf153f505f Mon Sep 17 00:00:00 2001 From: Furkan Cengiz Date: Mon, 29 May 2023 23:52:38 +0300 Subject: [PATCH] add: some styling and tune for definitions --- angular.json | 4 +- package-lock.json | 14 ++++ package.json | 1 + src/app/app.module.ts | 2 + .../daily-word-and-phrase.component.html | 2 +- .../daily-word-and-phrase.component.scss | 4 +- .../main/definition/definition.component.html | 76 +++++++++++-------- .../main/definition/definition.component.scss | 32 ++++++++ .../main/definition/definition.component.ts | 35 ++++++++- .../main/definition/definition.module.ts | 7 +- src/app/components/main/main.module.ts | 4 - .../main/navbar/navbar.component.html | 2 +- .../main/navbar/navbar.component.scss | 3 +- .../search-input/search-input.component.html | 1 - .../search-input/search-input.component.scss | 1 + src/styles.scss | 6 ++ 16 files changed, 146 insertions(+), 48 deletions(-) diff --git a/angular.json b/angular.json index 4eac8da..3430bbe 100644 --- a/angular.json +++ b/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": [] }, diff --git a/package-lock.json b/package-lock.json index 7588ffa..7b8ec58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,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" @@ -8247,6 +8248,19 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ngx-spinner": { + "version": "16.0.2", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-16.0.2.tgz", + "integrity": "sha512-MZpOHb3dvSqD6xiEdR+EtOfPY2r1kfA7t5Hv5IVwi7gkbTwVgnqxDWdOYJ/HW1pSZ5iEGhqlJqWg6CysLmNfHQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": ">=15.0.0", + "@angular/common": ">=15.0.0", + "@angular/core": ">=15.0.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/package.json b/package.json index 73bb643..5bd8466 100644 --- a/package.json +++ b/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" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index efe4227..c04b79e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,6 +4,7 @@ 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: [ @@ -11,6 +12,7 @@ import { HttpClientModule } from '@angular/common/http'; ], imports: [ BrowserModule, + BrowserAnimationsModule, AppRoutingModule, MainModule, HttpClientModule diff --git a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html index 7b4f46e..9d46267 100644 --- a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html +++ b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html @@ -1,4 +1,4 @@ -
+

Bir Kelime

diff --git a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss index b65248f..cb8c65c 100644 --- a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss +++ b/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; diff --git a/src/app/components/main/definition/definition.component.html b/src/app/components/main/definition/definition.component.html index 2e1469b..ec512bb 100644 --- a/src/app/components/main/definition/definition.component.html +++ b/src/app/components/main/definition/definition.component.html @@ -1,35 +1,49 @@ + + + -
-

- {{word.madde}} -

-

- - Çokluk, - - - ({{word.telaffuz}}), - - - {{word.lisan}} - -

- -

- {{anlam}} - - özel - -

-

{{ word.anlamlarListe[i].anlam }}

- - - {{word.anlamlarListe[i].orneklerListe[0].ornek}} - - - - {{yazar.tam_adi}} - +
+
+
+

+ {{word.madde }} +

+

+ + Çokluk, + + + ({{word.telaffuz}}), + + + {{word.lisan}} + +

+
+ +
+ + + {{i+1}}. + {{anlam}} + + , özel + + {{ word.anlamlarListe[i].anlam }} + + +
+ + {{word.anlamlarListe[i].orneklerListe[0].ornek}} + + + - {{yazar.tam_adi}} + +
+ + +
- +
\ No newline at end of file diff --git a/src/app/components/main/definition/definition.component.scss b/src/app/components/main/definition/definition.component.scss index e69de29..3201397 100644 --- a/src/app/components/main/definition/definition.component.scss +++ b/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; + } +} \ No newline at end of file diff --git a/src/app/components/main/definition/definition.component.ts b/src/app/components/main/definition/definition.component.ts index 8a875b0..da65a62 100644 --- a/src/app/components/main/definition/definition.component.ts +++ b/src/app/components/main/definition/definition.component.ts @@ -1,13 +1,34 @@ +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 { @@ -15,13 +36,22 @@ export class DefinitionComponent implements OnInit { } private wordService: WordRequestService = inject(WordRequestService); private activatedRoute: ActivatedRoute = inject(ActivatedRoute); + private spinner: NgxSpinnerService = inject(NgxSpinnerService); anlamList: Array = []; + searchedWord !: string; word$: Observable = 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() httpResponse.forEach((wordResponse, index) => { + this.searchedWord = wordResponse.madde let anlamCount = parseInt(wordResponse.anlam_say, 10) let anlamOzellik !: string; let anlamOzellikListe = new Array() @@ -32,6 +62,7 @@ export class DefinitionComponent implements OnInit { } this.anlamList.push(anlamOzellikListe) }) + this.spinner.hide('scale', 250) return httpResponse; }) ); diff --git a/src/app/components/main/definition/definition.module.ts b/src/app/components/main/definition/definition.module.ts index e4fa590..dc423d2 100644 --- a/src/app/components/main/definition/definition.module.ts +++ b/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 { } diff --git a/src/app/components/main/main.module.ts b/src/app/components/main/main.module.ts index be9231e..de21df2 100644 --- a/src/app/components/main/main.module.ts +++ b/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, diff --git a/src/app/components/main/navbar/navbar.component.html b/src/app/components/main/navbar/navbar.component.html index 8f67a14..0a22773 100644 --- a/src/app/components/main/navbar/navbar.component.html +++ b/src/app/components/main/navbar/navbar.component.html @@ -1,4 +1,4 @@ -