Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-21 01:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: layout & form

Browse source
This commit is contained in:
Dmitry Nehaychik 2019-06-13 20:22:22 +03:00
parent da3cd140f5
commit da8bcf7b32
26 changed files with 877 additions and 671 deletions
Download patch file Download diff file Expand all files Collapse all files

876
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -64,6 +64,7 @@
"ng2-completer": "2.0.8", "ng2-completer": "2.0.8",
"ng2-smart-table": "1.3.5", "ng2-smart-table": "1.3.5",
"ngx-echarts": "^4.0.1", "ngx-echarts": "^4.0.1",
"node-sass": "^4.12.0",
"normalize.css": "6.0.0", "normalize.css": "6.0.0",
"pace-js": "1.0.2", "pace-js": "1.0.2",
"roboto-fontface": "0.8.0", "roboto-fontface": "0.8.0",

22
src/app/@theme/components/header/header.component.html
View file

@ -1,8 +1,6 @@
<div class="header-container" <div class="header-container">
[class.left]="position === 'normal'"
[class.right]="position === 'inverse'">
<div class="logo-container"> <div class="logo-container">
<a (click)="toggleSidebar()" href="#" class="navigation"> <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
<nb-icon icon="menu-2-outline"></nb-icon> <nb-icon icon="menu-2-outline"></nb-icon>
</a> </a>
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a> <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
@ -13,17 +11,15 @@
</div> </div>
<div class="header-container"> <div class="header-container">
<nb-actions <nb-actions size="small">
size="small"
[class.right]="position === 'normal'"
[class.left]="position === 'inverse'">
<nb-action *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
<nb-action class="control-item" icon="bell-outline"></nb-action>
<nb-action class="control-item" icon="email-outline"></nb-action>
<nb-action class="control-item"> <nb-action class="control-item">
<nb-search type="rotate-layout"></nb-search> <nb-search type="rotate-layout"></nb-search>
</nb-action> </nb-action>
<nb-action class="control-item" icon="email-outline"></nb-action>
<nb-action class="control-item" icon="bell-outline"></nb-action>
<nb-action *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
</nb-actions> </nb-actions>
</div> </div>

161
src/app/@theme/components/header/header.component.scss
View file

@ -1,7 +1,5 @@
@import '../../styles/themes'; @import '../../styles/themes';
//@import '~bootstrap/scss/mixins/breakpoints';
//@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { @include nb-install-component() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -43,13 +41,13 @@
align-items: center; align-items: center;
width: auto; width: auto;
.navigation { .sidebar-toggle {
@include nb-ltr(padding-right, 1.25rem); @include nb-ltr(padding-right, 1.25rem);
@include nb-rtl(padding-left, 1.25rem); @include nb-rtl(padding-left, 1.25rem);
text-decoration: none; text-decoration: none;
color: nb-theme(text-hint-color);
nb-icon { nb-icon {
font-size: 2.5rem; font-size: 1.75rem;
} }
} }
@ -62,155 +60,4 @@
text-decoration: none; text-decoration: none;
} }
} }
//
// @include nb-for-theme(corporate) {
// $menu-action-separator-color: #3f4550;
//
// nb-action {
// @include nb-ltr(border-left-color, $menu-action-separator-color);
// @include nb-rtl(border-right-color, $menu-action-separator-color);
// }
//
// .header-container .logo {
// @include nb-ltr(border, none);
// @include nb-rtl(border, none);
// }
//
// .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
// color: nb-theme(color-white);
// background: transparent;
// }
// }
//
// ngx-layout-direction-switcher {
// margin: 0 1.5rem;
// }
//
// ngx-theme-switcher {
// margin: nb-theme(layout-padding);
// margin-top: 0;
// margin-bottom: 0;
// }
//
// @include media-breakpoint-down(xl) {
// ngx-layout-direction-switcher {
// display: none;
// }
// }
//
// .toggle-settings ::ng-deep a {
// display: block;
// text-decoration: none;
// line-height: 1;
//
// i {
// color: nb-theme(color-fg-highlight);
// font-size: 2.25rem;
// border-radius: 50%;
// position: relative;
// animation-name: pulse-light;
//
// &::after {
// content: ' ';
// // hack to be able to set border-radius
// background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
// border-radius: 50%;
// pointer-events: none;
//
// position: absolute;
// top: 52.3%;
// left: 50%;
// transform: translate(-50%, -50%);
// width: 13%;
// height: 13%;
//
// animation: 3s linear infinite pulse;
//
// @include nb-for-theme(default) {
// animation-name: pulse-light;
// }
// }
// }
// }
//
// @include keyframes(pulse) {
// 0% {
// //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
// }
// 20% {
// //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
// }
// 100% {
// //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
// }
// }
//
// @include keyframes(pulse-light) {
// 0% {
// box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
// }
// 20% {
// box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
// }
// 100% {
// box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
// }
// }
//
// @include media-breakpoint-down(md) {
//
// nb-action:not(.toggle-settings) {
// border: none;
// }
//
// .control-item {
// display: none;
// }
//
// .toggle-settings {
// padding: 0;
// }
//
// ngx-layout-direction-switcher {
// display: none;
// }
//
// ngx-theme-switcher {
// margin: 0 0.5rem;
// }
// }
//
// @include media-breakpoint-down(sm) {
//
// nb-user ::ng-deep .user-name {
// display: none;
// }
// }
//
// @include media-breakpoint-down(is) {
//
// .header-container {
// .logo {
// font-size: 1.25rem;
// }
// }
//
// .toggle-settings {
// display: none;
// }
//
// ngx-theme-switcher {
// display: none;
// }
//
// nb-action:not(.toggle-settings) {
// padding: 0;
// }
// }
//
// @include media-breakpoint-down(xs) {
// .right ::ng-deep {
// display: none;
// }
// }
} }

4
src/app/@theme/components/header/header.component.ts
View file

@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme'; import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
import { UserData } from '../../../@core/data/users'; import { UserData } from '../../../@core/data/users';
@ -11,8 +11,6 @@ import { LayoutService } from '../../../@core/utils';
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
@Input() position = 'normal';
user: any; user: any;
themes = [ themes = [

3
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -1,6 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
// TODO: move layouts into the framework
@Component({ @Component({
selector: 'ngx-one-column-layout', selector: 'ngx-one-column-layout',
styleUrls: ['./one-column.layout.scss'], styleUrls: ['./one-column.layout.scss'],
@ -11,8 +10,6 @@ import { Component } from '@angular/core';
</nb-layout-header> </nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<nb-sidebar-header>
</nb-sidebar-header>
<ng-content select="nb-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nb-sidebar> </nb-sidebar>

1
src/app/@theme/layouts/three-columns/three-columns.layout.ts
View file

@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators'; import { takeWhile } from 'rxjs/operators';
// TODO: move layouts into the framework
@Component({ @Component({
selector: 'ngx-three-columns-layout', selector: 'ngx-three-columns-layout',
styleUrls: ['./three-columns.layout.scss'], styleUrls: ['./three-columns.layout.scss'],

2
src/app/@theme/styles/themes.scss
View file

@ -4,7 +4,7 @@
@import '~@nebular/theme/styles/themes'; @import '~@nebular/theme/styles/themes';
// which themes you what to enable (empty to enable all) // which themes you what to enable (empty to enable all)
$nb-enabled-themes: (default); //$nb-enabled-themes: (default, dark, cos);
$nb-themes: nb-register-theme(( $nb-themes: nb-register-theme((
// app wise variables for each theme // app wise variables for each theme

2
src/app/pages/dashboard/rooms/player/player.component.scss
View file

@ -34,7 +34,7 @@
padding: nb-theme(card-padding); padding: nb-theme(card-padding);
.cover { .cover {
border-radius: nb-theme(radius) / 2; //border-radius: nb-theme(radius) / 2;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;

38
src/app/pages/forms/buttons/buttons.module.ts
View file

@ -1,38 +0,0 @@
import { NgModule } from '@angular/core';
import { ThemeModule } from '../../../@theme/theme.module';
import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
import { ButtonsComponent } from './buttons.component';
import { ActionGroupsComponent } from './action-groups/action-groups.component';
import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component';
import { OutlineButtonsComponent } from './outline-buttons/outline-buttons.component';
import { ButtonElementsComponent } from './button-elements/button-elements.component';
const components = [
ButtonsComponent,
DefaultButtonsComponent,
OutlineButtonsComponent,
HeroButtonComponent,
ShapeButtonsComponent,
SizeButtonsComponent,
ActionGroupsComponent,
LabeledActionsGroupComponent,
ButtonElementsComponent,
];
@NgModule({
imports: [
ThemeModule,
],
exports: [
...components,
],
declarations: [
...components,
],
providers: [],
})
export class ButtonsModule { }

34
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -17,9 +17,6 @@
<div class="input-group"> <div class="input-group">
<input type="password" nbInput fullWidth placeholder="Password"> <input type="password" nbInput fullWidth placeholder="Password">
</div> </div>
<div class="input-group has-person-icon">
<input type="text" placeholder="With Icon" class="form-control"/>
</div>
<div class="input-group"> <div class="input-group">
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border"> <input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
</div> </div>
@ -49,6 +46,19 @@
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card>
<nb-card-header>Select</nb-card-header>
<nb-card-body>
<div class="form-group">
<nb-select selected="1">
<nb-option value="1">Option 1</nb-option>
<nb-option value="2">Option 2</nb-option>
</nb-select>
</div>
</nb-card-body>
</nb-card>
<nb-card> <nb-card>
<nb-card-header>Validation States</nb-card-header> <nb-card-header>Validation States</nb-card-header>
<nb-card-body> <nb-card-body>
@ -56,18 +66,18 @@
<input type="text" nbInput fullWidth status="info" placeholder="Input with Info"> <input type="text" nbInput fullWidth status="info" placeholder="Input with Info">
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" nbInput fullWidth status="success" placeholder="Input with Warning"> <input type="text" nbInput fullWidth status="success" placeholder="Warning Input">
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" nbInput fullWidth status="warning" placeholder="Input with Danger"> <input type="text" nbInput fullWidth status="warning" placeholder="Danger Input">
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" nbInput fullWidth status="danger" placeholder="Input with Danger"> <input type="text" nbInput fullWidth status="danger" placeholder="Danger Input">
</div> </div>
<div class="form-group validation-checkboxes row"> <div class="form-group validation-checkboxes row">
<nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox> <nb-checkbox status="success" class="col-sm-4">Success Checkbox</nb-checkbox>
<nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox> <nb-checkbox status="warning" class="col-sm-4">Warning Checkbox</nb-checkbox>
<nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox> <nb-checkbox status="danger" class="col-sm-4">Danger Checkbox</nb-checkbox>
</div> </div>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
@ -76,11 +86,11 @@
<nb-card-header>Checkboxes & Radios</nb-card-header> <nb-card-header>Checkboxes & Radios</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="row demo-checkboxes-radio"> <div class="row demo-checkboxes-radio">
<div class="demo-checkboxes col-sm-4"> <div class="demo-items col-sm-4">
<nb-checkbox>Checkbox 1</nb-checkbox> <nb-checkbox>Checkbox 1</nb-checkbox>
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox> <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
</div> </div>
<div class="demo-radio col-sm-4"> <div class="demo-items col-sm-4">
<nb-radio-group [(value)]="radioGroupValue"> <nb-radio-group [(value)]="radioGroupValue">
<nb-radio <nb-radio
[value]="'This is value 1'"> [value]="'This is value 1'">
@ -96,7 +106,7 @@
</nb-radio> </nb-radio>
</nb-radio-group> </nb-radio-group>
</div> </div>
<div class="demo-disabled-checkbox-radio col-sm-4"> <div class="demo-items col-sm-4">
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox> <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
<nb-radio-group disabled> <nb-radio-group disabled>
<nb-radio <nb-radio

163
src/app/pages/forms/form-inputs/form-inputs.component.scss
View file

@ -1,130 +1,35 @@
@import '../../../@theme/styles/themes'; nb-card-body {
@import '~bootstrap/scss/mixins/breakpoints'; overflow: visible;
@import '~@nebular/theme/styles/global/breakpoints'; }
@include nb-install-component() { .input-group {
margin-bottom: 1rem;
nb-card-body { }
overflow: visible;
} .validation-checkboxes {
display: flex;
.input-group { justify-content: space-between;
margin-bottom: 1rem; }
}
.demo-items {
.validation-checkboxes { display: flex;
display: flex; flex-direction: column;
justify-content: space-between; margin-bottom: 1rem;
}
.custom-control {
margin-left: 1rem; .demo-checkboxes-radio {
} display: flex;
} justify-content: space-between;
}
.demo-checkboxes {
display: flex; .full-name-inputs {
flex-direction: column; display: flex;
margin-bottom: 1rem; }
}
.dropdown-menu {
.demo-radio { width: auto;
display: flex; }
flex-direction: column;
margin-bottom: 1rem; .form-group label {
} padding: 0 0 0.75rem;
.demo-disabled-checkbox-radio {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.demo-checkboxes-radio {
display: flex;
justify-content: space-between;
}
.demo-rating {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.star {
font-size: 1.5rem;
color: nb-theme(color-fg);
}
.filled {
color: nb-theme(color-fg);
}
// TODO: Replace with the card header styles mixin
.rating-header {
line-height: 2rem;
font-size: 1.25rem;
font-family: nb-theme(font-secondary);
font-weight: nb-theme(font-weight-bolder);
color: nb-theme(color-fg-heading);
}
.current-rate {
font-size: 1.5rem;
@include nb-ltr(padding-left, 1rem);
@include nb-rtl(padding-right, 1rem);
color: nb-theme(color-fg-heading);
}
.full-name-inputs {
display: flex;
}
.input-group.has-person-icon {
position: relative;
.form-control {
padding-left: 3rem;
}
&::before {
content: '\F47D';
font-family: 'Ionicons';
font-size: 2rem;
position: absolute;
z-index: 100;
left: 1rem;
top: 0.25rem;
}
}
.dropdown {
min-width: 7rem;
}
.dropdown-menu {
width: auto;
}
.form-group label {
padding: 0 0 0.75rem;
}
ngb-rating {
outline: none;
}
ngb-rating i {
color: nb-theme(color-success);
@include nb-for-theme(cosmic) {
color: nb-theme(color-primary);
}
}
@include media-breakpoint-down(xs) {
button:not(.btn-icon) {
padding: 0.75rem 1rem;
font-size: 0.75rem;
}
}
} }

91
src/app/pages/forms/form-layouts/form-layouts.component.html
View file

@ -4,13 +4,10 @@
<nb-card-header>Inline form</nb-card-header> <nb-card-header>Inline form</nb-card-header>
<nb-card-body> <nb-card-body>
<form class="form-inline"> <form class="form-inline">
<input type="text" class="form-control full-width" placeholder="Jane Doe"> <input type="text" nbInput fullWidth placeholder="Jane Doe">
<div class="input-group full-width"> <input type="text" nbInput fullWidth placeholder="Email">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" placeholder="Email">
</div>
<nb-checkbox>Remember me</nb-checkbox> <nb-checkbox>Remember me</nb-checkbox>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" nbButton status="primary">Submit</button>
</form> </form>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
@ -24,46 +21,30 @@
<nb-card-body> <nb-card-body>
<form> <form>
<div class="form-group row"> <div class="form-group row">
<label for="inputEmail1" class="col-sm-3 col-form-label">Email</label> <label for="inputEmail1" class="label col-sm-3 col-form-label">Email</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email"> <input type="email" nbInput fullWidth id="inputEmail1" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="inputPassword2" class="col-sm-3 col-form-label">Password</label> <label for="inputPassword2" class="label col-sm-3 col-form-label">Password</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password"> <input type="password" nbInput fullWidth id="inputPassword2" placeholder="Password">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3">Radios</label> <label class="col-sm-3">Radios</label>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="form-check"> <nb-radio-group>
<label class="custom-control custom-radio"> <nb-radio>Option 1</nb-radio>
<input type="radio" class="custom-control-input" name="gridRadios" checked> <nb-radio>Option 2</nb-radio>
<span class="custom-control-indicator"></span> <nb-radio disabled>Disabled Option</nb-radio>
<span class="custom-control-description">Option one is this and that&mdash;be sure to include why it's great</span> </nb-radio-group>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="gridRadios">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Option two can be something else and selecting it will deselect option one</span>
</label>
</div>
<div class="form-check disabled">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="gridRadios" disabled>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Option three is disabled</span>
</label>
</div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-sm-3 col-sm-9"> <div class="offset-sm-3 col-sm-9">
<button type="submit" class="btn btn-primary">Sign in</button> <button type="submit" nbButton status="primary">Sign in</button>
</div> </div>
</div> </div>
</form> </form>
@ -75,15 +56,15 @@
<nb-card-body> <nb-card-body>
<form> <form>
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" placeholder="Recipients"> <input type="text" nbInput fullWidth placeholder="Recipients">
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" placeholder="Subject"> <input type="text" nbInput fullWidth placeholder="Subject">
</div> </div>
<div class="form-group"> <div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea> <textarea nbInput placeholder="Message"></textarea>
</div> </div>
<button type="submit" class="btn btn-success">Send</button> <button type="submit" nbButton status="success">Send</button>
</form> </form>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
@ -95,17 +76,17 @@
<nb-card-body> <nb-card-body>
<form> <form>
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1" class="label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> <input type="email" nbInput fullWidth id="exampleInputEmail1" placeholder="Email">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="exampleInputPassword1">Password</label> <label for="exampleInputPassword1" class="label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" nbInput fullWidth id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="form-group"> <div class="form-group">
<nb-checkbox>Check me out</nb-checkbox> <nb-checkbox>Check me out</nb-checkbox>
</div> </div>
<button type="submit" class="btn btn-danger">Submit</button> <button type="submit" nbButton status="danger">Submit</button>
</form> </form>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
@ -116,32 +97,32 @@
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputFirstName">First Name</label> <label for="inputFirstName" class="label">First Name</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name"> <input type="text" nbInput fullWidth id="inputFirstName" placeholder="First Name">
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputLastName">Last Name</label> <label for="inputLastName" class="label">Last Name</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name"> <input type="text" nbInput fullWidth id="inputLastName" placeholder="Last Name">
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputEmail">Email</label> <label for="inputEmail" class="label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email"> <input type="email" nbInput fullWidth id="inputEmail" placeholder="Email">
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputWebsite">Website</label> <label for="inputWebsite" class="label">Website</label>
<input type="text" class="form-control" id="inputWebsite" placeholder="Website"> <input type="text" nbInput fullWidth id="inputWebsite" placeholder="Website">
</div> </div>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" nbButton>Submit</button>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</div> </div>
@ -154,15 +135,15 @@
<nb-card-body> <nb-card-body>
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="inputEmail3" class="col-sm-3 form-control-label">Email</label> <label for="inputEmail3" class="label col-sm-3 form-control-label">Email</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <input type="email" nbInput fullWidth id="inputEmail3" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="inputPassword3" class="col-sm-3 form-control-label">Password</label> <label for="inputPassword3" class="label col-sm-3 form-control-label">Password</label>
<div class="col-sm-9"> <div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password"> <input type="password" nbInput fullWidth id="inputPassword3" placeholder="Password">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
@ -174,7 +155,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-sm-3 col-sm-9"> <div class="offset-sm-3 col-sm-9">
<button type="submit" class="btn btn-warning">Sign in</button> <button type="submit" nbButton status="warning">Sign in</button>
</div> </div>
</div> </div>
</form> </form>

34
src/app/pages/forms/form-layouts/form-layouts.component.scss
View file

@ -1,21 +1,15 @@
@import '../../../@theme/styles/themes'; nb-checkbox {
margin-bottom: 1rem;
@include nb-install-component() { }
.full-width {
flex: 1; .form-inline [fullWidth] {
min-width: 220px; flex: 1;
} }
nb-checkbox { .form-inline > * {
margin-bottom: 1rem; margin: 0 1.5rem 1.5rem 0;
} }
.form-inline > * { nb-card.inline-form-card nb-card-body {
@include nb-ltr(margin, 0 1.5rem 1.5rem 0); padding-bottom: 0;
@include nb-rtl(margin, 0 0 1.5rem 1.5rem);
}
nb-card.inline-form-card nb-card-body {
padding-bottom: 0;
}
} }

38
src/app/pages/forms/forms.module.ts
View file

@ -1,23 +1,55 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import {
NbActionsModule,
NbButtonModule,
NbCardModule,
NbCheckboxModule, NbDatepickerModule,
NbInputModule,
NbRadioModule, NbSelectModule,
NbUserModule,
} from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module'; import { ThemeModule } from '../../@theme/theme.module';
import { FormsRoutingModule } from './forms-routing.module'; import { FormsRoutingModule } from './forms-routing.module';
import { ButtonsModule } from './buttons/buttons.module';
import { FormsComponent } from './forms.component'; import { FormsComponent } from './forms.component';
import { FormInputsComponent } from './form-inputs/form-inputs.component'; import { FormInputsComponent } from './form-inputs/form-inputs.component';
import { FormLayoutsComponent } from './form-layouts/form-layouts.component'; import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
import { DatepickerComponent } from './datepicker/datepicker.component'; import { DatepickerComponent } from './datepicker/datepicker.component';
import { NbInputModule } from '@nebular/theme'; import { ButtonsComponent } from './buttons/buttons.component';
import { DefaultButtonsComponent } from './buttons/default-buttons/default-buttons.component';
import { OutlineButtonsComponent } from './buttons/outline-buttons/outline-buttons.component';
import { HeroButtonComponent } from './buttons/hero-buttons/hero-buttons.component';
import { ShapeButtonsComponent } from './buttons/shape-buttons/shape-buttons.component';
import { SizeButtonsComponent } from './buttons/size-buttons/size-buttons.component';
import { ActionGroupsComponent } from './buttons/action-groups/action-groups.component';
import { LabeledActionsGroupComponent } from './buttons/labeled-actions-group/labeled-actions-group.component';
import { ButtonElementsComponent } from './buttons/button-elements/button-elements.component';
@NgModule({ @NgModule({
imports: [ imports: [
ThemeModule, ThemeModule,
NbInputModule, NbInputModule,
NbCardModule,
NbButtonModule,
NbActionsModule,
NbUserModule,
NbCheckboxModule,
NbRadioModule,
NbDatepickerModule,
FormsRoutingModule, FormsRoutingModule,
ButtonsModule, NbSelectModule,
], ],
declarations: [ declarations: [
FormsComponent, FormsComponent,
ButtonsComponent,
DefaultButtonsComponent,
OutlineButtonsComponent,
HeroButtonComponent,
ShapeButtonsComponent,
SizeButtonsComponent,
ActionGroupsComponent,
LabeledActionsGroupComponent,
ButtonElementsComponent,
FormInputsComponent, FormInputsComponent,
FormLayoutsComponent, FormLayoutsComponent,
DatepickerComponent, DatepickerComponent,

26
src/app/pages/layout/accordion/accordion.component.scss
View file

@ -1,18 +1,14 @@
@import '../../../../../node_modules/bootstrap/scss/mixins/breakpoints'; @import '~bootstrap/scss/mixins/breakpoints';
@import '../../../../../node_modules/@nebular/theme/styles/global/breakpoints'; @import '~@nebular/theme/styles/global/breakpoints';
@import '../../../@theme/styles/themes'; .accordion-container {
nb-card {
@include nb-install-component() { margin-bottom: 1rem;
.accordion-container { }
nb-card { }
margin-bottom: 1rem;
} @include media-breakpoint-down(md) {
} .accordion-container {
margin-bottom: 3rem;
@include media-breakpoint-down(md) {
.accordion-container {
margin-bottom: 3rem;
}
} }
} }

12
src/app/pages/layout/infinite-list/infinite-list.component.scss
View file

@ -1,11 +1,7 @@
@import '../../../@theme/styles/themes'; .infinite-cards {
nb-card {
@include nb-install-component() { &.own-scroll {
.infinite-cards { height: 50vh;
nb-card {
&.own-scroll {
height: 50vh;
}
} }
} }
} }

2
src/app/pages/layout/infinite-list/infinite-list.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NewsService } from '../services/news.service'; import { NewsService } from '../news.service';
@Component({ @Component({
selector: 'ngx-infinite-list', selector: 'ngx-infinite-list',

6
src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../../@theme/styles/themes'; @import '../../../../@theme/styles/themes';
@include nb-install-component() { :host {
display: block; display: block;
.title-placeholder { .title-placeholder {
@ -18,8 +18,10 @@
height: 1.25rem; height: 1.25rem;
width: 5rem; width: 5rem;
} }
}
@include nb-install-component() {
[class$='placeholder'] { [class$='placeholder'] {
//background: rgba(nb-theme(layout-bg), 0.6); background: nb-theme(background-basic-color-4);
} }
} }

2
src/app/pages/layout/infinite-list/news-post/news-post.component.ts
View file

@ -1,6 +1,6 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { NewsPost } from '../../services/news.service'; import { NewsPost } from '../../news.service';
@Component({ @Component({
selector: 'ngx-news-post', selector: 'ngx-news-post',

2
src/app/pages/layout/layout.module.ts
View file

@ -20,7 +20,7 @@ import { InfiniteListComponent } from './infinite-list/infinite-list.component';
import { NewsPostComponent } from './infinite-list/news-post/news-post.component'; import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component'; import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
import { AccordionComponent } from './accordion/accordion.component'; import { AccordionComponent } from './accordion/accordion.component';
import { NewsService } from './services/news.service'; import { NewsService } from './news.service';
@NgModule({ @NgModule({
imports: [ imports: [

0
src/app/pages/layout/services/news.service.ts → src/app/pages/layout/news.service.ts
View file

14
src/app/pages/layout/stepper/stepper.component.scss
View file

@ -1,12 +1,8 @@
@import '../../../@theme/styles/themes'; :host ::ng-deep nb-stepper .step-content {
text-align: center;
@include nb-install-component() { button {
::ng-deep nb-stepper .step-content { cursor: pointer;
text-align: center; margin: 0.5rem;
button {
cursor: pointer;
margin: 0.5rem;
}
} }
} }

2
src/app/pages/layout/tabs/tabs.component.scss
View file

@ -4,7 +4,7 @@ nb-tabset {
flex-direction: column; flex-direction: column;
} }
::ng-deep ngx-tab1, ::ng-deep ngx-tab2 { :host ::ng-deep ngx-tab1, :host ::ng-deep ngx-tab2 {
display: block; display: block;
padding: 1rem 2rem; padding: 1rem 2rem;
} }

2
src/app/pages/maps/bubble/bubble-map.component.scss
View file

@ -3,7 +3,7 @@
@include nb-install-component() { @include nb-install-component() {
nb-card-body { nb-card-body {
padding: nb-theme(card-padding) 0 0 0; padding-top: 1.25rem;
} }
.echarts { .echarts {

10
src/app/pages/pages-routing.module.ts
View file

@ -23,11 +23,11 @@ const routes: Routes = [{
loadChildren: () => import('./layout/layout.module') loadChildren: () => import('./layout/layout.module')
.then(m => m.LayoutModule), .then(m => m.LayoutModule),
}, },
// { {
// path: 'forms', path: 'forms',
// loadChildren: () => import('./forms/forms.module') loadChildren: () => import('./forms/forms.module')
// .then(m => m.FormsModule), .then(m => m.FormsModule),
// }, },
// { // {
// path: 'ui-features', // path: 'ui-features',
// loadChildren: () => import('./ui-features/ui-features.module') // loadChildren: () => import('./ui-features/ui-features.module')