style-guide 0.4.0 → 0.5.0

data/app/assets/stylesheets/style_guide/layout.css

@@ -16,7 +16,7 @@ body {
    }
 
   .style-guide-content .style-guide-sidebar {
-    width: 190px;
+    width: 20%;
   }
 
   .style-guide-content .style-guide-sidebar {
@@ -28,21 +28,21 @@ body {
     top: 0;
   }
 
-  .style-guide-content .style-guide-sections {
-    width: 522px;
-    margin-left: 190px;
+  .style-guide-content .style-guide-partials {
+    width: 79%;
+    margin-left: 21%;
     float: left;
   }
 }
 
 @media (min-width: 840px) {
   .style-guide-content .style-guide-sidebar {
-    width: 239px;
+    width: 25%;
   }
 
-  .style-guide-content .style-guide-sections {
-    width: 601px;
-    margin-left: 239px;
+  .style-guide-content .style-guide-partials {
+    width: 74%;
+    margin-left: 26%;
     float: left;
   }
 }
@@ -53,12 +53,12 @@ body {
   }
 
   .style-guide-content .style-guide-sidebar {
-    width: 288px;
+    width: 30%;
   }
 
-  .style-guide-content .style-guide-sections {
-    width: 672px;
-    margin-left: 288px;
+  .style-guide-content .style-guide-partials {
+    width: 69%;
+    margin-left: 31%;
     float: left;
   }
 }

data/app/assets/stylesheets/style_guide/{example.css → partial.css}

@@ -5,7 +5,7 @@
   padding: 10px;
 }
 
-.style-guide-example-header {
+.style-guide-partial-title {
   font-weight:100;
   color: #888;
   font-size: 24px;
@@ -15,13 +15,13 @@
   border-bottom: 1px solid #ddd;
 }
 
-.style-guide-example-description {
+.style-guide-partial-description {
   margin-bottom: 15px;
   color: #5D5C5C;
 }
 
-.style-guide-identifiers code,
-.style-guide-example-description code {
+.style-guide-partial-identifiers code,
+.style-guide-partial-description code {
   color: #d14;
   background-color: #f5f5f5;
   padding: 0 4px;
@@ -33,8 +33,8 @@
           border-radius: 0;
 }
 
-.style-guide-example,
-.style-guide-identifiers {
+.style-guide-partial-rendered,
+.style-guide-partial-identifiers {
   position: relative;
   padding: 27px 15px 10px 15px;
   overflow: hidden;
@@ -43,12 +43,12 @@
   border: 1px solid #f5f5f5;
 }
 
-.style-guide-example + .style-guide-identifiers {
+.style-guide-partial-rendered + .style-guide-identifiers {
   border-top-width: 0;
 }
 
-.style-guide-example:after,
-.style-guide-identifiers:after {
+.style-guide-partial-rendered:after,
+.style-guide-partial-identifiers:after {
   position: absolute;
   top: -1px;
   left: -1px;
@@ -65,15 +65,15 @@
   opacity: 0.75;
 }
 
-.style-guide-example:after {
+.style-guide-partial-rendered:after {
   content: "Example";
 }
 
-.style-guide-identifiers:after {
+.style-guide-partial-identifiers:after {
   content: "Identifiers";
 }
 
-.style-guide-partial .style-guide-example-source {
+pre.style-guide-partial-source {
   white-space: pre;
   word-wrap: normal;
   margin-top: 0;
@@ -86,12 +86,17 @@
           border-radius: 0;
 }
 
-.style-guide-example-source {
+.style-guide-partial-source {
   display: none;
 }
 
+.style-guide-partial .style-guide-partial-rendered > * {
+  float: none;
+  position: relative;
+}
+
 @media (min-width: 720px) {
-  .style-guide-example-source {
+  .style-guide-partial-source {
     display: block;
   }
 }

data/app/assets/stylesheets/style_guide/{header.css → section.css}

@@ -1,4 +1,4 @@
-.style-guide-header {
+.style-guide-section-heading {
   padding: 40px 0 25px 0;
   color: white;
   text-align: center;
@@ -10,7 +10,7 @@
           box-shadow: inset 0 0 10px rgba(0,0,0,.1);
 }
 
-.style-guide-header h1 {
+.style-guide-section-title {
   font-size: 50px;
   font-weight: bold;
   letter-spacing: -1px;
@@ -19,11 +19,11 @@
 }
 
 @media (min-width: 480px) {
-  .style-guide-header {
+  .style-guide-section-heading {
     padding: 60px 0 40px 0;
   }
 
-  .style-guide-header h1 {
+  .style-guide-section-title {
     font-size: 60px;
     text-align: left;
     text-indent: 10px;
@@ -31,7 +31,7 @@
 }
 
 @media (min-width: 960px) {
-  .style-guide-header h1 {
+  .style-guide-section-title {
     width: 960px;
   }
 }

data/app/assets/stylesheets/style_guide/sidebar.css

@@ -1,10 +1,4 @@
 .style-guide-sidebar {
-  width: 100%;
-}
-
-.style-guide-sidebar ul {
-  list-style: none;
-  padding: 0;
   margin: 30px 20px;
   border: 1px solid #ddd;
   background-color: white;
@@ -13,7 +7,7 @@
           box-shadow: 0 1px 4px rgba(0,0,0,.1);
 }
 
-.style-guide-sidebar li + li {
+.style-guide-sidebar-partial + .style-guide-sidebar-partial {
   border-top: 1px solid #ddd;
 }
 
@@ -43,13 +37,13 @@
 }
 
 @media (min-width: 720px) {
-  .style-guide-sidebar ul {
+  .style-guide-sidebar {
     margin: 10px;
   }
 }
 
 @media (min-width: 960px) {
-  .style-guide-sidebar ul {
+  .style-guide-sidebar {
     margin-left: 0;
   }
 }

data/app/controllers/style_guide/style_controller.rb

@@ -3,12 +3,12 @@ module StyleGuide
     before_filter :load_sections
 
     def index
-      @active = @sections.first
+      @current_section = @sections.first
       render :show
     end
 
     def show
-      @active = @sections.detect { |section| section.id == params[:id] }
+      @current_section = @sections.detect { |section| section.id == params[:id] }
     end
   end
 end

data/app/views/layouts/style_guide/application.html.erb

@@ -19,7 +19,7 @@
         <input id="style-guide-checkbox" type="checkbox" />
         <ul>
         <% @sections.each_with_index do |section, index| %>
-          <li<%= (section == @active) ? ' class="active"'.html_safe : '' %>>
+          <li<%= (section == @current_section) ? ' class="active"'.html_safe : '' %>>
             <a href="<%= style_path(section.id) %>"><%= section.title %></a>
           </li>
         <% end %>

data/app/views/style_guide/style/_header.erb

@@ -1,3 +1,3 @@
-<div class="style-guide-header">
-  <h1><%= @active.title %></h1>
+<div class="style-guide-section-heading">
+  <div class="style-guide-section-title"><%= section.title %></div>
 </div>

data/app/views/style_guide/style/{_example.erb → _partial.erb}

@@ -1,17 +1,25 @@
 <div class="style-guide-partial" id="<%= partial.id %>">
-  <div class="style-guide-example-header"><%= partial.title %></div>
+  <div class="style-guide-partial-title">
+    <%= partial.title %>
+  </div>
+
   <% if partial.description %>
-  <div class="style-guide-example-description">
+    <div class="style-guide-partial-description">
       <%= partial.description.html_safe %>
-  </div>
+    </div>
   <% end %>
-  <div class="style-guide-example"><%= render :file => partial.path %></div>
+
+  <div class="style-guide-partial-rendered">
+    <%= render :file => partial.path %>
+  </div>
+
   <% if partial.identifiers.any? %>
-    <div class="style-guide-identifiers">
+    <div class="style-guide-partial-identifiers">
       <% partial.identifiers.each do |identifier_name| %>
         <code><%= identifier_name %></code>
       <% end %>
     </div>
   <% end %>
-  <pre class="style-guide-example-source prettyprint linenums"><%= partial.content %></pre>
+
+  <pre class="style-guide-partial-source prettyprint linenums"><%= partial.content %></pre>
 </div>

data/app/views/style_guide/style/_sidebar.erb

@@ -1,7 +1,10 @@
 <div class="style-guide-sidebar">
-  <ul>
-  <% @active.partials.each do |partial| %>
-    <li><a href="#<%= partial.id %>"><i>&rsaquo;</i> <%= partial.title %></a></li>
+  <% section.partials.each do |partial| %>
+  <div class="style-guide-sidebar-partial">
+    <a href="#<%= partial.id %>">
+      <i>&rsaquo;</i>
+      <%= partial.title %>
+    </a>
+  </div>
   <% end %>
-  </ul>
-</div>
+</div>

data/app/views/style_guide/style/show.html.erb

@@ -1,11 +1,11 @@
-<%= render :partial => "header" %>
+<%= render :partial => "header", :locals => {:section => @current_section} %>
 
 <div class="style-guide-content">
-  <%= render :partial => "sidebar" %>
+  <%= render :partial => "sidebar", :locals => {:section => @current_section} %>
 
-  <div class="style-guide-sections">
-    <% @active.partials.each do |partial| %>
-      <%= render :partial => "example", :locals => { :partial => partial } %>
+  <div class="style-guide-partials">
+    <% @current_section.partials.each do |partial| %>
+      <%= render :partial => "partial", :locals => {:partial => partial} %>
     <% end %>
   </div>
 </div>

data/lib/style_guide/version.rb

@@ -1,3 +1,3 @@
 module StyleGuide
-  VERSION = "0.4.0"
+  VERSION = "0.5.0"
 end

data/spec/controllers/style_guide/style_controller_spec.rb

@@ -17,10 +17,10 @@ describe StyleGuide::StyleController do
       assigns(:sections).first.should be_a StyleGuide::Section
     end
 
-    it "sets the active section to the first one" do
+    it "sets the current section to the first one" do
       get :index, use_route: :styles
-      assigns(:active).should == assigns(:sections).first
-      assigns(:active).title.should == "Monkey Hammer"
+      assigns(:current_section).should == assigns(:sections).first
+      assigns(:current_section).title.should == "Monkey Hammer"
     end
   end
 
@@ -36,8 +36,8 @@ describe StyleGuide::StyleController do
 
     it "assigns the section" do
       get :show, id: fake_section.id, use_route: :styles
-      assigns(:active).should be_a StyleGuide::Section
-      assigns(:active).title.should == "Monkey Hammer"
+      assigns(:current_section).should be_a StyleGuide::Section
+      assigns(:current_section).title.should == "Monkey Hammer"
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: style-guide
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-19 00:00:00.000000000 Z
+date: 2012-12-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -270,12 +270,11 @@ files:
 - app/assets/javascripts/style_guide/sidebar.js
 - app/assets/stylesheets/style_guide/application.css
 - app/assets/stylesheets/style_guide/ars-maquette-web.css
-- app/assets/stylesheets/style_guide/example.css
-- app/assets/stylesheets/style_guide/footer.css
-- app/assets/stylesheets/style_guide/header.css
 - app/assets/stylesheets/style_guide/layout.css
 - app/assets/stylesheets/style_guide/navbar.css
+- app/assets/stylesheets/style_guide/partial.css
 - app/assets/stylesheets/style_guide/prettify.css
+- app/assets/stylesheets/style_guide/section.css
 - app/assets/stylesheets/style_guide/sidebar.css
 - app/controllers/style_guide/application_controller.rb
 - app/controllers/style_guide/style_controller.rb
@@ -299,8 +298,8 @@ files:
 - app/views/style_guide/images/_navigation.erb
 - app/views/style_guide/images/_placeholders.erb
 - app/views/style_guide/images/_small_button.erb
-- app/views/style_guide/style/_example.erb
 - app/views/style_guide/style/_header.erb
+- app/views/style_guide/style/_partial.erb
 - app/views/style_guide/style/_sidebar.erb
 - app/views/style_guide/style/show.html.erb
 - app/views/style_guide/tables/_bordered.erb

data/app/assets/stylesheets/style_guide/footer.css

@@ -1,23 +0,0 @@
-/* Footer
--------------------------------------------------- */
-
-.footer {
-  padding: 70px 0;
-  margin-top: 70px;
-  border-top: 1px solid #e5e5e5;
-  background-color: #f5f5f5;
-}
-.footer p {
-  margin-bottom: 0;
-  color: #777;
-}
-.footer-links {
-  margin: 10px 0;
-}
-.footer-links li {
-  display: inline;
-  padding: 0 2px;
-}
-.footer-links li:first-child {
-  padding-left: 0;
-}