styleguide_rails 0.1.3 → 0.2.0

data/lib/generators/styleguide/templates/index.html.erb

@@ -1,9 +1,20 @@
 <nav>
   <ul>
     <li><a>Widgets</a>
-    <ul>
-      <%= render :partial => 'widget_link', :collection => @widgets, :as => :widget %>
-    </ul>
+      <ul>
+        <%= render :partial => 'widget_link', :collection => @widgets, :as => :widget %>
+      </ul>
+    <li><a>Width</a>
+      <ul id='width-options'>
+        <li class='width-option' data-width='320px'>320</li>
+        <li class='width-option' data-width='480px'>480</li>
+        <li class='width-option' data-width='748px'>748</li>
+        <li class='width-option' data-width='960px'>960</li>
+        <li class='width-option' data-width='1024px'>1024</li>
+        <li class='width-option' data-width='1280px'>1280</li>
+        <li class='width-option' data-width='640px'>iPhone</li>
+        <li class='width-option' data-width='100%'>Full</li>
+      </ul>
     </li>
   </ul>
 </nav>

data/lib/generators/styleguide/templates/styleguide.css

@@ -17,12 +17,6 @@
   width: 100%;
   line-height: 32px;
 }
-#styleguide_rails > nav > ul ul {
-  display: none;
-}
-#styleguide_rails > nav > ul > li:hover > ul {
-  display: block;
-}
 #styleguide_rails > nav ul {
   background: #efefef;
   background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
@@ -37,39 +31,49 @@
 }
 #styleguide_rails > nav > ul > li {
   float: left;
+  cursor: pointer;
 }
-#styleguide_rails > nav > ul > li:hover {
-  background: #4b545f;
-  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
-  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
-  background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
+#styleguide_rails > nav > ul a {
+  text-decoration: none;
 }
-#styleguide_rails > nav > ul > li:hover > a {
+#styleguide_rails > nav > ul > li:hover,
+#styleguide_rails > nav > ul > li.open {
+  background: #545454;
+}
+#styleguide_rails > nav > ul > li:hover > a,
+#styleguide_rails > nav > ul > li.open > a {
   color: #fff;
 }
-#styleguide_rails > nav > ul > li a {
+#styleguide_rails > nav > ul > li > a {
   display: block;
   padding: 0 10px;
   color: #757575;
-  text-decoration: none;
 }
 #styleguide_rails > nav > ul ul {
-  background: #5f6975;
+  display: none;
+  background: #757575;
   padding: 0;
   position: absolute;
   top: 100%;
+  z-index: 100;
 }
 #styleguide_rails > nav > ul ul > li {
   float: none;
-  border-top: 1px solid #6b727c;
-  border-bottom: 1px solid #575f6a;
+  padding: 0 10px;
+  border-top: 1px solid #7c7c7c;
+  border-bottom: 1px solid #545454;
   position: relative;
+  color: #fff;
 }
-#styleguide_rails > nav > ul ul > li > a {
+#styleguide_rails > nav > ul ul > li a {
   color: #fff;
 }
-#styleguide_rails > nav > ul ul > li > a:hover {
-  background: #4b545f;
+#styleguide_rails > nav > ul ul > li:hover,
+#styleguide_rails > nav > ul ul > li.selected {
+  background: #545454;
+}
+#styleguide_rails > nav > #width-options {
+  display: none;
 }
 #styleguide_rails > dl {
   padding: 0 10px;
@@ -88,6 +92,10 @@
   margin: 0;
 }
 #styleguide_rails > dl > dd.preview {
+  margin: 0 auto;
+  border: 1px solid white;
+}
+#styleguide_rails > dl > dd.preview:hover {
   border-bottom: 1px dashed #CCC;
   border-left: 1px dashed #CCC;
   border-right: 1px dashed #CCC;
@@ -97,12 +105,27 @@
   font-style: italic;
   color: #ddd;
   margin-top: 0.5em;
+  cursor: pointer;
+}
+#styleguide_rails > dl > dd > div.location:after {
+  font-style: normal;
+  content: '\25B2';
+  padding-left: 5px;
+}
+#styleguide_rails > dl > dd > div.location.show-code:after {
+  content: '\25BC';
 }
 #styleguide_rails a[name] {
   display: block;
   padding-top: 42px;
 }
 
+pre[class*="language-"] {
+  display: none;
+}
+div.show-code + pre[class*="language-"] {
+  display: block;
+}
 
 /**
  * prism.js default theme for JavaScript, CSS and HTML

data/lib/generators/styleguide/templates/styleguide.js

@@ -396,4 +396,40 @@ Prism.hooks.add('wrap', function(env) {
   if (env.type === 'entity') {
     env.attributes['title'] = env.content.replace(/&/, '&');
   }
-});;
+});
+
+(function() {
+  var activateMenus = function () {
+    $('#styleguide_rails > nav > ul > li').click(function () {
+      $('#styleguide_rails > nav > ul > li').not(this).find('ul').hide();
+      $('#styleguide_rails > nav > ul > li').not(this).removeClass('open');
+      $(this).find('ul').toggle();
+      $(this).toggleClass('open');
+    });
+
+    $('#styleguide_rails > dl').click(function () {
+      $('#styleguide_rails > nav > ul > li > ul').hide();
+      $('#styleguide_rails > nav > ul > li').removeClass('open');
+    });
+  };
+
+  var bindWidthPickers = function () {
+    $('li[data-width]').click(function () {
+      $('dd.preview').css('width', $(this).data('width'));
+      $(this).siblings().removeClass('selected');
+      $(this).addClass('selected');
+    });
+  };
+
+  var activateCodeShowing = function () {
+    $('div.location').click(function () {
+      $(this).toggleClass('show-code');
+    });
+  };
+
+  $(function () {
+    activateMenus();
+    bindWidthPickers();
+    activateCodeShowing();
+  });
+})();

data/lib/generators/styleguide/templates/styleguide_controller.rb

@@ -7,9 +7,9 @@ class StyleguideController < ApplicationController
     @widgets = widget_files.reduce([]) do |widgets, filename|
       lang = filename.match(/haml$/) ? 'haml' : 'markup'
 
-      name = File.basename(filename)
-                 .sub(/.html.*/, '')
-                 .sub(/^_/, '')
+      name = File.basename(filename).
+                 sub(/.html.*/, '').
+                 sub(/^_/, '')
 
       widgets << { :name       => name,
                    :filename   => filename,

data/lib/styleguide_rails/version.rb

@@ -1,3 +1,3 @@
 module StyleguideRails
-  VERSION = "0.1.3"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: styleguide_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-02-13 00:00:00.000000000 Z
+date: 2013-04-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -67,15 +67,21 @@ required_ruby_version: !ruby/object:Gem::Requirement
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: 1160601883018097668
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      segments:
+      - 0
+      hash: 1160601883018097668
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.24
+rubygems_version: 1.8.25
 signing_key: 
 specification_version: 3
 summary: Generates a controller, route, and views for your styleguide