Add active style to easing in list

ai · Aug 25, 2012 · b3e6608 · b3e6608
1 parent 080378a
commit b3e6608
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 100 deletions.
diff --git a/layout/_easing.slim b/layout/_easing.slim
@@ -1,15 +1,16 @@
 li.easing class=easing_classes(@easing)
-  h3.easing-title= @easing.name
-  - x = 120
-  - y = 60
-  - dots = @easing.dots(100, x, y)
-  a.graph.link href="##{@easing.name}"
-    .example
-      .rect
-      .arrow
-    .dot
-    svg( xmlns="http://www.w3.org/2000/svg"
-         viewBox="-2 -40 #{x + 4} #{y + 80}" )
-      line x1="0" y1="0" x2="#{x}" y2="0"
-      line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
-      path d="M0,#{y} L#{to_path dots}"
+  .button
+    h3.easing-title= @easing.name
+    - x = 120
+    - y = 60
+    - dots = @easing.dots(100, x, y)
+    a.graph.link href="##{@easing.name}"
+      .example
+        .rect
+        .arrow
+      .dot
+      svg( xmlns="http://www.w3.org/2000/svg"
+           viewBox="-2 -40 #{x + 4} #{y + 80}" )
+        line x1="0" y1="0" x2="#{x}" y2="0"
+        line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
+        path d="M0,#{y} L#{to_path dots}"
diff --git a/layout/action.js.coffee b/layout/action.js.coffee
@@ -14,13 +14,18 @@ jQuery ($) ->
     document.location.hash = hash
     $(window).scrollTop(scroll)
 
-  easings.find('.link').click ->
+  links = easings.find('.link')
+
+  links.click ->
     if $(@).closest('li').hasClass('highlight')
       hash('')
     else
       hash($(@).attr('href'))
     false
 
+  links.mousedown -> $(@).closest('.button').addClass('pressed')
+  links.mouseup   -> easings.find('.button').removeClass('pressed')
+
   easings.mouseenter -> $(@).addClass('hover')
   easings.mouseleave -> $(@).removeClass('hover')
 

diff --git a/layout/index.html.slim b/layout/index.html.slim
@@ -18,98 +18,99 @@
         text x="#{x - 5}" y="#{y - 3}" t
         path d="M0,#{y} L#{to_path dots}"
 
-.page-slider
-  .easings
-    .part.css
-      h2.part-title title=t.easings.css css+js
-      ul
-        - css_easings.each do |easing|
-          - @easing = easing
-          = partial 'easing'
-    .part.js
-      h2.part-title title=t.easings.js js
-      ul
-        - js_easings.each do |easing|
-          - @easing = easing
-          = partial 'easing'
-  article.howtos
-    section.js
-      h3 JavaScript
-      p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
-      pre
-        code
-          | div.animate({ top: '-=100px' }, 600, '#{easing_example}', function () { … })
-
-    section.sass
-      h3 Sass
-      p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
-      pre
-        code
-          | div
-              @include transition(all 600ms ceaser('#{easing_example}'))
-
-    section.css
-      h3 CSS
-      p= t.howtos.css + ' ' + t.howtos.css_bad
-      .click
-        p= t.howtos.css_help
-      pre
-        code
-          | div {
-              -webkit-transition: all 600ms #{easing_example(t.howtos.curve)};
-              -moz-transition:    all 600ms #{easing_example(t.howtos.curve)};
-              -ms-transition:     all 600ms #{easing_example(t.howtos.curve)};
-              -o-transition:      all 600ms #{easing_example(t.howtos.curve)};
-              transition:         all 600ms #{easing_example(t.howtos.curve)}; }
-
-  - all_easings.each do |easing|
-    - next if easing.linear?
-    article.easing-description class=easing.name
-      a.back href="#"
-        | ←
-        span.text= t.easing.all_easings
-      h2= easing.name
-      .graph
-        - x = 120
-        - y = 60
-        - dots = easing.dots(100, x, y)
-        svg( xmlns="http://www.w3.org/2000/svg"
-             viewBox="-2 -40 #{x + 4} #{y + 80}" )
-          line x1="0" y1="0" x2="0" y2="#{y}"
-          text x="2" y="6" x
-          line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
-          text x="#{x - 5}" y="#{y - 3}" t
-          path d="M0,#{y} L#{to_path dots}"
+.page-crop
+  .page-slider
+    .easings
+      .part.css
+        h2.part-title title=t.easings.css css+js
+        ul
+          - css_easings.each do |easing|
+            - @easing = easing
+            = partial 'easing'
+      .part.js
+        h2.part-title title=t.easings.js js
+        ul
+          - js_easings.each do |easing|
+            - @easing = easing
+            = partial 'easing'
+    article.howtos
       section.js
         h3 JavaScript
         p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
         pre
           code
-            | div.animate({ top: '-=100px' }, 600, '#{easing_example(easing.name)}', function () { … })
+            | div.animate({ top: '-=100px' }, 600, '#{easing_example}', function () { … })
 
       section.sass
         h3 Sass
-        - if easing.css
-          p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
-          pre
-            code
-              | div
-                  @include transition(all 600ms ceaser('#{easing_example(easing.name)}'))
-        - else
-          p= t.easing.no_css
+        p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
+        pre
+          code
+            | div
+                @include transition(all 600ms ceaser('#{easing_example}'))
 
       section.css
         h3 CSS
-        - if easing.css
-          p= t.howtos.css
+        p= t.howtos.css + ' ' + t.howtos.css_bad
+        .click
+          p= t.howtos.css_help
+        pre
+          code
+            | div {
+                -webkit-transition: all 600ms #{easing_example(t.howtos.curve)};
+                -moz-transition:    all 600ms #{easing_example(t.howtos.curve)};
+                -ms-transition:     all 600ms #{easing_example(t.howtos.curve)};
+                -o-transition:      all 600ms #{easing_example(t.howtos.curve)};
+                transition:         all 600ms #{easing_example(t.howtos.curve)}; }
+
+    - all_easings.each do |easing|
+      - next if easing.linear?
+      article.easing-description class=easing.name
+        a.back href="#"
+          | ←
+          span.text= t.easing.all_easings
+        h2= easing.name
+        .graph
+          - x = 120
+          - y = 60
+          - dots = easing.dots(100, x, y)
+          svg( xmlns="http://www.w3.org/2000/svg"
+               viewBox="-2 -40 #{x + 4} #{y + 80}" )
+            line x1="0" y1="0" x2="0" y2="#{y}"
+            text x="2" y="6" x
+            line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
+            text x="#{x - 5}" y="#{y - 3}" t
+            path d="M0,#{y} L#{to_path dots}"
+        section.js
+          h3 JavaScript
+          p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
           pre
             code
-              | div {
-                  -webkit-transition: all 600ms #{easing_example(easing.css)};
-                  -moz-transition:    all 600ms #{easing_example(easing.css)};
-                  -ms-transition:     all 600ms #{easing_example(easing.css)};
-                  -o-transition:      all 600ms #{easing_example(easing.css)};
-                  transition:         all 600ms #{easing_example(easing.css)}; }
-          p= t.easing.edit("http://cubic-bezier.com/##{easing.bezier}")
-        - else
-          p= t.easing.no_css
+              | div.animate({ top: '-=100px' }, 600, '#{easing_example(easing.name)}', function () { … })
+
+        section.sass
+          h3 Sass
+          - if easing.css
+            p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
+            pre
+              code
+                | div
+                    @include transition(all 600ms ceaser('#{easing_example(easing.name)}'))
+          - else
+            p= t.easing.no_css
+
+        section.css
+          h3 CSS
+          - if easing.css
+            p= t.howtos.css
+            pre
+              code
+                | div {
+                    -webkit-transition: all 600ms #{easing_example(easing.css)};
+                    -moz-transition:    all 600ms #{easing_example(easing.css)};
+                    -ms-transition:     all 600ms #{easing_example(easing.css)};
+                    -o-transition:      all 600ms #{easing_example(easing.css)};
+                    transition:         all 600ms #{easing_example(easing.css)}; }
+            p= t.easing.edit("http://cubic-bezier.com/##{easing.bezier}")
+          - else
+            p= t.easing.no_css
diff --git a/layout/style.css.sass b/layout/style.css.sass
@@ -47,9 +47,6 @@ $easing-width: 120px + 4px
   margin: 0 auto
   position: relative
 
-.root
-  overflow: hidden
-
 .about
   padding: 20px ($easing-width + 40px) 5px 0
   line-height: 1.3
@@ -95,6 +92,9 @@ $easing-width: 120px + 4px
     margin-right: 25px
   &.easeOutElastic .easing-title
     +box-shadow(white 0 26px 8px -8px inset)
+  .button
+    margin: -5px
+    padding: 5px
   .easing-title
     text-align: center
     font-size: 15px
@@ -106,6 +106,15 @@ $easing-width: 120px + 4px
     text-decoration: none
     position: relative
 
+.easings
+  .easing
+    background: #f0f0f0
+    box-shadow: inset 0 0 5px black(0.5)
+  .button
+    background: white
+    &.pressed
+      +scale(0.9)
+
 .graph
   svg
     width: $easing-width
@@ -131,6 +140,7 @@ $easing-width: 120px + 4px
     width: 21px
     height: 12px
     overflow: hidden
+    z-index: 10
     .rect
       position: absolute
       top: 0
@@ -222,6 +232,10 @@ $easing-width: 120px + 4px
 
 // Slider
 
+.page-crop
+  overflow: hidden
+  margin: -10px 0 0 -10px
+  padding: 10px 0 0 10px
 .easing-description
   position: absolute
   top: 0