alecperkins · October 15, 2012 19:59 · Oct 15, 2012 · Oct 15, 2012 · Oct 15, 2012 · Oct 15, 2012
diff --git a/notes.md b/notes.md
@@ -1,3 +1,5 @@
-# sampleproto
+# Rollup test
 
+*Note: this is a sample [Proto](https://github.com/droptype/proto) project. For more information, see this [walkthrough](http://marquee.by/alecperkins/proto).*
 
+I think the rollup works best at 0.25s. Any slower and it feels sluggish, and faster is too abrupt.
diff --git a/script.coffee b/script.coffee
@@ -1,3 +1,14 @@
 
 $('.sidebar-item .title').on 'click', ->
     $(this).parent().toggleClass('open')
+
+$('label').each ->
+    $label = $(this)
+    console.log this
+    $label.on 'click', (e) ->
+        e.stopImmediatePropagation()
+        e.stopPropagation()
+        if $label.find('input').is(':checked')
+            $label.addClass('active')
+        else
+            $label.removeClass('active')
diff --git a/style.styl b/style.styl
@@ -22,7 +22,7 @@ sidebar_item_padding = 10px
     overflow: hidden
     font-family: Helvetica
     font-weight: 700
-    transition(height, 0.5s)
+    transition(height, 0.25s)
     &.open
         height: 200px
     .title
@@ -32,6 +32,7 @@ sidebar_item_padding = 10px
         box-sizing: border-box
         cursor: pointer
         border-bottom: 1px solid #ccc
+        background-color: #eee
 
     .info
 
@@ -41,7 +42,11 @@ sidebar_item_padding = 10px
     label
         display: block
         padding: sidebar_item_padding
-        &:hover
+        &:hover, &.active:hover
             background-color: #eee
+        &.active
+            background-color: #dfd
+        &:active
+            background-color: #ddd
     input
         float: right
diff --git a/markup.jade b/markup.jade
@@ -1,10 +1,14 @@
 
 #sidebar
 
-    .sidebar-item
-        span.title Item 1
-        div.info
+    .sidebar-item.open
+        .title Item 1
+        .info
             label Some controls
                 input(type='checkbox')
+            label More controls
+                input(type='checkbox')
+            label Other controls
+                input(type='checkbox')
 
 
diff --git a/script.coffee b/script.coffee
@@ -1,3 +1,3 @@
-console.log "loaded"
-
 
+$('.sidebar-item .title').on 'click', ->
+    $(this).parent().toggleClass('open')
diff --git a/settings.json b/settings.json
@@ -4,12 +4,8 @@
     "script_libraries": [
         "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js",
         "https://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js",
-        "https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.3/coffee-script.min.js",
-        "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js",
         "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js",
-        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js",
-        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js",
-        "https://raw.github.com/Marak/Faker.js/master/Faker.js"
+        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"
     ],
     "style_libraries": [
         "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"

diff --git a/style.styl b/style.styl
@@ -1,2 +1,47 @@
+transition(prop, dur)
+    -webkit-transition-property: prop
+    -webkit-transition-duration: dur
+    -moz-transition-property: prop
+    -moz-transition-duration: dur
+    -ms-transition-property: prop
+    -ms-transition-duration: dur
+    -o-transition-property: prop
+    -o-transition-duration: dur
+    transition-property: prop
+    transition-duration: dur
+
+
 #sidebar
-    border 1px solid #ccc
+    border: 1px solid #ccc
+    width: 300px
+
+sidebar_item_height = 50px
+sidebar_item_padding = 10px
+.sidebar-item
+    height: sidebar_item_height
+    overflow: hidden
+    font-family: Helvetica
+    font-weight: 700
+    transition(height, 0.5s)
+    &.open
+        height: 200px
+    .title
+        font-size: 25px
+        height: sidebar_item_height + 1
+        padding: sidebar_item_padding
+        box-sizing: border-box
+        cursor: pointer
+        border-bottom: 1px solid #ccc
+
+    .info
+
+    label, input
+        cursor: pointer
+
+    label
+        display: block
+        padding: sidebar_item_padding
+        &:hover
+            background-color: #eee
+    input
+        float: right
diff --git a/markup.jade b/markup.jade
@@ -1,3 +1,10 @@
-h1 Hello, world!
+
+#sidebar
+
+    .sidebar-item
+        span.title Item 1
+        div.info
+            label Some controls
+                input(type='checkbox')
 
 
diff --git a/style.styl b/style.styl
@@ -1,5 +1,2 @@
-h1
-    font-weight 300
-    font-family Helvetica
-
-
+#sidebar
+    border 1px solid #ccc
diff --git a/markup.jade b/markup.jade
@@ -0,0 +1,3 @@
+h1 Hello, world!
+
+
diff --git a/notes.md b/notes.md
@@ -0,0 +1,3 @@
+# sampleproto
+
+
diff --git a/script.coffee b/script.coffee
@@ -0,0 +1,3 @@
+console.log "loaded"
+
+
diff --git a/settings.json b/settings.json
@@ -0,0 +1,17 @@
+{
+    "name": "sampleproto",
+    "proto_version": "0.0.4",
+    "script_libraries": [
+        "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.3/coffee-script.min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js",
+        "https://raw.github.com/Marak/Faker.js/master/Faker.js"
+    ],
+    "style_libraries": [
+        "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"
+    ]
+}
diff --git a/style.styl b/style.styl
@@ -0,0 +1,5 @@
+h1
+    font-weight 300
+    font-family Helvetica
+
+