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

fix(buttons): fix button groups responsiveness

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-18 17:53:08 +03:00
parent 90a7321f90
commit a897bb191e
7 changed files with 97 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/pages/ui-features/buttons/action-groups/action-groups.component.html
View file

@ -4,16 +4,14 @@
Action Groups Action Groups
</div> </div>
<nb-actions size="medium"> <nb-actions size="medium">
<nb-action icon="ion-navicon"></nb-action> <nb-action icon="nb-menu"></nb-action>
<nb-action icon="nb-search"></nb-action>
<nb-action icon="nb-email"></nb-action>
<nb-action disabled icon="nb-notifications"></nb-action>
<nb-action> <nb-action>
<nb-search type="rotate-layout"></nb-search> <nb-user name="Han Solo"></nb-user>
</nb-action> </nb-action>
<nb-action icon="ion-ios-email-outline"></nb-action> <nb-action icon="nb-gear"></nb-action>
<nb-action disabled icon="ion-ios-bell-outline"></nb-action>
<nb-action>
<nb-user [menu]="userMenu" name="Han Solo"></nb-user>
</nb-action>
<nb-action icon="ion-ios-gear-outline"></nb-action>
</nb-actions> </nb-actions>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>

53
src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
View file

@ -1,5 +1,7 @@
@import '../../../../@theme/styles/themes'; @import '../../../../@theme/styles/themes';
@import '~@nebular/theme/components/card/card.component.theme'; @import '~@nebular/theme/components/card/card.component.theme';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@include nb-install-component() { @include nb-install-component() {
@ -20,4 +22,55 @@
.nb-actions { .nb-actions {
flex-basis: 80%; flex-basis: 80%;
} }
@include media-breakpoint-down(sm) {
nb-card-body {
flex-direction: column;
align-items: flex-start;
padding: 0.75rem;
.action-groups-header {
margin: 0 0 0.5rem 0.25rem;
}
}
nb-action {
padding: 0 0.5rem;
/deep/ .control-icon {
font-size: 1.75rem;
}
}
nb-user /deep/ {
.user-container {
font-size: 0.875rem;
}
.user-picture {
height: 1.75rem;
width: 1.75rem;
}
}
}
@include media-breakpoint-down(xs) {
nb-action {
padding: 0 0.375rem;
/deep/ .control-icon {
font-size: 1.5rem;
}
}
nb-user /deep/ {
.user-container {
font-size: 0.75rem;
}
.user-picture {
height: 1.5rem;
width: 1.5rem;
}
}
nb-card-body {
padding-left: 0;
padding-right: 0;
}
}
} }

6
src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts
View file

@ -6,10 +6,4 @@ import { Component } from '@angular/core';
templateUrl: './action-groups.component.html', templateUrl: './action-groups.component.html',
}) })
export class ActionGroupsComponent { export class ActionGroupsComponent {
userMenu = [{
title: 'Profile',
}, {
title: 'Log out',
}];
} }

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

@ -1,15 +1,12 @@
<div class="row"> <div class="row">
<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-md-12 col-lg-12 col-xxxl-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> <ngx-labeled-actions-group></ngx-labeled-actions-group>
<nb-card-body>
<ngx-labeled-actions-group></ngx-labeled-actions-group>
</nb-card-body>
</nb-card>
<div class="row"> <div class="row">
<div class="col-lg-5"> <div class="col-lg-5">
<ngx-dropdown-buttons></ngx-dropdown-buttons> <ngx-dropdown-buttons></ngx-dropdown-buttons>

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

@ -92,41 +92,6 @@
} }
} }
@include media-breakpoint-down(sm) {
ngx-action-groups /deep/ nb-card-body {
flex-direction: column;
align-items: flex-start;
padding: 0.75rem;
.action-groups-header {
margin: 0 0 0.5rem 0.25rem;
}
}
}
@include media-breakpoint-down(is) {
ngx-action-groups /deep/ nb-card-body {
nb-action {
padding: 0.75rem;
}
.control-icon, .start-search {
font-size: 1.75rem;
}
.user-container {
font-size: 1rem;
}
.user-picture {
height: 1.75rem;
width: 1.75rem;
}
}
}
@include media-breakpoint-down(xs) { @include media-breakpoint-down(xs) {
/deep/.icon-buttons .icon-button-examples { /deep/.icon-buttons .icon-button-examples {
@ -135,31 +100,6 @@
} }
} }
ngx-action-groups /deep/ nb-card-body {
nb-action {
padding: 0.5rem;
}
.control-icon, .start-search {
font-size: 1.5rem;
}
.user-container {
font-size: 0.75rem;
}
.user-picture {
height: 1.5rem;
width: 1.5rem;
}
}
ngx-labeled-actions-group /deep/ nb-card-body {
padding-left: 0;
padding-right: 0;
}
ngx-default-buttons /deep/ nb-card-header { ngx-default-buttons /deep/ nb-card-header {
flex-direction: column; flex-direction: column;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;

32
src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html
View file

@ -1,14 +1,18 @@
<nb-actions size="medium" fullWidth> <nb-card>
<nb-action> <nb-card-body>
<i class="ion-ios-pause-outline"></i><span>Pause</span> <nb-actions size="medium" fullWidth>
</nb-action> <nb-action>
<nb-action> <i class="nb-pause-outline"></i><span>Pause</span>
<i class="ion-navicon"></i><span>Log View</span> </nb-action>
</nb-action> <nb-action>
<nb-action> <i class="nb-list"></i><span>Logs</span>
<i class="ion-ios-search"></i><span>Search</span> </nb-action>
</nb-action> <nb-action>
<nb-action> <i class="nb-search"></i><span>Search</span>
<i class="ion-ios-gear-outline"></i><span>Setup</span> </nb-action>
</nb-action> <nb-action>
</nb-actions> <i class="nb-gear"></i><span>Setup</span>
</nb-action>
</nb-actions>
</nb-card-body>
</nb-card>

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

@ -23,32 +23,32 @@
} }
} }
@include media-breakpoint-down(md) {
nb-actions nb-action {
padding: 0 0.75rem;
}
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
nb-card-body {
padding: 1rem;
}
nb-action { nb-action {
font-size: 0.75rem; font-size: 0.75rem;
i { i {
font-size: 1.5rem; font-size: 2rem;
margin-right: 0.5rem;
} }
} }
} }
@include media-breakpoint-down(is) { @include media-breakpoint-down(is) {
nb-action { nb-action i {
font-size: 0.625rem; font-size: 1.75rem;
margin: 0;
} }
} span {
display: none;
@include media-breakpoint-down(xs) {
nb-action {
font-size: 0.5rem;
span {
display: none;
}
i {
margin: 0;
}
} }
} }
} }