From 74a4de29fcaf45b8ca31c0e3e9c6bef28f8c544f Mon Sep 17 00:00:00 2001
From: Mikhail Hryb <iamfreespirit.mg@gmail.com>
Date: Mon, 11 Sep 2017 11:41:24 +0300
Subject: [PATCH] fix(buttons): page responsive

---
 .../button-groups.component.html              | 115 ++++++++++--------
 .../button-groups.component.scss              |  18 +++
 .../buttons/buttons.component.html            |   8 +-
 .../buttons/buttons.component.scss            |  56 +++++++++
 .../default-buttons.component.scss            |   3 +-
 .../hero-buttons/hero-buttons.component.html  |   2 +-
 .../labeled-actions-group.component.scss      |   5 +
 7 files changed, 149 insertions(+), 58 deletions(-)

diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
index aa88657d..bbaf775f 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
@@ -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">
diff --git a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
index cc3c5414..4e391fff 100644
--- a/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
+++ b/src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
@@ -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;
+    }
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/buttons.component.html b/src/app/pages/ui-features/buttons/buttons.component.html
index 33cf7a92..8a8cbc03 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.html
+++ b/src/app/pages/ui-features/buttons/buttons.component.html
@@ -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>
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss
index 92463ce4..c88cf294 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/buttons.component.scss
@@ -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) {
+
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
index e9c66357..7bf8512b 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
@@ -11,7 +11,8 @@
     }
 
     .dropdown {
-      width: 30%;
+      flex-basis: 30%;
+      min-width: 200px;
     }
   }
 
diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
index f48b96fa..410a7096 100644
--- a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html
@@ -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>
diff --git a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
index 8a6361f9..7cf9b3c6 100644
--- a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
+++ b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
@@ -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);