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

fix(buttons): page responsive

Browse source
This commit is contained in:
Mikhail Hryb 2017-09-11 11:41:24 +03:00 • committed by KostyaDanovsky
parent 9d1697776e
commit 74a4de29fc
7 changed files with 149 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

115
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
View file

@ -30,82 +30,93 @@
</div>
</div>
<div class="example-container toolbars-container">
<div class="pagination-container">
<div class="container-title">Pagination</div>
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel" ngbRadioGroup>
<label class="btn btn-outline-success">
<input type="radio" [value]="1"> 1
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="2"> 2
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="3"> 3
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="4"> 4
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="5"> 5
</label>
<div class="row">
<div class="pagination-container col-xxxl-6">
<div class="container-title">Pagination</div>
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons"
[(ngModel)]="paginationModel" ngbRadioGroup>
<label class="btn btn-outline-success">
<input type="radio" [value]="1"> 1
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="2"> 2
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="3"> 3
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="4"> 4
</label>
<label class="btn btn-outline-success">
<input type="radio" [value]="5"> 5
</label>
</div>
</div>
</div>
<div class="icon-toolbar-container">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-toggle-group" data-toggle="buttons">
<label class="btn btn-success" [class.active]="iconToolbarModel.one">
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.two">
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.three">
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.four">
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.five">
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
</label>
<div class="icon-toolbar-container col-xxxl-6">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-toggle-group" data-toggle="buttons">
<label class="btn btn-success" [class.active]="iconToolbarModel.one">
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.two">
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.three">
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.four">
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label>
<label class="btn btn-success" [class.active]="iconToolbarModel.five">
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
</label>
</div>
</div>
</div>
</div>
<div class="example-container">
<div class="container-title divided-button-group">Divided Button Group</div>
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group" data-toggle="buttons">
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
data-toggle="buttons">
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i class="ion-ios-americanfootball-outline"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
class="ion-ios-americanfootball-outline"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i class="ion-ios-baseball-outline"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
class="ion-ios-baseball-outline"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-ios-football"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i class="ion-ios-tennisball-outline"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
class="ion-ios-tennisball-outline"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="ion-ios-football-outline"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i class="ion-ios-basketball-outline"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
class="ion-ios-basketball-outline"></i>
</label>
</div>
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width">
<label class="btn btn-outline-primary">
<input type="radio" value="left"> Left
</label>
<label class="btn btn-outline-primary">
<input type="radio" value="middle"> Middle
</label>
<label class="btn btn-outline-primary">
<input type="radio" value="right"> Right
</label>
<div class="row">
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
<label class="btn btn-outline-primary">
<input type="radio" value="left"> Left
</label>
<label class="btn btn-outline-primary">
<input type="radio" value="middle"> Middle
</label>
<label class="btn btn-outline-primary">
<input type="radio" value="right"> Right
</label>
</div>
</div>
<div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.left">

18
src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
View file

@ -1,4 +1,6 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@include nb-install-component() {
@ -36,6 +38,7 @@
.divided-button-group {
.btn-divided-checkbox-group {
margin-bottom: 1rem;
flex-wrap: wrap;
}
}
@ -48,4 +51,19 @@
margin-bottom: 1rem;
}
}
.example-container > .btn-divided-checkbox-group {
flex-wrap: wrap;
> label {
flex-basis: 10%;
margin: 0 5px 10px 0;
}
}
@include media-breakpoint-down(sm) {
.btn {
padding: 0.75rem 0.7rem;
}
}
}

8
src/app/pages/ui-features/buttons/buttons.component.html
View file

@ -2,7 +2,7 @@
<div class="col-lg-12">
<ngx-hero-buttons></ngx-hero-buttons>
</div>
<div class="col-lg-6">
<div class="col-md-12 col-lg-12 col-xxxl-6">
<ngx-shape-buttons></ngx-shape-buttons>
<ngx-action-groups></ngx-action-groups>
<nb-card>
@ -11,16 +11,16 @@
</nb-card-body>
</nb-card>
<div class="row">
<div class="col-lg-4">
<div class="col-lg-5">
<ngx-dropdown-buttons></ngx-dropdown-buttons>
<ngx-icon-buttons></ngx-icon-buttons>
</div>
<div class="col-lg-8">
<div class="col-lg-7">
<ngx-button-groups></ngx-button-groups>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="col-md-12 col-lg-12 col-xxxl-6">
<ngx-size-buttons></ngx-size-buttons>
<ngx-default-buttons></ngx-default-buttons>
<ngx-block-level-buttons></ngx-block-level-buttons>

56
src/app/pages/ui-features/buttons/buttons.component.scss
View file

@ -1,5 +1,7 @@
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/buttons';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@include nb-install-component() {
/deep/ {
@ -74,4 +76,58 @@
margin-bottom: 1rem;
}
}
@include media-breakpoint-down(xs) {
ngx-action-groups /deep/ nb-card-body {
flex-direction: column;
align-items: flex-start;
padding: 0.7rem;
nb-action {
padding: 0.6rem;
}
.control-icon, .start-search {
font-size: 1.7rem;
}
.user-container {
font-size: 0.7rem;
}
.user-picture {
height: 1.5rem;
width: 1.5rem;
}
.action-groups-header {
margin: 0 0 10px 10px;
}
}
ngx-labeled-actions-group /deep/ {
nb-action {
font-size: 0.8rem;
}
i {
font-size: 1.9rem !important;
}
}
ngx-labeled-actions-group /deep/ nb-card-body {
padding-left: 0;
padding-right: 0;
}
ngx-default-buttons /deep/ nb-card-header {
flex-direction: column;
margin-bottom: 0.5rem;
}
}
@include media-breakpoint-down(xs) {
}
}

3
src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
View file

@ -11,7 +11,8 @@
}
.dropdown {
width: 30%;
flex-basis: 30%;
min-width: 200px;
}
}

2
src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
View file

@ -2,7 +2,7 @@
<nb-card-header>Hero Buttons</nb-card-header>
<nb-card-body>
<div class="row">
<div class="example-container col-md-2" *ngFor="let hb of settings">
<div class="example-container col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
<div class="container-title">
<span>{{ hb.title }}</span>
</div>

5
src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
View file

@ -1,6 +1,11 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
nb-actions > nb-action {
padding: 0;
}
nb-action {
i {
color: nb-theme(color-fg);