style-guide 0.5.0 → 0.6.0

data/.gitignore

@@ -11,3 +11,4 @@ spec/dummy/app/assets/.DS_Store
 spec/dummy/app/assets/stylesheets/.DS_Store
 /tmp
 *.gem
+/.idea

data/.pairs

@@ -3,6 +3,7 @@
 pairs:
   dr: Doc Ritezel; doc
   oa: Ofri Afek; ofri
+  cbg: Can Berk Güder; cbguder
 
 email:
   prefix: pair

data/app/assets/javascripts/style_guide/docs.js

@@ -1,6 +1,6 @@
 (function($) {
   $(function(){
-    $(".style-guide-example [href^=#]").click(function(e) {
+    $(".style-guide-partial [href^=#], .style-guide-partial-source").click(function(e) {
       e.preventDefault();
     });
     window.prettyPrint && prettyPrint();

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

@@ -23,9 +23,10 @@ body {
     position: absolute;
   }
 
-  .style-guide-sidebar.style-guide-fixed {
+  .style-guide-content .style-guide-sidebar.style-guide-fixed {
     position: fixed;
     top: 0;
+    width: 144px;
   }
 
   .style-guide-content .style-guide-partials {
@@ -45,6 +46,10 @@ body {
     margin-left: 26%;
     float: left;
   }
+
+  .style-guide-content .style-guide-sidebar.style-guide-fixed {
+    width: 210px;
+  }
 }
 
 @media (min-width: 960px) {
@@ -61,4 +66,8 @@ body {
     margin-left: 31%;
     float: left;
   }
+
+  .style-guide-content .style-guide-sidebar.style-guide-fixed {
+    width: 288px;
+  }
 }

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

@@ -56,12 +56,12 @@
   display: none;
 }
 
-.style-guide-bar input:checked + ul {
+.style-guide-bar input:checked + .style-guide-bar-sections {
   height: auto;
   padding: 5px 10px;
 }
 
-.style-guide-bar ul {
+.style-guide-bar-sections {
   overflow: hidden;
   height: 0;
   background: #ddd;
@@ -73,17 +73,17 @@
           box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
 }
 
-.style-guide-bar li {
+.style-guide-bar-section {
   margin: 10px 0;
   font-size: 14px;
 }
 
-.style-guide-bar li a {
+.style-guide-bar-section a {
   padding: 2px 5px;
 }
 
-.style-guide-bar .active a,
-.style-guide-bar li a:hover {
+.style-guide-bar-section.active a,
+.style-guide-bar-section a:hover {
   background-color: #888;
   color: #f5f5f5;
 }
@@ -97,11 +97,11 @@
     float: right;
   }
 
-  .style-guide-bar input:checked + ul {
+  .style-guide-bar input:checked + .style-guide-bar-sections {
     padding: 0;
   }
 
-  .style-guide-bar ul {
+  .style-guide-bar-sections {
     margin: 0;
     height: auto;
     clear: none;
@@ -111,13 +111,13 @@
             box-shadow: none;
   }
 
-  .style-guide-bar li {
+  .style-guide-bar-section {
     display: inline-block;
     margin: 0;
     padding: 0;
   }
 
-  .style-guide-bar li a {
+  .style-guide-bar-section a {
     color: #888;
     display: block;
     height: 20px;
@@ -125,14 +125,14 @@
     padding: 10px;
   }
 
-  .style-guide-bar .active a,
-  .style-guide-bar li a:hover {
+  .style-guide-bar-section.active a,
+  .style-guide-bar-section a:hover {
     background-color: #ddd;
     color: #888;
   }
 
-  .style-guide-bar .active a:hover,
-  .style-guide-bar .active a {
+  .style-guide-bar-section.active a:hover,
+  .style-guide-bar-section.active a {
     background-color: #ddd;
     color: #888;
   }

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

@@ -47,24 +47,28 @@
   border-top-width: 0;
 }
 
+.style-guide-toggle,
 .style-guide-partial-rendered:after,
 .style-guide-partial-identifiers:after {
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  padding: 0 5px;
-
+  height: 18px;
   border: 1px solid #ddd;
 
   font-size: 11px;
   line-height: 18px;
-  height: 18px;
   font-weight: 100;
   background-color: #f5f5f5;
   color: #888;
   opacity: 0.75;
 }
 
+.style-guide-partial-rendered:after,
+.style-guide-partial-identifiers:after {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  padding: 0 5px;
+}
+
 .style-guide-partial-rendered:after {
   content: "Example";
 }
@@ -74,9 +78,11 @@
 }
 
 pre.style-guide-partial-source {
+  display: none;
   white-space: pre;
   word-wrap: normal;
   margin-top: 0;
+  margin-bottom: 0;
   padding: 10px 10px 10px 14px;
   background: #f5f5f5;
   border-color: #ddd;
@@ -86,17 +92,39 @@ pre.style-guide-partial-source {
           border-radius: 0;
 }
 
-.style-guide-partial-source {
+.style-guide-partial-source span {
+  cursor: text;
+}
+
+.style-guide-toggle {
+  border-top: 0;
+  text-align: center;
+  cursor: pointer;
+
+  -webkit-user-select: none;
+     -moz-user-select: -moz-none;
+   -khtml-user-select: none;
+          user-select: none;
+}
+
+.style-guide-toggle.hide {
+  display: none;
+}
+
+.style-guide-partial input[type=checkbox] {
   display: none;
 }
 
+input:checked + label .style-guide-toggle.show {
+  display: none;
+}
+
+input:checked + label .style-guide-toggle.hide,
+input:checked + label .style-guide-partial-source {
+  display: block;
+}
+
 .style-guide-partial .style-guide-partial-rendered > * {
   float: none;
   position: relative;
 }
-
-@media (min-width: 720px) {
-  .style-guide-partial-source {
-    display: block;
-  }
-}

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

@@ -17,13 +17,13 @@
         <label for="style-guide-checkbox">Sections</label>
         <a class="brand" href="/">Style Guide</a>
         <input id="style-guide-checkbox" type="checkbox" />
-        <ul>
+        <div class="style-guide-bar-sections">
         <% @sections.each_with_index do |section, index| %>
-          <li<%= (section == @current_section) ? ' class="active"'.html_safe : '' %>>
+          <div class="style-guide-bar-section <%= (section == @current_section) ? 'active'.html_safe : '' %>">
             <a href="<%= style_path(section.id) %>"><%= section.title %></a>
-          </li>
+          </div>
         <% end %>
-        </ul>
+        </div>
       </div>
     </div>
 

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

@@ -16,10 +16,15 @@
   <% if partial.identifiers.any? %>
     <div class="style-guide-partial-identifiers">
       <% partial.identifiers.each do |identifier_name| %>
-        <code><%= identifier_name %></code>
+        &nbsp;<code><%= identifier_name %></code>
       <% end %>
     </div>
   <% end %>
 
-  <pre class="style-guide-partial-source prettyprint linenums"><%= partial.content %></pre>
+  <input id="style-guide-toggle-<%= partial.id %>" type="checkbox" />
+  <label for="style-guide-toggle-<%= partial.id %>">
+    <pre class="style-guide-partial-source prettyprint linenums"><%= partial.content %></pre>
+    <div class="style-guide-toggle show">Show source code</div>
+    <div class="style-guide-toggle hide">Hide source code</div>
+  </label>
 </div>

data/lib/style_guide/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: style-guide
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
   prerelease: 
 platform: ruby
 authors: