Workspace Picker Dropdown

This panel is the dropdown that shows the available workspaces. You choose a workspace template for different layouts. You can fork anyone's layout.

by chilipeppr

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<!-- Workspace Grid (Like Kickstarter Grid) -->
<!-- 3 cols by N rows -->
<div class="container-fluid com-chilipeppr-wsgrid">
  <div class="row">
    <div class="col-lg-6">
      <!-- TinyG  -->
      <div id="com-chilipeppr-wsgrid-tinyg" class="com-chilipeppr-wspicker-item">
      </div>
      <!-- end TinyG  Milling -->
    </div>
    <div class="col-lg-6">
      <!-- Grbl -->
      <div id="com-chilipeppr-wsgrid-grbl" class="com-chilipeppr-wspicker-item">
      </div>
      <!-- end Grbl -->

    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">

      <!-- Basic Serial Port Communicator -->
      <div id="com-chilipeppr-wsgrid-serialport" class="com-chilipeppr-wspicker-item">
      </div>
      <!-- end Basic Serial Port Communicator -->
    </div>

    <div class="col-lg-6">

      <!-- Terminal Workspace -->
      <div id="com-chilipeppr-wsgrid-terminal" class="com-chilipeppr-wspicker-item">
      </div>
      <!-- end Basic Serial Port Communicator -->
    </div>

  </div>

  <div class="row">
    <div class="col-lg-6">

      <!-- NodeMCU workspace -->
      <div id="com-chilipeppr-wsgrid-nodemcu" class="com-chilipeppr-wspicker-item">
      </div>
      <!-- end NodeMCU workspace -->
    </div>

  </div>


  <h3> Popular Workspace User Contributions</h3>
  <div id="usercontrib">

    <div class="row">
      <div class="col-sm-3">
        <!-- TinyG Tablet -->
        <div id="com-chilipeppr-wsgrid-tinygtablet" class="com-chilipeppr-wspicker-item">
          <div class="billboard-content">
            <h4 class="billboard-title" style="">TinyG Tablet Workspace</h4>

            <p class="billboard-url" style=""><a href="http://chilipeppr.com/tinygtablet">chilipeppr.com/tinygtablet</a>

            </p>
            <div class="billboard-imgcontain" style="">
              <a...

CSS

#com-chilipeppr-wspicker-collapsed {
  position: absolute;
  top: 0px;
  right: 4px;
  width: 32px;
  height: 160px;
  background-color: #f6f6f6;
}

#com-chilipeppr-wspicker-collapsed .panel-body {
  padding: 3px;
}

#com-chilipeppr-wspicker-collapsed .rotate-div {
  position: relative;
  width: 24px;
  top: 10px;
  left: 0;
  border: 0px solid red;
}

#com-chilipeppr-wspicker-collapsed .rotate {
  padding: 0;
  margin: 0;
  -moz-transform: rotate(90.0deg);
  /* FF3.5+ */
  -o-transform: rotate(90.0deg);
  /* Opera 10.5 */
  -webkit-transform: rotate(90.0deg);
  /* Saf3.1+, Chrome */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=-0.083);
  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.083)";
  /* IE8 */
}

#com-chilipeppr-wspicker-toggle-btn-rt {
  border-radius: 4px;
}

#com-chilipeppr-wspicker {
  padding: 0;
}

.com-chilipeppr-wspicker-row {
  padding-bottom: 10px;
  border-bottom: 1px solid #dddddd;
}

.com-chilipeppr-wspicker-row .dropdown-toggle {
  border: 0;
}

.com-chilipeppr-wspicker-img {
  width: 100%;
}

.com-chilipeppr-wspicker-btnbar {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.com-chilipeppr-wspicker-btn {}

.com-chilipeppr-wspicker-stats2 {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 4px 10px 10px 10px;
  background-color: rgba(255, 255, 255, 0.5);
}

.com-chilipeppr-wspicker-imgcontain {
  border: 0px solid red;
  border-radius: 5px;
  position: relative;
  width: 100%;
  height: 160px;
  background-position: center;
  background-size: cover;
}

.com-chilipeppr-wspicker-btnbar2 {
  padding-top: 10px;
}

@media (min-width: 768px) {
  .com-chilipeppr-wsgrid .com-chilipeppr-ws-billboard-desc {
    /* height: 160px; */
    overflow: auto;
    /* overflow:ellipsis; */
  }
}

JavaScript

cprequire(["chilipeppr_ready"], function() {

  chilipeppr.load("#com-chilipeppr-wsgrid-serialport",
    "http://fiddle.jshell.net/chilipeppr/astYW/show/light");
  chilipeppr.load("#com-chilipeppr-wsgrid-tinyg",
    "http://fiddle.jshell.net/chilipeppr/Guvv4/show/light");

  chilipeppr.load("#com-chilipeppr-wsgrid-grbl",
    "http://fiddle.jshell.net/chilipeppr/6z76Z/show/light");

  chilipeppr.load("#com-chilipeppr-wsgrid-terminal",
    "http://raw.githubusercontent.com/chilipeppr/workspace-terminal/master/auto-generated-workspace.html",
    function() {
      $('#com-chilipeppr-workspace-terminal-billboard').removeClass("hidden");
      $('#com-chilipeppr-workspace-terminal').remove();


    });
    
  chilipeppr.load("#com-chilipeppr-wsgrid-nodemcu",
    "http://raw.githubusercontent.com/chilipeppr/workspace-nodemcu/master/auto-generated-workspace.html",
    function() {
      $('#com-chilipeppr-workspace-nodemcu-billboard').removeClass("hidden");
      $('#com-chilipeppr-workspace-nodemcu').remove();

    });

  // http://chilipeppr.com/tigershark3d
  // grbl_raspicam

  // Button to expand
  $('#com-chilipeppr-wspicker-toggle-btn').click(function() {
    $('#com-chilipeppr-wspicker-collapsed').addClass('hidden');
    $('#com-chilipeppr-wspicker-expanded').removeClass('hidden');
    // reset classes in main workspace area to make room for us
    // make the main workspace area only take up 8 cols instead of 12
    $('#pnlWorkspace').removeClass('col-xs-12');
    $('#pnlWorkspace').removeClass('pnlWorkspaceRtSidebarCollapsed');
    $('#pnlWorkspace').addClass('pnlWorkspaceRtSidebarExpanded');
    $('#pnlWorkspace').addClass('col-xs-8');
    // show the right sidebar area and make it use 4 cols
    //$('#pnlRtSidebar').removeClass('hidden');
    $('#pnlRtSidebar').addClass('col-xs-4');
  });
  // Button to re-collapse
  $('#com-chilipeppr-wspicker-toggle-btn-rt').click(function() {
    $('#com-chilipeppr-wspicker-collapsed').removeClass('hidden');
   ...