Spectacle: Module Element

Stylesheet and select JS from Spectacle App for prototyping elements

by Nicholas Poole

HTML

<header>
  <button class="hamburger">&#9776;</button>
  <button class="cross">&#735;</button>
  <div align="center" class="top-bar"><img class="logo" src="https://npoole.github.io/SpectacleApp/img/splogotype_50.png"></div>
</header>

<div class="menu">
    <ul>
      <a href="#">
        <li>NEW PROJECT</li>
      </a>
      <a href="#">
        <li>OPEN PROJECT</li>
      </a>
      <a href="#">
        <li>SAVE PROJECT</li>
      </a>
      <a href="#">
        <li>SETTINGS</li>
      </a>
      <a href="#">
        <li>OH FUCK HELP ME</li>
      </a>
    </ul>
  </div>


<div class="canvas">

<div class="module accel-module">

<div class="bar-drk"></div><img class="mod-label" src="https://npoole.github.io/SpectacleApp/img/rect8398-1.png"><input type="image" class="mod-label mod-up" src="https://npoole.github.io/SpectacleApp/img/rect-up-sml.png"><input type="image" class="mod-label mod-dn" src="https://npoole.github.io/SpectacleApp/img/rect-dn-sml.png"><input type="image" class="mod-label mod-del" src="https://npoole.github.io/SpectacleApp/img/rect-x-sml.png"><input type="image" class="mod-label mod-act" src="https://npoole.github.io/SpectacleApp/img/rect-act-sml.png"><div class="chunk"><textarea id="mod-nick" class="project-text" style="font-size: 14pt" rows="1">Board Nickname</textarea></div><div class="chunk"><textarea readonly id="mod-acts" class="project-text" rows="1">No Actions Assigned</textarea>
<div class="actions-list accel">
  <img class="mod-label" src="https://npoole.github.io/SpectacleApp/img/rect8398-1.png"><img class="mod-label" src="https://npoole.github.io/SpectacleApp/img/actionstag.png"><div class="fillbar"></div>
</div></div>
<div class="act-menu"> <ul> <a href="javascript:hideActMenu();"> <li>Cancel</li></a> <a href="#"> <li>Sense All Motion</li></a> <a href="#"> <li>Sense Orientation</li></a> <a href="#"> <li>Measure Acceleration</li></a></ul> </div>

</div>

<div class="module button-module">
<div class="bar-drk"></div><img...

CSS

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;
  background-color: #efefef;
  color: #1c2727;
}

.project-text{
  width: 80%;
  border: 0px;
  background-color: rgba(255,255,255,0);
  resize: none;
  overflow: hidden;
}

header {
  width: 100%;
  position: fixed;
  background: #1c2727;
  height: 50px;
  line-height: 60px;
  z-index: 100000;
}

.logo {
  position: relative;
}

.hamburger {
  background: none;
  position: absolute;
  top: 0px;
  right: 100;
  line-height: 45px;
  padding: 5px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 100;
  padding: 13px 15px 0px 15px;
  color: #fff;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.menu {
  z-index: 1000000;
  font-weight: bold;
  font-size: 0.8em;
  top: 50px;
  width: 100%;
  background: #131313;
  position: fixed;
  text-align: center;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.menu li {
  display: block;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}

.menu li:hover {
  display: block;
  background: #181818;
  padding: 15px 0 15px 0;
  border-bottom: #1d1f20 1px solid;
}

.menu ul li a {
  text-decoration: none;
  margin: 0px;
  color: #fff;
}

.menu ul li a:hover {
  color: #fff;
  text-decoration: none;
}

.menu a {
  text-decoration: none;
  color: white;
}

.menu a:hover {
  text-decoration: none;
  color: white;
}

.module-list {
  position: fixed;
  z-index: 10000;
  font-weight: bold;
  font-size: 0.8em;
  top: 50px;
  width: 100%;
  height: 85%;
  background: #ffffff;
  text-align: center;
}

.actions-list {
  position: fixed;
  z-index: 10000;
  font-weight: bold;
  font-size: 0.8em;
  top: 50px;
  width: 100%;
  height:...

JavaScript

// Project Textarea Resize Handler
$(".canvas").on("keyup", ".project-text" ,(function(e) {
$(this).height(1).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
this.innerHTML = $(this).val();
}));

$(".actions-list").hide();
$("exit-foot").hide();
$("actions-foot").hide();
$(".module-list").hide();
$(".cross").hide();
$(".menu").hide();
$(".act-menu").hide();

// Handler for opening the hamburger menu
$(".hamburger").click(function() {
  $(".menu").slideToggle("slow", function() {
    $(".hamburger").hide();
    $(".cross").show();
  });
});

// Handler for closing the hamburger menu
$(".cross").click(function() {
  $(".menu").slideToggle("slow", function() {
    $(".cross").hide();
    $(".hamburger").show();
  });
});

$(".canvas").on("click", ".mod-act", (function(){
var targetmodule = $(this);
while(targetmodule.attr("class").split(' ')[0] != "module"){
targetmodule = targetmodule.parent();
}
$(targetmodule).find(".actions-list").slideToggle("slow", function() {
    $("footer").hide();
    $("actions-foot").show();
    window.scrollTo(0, 0);
  });
}));

$(document).on("click", ".add-action", (function(){
var targetmodule = $(".actions-list:visible");
while(targetmodule.attr("class").split(' ')[0] != "module"){
targetmodule = targetmodule.parent();
};
$(targetmodule).find(".act-menu").slideToggle("slow", function() {
    $("actions-foot").hide();
  });
}));

function hideActMenu(){
$(".act-menu:visible").slideToggle("slow", function() {
    $("actions-foot").show();
  });
};

// THIS NEEDS TO GO TO THE MASTER BRANCH
$(document).on("click", ".act-list-exit", (function(){
	$(".actions-list:visible").slideToggle("slow", function() {
    $("footer").show();
    $("actions-foot").hide();
  });
}));