Gridstack with Bootstrap Panels

by navinleon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.2/gridstack.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.2/gridstack.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<br><p style="text-align:center;">an elegant example of integrating Bootstrap panels with Gridstack</p><br><br>
<div class="grid-stack">
  <div class="grid-stack-item" data-gs-height="4" data-gs-width="4" data-gs-x=
  "0" data-gs-y="0">
    <div class="panel panel-info grid-stack-item-content">
      <div class="panel-heading">
        <h3 class="panel-title" data-toggle="tooltip" data-placement="bottom" title="Click to drag panel"><i class="fa fa-hdd-o"></i> Assigned Device(s)</h3>
      </div>


      <div class="panel-body">
        <p style="text-align:center;">No Device(s) Assigned</p>
      </div>
    </div>
  </div>


  <div class="grid-stack-item" data-gs-height="4" data-gs-width="4" data-gs-x=
  "4" data-gs-y="0">
    <div class="panel panel-warning grid-stack-item-content">
      <div class="panel-heading">
        <h3 class="panel-title" data-toggle="tooltip" data-placement="bottom" title="Click to drag panel"><i class="fa fa-heartbeat"></i> DOCK ACTIVITY</h3>
      </div>


      <div class="panel-body">
      <p style="text-align:center;">Panel content</p>
        <p style="text-align:center;"><button type="button" class="btn btn-success">See More Dock Activity</button></p>
      </div>
    </div>
  </div>


<div class="grid-stack-item"...

CSS

body{
  background-color:#F1F1F1;
}

/* Hover Effect */
.panel-heading:hover {
		//-ms-transform: scale(1.02,1.02); /* IE 9 */
    //-webkit-transform: scale(1.02,1.02); /* Safari */
    //transform: scale(1.02,1.02);
		z-index:9999;
		cursor:pointer;
    //background:#fff;
    //background-image: linear-gradient(-180deg, #FFFFFF, #EBEBEB);
	}

/* Panel header color on active */
 .panel-info > .panel-heading:active {
  background-color:#37BCFF;
}

 .panel-warning > .panel-heading:active {
  background-color:#FDDA24;
}

 .panel-danger > .panel-heading:active {
  background-color:#FF3B3B;
}

/* Drag gridstack panel color 
.panel-heading:active {
    //background: #333;
    background:hsl(240,65%,50%);
  -webkit-box-shadow: inset 0 0 10px #CCCCCC;
    -moz-box-shadow: inset 0 0 10px #CCCCCC;
    box-shadow: inset 0 0 10px #CCCCCC;
}*/


/* Gridstack */
.grid-stack-item-content {
    //background: rgba(255, 255, 222, 0.1);
    background: #FFF;
    border-color:rgb(204,204,204);
    border-style: solid;
    border-width: 1px;
    border-radius: 8px;
    //box-shadow: 5px 5px 5px grey;
}

/* Align Panel Text */
.panel-title {
    text-align: center;
    /*color: #FFF;*/
}

.panel-title > a {
  color: inherit;
}

/* Fixes Font Awesome and Gridstack Resizer */
.grid-stack-item > .ui-icon.ui-resizable-handle {
  background-image: none;
}


/* Custom Scroller */
::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(255,255,255,0.2); 
  border-radius: 8px;
}
 
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0,0,0,0.2);
}

/* Panel Color Overrides 
.panel-default > .panel-heading {
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  background-repeat: repeat-x;
  filter:...

JavaScript

var options = {
    cell_height: 80,
    vertical_margin: 10
};
$('.grid-stack').gridstack(options);

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});