refactor(panels): apply new page design

src/app/pages/ui/panels/panels.html

@@ -1,83 +1,184 @@
-<div>
+<div class="row">
+  <h2>Default panels</h2>
+</div>
+<div class="row">
 
-  <div class="panel panel-default">
+  <div class="col-md-12 col-lg-4">
-    <div class="panel-body">
+    <h3>Simple panel</h3>
-      <p>A panel in bootstrap is a bordered box with some padding around its content.</p>
+
-      <p>Panels are created with the <code>.panel</code> class, and content inside the panel has a
+    <div ba-panel ba-panel-class="xsmall-panel">
-        <code>.panel-body</code> class. The <code>.panel-default</code> class is used to style the color of the
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac mi erat. Phasellus placerat, elit a laoreet
-        panel. See the last example on this page for more contextual classes.</p>
+      semper, enim ipsum ultricies orci, ac tincidunt tellus massa eu est. Nam non porta purus, sed facilisis justo. Nam
+      pulvinar sagittis quam, eget posuere turpis facilisis pharetra. Integer facilisis ex sed aliquet euismod. Interdum
+      et malesuada fames ac ante ipsum primis in faucibus.
     </div>
   </div>
+  <div class="col-md-12 col-lg-4">
+    <h3>Panel with Header</h3>
 
-
+    <div ba-panel ba-panel-title="Example header" ba-panel-class="xsmall-panel">
-  <div class="panel panel-default">
+      Phasellus maximus venenatis augue, et vestibulum neque aliquam ut. Morbi mattis libero vitae vulputate dignissim.
-    <div class="panel-heading">Panel Heading</div>
+      Praesent placerat, sem non dapibus cursus, lacus nisi blandit quam, vitae porttitor lectus lacus non turpis. Donec
-    <div class="panel-body">
+      suscipit consequat tellus, non blandit purus porttitor a. Sed scelerisque ac purus id sollicitudin. Vestibulum
-      <p>The <code>.panel-heading</code> class adds a heading to the panel.</p>
+      magna ligula, tristique eu aliquam id, mollis vel nunc.
     </div>
   </div>
+  <div class="col-md-12 col-lg-4">
+    <h3>Panel with scroll</h3>
+
+    <div ba-panel ba-panel-title="Example header" ba-panel-class="xsmall-panel with-scroll">
+      <p>
+        Suspendisse nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi
+        mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada
+        pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae.
+      </p>
 
 
+      <p>
+        Sed dapibus, purus vel hendrerit consectetur, lectus orci gravida massa, sed bibendum dui mauris et eros. Nulla
+        dolor massa, posuere et dictum sit amet, dignissim quis odio. Fusce mollis finibus dignissim. Integer sodales
+        augue erat. Pellentesque laoreet vestibulum urna at iaculis. Nulla libero augue, euismod at diam eget, aliquam
+        condimentum ligula. Donec a leo eu est molestie lacinia hendrerit sed lorem. Duis id diam eu metus sodales
+        consequat vel eu elit. Praesent dolor nibh, convallis eleifend feugiat a, finibus porttitor nibh. Ut non libero
+        vel velit pulvinar scelerisque non vel lorem. Integer porta tempor nulla. Sed nibh erat, ultrices vel lorem eu,
+        rutrum vehicula sem.
+      </p>
+
+      <p>
+        Donec nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi
+        mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada
+        pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum nec ligula egestas rhoncus. Sed
+        dignissim, augue vel scelerisque vulputate, nisi ante posuere lorem, quis iaculis eros dolor eu nisl. Etiam
+        sagittis, ipsum ac tempor iaculis, justo neque mattis ante, ac maximus sapien risus eu sapien. Morbi erat urna,
+        varius et lectus vel, porta dictum orci. Duis bibendum euismod elit, et lobortis purus venenatis in. Mauris eget
+        lacus enim. Cras quis sem et magna fringilla convallis. Proin hendrerit nulla vel gravida mollis. Interdum et
+        malesuada fames ac ante ipsum primis in faucibus. Vestibulum consectetur quis purus vel aliquam.
+      </p>
 
-  <div class="panel panel-default">
-    <div class="panel-body">
-      <p>The <code>.panel-footer</code> class adds a footer to the panel.</p>
     </div>
-    <div class="panel-footer">Panel Footer</div>
   </div>
+</div>
 
-  <hr>
 
-  <h2>Panel Group</h2>
+<div class="row">
+  <h2>Bootstrap panels</h2>
+</div>
+<div class="row">
 
-  <div class="panel-group">
+  <div class="col-md-12 col-lg-4">
-    <div class="panel panel-default">
+    <div class="panel panel-default bootstrap-panel">
-      <div class="panel-heading">Panel group 1</div>
       <div class="panel-body">
-        <p>To group many panels together, wrap a <code>&lt;div&gt;</code> with class <code>
+        <p>A panel in bootstrap is a bordered box with some padding around its content.</p>
-          .panel-group</code> around them.</p>
+
-      </div>
+        <p class="p-with-code">Panels are created with the <code>.panel</code> class, and content inside the panel has a
-    </div>
+          <code>.panel-body</code> class. The <code>.panel-default .panel-primary .panel-danger</code> and other classes
-    <div class="panel panel-default">
+          are used to style the color of the
-      <div class="panel-heading">Panel group 2</div>
+          panel. See the next example on this page for more contextual classes.</p>
-      <div class="panel-body">
-        <p>The <code>.panel-group</code> class clears the bottom-margin of each panel.</p>
       </div>
     </div>
   </div>
 
-  <hr>
+  <div class="col-md-12 col-lg-4">
+    <div class="panel panel-default bootstrap-panel">
+      <div class="panel-heading">Panel Heading</div>
+      <div class="panel-body">
+        <p class="p-with-code">The <code>.panel-heading</code> class adds a heading to the panel.Easily add a heading
+          container to your
+          panel with .panel-heading. You may also include any
+          <code>h1-h6</code> with a <code>.panel-title</code> class to add a pre-styled heading.
+        </p>
+      </div>
+    </div>
+  </div>
 
+  <div class="col-md-12 col-lg-4">
+    <div class="panel panel-default bootstrap-panel">
+      <div class="panel-body">
+        <p class="p-with-code">
+          Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers do not inherit colors
+          and
+          borders when
+          using contextual variations as they are not meant to be in the foreground.
+        </p>
+      </div>
+      <div class="panel-footer">Panel Footer</div>
+    </div>
+  </div>
+</div>
+
+<div class="row">
   <h2>Panels with Contextual Classes</h2>
-  <div class="panel-group">
+</div>
-    <div class="panel panel-default">
+<div class="row">
+  <div class="col-md-6 col-lg-4">
+    <div class="panel panel-default contextual-example-panel bootstrap-panel">
       <div class="panel-heading">Panel with panel-default class</div>
-      <div class="panel-body">To color the panel, use contextual classes. This is sample <code>.panel-default</code> panel</div>
+      <div class="panel-body">To color the panel, use contextual classes. This is sample <code>.panel-default</code>
+        panel
+      </div>
     </div>
+  </div>
 
-    <div class="panel panel-primary">
+  <div class="col-md-6 col-lg-4">
+    <div class="panel panel-primary contextual-example-panel bootstrap-panel">
       <div class="panel-heading">Panel with panel-primary class</div>
       <div class="panel-body">Sample <code>.panel-primary</code> panel</div>
     </div>
+  </div>
 
-    <div class="panel panel-success">
+  <div class="col-md-6 col-lg-4">
+    <div class="panel panel-success contextual-example-panel bootstrap-panel">
       <div class="panel-heading">Panel with panel-success class</div>
       <div class="panel-body">Sample <code>.panel-success</code> panel</div>
     </div>
+  </div>
 
-    <div class="panel panel-info">
+  <div class="col-md-6 col-lg-4">
+    <div class="panel panel-info contextual-example-panel bootstrap-panel">
       <div class="panel-heading">Panel with panel-info class</div>
       <div class="panel-body">Sample <code>.panel-info</code> panel</div>
     </div>
+  </div>
 
-    <div class="panel panel-warning">
+  <div class="col-md-6 col-lg-4">
+    <div class="panel panel-warning contextual-example-panel bootstrap-panel">
       <div class="panel-heading">Panel with panel-warning class</div>
       <div class="panel-body">Sample <code>.panel-warning</code> panel</div>
     </div>
+  </div>
 
-    <div class="panel panel-danger">
+  <div class="col-md-6 col-lg-4">
+    <div class="panel panel-danger contextual-example-panel bootstrap-panel">
       <div class="panel-heading">Panel with panel-danger class</div>
       <div class="panel-body">Sample <code>.panel-danger</code> panel</div>
     </div>
   </div>
-</div>
+
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <h2>Panel Group</h2>
+
+    <div class="panel-group">
+      <div class="panel panel-default bootstrap-panel">
+        <div class="panel-heading">Panel group 1</div>
+        <div class="panel-body">
+          <p>To group many panels together, wrap a <code>&lt;div&gt;</code> with class <code>
+            .panel-group</code> around them.</p>
+        </div>
+      </div>
+      <div class="panel panel-default bootstrap-panel">
+        <div class="panel-heading">Panel group 2</div>
+        <div class="panel-body">
+          <p>The <code>.panel-group</code> class clears the bottom-margin of each panel.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

src/sass/theme/bootstrap-overrides/_panel.scss

@@ -9,7 +9,7 @@ $panel-heading-font-size: 16px;
   position: relative;
   //transition: all 0.2s ease;
   margin-bottom: 24px;
-  box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
   /*&:hover {
     background: $panel-bg-hover;
   }*/
@@ -19,6 +19,9 @@ $panel-heading-font-size: 16px;
   &.small-panel {
     height: $small-panel-height;
   }
+  &.xsmall-panel {
+    height: $xsmall-panel-height;
+  }
   &.medium-panel {
     height: $medium-panel-height;
   }
@@ -70,11 +73,11 @@ $panel-heading-font-size: 16px;
   }
 }
 
-.panel-white{
+.panel-white {
   background-color: $panel-bg;
 }
 
-.panel-blur{
+.panel-blur {
   $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
   background: url($blurredBgUrl);
 }
@@ -119,6 +122,32 @@ $panel-heading-font-size: 16px;
   }
 }
 
+.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger {
+  .panel-heading {
+    color: rgba(255, 255, 255, 0.8);
+    border-radius: 0;
+  }
+}
+
+.panel.bootstrap-panel .panel-body p {
+  color: $default-text;
+}
+
+.panel-group .panel {
+  border-radius: 0;
+  .panel-heading {
+    border-bottom: 1px solid #ddd;
+  }
+}
+
+.p-with-code {
+  line-height: 1.5em;
+}
+
+.contextual-example-panel {
+  height: 120px;
+}
+
 /*
 .panel-group .panel {
   border-radius: 0;

src/sass/theme/conf/_mixins.scss

@@ -109,7 +109,7 @@
 }
 
 @mixin overridePanelBg($color, $borderColor, $dropdownColor) {
-  .panel, .panel:hover {
+  .panel.panel-blur, .panel.panel-blur:hover {
     border-color: $borderColor;
     background-color: $color;
   }

src/sass/theme/conf/_variables.scss

@@ -71,6 +71,7 @@ $resMin: 320px;
 $top-height: 66px;
 
 $small-panel-height: 114px;
+$xsmall-panel-height: 250px;
 $medium-panel-height: 400px;
 $extra-medium-panel-height: 550px;
 $large-panel-height: 974px;