From 9a098eb9018d381573de284d33257fc5c9b863bd Mon Sep 17 00:00:00 2001 From: Taui Silva Date: Mon, 4 Mar 2024 18:06:47 -0300 Subject: [PATCH] ajustes no design do card --- src/app/components/repos/repos.component.html | 31 ++++++---- src/app/components/repos/repos.component.scss | 22 ++++--- src/app/components/repos/repos.component.ts | 59 +++++++++++++------ src/app/models/dados.ts | 4 +- src/env/env.ts | 1 + 5 files changed, 75 insertions(+), 42 deletions(-) diff --git a/src/app/components/repos/repos.component.html b/src/app/components/repos/repos.component.html index 540d4b6..1450b7a 100644 --- a/src/app/components/repos/repos.component.html +++ b/src/app/components/repos/repos.component.html @@ -16,19 +16,19 @@ Criado:{{formatData(repo.created_at)}} Atualidao:{{formatData(repo.updated_at)}} -
-
-
+
+
+
@for (language of repo.langs; track $index) { -
-
+ + }
-
+
@for (lan of repo.langs; track $index) {
- + {{lan.name}}
} @@ -36,14 +36,23 @@
+

{{ repo.description }}

-
- - - +
+
+

este site

+ +
+
+ + + +
diff --git a/src/app/components/repos/repos.component.scss b/src/app/components/repos/repos.component.scss index 3b71d4b..70ed4dc 100644 --- a/src/app/components/repos/repos.component.scss +++ b/src/app/components/repos/repos.component.scss @@ -52,7 +52,6 @@ .top-info { display: flex; - flex-direction: row; align-items: center; justify-content: space-between; padding: .5rem 0 1rem 0; @@ -64,8 +63,6 @@ img.icon { width: 1.5rem; } - - } .body { @@ -93,16 +90,17 @@ padding: .25rem 0; } - a.icon { - color: var(--text-color); - border: 1px solid var(--surface-border); - padding: .1rem .25rem; - border-radius: 5px; - background-color: transparent; - backdrop-filter: blur(50px); + .footer { + + .icon { + color: var(--text-color); + border: 1px solid var(--surface-border); + padding: .1rem .25rem; + border-radius: 5px; - i { - font-size: larger; + i { + font-size: medium; + } } } } diff --git a/src/app/components/repos/repos.component.ts b/src/app/components/repos/repos.component.ts index 8be0e2b..9ec3039 100644 --- a/src/app/components/repos/repos.component.ts +++ b/src/app/components/repos/repos.component.ts @@ -3,19 +3,20 @@ import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core'; import { CarouselModule } from 'primeng/carousel'; import { DataViewModule } from 'primeng/dataview'; import { TagModule } from 'primeng/tag'; +import { environment } from '../../../env/env'; import { repos } from '../../models/dados'; import { GithubService } from '../../services/github.service'; import { fIsoDate } from '../../utils/data'; - @Component({ selector: 'app-repos', standalone: true, imports: [ - TagModule, + CarouselModule, DataViewModule, - NgIf, NgClass, - CarouselModule + NgClass, NgIf, + TagModule, ], + templateUrl: './repos.component.html', styleUrl: './repos.component.scss', providers: [GithubService], @@ -24,6 +25,7 @@ import { fIsoDate } from '../../utils/data'; export class ReposComponent implements OnInit { private gitService = inject(GithubService); + isPort = environment.REPO_NAME; skeleton = { card: false, card_img: false @@ -42,35 +44,54 @@ export class ReposComponent implements OnInit { { breakpoint: '599px', numVisible: 1, numScroll: 1 } ] - // this.repos = repos.slice(0, 10); - // console.log(this.repos.length) this.load(); - // this.repos.forEach((r) => { - // const l = r.lang; - // r.langs = this.getLan(l); - // }) + // this.loadLocal(); + } + + loadLocal() { + const rep = repos.slice(0, 10); + this.repos.forEach((r) => { + const l = r.lang; + r.langs = this.getLan(l); + }) + const index = rep.findIndex(i => i.name === this.isPort); + if (index !== -1) { + rep.unshift(rep.splice(index, 1)[0]); + } + this.repos = rep; } load() { - this.gitService.getAll().subscribe((repos) => { + this.gitService.getAll().subscribe(async (repos) => { if (repos) { - const res = repos.slice(0, 10); + const res = repos.filter((obj: { description: string | null; }) => obj.description !== null && obj.description !== ''); + console.log(res.length); + res.forEach(async (r: any) => { const img = await this.gitService.getImg(r?.html_url).toPromise(); r.img = img; + const languages = await this.gitService.getLangs(r?.full_name).toPromise(); r.langs = this.getLan(languages); }); + if (typeof this.isPort === 'string') { + const index = res.findIndex((i: { name: string; }) => i.name === this.isPort); + + if (index !== -1) { + res.unshift(res.splice(index, 1)[0]); + } + } + this.repos = res; } - }) + }); } + + formatData(data: Date) { return fIsoDate(new Date(data)); } - - getLan(data: any): any { const total: any = Object.values(data).reduce((acc: any, value: any) => acc + value, 0); console.log(74.21 + 22.05 + 3.75); @@ -83,8 +104,12 @@ export class ReposComponent implements OnInit { return obj; } - getRandomColor(): string { - return `#${Math.floor(Math.random() * 16777215).toString(16)}`; + let color = ''; + do { + color = `#${Math.floor(Math.random() * 16777215).toString(16)}`; + } while (color === '#FFFFFF' || color === '#000000'); + return color; } + } diff --git a/src/app/models/dados.ts b/src/app/models/dados.ts index 88308e9..86b5886 100644 --- a/src/app/models/dados.ts +++ b/src/app/models/dados.ts @@ -12,7 +12,7 @@ export const repos = [ }, { - name: 'Obj test 2', + name: 'Portfolio-app', html_url: 'url 2', description: 'kjsdhjksndjk 2', language: 'Java', @@ -48,7 +48,7 @@ export const repos = [ }, { - name: 'Obj test 2', + name: "portfolio-app", html_url: 'url 2', description: 'kjsdhjksndjk 2', language: 'Java', diff --git a/src/env/env.ts b/src/env/env.ts index a6f7121..4e256d3 100644 --- a/src/env/env.ts +++ b/src/env/env.ts @@ -2,5 +2,6 @@ export const environment = { production: false, API_GITHUB: 'https://api.github.com', USER_GITHUB: 'tauisilva', + REPO_NAME: 'Portfolio-app', FILE_INFOS: 'infos.json' } \ No newline at end of file