mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
feat: demo version additions
This commit is contained in:
Sergey Andrievskiy
parent
0eec54695f
commit
eee950248e
322 changed files with 23456 additions and 188 deletions
|
|
@ -0,0 +1,16 @@
|
|||
<div>
|
||||
<h1>ngx-admin</h1>
|
||||
<p class="description">
|
||||
The most popular admin dashboard based on <strong>Angular 9+</strong> and
|
||||
<a href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_content=landing_main_info&utm_medium=referral&utm_source=ngx_admin" target="_blank">Nebular</a> with
|
||||
<a href="https://eva.design/?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">Eva Design System</a> support.
|
||||
Free and Open Source for personal and commercial purposes.
|
||||
<br>
|
||||
<span class="bundles">
|
||||
Never start from scratch again.
|
||||
<a href="https://store.akveo.com/collections/all?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin%20landing&utm_source=ngx_admin&utm_medium=referral&utm_content=integrate_hero_link" target="_blank">
|
||||
Integrate ready-made solution: ngx-admin with backend.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-admin-info',
|
||||
templateUrl: './default-info.component.html',
|
||||
styleUrls: ['./../main-info-section.component.scss'],
|
||||
})
|
||||
export class DefaultAdminInfoComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<div class="main-img-container">
|
||||
<a href="http://www.akveo.com/ngx-admin/?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section_image"
|
||||
target="_blank"
|
||||
class="hero-image-link">
|
||||
<img *ngIf="breakpoint.width >= breakpoints.md"
|
||||
class="main-img"
|
||||
defaultImage="assets/img/default.png"
|
||||
[lazyLoad]="imageUrl"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="main-inf">
|
||||
<ng-container *ngIf="forMaterialTheme === false">
|
||||
<ngx-default-admin-info></ngx-default-admin-info>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="forMaterialTheme !== false">
|
||||
<ngx-material-admin-info></ngx-material-admin-info>
|
||||
</ng-container>
|
||||
|
||||
<div class="mobile-main-img-container">
|
||||
<img *ngIf="breakpoint.width <= breakpoints.sm" class="main-img" lazyLoad="assets/img/corporate-theme.png" alt="Light theme Dashboard"/>
|
||||
</div>
|
||||
<div class="badges">
|
||||
<iframe class="stars"
|
||||
src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
|
||||
frameborder="0"
|
||||
width="170px"
|
||||
scrolling="0">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="buttons-links">
|
||||
<a class="btn btn-demo"
|
||||
href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section"
|
||||
target="_blank">
|
||||
Demo
|
||||
</a>
|
||||
<button (click)="openDownloadDialog()" class="btn btn-download">
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a href="https://store.akveo.com/pages/ngx-admin-premium?utm_source=ngx_admin&utm_medium=referral&utm_campaign=ngx-admin_premium"
|
||||
target="_blank"
|
||||
class="btn btn-premium btn-green"
|
||||
>
|
||||
ngx-admin Premium
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
$color-active: nb-theme(color-active-fg);
|
||||
|
||||
display: flex;
|
||||
padding: 3.375rem 0;
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.description {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bundles {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-image-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-top: 84%;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(0, #fafafa, transparent);
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.main-img-container {
|
||||
min-width: 60.625rem;
|
||||
min-height: 47.875rem;
|
||||
|
||||
.main-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
width: 44%;
|
||||
margin: 4.625rem 9% 0 6%;
|
||||
}
|
||||
|
||||
ngx-default-admin-info,
|
||||
ngx-material-admin-info {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Helvetica Neue Bold', sans-serif;
|
||||
font-size: 4rem;
|
||||
color: $color-active;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: nb-theme(font-secondary), sans-serif;
|
||||
font-size: nb-theme(font-size-lg);
|
||||
line-height: 1.5;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
color: nb-theme(color-active-fg);;
|
||||
}
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
margin-top: 2.75rem;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.stars {
|
||||
width: 6.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
|
||||
.buttons-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
padding: 1.125rem 0;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.btn-green {
|
||||
color: #ffffff;
|
||||
background-color: nb-theme(color-active-fg);
|
||||
box-shadow: nb-theme(shadow-btn);
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-green-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-green-btn);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: nb-theme(shadow-hover-btn);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: nb-theme(shadow-active-btn);
|
||||
}
|
||||
|
||||
&.btn-download {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-premium {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
.main-img-container {
|
||||
min-width: 50.625rem;
|
||||
min-height: 47.875rem;
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
width: 100%;
|
||||
margin: 4.625rem 5.875rem 0 2.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.main-img-container {
|
||||
min-width: 39rem;
|
||||
min-height: 36.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding-bottom: 6.25rem;
|
||||
|
||||
.main-img-container {
|
||||
min-height: 28.75rem;
|
||||
min-width: 31rem;
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
margin-right: 0.75rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
.description {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.main-img-container {
|
||||
min-height: 21.875rem;
|
||||
min-width: 23rem;
|
||||
width: 75rem;
|
||||
}
|
||||
|
||||
.main-inf {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 0.7rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-top: 1.75rem;
|
||||
flex-direction: column;
|
||||
|
||||
.main-inf {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-main-img-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 1s;
|
||||
opacity: 0;
|
||||
|
||||
&.ng-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: nb-theme(font-size);
|
||||
text-align: justify;
|
||||
margin: 1.75rem 1rem 0;
|
||||
}
|
||||
|
||||
.main-img-container {
|
||||
margin: 1.375rem 0 0;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.badges {
|
||||
margin-top: 2.375rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy, Input } from '@angular/core';
|
||||
import { NbDialogService, NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
import { DownloadFormComponent } from '../../../shared/components/download-form/download-form.component';
|
||||
import { PremiumFormComponent } from '../../../shared/components/premium-form/premium-form.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-main-info',
|
||||
templateUrl: './main-info-section.component.html',
|
||||
styleUrls: ['./main-info-section.component.scss'],
|
||||
})
|
||||
export class MainInfoSectionComponent implements OnDestroy {
|
||||
constructor(themeService: NbThemeService,
|
||||
breakpointService: NbMediaBreakpointsService,
|
||||
private dialogService: NbDialogService) {
|
||||
this.breakpoints = breakpointService.getBreakpointsMap();
|
||||
themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
});
|
||||
}
|
||||
|
||||
private alive = true;
|
||||
public forMaterialTheme: boolean = false;
|
||||
public readonly breakpoints: any;
|
||||
public breakpoint: NbMediaBreakpoint;
|
||||
|
||||
@Input() public set material(value: any) {
|
||||
this.forMaterialTheme = (value);
|
||||
}
|
||||
|
||||
public get imageUrl(): string {
|
||||
return this.forMaterialTheme !== false
|
||||
? 'assets/img/ngx-admin-material.jpg'
|
||||
: 'assets/img/ngx-admin.png';
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
|
||||
openDownloadDialog() {
|
||||
this.dialogService.open(DownloadFormComponent);
|
||||
}
|
||||
|
||||
openDownloadPremiumDialog() {
|
||||
this.dialogService.open(PremiumFormComponent);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div>
|
||||
<h1>material ngx-admin</h1>
|
||||
<p class="description">
|
||||
Material admin theme based on the most popular Angular dashboard template - <a href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20demo&utm_source=ngx_admin_material&utm_medium=referral&utm_content=landing_page"
|
||||
target="_blank">ngx-admin</a>.
|
||||
Included: <strong>Angular 9+</strong>,
|
||||
<a href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info" target="_blank">Nebular</a> and
|
||||
<a href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">Eva Design System</a>.
|
||||
Free for personal and commercial usage.
|
||||
<br>
|
||||
<span class="bundles">
|
||||
Get material ngx-admin integrated with backend technology of your choice.
|
||||
<a href="https://store.akveo.com/?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin_material&utm_medium=referral&utm_content=landing" target="_blank">
|
||||
Check out our store.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { MetadataService } from '../../../../../../src/app/@core/utils/metadata.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-material-admin-info',
|
||||
templateUrl: './material-info.component.html',
|
||||
styleUrls: ['./../main-info-section.component.scss'],
|
||||
})
|
||||
export class MaterialAdminInfoComponent implements OnInit {
|
||||
|
||||
constructor(private metaDataService: MetadataService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.metaDataService.updateTitle('Ngx-admin material dashboard template based on Angular 9+ and Bootstrap 4+');
|
||||
this.metaDataService.updateDescription('Ngx-admin material works perfectly with Angular Material and Nebular.' +
|
||||
' Over 40+ Angular Components and 60+ Usage Examples.Take the best from both!');
|
||||
this.metaDataService.updateKeywords('Ngx-admin material theme, ngx-admin material dashboard, ngx-admin material');
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue