mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
icones, cores e nova lista de produtos
This commit is contained in:
RBL
parent
1e86ea1949
commit
7d6e86a85b
9 changed files with 214 additions and 77 deletions
|
|
@ -5,13 +5,11 @@ import { Component } from '@angular/core';
|
|||
styleUrls: ['./footer.component.scss'],
|
||||
template: `
|
||||
<span class="created-by">
|
||||
Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
|
||||
</span>
|
||||
© DesapeGrow.Todos os direitos reservados.
|
||||
</span>
|
||||
<div class="socials">
|
||||
<a href="#" target="_blank" class="ion ion-social-github"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-instagram"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-facebook"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-twitter"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-linkedin"></a>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
|
|
|
|||
37
src/app/admin/paidAds/paidAds.ts
Normal file
37
src/app/admin/paidAds/paidAds.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
export class PaidAds {
|
||||
id!: string;
|
||||
userId!: string;
|
||||
categoryId!: string;
|
||||
sub_categoryId!: string;
|
||||
brandId!: string;
|
||||
name!: string;
|
||||
description!: string;
|
||||
conditionId!: string;
|
||||
price!: number;
|
||||
countryId!: string | null;
|
||||
stateId!: string | null;
|
||||
cityId!: string | null;
|
||||
neighbourhoodId!: string | null;
|
||||
zip_code!: string | null;
|
||||
createdAt!: Date;
|
||||
approvedAt!: Date | null;
|
||||
updatedAt!: Date | null;
|
||||
isActive!: boolean;
|
||||
isPromoted!: boolean;
|
||||
viewCount!: number | null;
|
||||
//user?: User;
|
||||
//category?: Category;
|
||||
//sub_category?: SubCategory;
|
||||
//brand?: Brand;
|
||||
//condition?: Condition;
|
||||
//country?: Country | null;
|
||||
//state?: State | null;
|
||||
//city?: City | null;
|
||||
//neighbourhood?: Neighbourhood | null;
|
||||
//favorites?: Array<Favorite>;
|
||||
//comments?: Array<Comment>;
|
||||
//img_urls?: Array<ProductImg>;
|
||||
//report?: Report | null;
|
||||
//shares?: Array<Share>;
|
||||
//_count?: ProductCount;
|
||||
}
|
||||
|
|
@ -7,9 +7,7 @@
|
|||
<div class="category">
|
||||
<a href="" *ngFor="let category of categories">
|
||||
<div class="text-container">
|
||||
<i class="fa" [ngClass]="category.icon"></i>
|
||||
<!--<i class="fa fa-user"></i>-->
|
||||
<!-- <nb-icon [icon]="category.icon" pack="eva"></nb-icon>-->
|
||||
<i class="fa" [ngClass]="category.icon" style="margin-bottom: 10px; font-size: 24px;"></i>
|
||||
<span class="title">{{category.name}}</span>
|
||||
<i class="line"></i>
|
||||
</div>
|
||||
|
|
@ -33,5 +31,28 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-col">
|
||||
<h2>Anúncios testes</h2>
|
||||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let paidAds of paidAds" class="card-col">
|
||||
<ngx-home-product></ngx-home-product>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-col">
|
||||
<h2>Anúncios padrão</h2>
|
||||
</div>
|
||||
<div class="d-flex flex-row flex-nowrap overflow-auto">
|
||||
<div *ngFor="let product of products" class="card-col">
|
||||
<ngx-home-product></ngx-home-product>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ mdb-carousel-item {
|
|||
}
|
||||
|
||||
.category a {
|
||||
color: #36f;
|
||||
color: rgb(16, 126, 2);
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import { Banner } from '../../admin/banner/banner.model';
|
|||
import { Subject } from 'rxjs';
|
||||
import { Category } from '../../admin/category/category.model';
|
||||
import { Product } from '../../admin/product/product';
|
||||
import { PaidAds } from '../../admin/paidAds/paidAds';
|
||||
|
||||
|
||||
interface CardSettings {
|
||||
title: string;
|
||||
|
|
@ -23,6 +25,7 @@ export class HomeComponent implements OnDestroy {
|
|||
banners: Banner[];
|
||||
categories: Category[];
|
||||
products: any[];
|
||||
paidAds: any[];
|
||||
|
||||
constructor() {}
|
||||
|
||||
|
|
@ -30,93 +33,54 @@ export class HomeComponent implements OnDestroy {
|
|||
console.log('init');
|
||||
|
||||
this.categories = [
|
||||
{
|
||||
"name": "Nutrientes",
|
||||
"id": "Nutrientes",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-star"
|
||||
},
|
||||
{
|
||||
"name": "Iluminação",
|
||||
"id": "Decoração",
|
||||
"id": "Iluminacao",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-lightbulb"
|
||||
},
|
||||
{
|
||||
"name": "Hidroponia",
|
||||
"id": "Hidroponia",
|
||||
"name": "Exaustores/Filtros",
|
||||
"id": "Exaustores",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-shower"
|
||||
"icon": "fa-fan"
|
||||
},
|
||||
{
|
||||
"name": "Irrigação",
|
||||
"id": "Irrigação",
|
||||
"name": "Estufas",
|
||||
"id": "Estufas",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-faucet"
|
||||
"icon": "fa-home"
|
||||
},
|
||||
{
|
||||
"name": "Colheita",
|
||||
"id": "Colheita",
|
||||
"name": "Medidores",
|
||||
"id": "Medidores",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-tree"
|
||||
"icon": "fa-thermometer"
|
||||
},
|
||||
{
|
||||
"name": "Pragas",
|
||||
"id": "Pragas",
|
||||
"name": "Acessórios",
|
||||
"id": "Acessorios",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-bug"
|
||||
"icon": "fa-scissors"
|
||||
},
|
||||
{
|
||||
"name": "Potes e Vasos",
|
||||
"id": "Potes e Vasos",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-toilet"
|
||||
},
|
||||
{
|
||||
"name": "Substratos",
|
||||
"id": "Substratos",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-solid fa-sack-xmark"
|
||||
},
|
||||
{
|
||||
"name": "Controle",
|
||||
"id": "Controle",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"name": "Clonagem",
|
||||
"id": "Clonagem",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "copy-outline"
|
||||
},
|
||||
{
|
||||
"name": "Tendas",
|
||||
"id": "Tendas",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"name": "Circulação",
|
||||
"id": "Circulação",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
"name": "Outros",
|
||||
"id": "Outros",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "fa-spider"
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
this.products = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
|
||||
this.products = [1,1,1,1,1,1]
|
||||
|
||||
this.paidAds = [1,1,1]
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
|
|||
17
src/app/public/home/paidAds/paidAds.component.html
Normal file
17
src/app/public/home/paidAds/paidAds.component.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<nb-card>
|
||||
<nb-card-header class="card-img-top">
|
||||
<ul>
|
||||
<li>
|
||||
<img [src]="imageUrl" />
|
||||
</li>
|
||||
</ul>
|
||||
<span class="badge">{{ highlight }}</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h5 class="card-title">{{ title }}</h5>
|
||||
<p class="card-text">{{ price }}</p>
|
||||
</nb-card-body>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li *ngFor="let item of items" class="list-group-item">{{ item }}</li>
|
||||
</ul>
|
||||
</nb-card>
|
||||
75
src/app/public/home/paidAds/paidAds.component.scss
Normal file
75
src/app/public/home/paidAds/paidAds.component.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
.card-img-top {
|
||||
font-size: 1.125rem;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
text-anchor: middle;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-bottom: 0;
|
||||
height: 180px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-img-top ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
overflow: scroll hidden;
|
||||
padding: 0;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.card-img-top ul li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
|
||||
.card-img-top ul li img, .card-img-top ul li svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
overflow-clip-margin: content-box;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.card-img-top span.badge {
|
||||
align-items: center;
|
||||
background: blue;
|
||||
color:white;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
height: 24px;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
max-width: calc(100% - 16px);
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
30
src/app/public/home/paidAds/paidAds.component.ts
Normal file
30
src/app/public/home/paidAds/paidAds.component.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { PaidAds } from '../../../admin/paidAds/paidAds';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-home-product',
|
||||
templateUrl: './paidAds.component.html',
|
||||
styleUrls: ['./paidAds.component.css']
|
||||
})
|
||||
export class paidAdsComponent implements OnInit, OnDestroy{
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
@Input() product: PaidAds;
|
||||
@Input() imageUrl: string = '';
|
||||
@Input() title: string = '';
|
||||
@Input() price: string = '';
|
||||
@Input() highlight: string = ''; // Ex: "Destaque"
|
||||
@Input() items: string[] = []; // Lista de itens
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -14,10 +14,5 @@
|
|||
</nb-card-body>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<nb-card-footer>
|
||||
<a href="#" class="card-link">Ver</a>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
</nb-card>
|
||||
Loading…
Add table
Add a link
Reference in a new issue