Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 16:00:14 +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> </div>
<div class="example-container toolbars-container"> <div class="example-container toolbars-container">
<div class="pagination-container"> <div class="row">
<div class="container-title">Pagination</div> <div class="pagination-container col-xxxl-6">
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel" ngbRadioGroup> <div class="container-title">Pagination</div>
<label class="btn btn-outline-success"> <div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons"
<input type="radio" [value]="1"> 1 [(ngModel)]="paginationModel" ngbRadioGroup>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="1"> 1
<input type="radio" [value]="2"> 2 </label>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="2"> 2
<input type="radio" [value]="3"> 3 </label>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="3"> 3
<input type="radio" [value]="4"> 4 </label>
</label> <label class="btn btn-outline-success">
<label class="btn btn-outline-success"> <input type="radio" [value]="4"> 4
<input type="radio" [value]="5"> 5 </label>
</label> <label class="btn btn-outline-success">
<input type="radio" [value]="5"> 5
</label>
</div>
</div> </div>
</div> <div class="icon-toolbar-container col-xxxl-6">
<div class="icon-toolbar-container"> <div class="container-title">Icon Toolbar</div>
<div class="container-title">Icon Toolbar</div> <div class="btn-group btn-toggle-group" data-toggle="buttons">
<div class="btn-group btn-toggle-group" data-toggle="buttons"> <label class="btn btn-success" [class.active]="iconToolbarModel.one">
<label class="btn btn-success" [class.active]="iconToolbarModel.one"> <input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.two">
<label class="btn btn-success" [class.active]="iconToolbarModel.two"> <input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
<input type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.three">
<label class="btn btn-success" [class.active]="iconToolbarModel.three"> <input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
<input type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.four">
<label class="btn btn-success" [class.active]="iconToolbarModel.four"> <input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
<input type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4 </label>
</label> <label class="btn btn-success" [class.active]="iconToolbarModel.five">
<label class="btn btn-success" [class.active]="iconToolbarModel.five"> <input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
<input type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5 </label>
</label> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="example-container"> <div class="example-container">
<div class="container-title divided-button-group">Divided Button Group</div> <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"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday"> <label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-ios-football"></i> <input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-ios-football"></i>
</label> </label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday"> <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>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday"> <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> <input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="ion-ios-football-outline"></i>
</label> </label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday"> <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> </label>
</div> </div>
</div> </div>
<div class="example-container"> <div class="example-container">
<div class="container-title">Divided Button Group</div> <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"> <div class="row">
<label class="btn btn-outline-primary"> <div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
<input type="radio" value="left"> Left class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
</label> <label class="btn btn-outline-primary">
<label class="btn btn-outline-primary"> <input type="radio" value="left"> Left
<input type="radio" value="middle"> Middle </label>
</label> <label class="btn btn-outline-primary">
<label class="btn btn-outline-primary"> <input type="radio" value="middle"> Middle
<input type="radio" value="right"> Right </label>
</label> <label class="btn btn-outline-primary">
<input type="radio" value="right"> Right
</label>
</div>
</div> </div>
<div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons"> <div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="dividedButtonGroupTwo.left"> <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 '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@include nb-install-component() { @include nb-install-component() {
@ -36,6 +38,7 @@
.divided-button-group { .divided-button-group {
.btn-divided-checkbox-group { .btn-divided-checkbox-group {
margin-bottom: 1rem; margin-bottom: 1rem;
flex-wrap: wrap;
} }
} }
@ -48,4 +51,19 @@
margin-bottom: 1rem; 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"> <div class="col-lg-12">
<ngx-hero-buttons></ngx-hero-buttons> <ngx-hero-buttons></ngx-hero-buttons>
</div> </div>
<div class="col-lg-6"> <div class="col-md-12 col-lg-12 col-xxxl-6">
<ngx-shape-buttons></ngx-shape-buttons> <ngx-shape-buttons></ngx-shape-buttons>
<ngx-action-groups></ngx-action-groups> <ngx-action-groups></ngx-action-groups>
<nb-card> <nb-card>
@ -11,16 +11,16 @@
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-5">
<ngx-dropdown-buttons></ngx-dropdown-buttons> <ngx-dropdown-buttons></ngx-dropdown-buttons>
<ngx-icon-buttons></ngx-icon-buttons> <ngx-icon-buttons></ngx-icon-buttons>
</div> </div>
<div class="col-lg-8"> <div class="col-lg-7">
<ngx-button-groups></ngx-button-groups> <ngx-button-groups></ngx-button-groups>
</div> </div>
</div> </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-size-buttons></ngx-size-buttons>
<ngx-default-buttons></ngx-default-buttons> <ngx-default-buttons></ngx-default-buttons>
<ngx-block-level-buttons></ngx-block-level-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 '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/buttons'; @import '~@nebular/theme/styles/global/bootstrap/buttons';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@include nb-install-component() { @include nb-install-component() {
/deep/ { /deep/ {
@ -74,4 +76,58 @@
margin-bottom: 1rem; 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 { .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-header>Hero Buttons</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="row"> <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"> <div class="container-title">
<span>{{ hb.title }}</span> <span>{{ hb.title }}</span>
</div> </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'; @import '../../../../@theme/styles/themes';
@include nb-install-component() { @include nb-install-component() {
nb-actions > nb-action {
padding: 0;
}
nb-action { nb-action {
i { i {
color: nb-theme(color-fg); color: nb-theme(color-fg);