mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
home page
This commit is contained in:
Betteloni
parent
dd1b2763d8
commit
5608fa4184
18 changed files with 546 additions and 103 deletions
23
src/app/public/home/banner/banner.component.html
Normal file
23
src/app/public/home/banner/banner.component.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<mdb-carousel [indicators]="true" [animation]="'fade'">
|
||||
<mdb-carousel-item>
|
||||
<img
|
||||
src="https://assets-portal-cms.olx.com.br/1576x300_38126a593d.webp"
|
||||
class="d-block w-100"
|
||||
alt="..."
|
||||
/>
|
||||
</mdb-carousel-item>
|
||||
<mdb-carousel-item>
|
||||
<img
|
||||
src="https://assets-portal-cms.olx.com.br/1576x300_267d64821e.webp"
|
||||
class="d-block w-100"
|
||||
alt="..."
|
||||
/>
|
||||
</mdb-carousel-item>
|
||||
<mdb-carousel-item>
|
||||
<img
|
||||
src="https://assets-portal-cms.olx.com.br/1576x300_cc8d61d4ca.webp"
|
||||
class="d-block w-100"
|
||||
alt="..."
|
||||
/>
|
||||
</mdb-carousel-item>
|
||||
</mdb-carousel>
|
||||
20
src/app/public/home/banner/banner.component.scss
Normal file
20
src/app/public/home/banner/banner.component.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.solar-card nb-card-header {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
ngx-traffic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mdb-carousel-item {
|
||||
height: 320px;
|
||||
}
|
||||
30
src/app/public/home/banner/banner.component.ts
Normal file
30
src/app/public/home/banner/banner.component.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import {Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Banner } from '../../../admin/banner/banner.model';
|
||||
|
||||
interface CardSettings {
|
||||
title: string;
|
||||
iconClass: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-home-banner',
|
||||
styleUrls: ['./banner.component.scss'],
|
||||
templateUrl: './banner.component.html',
|
||||
})
|
||||
export class BannerHomeComponent implements OnInit, OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
banners: Banner[];
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,35 @@
|
|||
<div class="row">
|
||||
Home
|
||||
<div class="col-12">
|
||||
<ngx-home-banner></ngx-home-banner>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="category">
|
||||
<a href="" *ngFor="let category of categories">
|
||||
<div class="text-container">
|
||||
<nb-icon [icon]="category.icon" pack="eva"></nb-icon>
|
||||
<span class="title">{{category.name}}</span>
|
||||
<i class="line"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-12 ad-row">
|
||||
<div class="ad-container">
|
||||
<div class="ad"><p>Publicidade</p></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="d-flex flex-col">
|
||||
<h2>Anúncios patrocinados</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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../@theme/styles/themes';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import '@nebular/theme/styles/global/breakpoints';
|
||||
@import "../../@theme/styles/themes";
|
||||
@import "bootstrap/scss/mixins/breakpoints";
|
||||
@import "@nebular/theme/styles/global/breakpoints";
|
||||
|
||||
@include nb-install-component() {
|
||||
.solar-card nb-card-header {
|
||||
|
|
@ -14,3 +14,145 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
mdb-carousel-item {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.row .col-12 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.category
|
||||
[_nghost-pwx-c109]
|
||||
.settings-column[_ngcontent-pwx-c109]
|
||||
ngd-page-tabs[_ngcontent-pwx-c109] {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
-webkit-flex-wrap: wrap;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
min-width: 120px;
|
||||
height: 7.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
color: #8994a3;
|
||||
margin-bottom: 1rem;
|
||||
background: white;
|
||||
color: #000000e0;
|
||||
box-shadow: 0 8px 20px #dae0eb99;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.category a {
|
||||
color: #36f;
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.category a .text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category a nb-icon {
|
||||
font-size: 1.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.category nb-icon {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.category a .title {
|
||||
padding-bottom: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category a .line {
|
||||
display: none;
|
||||
height: 0.1875rem;
|
||||
width: 60%;
|
||||
background: #3366ff;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
.category a:hover .line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ad-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ad-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 970px;
|
||||
height: 90px;
|
||||
margin: 24px 12px;
|
||||
border: 1px gray;
|
||||
}
|
||||
|
||||
.ad {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
|
||||
.ad p {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-col {
|
||||
flex: 1 0 calc(16.66% - 1rem);
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(16.66% - 1rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(20% - 1rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 840px) {
|
||||
.card-col {
|
||||
flex: 0 0 calc(16.66% - 1rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import {Component, OnDestroy} from '@angular/core';
|
|||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators' ;
|
||||
import { SolarData } from '../../@core/data/solar';
|
||||
import { Banner } from '../../admin/banner/banner.model';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Category } from '../../admin/category/category.model';
|
||||
import { Product } from '../../admin/product/product';
|
||||
|
||||
interface CardSettings {
|
||||
title: string;
|
||||
|
|
@ -15,85 +19,108 @@ interface CardSettings {
|
|||
templateUrl: './home.component.html',
|
||||
})
|
||||
export class HomeComponent implements OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
banners: Banner[];
|
||||
categories: Category[];
|
||||
products: any[];
|
||||
|
||||
private alive = true;
|
||||
constructor() {}
|
||||
|
||||
solarValue: number;
|
||||
lightCard: CardSettings = {
|
||||
title: 'Light',
|
||||
iconClass: 'nb-lightbulb',
|
||||
type: 'primary',
|
||||
};
|
||||
rollerShadesCard: CardSettings = {
|
||||
title: 'Roller Shades',
|
||||
iconClass: 'nb-roller-shades',
|
||||
type: 'success',
|
||||
};
|
||||
wirelessAudioCard: CardSettings = {
|
||||
title: 'Wireless Audio',
|
||||
iconClass: 'nb-audio',
|
||||
type: 'info',
|
||||
};
|
||||
coffeeMakerCard: CardSettings = {
|
||||
title: 'Coffee Maker',
|
||||
iconClass: 'nb-coffee-maker',
|
||||
type: 'warning',
|
||||
};
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
|
||||
statusCards: string;
|
||||
|
||||
commonStatusCardsSet: CardSettings[] = [
|
||||
this.lightCard,
|
||||
this.rollerShadesCard,
|
||||
this.wirelessAudioCard,
|
||||
this.coffeeMakerCard,
|
||||
];
|
||||
|
||||
statusCardsByThemes: {
|
||||
default: CardSettings[];
|
||||
cosmic: CardSettings[];
|
||||
corporate: CardSettings[];
|
||||
dark: CardSettings[];
|
||||
} = {
|
||||
default: this.commonStatusCardsSet,
|
||||
cosmic: this.commonStatusCardsSet,
|
||||
corporate: [
|
||||
this.categories = [
|
||||
{
|
||||
...this.lightCard,
|
||||
type: 'warning',
|
||||
},
|
||||
{
|
||||
...this.rollerShadesCard,
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
...this.wirelessAudioCard,
|
||||
type: 'danger',
|
||||
},
|
||||
{
|
||||
...this.coffeeMakerCard,
|
||||
type: 'info',
|
||||
},
|
||||
],
|
||||
dark: this.commonStatusCardsSet,
|
||||
};
|
||||
"name": "Nutrientes",
|
||||
"id": "Nutrientes",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"name": "Iluminação",
|
||||
"id": "Decoração",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "bulb-outline"
|
||||
},
|
||||
{
|
||||
"name": "Hidroponia",
|
||||
"id": "Hidroponia",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "droplet-outline"
|
||||
},
|
||||
{
|
||||
"name": "Irrigação",
|
||||
"id": "Irrigação",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"name": "Colheita",
|
||||
"id": "Colheita",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"name": "Pragas",
|
||||
"id": "Pragas",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"name": "Potes e Vasos",
|
||||
"id": "Potes e Vasos",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"name": "Substratos",
|
||||
"id": "Substratos",
|
||||
"updatedAt": new Date(),
|
||||
"createdAt": new Date(),
|
||||
"icon": "arrow-ios-back-outline"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
]
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private solarService: SolarData) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.statusCards = this.statusCardsByThemes[theme.name];
|
||||
});
|
||||
|
||||
this.solarService.getSolarData()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((data) => {
|
||||
this.solarValue = data;
|
||||
});
|
||||
this.products = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
|
|
@ -15,6 +15,9 @@ import { NgxEchartsModule } from 'ngx-echarts';
|
|||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { HomeComponent } from './home.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
|
||||
import { BannerHomeComponent } from './banner/banner.component';
|
||||
import { ProductHomeComponent } from './product/product.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -31,9 +34,13 @@ import { FormsModule } from '@angular/forms';
|
|||
NbIconModule,
|
||||
NbButtonModule,
|
||||
NgxEchartsModule,
|
||||
MdbCarouselModule
|
||||
],
|
||||
declarations: [
|
||||
HomeComponent
|
||||
HomeComponent,
|
||||
BannerHomeComponent,
|
||||
ProductHomeComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class HomeModule { }
|
||||
|
|
|
|||
23
src/app/public/home/product/product.component.html
Normal file
23
src/app/public/home/product/product.component.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<nb-card>
|
||||
<nb-card-header class="card-img-top">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="https://img.olx.com.br/images/89/890461810585731.webp" />
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<span class="badge">Destaque</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h5 class="card-title">Bioledz 38400 - 800 watts</h5>
|
||||
<p class="card-text">R$ 3.475,99</p>
|
||||
</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>
|
||||
75
src/app/public/home/product/product.component.scss
Normal file
75
src/app/public/home/product/product.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;
|
||||
}
|
||||
24
src/app/public/home/product/product.component.ts
Normal file
24
src/app/public/home/product/product.component.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Product } from '../../../admin/product/product';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-home-product',
|
||||
styleUrls: ['./product.component.scss'],
|
||||
templateUrl: './product.component.html',
|
||||
})
|
||||
export class ProductHomeComponent implements OnInit, OnDestroy {
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
@Input() product: Product;
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log('init');
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue