JSFiddle - React, Tailwind, and code Playground

BS3 / Flex box Mashup Dashboard layout

by Andrew Pougher

HTML

<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/js/xeditable.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/css/xeditable.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div ng-controller="MyCtrl">

  <div class="col-md-12 text-center">
    <div class="row mast" style=" min-height:12vh">
      <div class="controls">
        <div class="wideme">
          <div><div id="printit" makepdf> PRINT</div></div>
        </div>
        <div class="wideme">
          <div>Small</div>
        </div>
        <div class="wideme">
          <div>Small
            <br>me</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8 canvasgrid" id="artboard" style="min-height:99vh">
        <a ng-href editable-textarea="user.name" e-style="color: green" e-required e-placeholder="Enter name">
    {{ (user.name || 'empty') }}
  </a>{{h}}
        <h4 class="editArea" ng-style="{'font-size':'24px','position':'absolute','z-index':'300'}"  resizable style="font-size:'19px'">{{user.name}}</h4>
        <h2 class="edittext">{{text}}</h2>
        <div resizable on-resize="resize($evt, $ui)" style="width:100px;" class="hoverhandles"> <img src="http://placehold.it/1190x1190/376de4/ffffff/&text=upload" class="img-reponsive custlogo "></div>
            <div resizable on-resize="resize($evt, $ui)"  class="hoverhandles" style="z-index:1;min-width: 120px;padding: 0px;position:absolute;background: url(http://brandoral.com/icons-svg/bo-icn-1.svg)...

CSS

body {
   height: 100%
 }
 
 .mast {
   background: #f7f6f2;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   min-height: 90px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .wideme {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   color: #222222;
   margin: 0;
   display: flex;
   align-items: center;
   /* middle center */
   justify-content: center;
 }
 
 .canvasgrid {
   -webkit-box-flex: 2;
   -webkit-flex: 2;
   -ms-flex: 2;
   flex: 2;
   -webkit-align-self: auto;
   -ms-flex-item-align: auto;
   align-self: auto;
   background-color: #ffffff;
   background-image: linear-gradient(rgba(232, 232, 232, 0.5) 1px, transparent 1px), linear-gradient(#e8e8e8 1px, transparent 1px), linear-gradient(90deg, rgba(232, 232, 232, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 232, 232, 0.7) 1px, transparent 1px), linear-gradient(transparent 3px, #ffffff 3px, #ffffff 58px, transparent 58px), linear-gradient(90deg, rgba(232, 232, 232, 0.7) 3px, transparent 3px, transparent 58px, rgba(232, 232, 232, 0.7) 58px);
   background-size: 15px 15px, 60px 60px, 15px 15px, 60px 60px, 60px 60px, 60px 60px;
 }
 
 .footer {
   font-size: 9px;
   color: white;
   background: #222222
 }
 
 .custlogo {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: auto;
   /* THROTTLE THE HEIGHT OF POTENTIALLY HUGE IMAGES */
 }
 
 .ui-resizable-handle {
   background: #f5dc58;
   border: 1px solid #FFF;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   z-index: 2;
   opacity: 0;
   transition: all 0.3s ease 0s;
 }
 
 .ui-resizable-handle:hover {
   opacity: 1
 }
 
 .editArea {
   white-space: pre-wrap;
   /* css-3 */
   white-space: -moz-pre-wrap;
   /* Mozilla, since 1999 */
   white-space: -pre-wrap;
   /* Opera 4-6 */
   white-space: -o-pre-wrap;
   /* Opera 7 */
   word-wrap: break-word;
   word-break: break-all;
   /* webkit */
   white-space: pre\9;
  ...

JavaScript

var app = angular.module('drewApp', ["xeditable"]);
app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('MyCtrl', function($scope) {
  $scope.text = "DESIGN SCREEN";

  $scope.user = {
    name: 'EDIT YOUR WORDS'
  };
  $scope.resize = function(evt, ui) {
    //console.log (evt,ui);

    $scope.w = ui.size.width;
    $scope.h = ui.size.height;
  }
});


app.directive('resizable', function() {

  return {
    restrict: 'A',
    scope: {
      callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
      elem.draggable({
        containment: "#artboard",
        cursor: "move",
        opacity: 0.3
      });
      elem.resizable({
        //handles: 'all'
      });
      elem.on('resize', function(evt, ui) {
        scope.$apply(function() {
          if (scope.callback) {
            scope.callback({
              $evt: evt,
              $ui: ui
            });
          }
        })
      });
    }
  };
});

app.directive('makepdf', function($http) {
  return {
    restrict: 'A',
    link: function(scope, $elm) {
      $elm.on('click', function() {
         	alert("do whatever")
      });
    }
  }
});