ajustes cards repos

tauisilva · Mar 4, 2024 · 73929ed · 73929ed
1 parent cc924cc
commit 73929ed
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 44 deletions.
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
@@ -1,8 +1,8 @@
-<section class="w-full navbar flex justify-content-between px-2">
+<section class="navbar px-2">
   <p-tag severity="danger" value="Aplicação em desenvolvimento, erros podem ocorrer! 😊"></p-tag>
   <section>
     <p-menu #menu [model]="items" [popup]="true"></p-menu>
-    <p-button severity="secondary" (click)="menu.toggle($event)" [icon]="getIcon()" [raised]="true" [rounded]="true"
-      [text]="true"></p-button>
+    <p-button size="small" severity="secondary" (click)="menu.toggle($event)" [icon]="getIcon()" [raised]="true"
+      [rounded]="true" [text]="true"></p-button>
   </section>
 </section>
diff --git a/src/app/components/navbar/navbar.component.scss b/src/app/components/navbar/navbar.component.scss
@@ -0,0 +1,6 @@
+.navbar {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
diff --git a/src/app/components/repos/repos.component.html b/src/app/components/repos/repos.component.html
@@ -4,46 +4,48 @@
       <p class="pl-3 font-bold">Github - Repositórios</p>
     </ng-template>
     <ng-template let-repo pTemplate="item">
-      <div class="border-1 h-full surface-border border-round m-2 text-center px-3">
-        <section class="w-full top-info">
-          <p class="font-semibold">{{ repo.name }}</p>
-          <img src="assets/logos/angular17.png" class="icon">
-        </section>
-        <img [src]="repo.img" alt="" class="w-full shadow-2 border-round" loading="eager">
-        <div class="w-full body h-full">
-          <div class="flex justify-content-between">
-            <span class="date">Criado:<strong>{{formatData(repo.created_at)}}</strong></span>
-            <span class="date">Atualidao:<strong>{{formatData(repo.updated_at)}}</strong> </span>
-          </div>
-          <div class="w-full h-auto gap-1 flex">
-            <section class="w-full h-full">
-              <section class="w-full h-full flex border-round overflow-hidden">
-                @for (language of repo.langs; track $index) {
-                <div class="bar" [style.width]="language.percentage + '%'" [style.backgroundColor]="language.color">
-                </div>
-                }
-              </section>
-              <section class="w-full">
-                <section class="flex justify-content-between">
-                  @for (lan of repo.langs; track $index) {
-                  <div class="lang">
-                    <span class="bol" [style.backgroundColor]="lan.color"></span>
-                    <span class="txt">{{lan.name}}</span>
+      <div class="p-1 h-full">
+        <div class="border-1 h-full surface-border border-round text-center px-3">
+          <section class="w-full top-info">
+            <p class="font-semibold">{{ repo.name }}</p>
+            <img src="assets/logos/angular17.png" class="icon">
+          </section>
+          <img [src]="repo.img" alt="" class="w-full shadow-2 border-round" loading="eager">
+          <div class="w-full body h-full">
+            <div class="flex justify-content-between">
+              <span class="date">Criado:<strong>{{formatData(repo.created_at)}}</strong></span>
+              <span class="date">Atualidao:<strong>{{formatData(repo.updated_at)}}</strong> </span>
+            </div>
+            <div class="w-full h-auto gap-1 flex">
+              <section class="w-full h-full">
+                <section class="w-full h-full flex border-round overflow-hidden">
+                  @for (language of repo.langs; track $index) {
+                  <div class="bar" [style.width]="language.percentage + '%'" [style.backgroundColor]="language.color">
                   </div>
                   }
                 </section>
+                <section class="w-full">
+                  <section class="flex justify-content-between">
+                    @for (lan of repo.langs; track $index) {
+                    <div class="lang">
+                      <span class="bol" [style.backgroundColor]="lan.color"></span>
+                      <span class="txt">{{lan.name}}</span>
+                    </div>
+                    }
+                  </section>
+                </section>
               </section>
+              <p-tag *ngIf="repo?.language" severity="success" [value]="repo?.language"></p-tag>
+            </div>
+            <section class="w-full text-left h-3rem">
+              <p class="description">{{ repo.description }}</p>
+            </section>
+            <section class="flex py-1 gap-2 justify-content-end">
+              <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-github"></i></a>
+              <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-eye"></i></a>
+              <a class="icon" [href]="repo.html_url" target="_blank"><i class="bi bi-info"></i></a>
             </section>
-            <p-tag *ngIf="repo?.language" severity="success" [value]="repo?.language"></p-tag>
           </div>
-          <section class="w-full text-left h-3rem">
-            <p class="description">{{ repo.description }}</p>
-          </section>
-          <section class="flex gap-2 justify-content-end">
-            <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-github"></i></a>
-            <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-eye"></i></a>
-            <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-info"></i></a>
-          </section>
         </div>
       </div>
     </ng-template>

diff --git a/src/app/components/repos/repos.component.scss b/src/app/components/repos/repos.component.scss
@@ -95,6 +95,11 @@
 
     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);
 
       i {
         font-size: larger;
@@ -129,4 +134,10 @@
 
 .bar {
   height: .5rem;
+}
+
+.bg-icons {
+  background-color: #f8f9fa;
+  background-image: radial-gradient(circle, #dee2e6 1px, rgba(0, 0, 0, 0) 1px);
+  background-size: 1rem 1rem;
 }
diff --git a/src/app/components/repos/repos.component.ts b/src/app/components/repos/repos.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { CarouselModule } from 'primeng/carousel';
 import { DataViewModule } from 'primeng/dataview';
 import { TagModule } from 'primeng/tag';
+import { repos } from '../../models/dados';
 import { GithubService } from '../../services/github.service';
 import { fIsoDate } from '../../utils/data';
 
@@ -32,16 +33,17 @@ export class ReposComponent implements OnInit {
 
   ngOnInit(): void {
     this.respOptions = [
-      { breakpoint: '2559px', numVisible: 5, numScroll: 1 },
-      { breakpoint: '1919px', numVisible: 5, numScroll: 1 },
-      { breakpoint: '1439px', numVisible: 3, numScroll: 1 },
-      { breakpoint: '1366px', numVisible: 3, numScroll: 1 },
-      { breakpoint: '1199px', numVisible: 2, numScroll: 1 },
-      { breakpoint: '991px', numVisible: 2, numScroll: 1 },
+      { breakpoint: '2559px', numVisible: 5, numScroll: 5 },
+      { breakpoint: '1919px', numVisible: 5, numScroll: 5 },
+      { breakpoint: '1439px', numVisible: 3, numScroll: 3 },
+      { breakpoint: '1366px', numVisible: 3, numScroll: 3 },
+      { breakpoint: '1199px', numVisible: 2, numScroll: 2 },
+      { breakpoint: '991px', numVisible: 2, numScroll: 2 },
       { breakpoint: '599px', numVisible: 1, numScroll: 1 }
 
     ]
-    // this.repos = repos;
+    // this.repos = repos.slice(0, 10);
+    // console.log(this.repos.length)
     this.load();
     // this.repos.forEach((r) => {
     //   const l = r.lang;