- ECommerce: fix dropdowns;

- Inbox: fix links; - Profile: fix outline button and links; - UI -> Buttons: fix justify content; - UI -> modal: fix close buttons; - Charts: fix colors
flatlogic · Nov 24, 2020 · 6ffd4b3 · 6ffd4b3
1 parent d74f73c
commit 6ffd4b3
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 91 deletions.
diff --git a/src/app/pages/ecommerce/product-grid/components/filter/filter.template.html b/src/app/pages/ecommerce/product-grid/components/filter/filter.template.html
@@ -1,10 +1,10 @@
 <div class="filters">
   <div class="filters-group" *ngFor="let filter of filters.mainFilters">
     {{filter.name}}
-    <filter-dropdown [dropdown]="filter.items"></filter-dropdown>
+    <filter-dropdown [dropdown]="filter.items" class="ml-2"></filter-dropdown>
   </div>
   <div class="filters-group">
     {{filters.sortFilter.name}}
-    <filter-dropdown [dropdown]="filters.sortFilter.items"></filter-dropdown>
+    <filter-dropdown [dropdown]="filters.sortFilter.items" class="ml-2"></filter-dropdown>
   </div>
 </div>
diff --git a/src/app/pages/inbox/inbox.template.html b/src/app/pages/inbox/inbox.template.html
@@ -32,11 +32,11 @@ <h1 class="page-title">Email - <span class="fw-semi-bold">Inbox</span></h1>
     </ul>
     <h6 class="mt text-white">QUICK VIEW</h6>
     <ul class="nav nav-pills flex-column nav-stacked nav-email-folders mb-lg fs-mini">
-      <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle text-danger float-right"></i> Work </a>
+      <li class="nav-item"><a class="nav-link" ><i class="fa fa-circle text-danger float-right"></i> Work </a>
       </li>
-      <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle text-white float-right"></i> Private </a>
+      <li class="nav-item"><a class="nav-link" ><i class="fa fa-circle text-white float-right"></i> Private </a>
       </li>
-      <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-circle text-gray-light float-right"></i> Saved
+      <li class="nav-item"><a class="nav-link" ><i class="fa fa-circle text-gray-light float-right"></i> Saved
         </a></li>
     </ul>
   </div>

diff --git a/src/app/pages/main/analytics/analytics.style.scss b/src/app/pages/main/analytics/analytics.style.scss
@@ -12,11 +12,14 @@
     th {
       font-weight: $font-weight-normal;
     }
-
+    thead th {
+      color: $white-dark;
+    }
     tbody tr {
       td {
         min-width: 100px;
         border: none;
+        color: $panel-opened-color;
       }
     }
   }

diff --git a/src/app/pages/main/analytics/analytics.template.html b/src/app/pages/main/analytics/analytics.template.html
@@ -148,7 +148,7 @@ <h5 *widgsterTitle>Support <span class='fw-semi-bold'>Requests</span></h5>
             <div class="table-responsive">
               <table class="table table-striped table-lg requests-table">
                 <thead>
-                  <tr class="text-muted">
+                  <tr>
                     <th>NAME</th>
                     <th>EMAIL</th>
                     <th>PRODUCT</th>

diff --git a/src/app/pages/main/widgets/widgets.style.scss b/src/app/pages/main/widgets/widgets.style.scss
@@ -238,6 +238,11 @@
 
 .post-user {
   position: relative;
+  &.sing {
+    margin-top: -5.1rem;
+    margin-bottom: 2rem;
+  }
+
   @include clearfix();
 
   img {

diff --git a/src/app/pages/main/widgets/widgets.template.html b/src/app/pages/main/widgets/widgets.template.html
@@ -245,18 +245,18 @@ <h6 class="text-muted mb-xs">Last Updated</h6>
     <section class="widget-chart-stats-simple" widgster [optionsControl]="false" [fullscreenControl]="false"
       [collapseControl]="false" bodyClass="mt-0" footerClass="bg-widget-transparent">
       <div class="widget-top-overflow widget-padding-md clearfix bg-warning text-dark-light">
-        <h3 class="mt-lg mb-lg">Sing - <span class="fw-semi-bold">Next Generation</span> Admin Dashboard
+        <h3 class="mt-lg mb-5">Sing - <span class="fw-semi-bold">Next Generation</span> Admin Dashboard
           Template</h3>
         <ul class="tags text-dark-light pull-right">
           <li><a href="#">features</a></li>
         </ul>
       </div>
-      <div class="post-user mt-negative-lg">
+      <div class="post-user sing">
         <span class="thumb-lg pull-left mr mt-n-sm">
           <img class="rounded-circle" src="assets/img/people/a4.jpg" alt="...">
         </span>
         <h6 class="my-2 fw-normal text-dark-light">Jeremy <small class="text-dark-light">@sing</small></h6>
-        <p class="fs-mini text-muted"><time>25 mins</time> &nbsp; <i class="fa fa-map-marker"></i> &nbsp; near
+        <p class="fs-mini"><time>25 mins</time> &nbsp; <i class="fa fa-map-marker"></i> &nbsp; near
           Amsterdam</p>
       </div>
       <p class="text-light fs-mini m">Lots of cool stuff is happening around you. Just calm down for a sec and listen.

diff --git a/src/app/pages/profile/profile.template.html b/src/app/pages/profile/profile.template.html
@@ -151,10 +151,10 @@ <h6 class="author fs-sm fw-semi-bold">Ignacio Abad <small>6 mins ago</small></h6
         </div>
         <div class="btn-toolbar">
           <div class="btn-group">
-            <a href="#" class="btn btn-sm btn-default">
+            <a class="btn btn-sm btn-default">
               <i class="fa fa-camera fa-lg"></i>
             </a>
-            <a href="#" class="btn btn-sm btn-default">
+            <a class="btn btn-sm btn-default">
               <i class="fa fa-map-marker fa-lg"></i>
             </a>
           </div>

diff --git a/src/app/pages/ui-elements/buttons/buttons.template.html b/src/app/pages/ui-elements/buttons/buttons.template.html
@@ -13,29 +13,29 @@ <h5 *widgsterTitle>
         Use any of the available button classes to quickly create a styled button.
         Semantically distinguishable beauty.
       </p>
-      <p class="text-center">
-        <button class="btn btn-secondary width-100 mb-xs" role="button">
+      <p class="">
+        <button class="btn btn-secondary width-100  mb-xs mr-3 mb-3" role="button">
           Secondary
         </button>
-        <button class="btn btn-primary width-100 mb-xs" role="button">
+        <button class="btn btn-primary width-100  mb-xs mr-3 mb-3" role="button">
           Primary
         </button>
-        <button class="btn btn-info width-100 mb-xs" role="button">
+        <button class="btn btn-info width-100  mb-xs mr-3 mb-3" role="button">
           Info
         </button>
-        <button class="btn btn-success width-100 mb-xs" role="button">
+        <button class="btn btn-success width-100  mr-3 mb-3" role="button">
           Success
         </button>
-        <button class="btn btn-warning width-100 mb-xs" role="button">
+        <button class="btn btn-warning width-100 mr-3 mb-3" role="button">
           Warning
         </button>
-        <button class="btn btn-danger width-100 mb-xs" role="button">
+        <button class="btn btn-danger width-100 mr-3 mb-3" role="button">
           Danger
         </button>
-        <button class="btn btn-gray width-100 mb-xs" role="button">
+        <button class="btn btn-gray width-100 mr-3 mb-3" role="button">
           Gray
         </button>
-        <button class="btn btn-inverse width-100 mb-xs" role="button">
+        <button class="btn btn-inverse width-100 mb-3" role="button">
           Inverse
         </button>
       </p>
@@ -50,10 +50,10 @@ <h5 *widgsterTitle>
         Fancy larger or smaller buttons? Four separate sizes available for all use cases: from
         tiny 10px button to large one.
       </p>
-      <button type="button" class="btn btn-default btn-lg">Large button</button>
-      <button type="button" class="btn btn-primary">Default button</button>
-      <button type="button" class="btn btn-info btn-sm">Small button</button>
-      <button type="button" class="btn btn-success btn-xs">Tiny button</button>
+      <button type="button" class="btn btn-default btn-lg mr-3">Large button</button>
+      <button type="button" class="btn btn-primary mr-3">Default button</button>
+      <button type="button" class="btn btn-info btn-sm mr-3">Small button</button>
+      <button type="button" class="btn btn-success btn-xs mr-3">Tiny button</button>
     </section>
   </div>
   <div class="col-md-6 col-12">
@@ -65,29 +65,29 @@ <h5 *widgsterTitle>
         In need of a button, but not the hefty background colors they bring? Use property to remove all background
         images and colors on any button.
       </p>
-      <p class="text-center">
-        <button class="btn btn-outline-secondary width-100 mb-xs" role="button">
+      <p class="">
+        <button class="btn btn-outline-secondary width-100  mr-3 mb-3" role="button">
           Secondary
         </button>
-        <button class="btn btn-outline-primary width-100 mb-xs" role="button">
+        <button class="btn btn-outline-primary width-100  mr-3 mb-3" role="button">
           Primary
         </button>
-        <button class="btn btn-outline-info width-100 mb-xs" role="button">
+        <button class="btn btn-outline-info width-100  mr-3 mb-3" role="button">
           Info
         </button>
-        <button class="btn btn-outline-success width-100 mb-xs" role="button">
+        <button class="btn btn-outline-success width-100  mr-3 mb-3" role="button">
           Success
         </button>
-        <button class="btn btn-outline-warning width-100 mb-xs" role="button">
+        <button class="btn btn-outline-warning width-100  mr-3 mb-3" role="button">
           Warning
         </button>
-        <button class="btn btn-outline-danger width-100 mb-xs" role="button">
+        <button class="btn btn-outline-danger width-100  mr-3 mb-3" role="button">
           Danger
         </button>
-        <button class="btn btn-outline-gray width-100 mb-xs" role="button">
+        <button class="btn btn-outline-gray width-100  mr-3 mb-3" role="button">
           Gray
         </button>
-        <button class="btn btn-outline-inverse width-100 mb-xs" role="button">
+        <button class="btn btn-outline-inverse width-100 mb-3" role="button">
           Inverse
         </button>
       </p>
@@ -103,29 +103,29 @@ <h5 *widgsterTitle>
         Semantically distinguishable beauty. Use
         <code>.btn-rounded</code> or <code>.btn-rounded-f</code>.
       </p>
-      <p class="text-center">
-        <button class="btn btn-default btn-rounded-f width-100 mb-xs" role="button">
+      <p class="">
+        <button class="btn btn-default btn-rounded-f width-100  mr-3 mb-3" role="button">
           Default
         </button>
-        <button class="btn btn-primary btn-rounded-f width-100 mb-xs" role="button">
+        <button class="btn btn-primary btn-rounded-f width-100  mr-3 mb-3" role="button">
           Primary
         </button>
-        <button class="btn btn-info btn-rounded-f width-100 mb-xs" role="button">
+        <button class="btn btn-info btn-rounded-f width-100  mr-3 mb-3" role="button">
           Info
         </button>
-        <button class="btn btn-success btn-rounded-f width-100 mb-xs" role="button">
+        <button class="btn btn-success btn-rounded-f width-100  mr-3 mb-3" role="button">
           Success
         </button>
-        <button class="btn btn-outline-warning btn-rounded width-100 mb-xs" role="button">
+        <button class="btn btn-outline-warning btn-rounded width-100  mr-3 mb-3" role="button">
           Warning
         </button>
-        <button class="btn btn-outline-danger btn-rounded width-100 mb-xs" role="button">
+        <button class="btn btn-outline-danger btn-rounded width-100  mr-3 mb-3" role="button">
           Danger
         </button>
-        <button class="btn btn-outline-gray btn-rounded width-100 mb-xs" role="button">
+        <button class="btn btn-outline-gray btn-rounded width-100  mr-3 mb-3" role="button">
           Gray
         </button>
-        <button class="btn btn-outline-inverse btn-rounded width-100 mb-xs" role="button">
+        <button class="btn btn-outline-inverse btn-rounded width-100 mb-3" role="button">
           Inverse
         </button>
       </p>
@@ -142,14 +142,14 @@ <h5 *widgsterTitle>
         Great for menu & social buttons.
       </p>
       <p>
-        <button type="button" class="btn btn-info btn-block">Block Button</button>
+        <button type="button" class="btn btn-info btn-block mb-3">Block Button</button>
       </p>
       <p>
-        <button type="button" class="btn btn-default btn-block">Show Menu &nbsp;&nbsp;&nbsp;<i
+        <button type="button" class="btn btn-default btn-block mb-3">Show Menu &nbsp;&nbsp;&nbsp;<i
             class="fa fa-bars"></i></button>
       </p>
       <p>
-        <button type="button" class="btn btn-primary btn-block"><i class="fa fa-facebook"></i> Login mit
+        <button type="button" class="btn btn-primary btn-block mb-3"><i class="fa fa-facebook"></i> Login mit
           Facebook</button>
       </p>
       <p>
@@ -167,11 +167,11 @@ <h5 *widgsterTitle>
         Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.
       </p>
       <p>
-        <button type="button" class="btn btn-primary" disabled="disabled">Primary button</button>
+        <button type="button" class="btn btn-primary mr-3" disabled="disabled">Primary button</button>
         <button type="button" class="btn btn-default" disabled="disabled">Button</button>
       </p>
       <p>
-        <a href="#" class="btn btn-success btn-sm disabled" role="button">Primary link</a>
+        <a href="#" class="btn btn-success btn-sm disabled mr-3" role="button">Primary link</a>
         <a href="#" class="btn btn-default btn-sm disabled" role="button">Link</a>
       </p>
     </section>
@@ -185,7 +185,7 @@ <h5 *widgsterTitle>
         Group a series of buttons together on a single line with the button group.
         Add on optional JavaScript radio and checkbox style behavior with Bootstrap buttons plugin.
       </p>
-      <div class="btn-group mb-2">
+      <div class="btn-group mb-3">
         <button type="button" class="btn btn-default">Left</button>
         <button type="button" class="btn btn-default">Middle</button>
         <button type="button" class="btn btn-default">Right</button>
@@ -217,8 +217,8 @@ <h5 *widgsterTitle>
         navbar, tabs, and pills.
         Both solid & segmented dropdown options available.
       </p>
-      <div class="mb-sm">
-        <div class="btn-group dropdown" dropdown>
+      <div class="mb-3">
+        <div class="btn-group dropdown mr-3" dropdown>
           <button id="dropdown-btn-one" class="btn btn-danger dropdown-toggle" dropdownToggle>
             &nbsp; One &nbsp;
           </button>
@@ -231,7 +231,7 @@ <h5 *widgsterTitle>
           </ul>
         </div>
 
-        <div class="btn-group dropdown" dropdown>
+        <div class="btn-group dropdown mr-3" dropdown>
           <button id="dropdown-btn-two" class="btn btn-default btn-sm dropdown-toggle" dropdownToggle>
             &nbsp; One &nbsp;
             <i class="fa fa-caret-down"></i>
@@ -246,7 +246,7 @@ <h5 *widgsterTitle>
         </div>
       </div>
       <div>
-        <div class="btn-group dropdown" dropdown>
+        <div class="btn-group dropdown mr-3" dropdown>
           <button id="dropdown-btn-three" class="btn btn-default">Gray</button>
           <button class="btn btn-default dropdown-toggle" dropdownToggle>
           </button>
@@ -287,7 +287,7 @@ <h4>
         Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
         Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.
       </p>
-      <div class="mb-sm">
+      <div class="mb-3">
         <div class="btn-group">
           <label class="btn btn-default" btnCheckbox [(ngModel)]="checkboxModel.left">
             Left way
@@ -322,7 +322,7 @@ <h4>
         Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
         Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.
       </p>
-      <div class="mb-sm">
+      <div class="mb-3">
         <div class="btn-group">
           <label class="btn btn-default" btnRadio="'Left'" [(ngModel)]="radioModel">
             Left way
@@ -358,30 +358,30 @@ <h4>
         inputs.
         Let your buttons shine!
       </p>
-      <p class="text-center">
-        <button class="btn btn-default width-100 mb-xs" role="button">
+      <p class="mb-0">
+        <button class="btn btn-default width-100 mr-3 mb-3" role="button">
           <i class="glyphicon glyphicon-tree-conifer text-success"></i>
           Forest
         </button>
-        <button class="btn btn-default width-100 mb-xs" role="button">
+        <button class="btn btn-default width-100 mr-3 mb-3" role="button">
           <i class="fa fa-check text-danger"></i>
           Submit
         </button>
-        <button class="btn btn-default width-100 mb-xs" role="button">
+        <button class="btn btn-default width-100 mr-3 mb-3" role="button">
           <i class="fa fa-facebook text-primary"></i>
           Login
         </button>
       </p>
-      <p class="text-center">
-        <button class="btn btn-default width-100 mb-xs" role="button">
+      <p class="">
+        <button class="btn btn-default width-100  mr-3 mb-3" role="button">
           <i class="fa fa-exclamation text-warning"></i>
           Error
         </button>
-        <button class="btn btn-default width-100 mb-xs" role="button">
+        <button class="btn btn-default width-100  mr-3 mb-3" role="button">
           <i class="glyphicon glyphicon-globe text-info"></i>
           <span class="text-info">Globe</span>
         </button>
-        <button class="btn btn-default width-100 mb-xs" role="button">
+        <button class="btn btn-default width-100 mb-3" role="button">
           <span class="circle bg-white">
             <i class="fa fa-map-marker text-gray"></i>
           </span>