Merge pull request #32 from github/workbooks

Simplify cheatsheet/outline dichotomy, unify under Workbook page content

Author: Jordan McCullough

Rakefile

@@ -8,7 +8,7 @@ end
 task :test do
   sh 'bundle exec sass _stylesheets/page.scss:_stylesheets/page.css'
   sh 'bundle exec sass _stylesheets/home.scss:_stylesheets/home.css'
-  sh 'bundle exec sass _stylesheets/outline.scss:_stylesheets/outline.css'
+  sh 'bundle exec sass _stylesheets/workbook.scss:_stylesheets/workbook.css'
 
   sh 'bundle exec jekyll build'
 

_config.yml

@@ -22,5 +22,6 @@ exclude:
 
 include:
 - _stylesheets
+- _javascript
 
 markdown: rdiscount

_includes/license.html

@@ -1,3 +1,3 @@
 <div class="license">
-  <a href="../license.html">Shared with the community under license</a>
+  <a href="../license.html">Shared with the community under a Creative Commons license</a>
 </div>

_javascript/workbook.js

@@ -0,0 +1,51 @@
+(function(){
+  var scopeRadios = [];
+
+  scopeRadios.push(document.getElementById("outline"));
+  scopeRadios.push(document.getElementById("summary"));
+  scopeRadios.push(document.getElementById("details"));
+
+  for(var i=0; i<scopeRadios.length; i++){
+    scopeRadios[i].addEventListener("click", switchScope);
+
+    if(scopeRadios[i].checked){
+      switchScope(false, scopeRadios[i].id);
+    }
+  }
+
+  function switchScope(event, id){
+    var activeId;
+
+    if(event){
+      activeId = event.target.id;
+    }
+    else if (id){
+      activeId = id;
+    }
+
+    console.log("ActiveId: " + activeId);
+
+    var scopeWrapper = document.getElementById("scope");
+
+    switch(activeId){
+      case "outline":
+        showSet(scopeWrapper, "outline");
+        break;
+      case "summary":
+        showSet(scopeWrapper, "summary");
+        break;
+      case "details":
+        showSet(scopeWrapper, "details");
+        break;
+    }
+  }
+
+  function showSet(wrapper, scope){
+    console.log("Changing scope");
+    wrapper.className = scope;
+  }
+  function selection(identifier){
+    var allEl = document.getElementsByClassName(identifier);
+    return allEl;
+  }
+})();

_layouts/workbook.html

@@ -0,0 +1,47 @@
+---
+layout: bare
+theme: workbook
+---
+
+<section class="hero">
+  <div class="container">
+    <span class="octicon octicon-book"></span><h1>{{ page.title }}</h1>
+    {% include license.html %}
+  </div>
+</section>
+
+<section>
+  <div class="container">
+
+    <div class="tab-panel">
+
+      <input type="radio" class="material-type" name="material-scope" id="outline" value="outline">
+      <label class="tab column-3up" for="outline">
+        <span>Outline</span>
+      </label>
+
+      <input type="radio" class="material-type" name="material-scope" id="summary" value="summary" checked="checked">
+      <label class="tab column-3up" for="summary">
+        <span>Summary</span>
+      </label>
+
+      <input type="radio" class="material-type" name="material-scope" id="details" value="details">
+      <label class="tab column-3up" for="details">
+        <span>Details</span>
+      </label>
+    </div>
+
+<!--     <nav class="toc">
+      TOC
+    </nav> -->
+
+    <span id="scope">
+      {{ content }}
+    </span>
+  </div>
+</section>
+
+{% include footer.html %}
+
+
+<script src="../_javascript/workbook.js"></script>

_stylesheets/core.css

@@ -5,7 +5,8 @@ h1{
 }
 h2{
   font-size: 200%;
-  line-height: 150%;
+  // line-height: 150%;
+  margin: 20px 0 0 0;
   color: #222;
 }
 h2+p{
@@ -14,7 +15,7 @@ h2+p{
   text-rendering: optimizeLegibility;
   line-height: 150%;
   opacity: .65;
-  margin: auto auto 20px auto;
+  // margin: auto auto 20px auto;
 }
 h3{
   font-size: 125%;
@@ -24,6 +25,7 @@ h3{
 p{
   text-rendering: optimizeLegibility;
   line-height: 150%;
+  margin-bottom: 1em;
 }
 header{
   background: #fff;
@@ -91,14 +93,12 @@ code{
 }
 pre{
   width: 100%;
-  background: #222;
-  line-height: 140%;
-  margin: 30px 0;
+  // background: #222;
+  background: rgba(0,0,0,.04);
   border-radius: 3px;
+  padding: 0 10px;
 
   code{
-    display: block;
-    padding: 10px;
   }
 }
 table{
@@ -167,3 +167,102 @@ ul{
     padding: 5px;
   }
 }
+
+.tab-panel{
+  background: #fff;
+  position: block;
+  margin: 30px auto 0 auto;
+  height: 2em;
+  width: 360px;
+  position: relative;
+
+  label{
+    background: #f5f5f5;
+    -webkit-transition: background 250ms ease-in-out;
+
+    &:hover{
+      background: #fff;
+    }
+  }
+
+  .column-2up{
+    width: 50%;
+  }
+  .column-3up{
+    width: 33%;
+  }
+  .column-4up{
+    width: 25%;
+  }
+
+  .tab{
+    float: left;
+    box-shadow: 0 0 0 1px #dfdfdf;
+
+    &.first{
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+      border-right: none;
+    }
+    &.last{
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+      border-left: none;
+    }
+    & > span{
+      display: block;
+      text-align: center;
+      margin: 10px;
+      opacity: .6;
+      font-size: 80%;
+    }
+  }
+
+  .panel-content{
+    width: 200%;
+    visibility: hidden;
+    // opacity: 0;
+    position: absolute;
+    left: -50%;
+
+    -webkit-transition: opacity 400ms;
+    transition: opacity 400ms;
+
+    .octicon-hero{
+      display: inline-block;
+      padding: 0 10px;
+      color: #ddd;
+    }
+    p{
+      font-size: 80%;
+      text-align: center;
+      margin: 20px 0;
+      font-weight: 200;
+    }
+    ul{
+      text-align: center;
+    }
+    li{
+      display: inline-block;
+    }
+  }
+
+  input.material-type{
+    position: absolute;
+    left: -999px;
+
+    &:checked + label{
+      background: $color-bright;
+
+      & > span{
+        color: #fff;
+        opacity: 1;
+      }
+    }
+
+    &:checked + label.tab > div.panel-content{
+      visibility: visible;
+      // opacity: 1;
+    }
+  }
+}