mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-21 18:00:13 +01:00
feat: docs app
This commit is contained in:
Sergey Andrievskiy
parent
62e6828680
commit
165e64eaca
203 changed files with 15928 additions and 6 deletions
|
|
@ -0,0 +1,37 @@
|
|||
<div class="main-img-container">
|
||||
<a href="http://akveo.com/ngx-admin/?utm_source=ngx_admin_landing&utm_medium=main_section_image"
|
||||
target="_blank"
|
||||
class="hero-image-link">
|
||||
<img *ngIf="breakpoint.width >= breakpoints.md"
|
||||
class="main-img"
|
||||
defaultImage="assets/img/default.png"
|
||||
lazyLoad="assets/img/ngx-admin.png"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="main-inf">
|
||||
<h1>ngx-admin</h1>
|
||||
<p class="description">
|
||||
The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and
|
||||
<a href="https://akveo.github.io/nebular?utm_source=ngx_admin_landing&utm_medium=main_section" target="_blank">Nebular</a> with
|
||||
<a href="https://eva.design?utm_source=ngx_admin_landing&utm_medium=main_section">Eva Design System</a> support.
|
||||
Free and Open Source for personal and commercial purposes.
|
||||
</p>
|
||||
<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">
|
||||
<a class="btn btn-installation-guidelines"
|
||||
[routerLink]="'/docs/getting-started/installation-guidelines'">Installation Docs</a>
|
||||
<a class="btn btn-demo"
|
||||
href="http://akveo.com/ngx-admin?utm_source=ngx_admin_landing&utm_medium=main_section"
|
||||
target="_blank">Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
/**
|
||||
* @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 0;
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.description {
|
||||
font-size: 1.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%;
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: nb-theme(font-main), sans-serif;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
padding: 1.125rem 1em;
|
||||
box-shadow: nb-theme(shadow-default);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.btn-demo {
|
||||
margin-left: 1em;
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.btn-demo {
|
||||
padding-left: 3.25rem;
|
||||
padding-right: 3.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
a {
|
||||
display: block;
|
||||
margin: 0 1rem;
|
||||
|
||||
&.btn-demo {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-landing-main-info',
|
||||
templateUrl: './main-info-section.component.html',
|
||||
styleUrls: ['./main-info-section.component.scss'],
|
||||
})
|
||||
export class MainInfoSectionComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue