fix panel header layout

DSchougaard · Nov 19, 2015 · 3676634 · 3676634
1 parent e1958b5
commit 3676634
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 12 deletions.
diff --git a/src/app/components/blurPanel/_blurPanel.scss b/src/app/components/blurPanel/_blurPanel.scss
@@ -1,3 +1,5 @@
+$panel-title-height: 35px;
+
 .panel {
   border: none;
   border-radius: 0px;
@@ -21,22 +23,26 @@
     height: $large-panel-height;
   }
   &.with-scroll {
-    overflow-y: auto;
+    .panel-body {
+      overflow-y: auto;
+      height: calc(100% - #{$panel-title-height});
+    }
   }
 }
 
 .panel-heading, .panel-default > .panel-heading {
   background-color: transparent;
   border: none;
-  padding: 7px 22px 0px;
-  margin-bottom: -5px;
+  padding: 0 22px;
   color: $default-text;
 }
 
 .panel-title {
-  font-weight: normal;
+  height: $panel-title-height;
+  line-height: 20px;
+  padding-top: 15px;
 }
 
 .panel-body {
-  padding: 16px 22px;
+  padding: 15px 22px;
 }
diff --git a/src/app/pages/dashboard/_dashboard.scss b/src/app/pages/dashboard/_dashboard.scss
@@ -5,4 +5,10 @@
       margin-top: -423px;
     }
   }
+}
+
+.user-stats-panel {
+  .panel-title {
+    padding: 0 0 15px;
+  }
 }
diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html
@@ -1,14 +1,14 @@
 <pie-charts></pie-charts>
 
 <div>
-  <blur-panel>
+  <blur-panel class-container="user-stats-panel">
     <div class="row">
       <div class="col-md-6">
-        <h3>Acquisition Channels</h3>
+        <h3 class="panel-title">Acquisition Channels</h3>
         <traffic-chart></traffic-chart>
       </div>
       <div class="col-md-6">
-        <h3>Users by country</h3>
+        <h3 class="panel-title">Users by Country</h3>
         <am-chart-map></am-chart-map>
       </div>
     </div>
@@ -39,7 +39,7 @@ <h3>Users by country</h3>
 
 <div class="row shift-up">
   <div class="col-lg-3 col-sm-6 col-xs-12">
-    <blur-panel title="ToDo List" class-container="medium-panel with-scroll">
+    <blur-panel title="To Do List" class-container="medium-panel with-scroll">
       <blur-todo></blur-todo>
     </blur-panel>
   </div>

diff --git a/src/app/pages/dashboard/widgets/blurFeed/blurFeed.js b/src/app/pages/dashboard/widgets/blurFeed/blurFeed.js
@@ -50,7 +50,7 @@ blurAdminApp.directive('blurFeed', function () {
           type: 'text-message',
           author: 'Vlad',
           header: 'posted new message',
-          text: "First snake:I hope I'm not poisonous. Second snake:Why? First snake:Because I bit my lip!",
+          text: "First snake: I hope I'm not poisonous. Second snake: Why? First snake: Because I bit my lip!",
           time: '12.11.2015',
           ago: '3 days ago',
         }, {

diff --git a/src/app/pages/dashboard/widgets/pieCharts/pieCharts.js b/src/app/pages/dashboard/widgets/pieCharts/pieCharts.js
@@ -57,7 +57,7 @@ blurAdminApp.directive('pieCharts', function () {
 
       function updatePieCharts() {
         $('.pie-charts .chart').each(function(index, chart) {
-          $(chart).data('easyPieChart').update(getRandomArbitrary(60, 90));
+          $(chart).data('easyPieChart').update(getRandomArbitrary(55, 90));
         });
       }
 

diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
@@ -53,6 +53,6 @@ $resMin: 320px;
 
 $top-height: 66px;
 
-$small-panel-height: 120px;
+$small-panel-height: 114px;
 $medium-panel-height: 400px;
 $large-panel-height: 824px;