Panel UI

In this example below you will see how to do a Panel UI with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ilyador, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ilyador ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Panel UI</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,800italic,800,700italic,700,600italic,400italic,300italic,300,600'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Fauna+One'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {
  box-sizing: border-box;
}

body {
  font-family: 'Fauna One', serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.box {
  display: flex;
  height: 600px;
  overflow: hidden;
}

.snapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.flow-panel {
  flex: 1;
  height: 100%;
  padding: 10px;
  background-color: yellow;
}

.items {
  flex: 0 300px;
  height: 100%;
  padding: 10px;
  background-color: green;
  box-shadow: -1px 0px 13px 0px #545454;
}

.item {
  width: 161px;
  height: 100px;
  position: relative;
  background-color: red;
  cursor: pointer;
  box-shadow: 0px 0 32px 5px rgba(182, 47, 47, 0.44);
  border-radius: 2px;
  transition: transform cubic-bezier(0.14, 0.56, 0.35, 0.97) 1s, box-shadow linear 0.5s, background-color linear 0.5s;
}
.item.shift {
  background-color: blue;
  box-shadow: 0px 0 32px 5px rgba(47, 83, 182, 0.44);
}
.item.selected {
  border: solid 1px black;
}
.item .toggle-stuff {
  padding: 10px;
  transition: opacity cubic-bezier(0.16, 0.76, 0.52, 1) 1s;
  opacity: 0;
}
.item select {
  display: none;
  cursor: pointer;
  margin-bottom: 7px;
}
.item h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.3px;
  color: #fff;
}
.item button {
  display: none;
  font-size: 9px;
  padding: 2px 4px;
}
.item.makeMyMonstersGrow {
  z-index: 1;
  transform: scale(2);
}
.item.makeMyMonstersGrow .toggle-stuff {
  opacity: 1;
}
.item.makeMyMonstersGrow .toggle-stuff select,
.item.makeMyMonstersGrow .toggle-stuff button {
  display: block;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="box">
  <div class="flow-panel">
    <div class="snapper"></div>
  </div>
  <div class="items">
    <div class="snapper">
      <div class="item">
        <div class="toggle-stuff">
          <h3>Morphin Time!</h3>
          <select class="form-control">
            <option>Red</option>
            <option>Blue</option>
            <option>Green</option>
          </select>
          <button type="button" class="save btn btn-default pull-left">Save</button>
          <button type="button" class="cancel btn btn-default pull-right">Cancel</button>
        </div>
      </div>
      <div class="item">
        <div class="toggle-stuff">
          <h3>Morphin Time!</h3>
          <select class="form-control">
            <option>Red</option>
            <option>Blue</option>
            <option>Green</option>
          </select>
          <button type="button" class="save btn btn-default pull-left">Save</button>
          <button type="button" class="cancel btn btn-default pull-right">Cancel</button>
        </div>
      </div>
      <div class="item">
        <div class="toggle-stuff">
          <h3>Morphin Time!</h3>
          <select class="form-control">
            <option>Red</option>
            <option>Blue</option>
            <option>Green</option>
          </select>
          <button type="button" class="save btn btn-default pull-left">Save</button>
          <button type="button" class="cancel btn btn-default pull-right">Cancel</button>
        </div>
      </div>
      <div class="item">
        <div class="toggle-stuff">
          <h3>Morphin Time!</h3>
          <select class="form-control">
            <option>Red</option>
            <option>Blue</option>
            <option>Green</option>
          </select>
          <button type="button" class="save btn btn-default pull-left">Save</button>
          <button type="button" class="cancel btn btn-default pull-right">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ilyador/panel-ui-ZGNxRL */
html {
  box-sizing: border-box;
}

body {
  font-family: 'Fauna One', serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.box {
  display: flex;
  height: 600px;
  overflow: hidden;
}

.snapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.flow-panel {
  flex: 1;
  height: 100%;
  padding: 10px;
  background-color: yellow;
}

.items {
  flex: 0 300px;
  height: 100%;
  padding: 10px;
  background-color: green;
  box-shadow: -1px 0px 13px 0px #545454;
}

.item {
  width: 161px;
  height: 100px;
  position: relative;
  background-color: red;
  cursor: pointer;
  box-shadow: 0px 0 32px 5px rgba(182, 47, 47, 0.44);
  border-radius: 2px;
  transition: transform cubic-bezier(0.14, 0.56, 0.35, 0.97) 1s, box-shadow linear 0.5s, background-color linear 0.5s;
}
.item.shift {
  background-color: blue;
  box-shadow: 0px 0 32px 5px rgba(47, 83, 182, 0.44);
}
.item.selected {
  border: solid 1px black;
}
.item .toggle-stuff {
  padding: 10px;
  transition: opacity cubic-bezier(0.16, 0.76, 0.52, 1) 1s;
  opacity: 0;
}
.item select {
  display: none;
  cursor: pointer;
  margin-bottom: 7px;
}
.item h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.3px;
  color: #fff;
}
.item button {
  display: none;
  font-size: 9px;
  padding: 2px 4px;
}
.item.makeMyMonstersGrow {
  z-index: 1;
  transform: scale(2);
}
.item.makeMyMonstersGrow .toggle-stuff {
  opacity: 1;
}
.item.makeMyMonstersGrow .toggle-stuff select,
.item.makeMyMonstersGrow .toggle-stuff button {
  display: block;
}


/*Downloaded from https://www.codeseek.co/ilyador/panel-ui-ZGNxRL */
/*
The elements should have a visual representation within the panel.
The elements are draggable to the Flow Panel which will be described next.

Flow Panel - should have the ability to:
Display each element as a visual representation
Drag each element around
Each element should be selectable.
Double click on an element will open properties modal with 1 options per element (You can choose which ever properties you would like- but it has to be different for each element) with a select box of values
The modal should have OK / Cancel button which will make css manipulation as described in the element’s option being changed.
*/

function zoom(event) {
  var thisItem = event.data.item;
  if(thisItem.hasClass( "makeMyMonstersGrow" )) {
    thisItem.removeClass("makeMyMonstersGrow");
  } else {
    $(".item").removeClass("makeMyMonstersGrow");
    thisItem.addClass("makeMyMonstersGrow");
  }
}

function select(item){
  $(".item").removeClass(selected);
}

$(".item").draggable({
  containment: ".box",
  snap: ".snapper, .item"
});


$(".flow-panel .snapper").droppable({
  drop: function(event, ui) {
    ui.draggable
      .on("dblclick", {item: ui.draggable}, zoom)
      .addClass("shift")
  }
});

$(".items .snapper").droppable({
  drop: function(event, ui) {
    ui.draggable
      .removeClass("makeMyMonstersGrow")
      .removeClass("shift")
      .off("dblclick")
  }
});

Comments