mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-23 17:56:09 +01:00
build(dependencies): update bootstrap to 4.0.0-alpha.6
This commit is contained in:
hryb
Lex Zhukov
parent
2d6e848df3
commit
ef2ca9c09c
25 changed files with 227 additions and 172 deletions
|
|
@ -16,19 +16,19 @@
|
|||
|
||||
@media screen and (min-width: 1325px) {
|
||||
.pie-chart-item-container {
|
||||
width: 25%;
|
||||
max-width: 25%;
|
||||
flex: 0 0 25%
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 700px) and (max-width: 1325px) {
|
||||
.pie-chart-item-container {
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
flex: 0 0 50%
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.pie-chart-item-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@
|
|||
}
|
||||
.row {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<div class="col-md-4">
|
||||
<rating [(ngModel)]="_rate1" max="{{_max1}}" stateOn="ion-android-star" stateOff="ion-android-star-outline" class="rating"></rating>
|
||||
<span class="help-block">Rate: {{_rate1}}</span>
|
||||
</div>
|
||||
<div class="raiting-box">
|
||||
<div class="col-md-4">
|
||||
<rating [(ngModel)]="_rate1" max="{{_max1}}" stateOn="ion-android-star" stateOff="ion-android-star-outline"
|
||||
class="rating"></rating>
|
||||
<span class="help-block">Rate: {{_rate1}}</span>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<rating [(ngModel)]="_rate2" max="{{_max2}}" stateOn="ion-ios-heart" stateOff="ion-ios-heart-outline" class="rating"></rating>
|
||||
<span class="help-block">Rate: {{_rate2}}</span>
|
||||
<div class="col-md-8">
|
||||
<rating [(ngModel)]="_rate2" max="{{_max2}}" stateOn="ion-ios-heart" stateOff="ion-ios-heart-outline"
|
||||
class="rating"></rating>
|
||||
<span class="help-block">Rate: {{_rate2}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -74,84 +74,84 @@
|
|||
|
||||
<h4 class="grid-h">Mobile and desktop</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
<div class="col-12 col-md-8">
|
||||
<div>xs-12 .col-md-8</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div class="col-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div class="col-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div class="col-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div class="col-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6</div>
|
||||
<div class="col-6">
|
||||
<div>.col-6</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6</div>
|
||||
<div class="col-6">
|
||||
<div>.col-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Mobile, tablet, desktop</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">
|
||||
<div>.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
<div class="col-12 col-sm-6 col-md-8">
|
||||
<div>.col-12 .col-sm-6 .col-md-8</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>.col-xs-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div>.col-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<div>.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<div>.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
<div class="clearfix hidden-xs-up"></div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<div>.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Column wrapping</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-9">
|
||||
<div>.col-xs-9</div>
|
||||
<div class="col-9">
|
||||
<div>.col-9</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous
|
||||
<div class="col-4">
|
||||
<div>.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous
|
||||
unit.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6<br>Subsequent columns continue along the new line.</div>
|
||||
<div class="col-6">
|
||||
<div>.col-6<br>Subsequent columns continue along the new line.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Responsive column resets</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3 <p>Resize your viewport or check it out on your phone for an example.</p></div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<div>.col-6 .col-sm-3 <p>Resize your viewport or check it out on your phone for an example.</p></div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<div>.col-6 .col-sm-3</div>
|
||||
</div>
|
||||
<div class="clearfix hidden-xs-up"></div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<div>.col-6 .col-sm-3</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<div>.col-6 .col-sm-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
<td><code>.col-xs-</code></td>
|
||||
<td><code>.col-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<ba-card title="Socicon" baCardClass="with-scroll">
|
||||
<div class="row icons-list danger">
|
||||
<div class="col-xs-2" *ngFor="let icon of icons.socicon"><i class="socicon">{{ icon }}</i></div>
|
||||
<div class="col-2" *ngFor="let icon of icons.socicon"><i class="socicon">{{ icon }}</i></div>
|
||||
</div>
|
||||
<a href="http://www.socicon.com/chart.php" target="_blank" class="see-all-icons">See all Socicon icons</a>
|
||||
</ba-card>
|
||||
|
|
@ -30,14 +30,14 @@
|
|||
|
||||
<ba-card title="Ionicons" baCardClass="with-scroll">
|
||||
<div class="row icons-list primary">
|
||||
<div class="col-xs-2" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
|
||||
<div class="col-2" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
|
||||
</div>
|
||||
<a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
|
||||
</ba-card>
|
||||
|
||||
<ba-card title="Font Awesome Icons" baCardClass="with-scroll">
|
||||
<div class="row icons-list success awesomeIcons">
|
||||
<div class="col-xs-2" *ngFor="let icon of icons.fontAwesomeIcons"><i class="fa {{ icon }}"></i></div>
|
||||
<div class="col-2" *ngFor="let icon of icons.fontAwesomeIcons"><i class="fa {{ icon }}"></i></div>
|
||||
</div>
|
||||
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">See all Font Awesome icons</a>
|
||||
</ba-card>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">{{modalHeader}}</h4>
|
||||
<button class="close" aria-label="Close" (click)="closeModal()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{modalContent}}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary confirm-btn" (click)="closeModal()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import "../../../../../theme/sass/conf/conf";
|
||||
|
||||
.modal-buttons .btn {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
color: $dropdown-text;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'add-service-modal',
|
||||
styleUrls: [('./default-modal.component.scss')],
|
||||
templateUrl: './default-modal.component.html'
|
||||
})
|
||||
|
||||
export class DefaultModal implements OnInit {
|
||||
|
||||
modalHeader: string;
|
||||
modalContent: string = `Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit, sed diam nonummy
|
||||
nibh euismod tincidunt ut laoreet dolore magna aliquam
|
||||
erat volutpat. Ut wisi enim ad minim veniam, quis
|
||||
nostrud exerci tation ullamcorper suscipit lobortis
|
||||
nisl ut aliquip ex ea commodo consequat.`;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) {
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
closeModal() {
|
||||
this.activeModal.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
import { ModalDirective } from 'ng2-bootstrap';
|
||||
import { Component } from '@angular/core';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { DefaultModal } from './default-modal/default-modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'modals',
|
||||
|
|
@ -7,13 +8,29 @@ import { ModalDirective } from 'ng2-bootstrap';
|
|||
templateUrl: './modals.html'
|
||||
})
|
||||
export class Modals {
|
||||
@ViewChild('childModal') childModal: ModalDirective;
|
||||
|
||||
showChildModal(): void {
|
||||
this.childModal.show();
|
||||
constructor(private modalService: NgbModal) {}
|
||||
|
||||
lgModalShow() {
|
||||
const activeModal = this.modalService.open(DefaultModal, {size: 'lg'});
|
||||
activeModal.componentInstance.modalHeader = 'Large Modal';
|
||||
}
|
||||
smModalShow(): void {
|
||||
const activeModal = this.modalService.open(DefaultModal, {size: 'sm'});
|
||||
activeModal.componentInstance.modalHeader = 'Small Modal';
|
||||
}
|
||||
|
||||
hideChildModal(): void {
|
||||
this.childModal.hide();
|
||||
staticModalShow() {
|
||||
const activeModal = this.modalService.open(DefaultModal, {size: 'sm',
|
||||
backdrop: 'static'});
|
||||
activeModal.componentInstance.modalHeader = 'Static modal';
|
||||
activeModal.componentInstance.modalContent = `This is static modal, backdrop click
|
||||
will not close it. Click × or confirmation button to close modal.`;
|
||||
}
|
||||
|
||||
childModalShow() {
|
||||
const activeModal = this.modalService.open(DefaultModal, {size: 'sm'});
|
||||
activeModal.componentInstance.modalHeader = 'Child modal';
|
||||
activeModal.componentInstance.modalContent = `I am a child modal, opened from parent component!`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,95 +2,11 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ba-card title="Modals" class="modal-buttons">
|
||||
<button class="btn btn-success" (click)="lgModal.show()">Large modal</button>
|
||||
<button class="btn btn-warning" (click)="smModal.show()">Small modal</button>
|
||||
<button class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
|
||||
<button class="btn btn-danger" (click)="showChildModal()">Open child modal</button>
|
||||
<button class="btn btn-success" (click)="lgModalShow()">Large modal</button>
|
||||
<button class="btn btn-warning" (click)="smModalShow()">Small modal</button>
|
||||
<button class="btn btn-primary" (click)="staticModalShow()">Static modal</button>
|
||||
<button class="btn btn-danger" (click)="childModalShow()">Open child modal</button>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Large modal -->
|
||||
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="close" (click)="lgModal.hide()" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Large modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary confirm-btn" (click)="lgModal.hide()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="close" aria-label="Close" (click)="smModal.hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Small modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary confirm-btn" (click)="smModal.hide()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Static modal -->
|
||||
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="close" aria-label="Close" (click)="staticModal.hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Static modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
This is static modal, backdrop click will not close it.
|
||||
Click <b>×</b> or confirmation button to close modal.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary confirm-btn" (click)="staticModal.hide()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- control modal from parent component -->
|
||||
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="close" aria-label="Close" (click)="hideChildModal()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Child modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
I am a child modal, opened from parent component!
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary confirm-btn" (click)="hideChildModal()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import { LargeButtons } from './components/buttons/components/largeButtons';
|
|||
import { DropdownButtons } from './components/buttons/components/dropdownButtons';
|
||||
import { GroupButtons } from './components/buttons/components/groupButtons';
|
||||
import { IconsService } from './components/icons/icons.service';
|
||||
import { DefaultModal } from './components/modals/default-modal/default-modal.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -46,7 +47,8 @@ import { IconsService } from './components/icons/icons.service';
|
|||
IconButtons,
|
||||
LargeButtons,
|
||||
DropdownButtons,
|
||||
GroupButtons
|
||||
GroupButtons,
|
||||
DefaultModal
|
||||
],
|
||||
providers: [
|
||||
IconsService
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue