style-guide 0.3.0 → 0.4.0

data/.env

@@ -0,0 +1 @@
+PORT=3000

data/.travis.yml

@@ -5,6 +5,7 @@ env:
   global:
     secure: "bQg1DmRx33r7EQTMcZlgc0F9o7q0puzF2ErTOQoZgZQCq5FHhKRwR+lHXmmb\ncolCx2CPrgGa9LT1pLNxApdZVhxLHMUa8Cd7vieem1Spr83km5VRx1CAIFLz\nOztkyIOpQ48ofbr5sJzP8tdV3pNRnFolCi68sbNKbFxIeXp2Zk0="
 after_script:
+  - bundle install
   - gem install heroku
   - git remote add heroku git@heroku.com:swivel.git
   - echo "Host heroku.com" >> ~/.ssh/config

data/Guardfile

@@ -1,5 +1,7 @@
 #!/usr/bin/env ruby
 
+interactor :off
+
 guard 'bundler' do
   watch('Gemfile')
   watch(/^.+\.gemspec/)

data/Procfile

@@ -1 +1,2 @@
 web: bundle exec bash -lc "cd spec/dummy && rails server --port $PORT"
+guard: bundle exec guard

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

@@ -20,50 +20,78 @@
   color: #5D5C5C;
 }
 
+.style-guide-identifiers code,
 .style-guide-example-description code {
-  white-space: nowrap;
   color: #d14;
   background-color: #f5f5f5;
-  padding: 2px 4px;
+  padding: 0 4px;
   border: 1px solid #ddd;
   font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+  white-space: nowrap;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
 
-.style-guide-example {
+.style-guide-example,
+.style-guide-identifiers {
   position: relative;
-  padding: 10px 20px;
-  padding-top: 32px;
+  padding: 27px 15px 10px 15px;
+  overflow: hidden;
+
   background-color: #fff;
   border: 1px solid #f5f5f5;
-  overflow: hidden;
 }
 
-.style-guide-example:after {
-  content: "Example";
+.style-guide-example + .style-guide-identifiers {
+  border-top-width: 0;
+}
+
+.style-guide-example:after,
+.style-guide-identifiers:after {
   position: absolute;
   top: -1px;
   left: -1px;
   padding: 0 5px;
+
+  border: 1px solid #ddd;
+
   font-size: 11px;
   line-height: 18px;
   height: 18px;
   font-weight: 100;
   background-color: #f5f5f5;
-  border: 1px solid #ddd;
   color: #888;
   opacity: 0.75;
 }
 
+.style-guide-example:after {
+  content: "Example";
+}
+
+.style-guide-identifiers:after {
+  content: "Identifiers";
+}
+
 .style-guide-partial .style-guide-example-source {
+  white-space: pre;
+  word-wrap: normal;
   margin-top: 0;
-  padding: 10px 20px;
+  padding: 10px 10px 10px 14px;
   background: #f5f5f5;
   border-color: #ddd;
-  overflow-x: scroll;
+  overflow-x: auto;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
+
+.style-guide-example-source {
+  display: none;
+}
+
+@media (min-width: 720px) {
+  .style-guide-example-source {
+    display: block;
+  }
+}

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

@@ -1,5 +1,5 @@
 .style-guide-header {
-  padding: 60px 0 40px 0;
+  padding: 40px 0 25px 0;
   color: white;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 20px rgba(0,0,0,.075);
@@ -11,7 +11,7 @@
 }
 
 .style-guide-header h1 {
-  font-size: 60px;
+  font-size: 50px;
   font-weight: bold;
   letter-spacing: -1px;
   line-height: 1;
@@ -19,8 +19,14 @@
 }
 
 @media (min-width: 480px) {
+  .style-guide-header {
+    padding: 60px 0 40px 0;
+  }
+
   .style-guide-header h1 {
+    font-size: 60px;
     text-align: left;
+    text-indent: 10px;
   }
 }
 

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

@@ -10,16 +10,13 @@ body {
   margin: 0 auto;
 }
 
-@media (min-width: 480px) {
-  .style-guide-content .style-guide-sidebar {
-    width: 288px;
-  }
-}
-
-@media (min-width: 960px) {
+@media (min-width: 720px) {
   .style-guide-content {
-    width: 960px;
-    position: relative;
+      position: relative;
+   }
+
+  .style-guide-content .style-guide-sidebar {
+    width: 190px;
   }
 
   .style-guide-content .style-guide-sidebar {
@@ -31,6 +28,34 @@ body {
     top: 0;
   }
 
+  .style-guide-content .style-guide-sections {
+    width: 522px;
+    margin-left: 190px;
+    float: left;
+  }
+}
+
+@media (min-width: 840px) {
+  .style-guide-content .style-guide-sidebar {
+    width: 239px;
+  }
+
+  .style-guide-content .style-guide-sections {
+    width: 601px;
+    margin-left: 239px;
+    float: left;
+  }
+}
+
+@media (min-width: 960px) {
+  .style-guide-content {
+    width: 960px;
+  }
+
+  .style-guide-content .style-guide-sidebar {
+    width: 288px;
+  }
+
   .style-guide-content .style-guide-sections {
     width: 672px;
     margin-left: 288px;

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

@@ -88,7 +88,7 @@
   color: #f5f5f5;
 }
 
-@media (min-width: 480px) {
+@media (min-width: 720px) {
   .style-guide-bar label {
     display: none;
   }
@@ -128,6 +128,7 @@
   .style-guide-bar .active a,
   .style-guide-bar li a:hover {
     background-color: #ddd;
+    color: #888;
   }
 
   .style-guide-bar .active a:hover,

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

@@ -42,9 +42,14 @@
   color: #888;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 720px) {
   .style-guide-sidebar ul {
     margin: 10px;
+  }
+}
+
+@media (min-width: 960px) {
+  .style-guide-sidebar ul {
     margin-left: 0;
   }
 }

data/app/views/style_guide/buttons/_disabled_anchor.erb

@@ -0,0 +1,2 @@
+<a href="#" class="btn btn-primary disabled">Primary link</a>
+<a href="#" class="btn disabled">Link</a>

data/app/views/style_guide/buttons/_disabled_element.erb

@@ -0,0 +1,2 @@
+<button class="btn btn-primary" disabled>Primary button</button>
+<button class="btn" disabled>Button</button>

data/app/views/style_guide/buttons/_sizes.erb

@@ -0,0 +1,4 @@
+<button class="btn btn-large">Large button</button>
+<button class="btn">Default button</button>
+<button class="btn btn-small">Small button</button>
+<button class="btn btn-mini">Mini button</button>

data/app/views/style_guide/buttons/_types.erb

@@ -0,0 +1,8 @@
+<p><button class="btn">Standard gray button</button>
+<p><button class="btn btn-primary">Primary action in a group</button>
+<p><button class="btn btn-info">Alternative to the default</button>
+<p><button class="btn btn-success">Successful action</button>
+<p><button class="btn btn-warning">Caution should be taken</button>
+<p><button class="btn btn-danger">Dangerous or negative action</button>
+<p><button class="btn btn-inverse">Alternate dark button</button>
+<p><button class="btn btn-link">Make a button look like a link</button>

data/app/views/style_guide/images/_dropdown_icons.erb

@@ -0,0 +1,9 @@
+<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
+<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+<ul class="dropdown-menu">
+  <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
+  <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
+  <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
+  <li class="divider"></li>
+  <li><a href="#"><i class="i"></i> Make admin</a></li>
+</ul>

data/app/views/style_guide/images/_form_fields.erb

@@ -0,0 +1,10 @@
+<form class="form-horizontal">
+  <div class="control-group">
+    <label class="control-label" for="inputIcon">Email address</label>
+    <div class="controls">
+      <div class="input-prepend">
+        <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
+      </div>
+    </div>
+  </div>
+</form>

data/app/views/style_guide/images/_icon_buttons.erb

@@ -0,0 +1,4 @@
+<a class="btn" href="#"><i class="icon-align-left"></i></a>
+<a class="btn" href="#"><i class="icon-align-center"></i></a>
+<a class="btn" href="#"><i class="icon-align-right"></i></a>
+<a class="btn" href="#"><i class="icon-align-justify"></i></a>

data/app/views/style_guide/images/_navigation.erb

@@ -0,0 +1,8 @@
+<div class="well" style="padding: 8px 0; margin-bottom: 0;">
+  <ul class="nav nav-list">
+    <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
+    <li><a href="#"><i class="icon-book"></i> Library</a></li>
+    <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+    <li><a href="#"><i class="i"></i> Misc</a></li>
+  </ul>
+</div>

data/app/views/style_guide/images/_placeholders.erb

@@ -0,0 +1,3 @@
+<img src="http://placehold.it/140x140" class="img-rounded">
+<img src="http://placehold.it/140x140" class="img-circle">
+<img src="http://placehold.it/140x140" class="img-polaroid">

data/app/views/style_guide/images/_small_button.erb

@@ -0,0 +1 @@
+<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

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

@@ -1,10 +1,17 @@
 <div class="style-guide-partial" id="<%= partial.id %>">
   <div class="style-guide-example-header"><%= partial.title %></div>
+  <% if partial.description %>
   <div class="style-guide-example-description">
-    <%= t(partial.id, :scope => [:style_guide, @active.id.to_sym]).html_safe %>
+      <%= partial.description.html_safe %>
   </div>
-  <div class="style-guide-example">
-    <%= render :file => partial.path %>
-  </div>
-  <pre class="style-guide-example-source prettyprint"><%= partial.content %></pre>
+  <% end %>
+  <div class="style-guide-example"><%= render :file => partial.path %></div>
+  <% if partial.identifiers.any? %>
+    <div class="style-guide-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>
 </div>

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

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

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

@@ -1,9 +1,7 @@
 <%= render :partial => "header" %>
 
 <div class="style-guide-content">
-  <div class="style-guide-sidebar">
-    <%= render :partial => "sidebar" %>
-  </div>
+  <%= render :partial => "sidebar" %>
 
   <div class="style-guide-sections">
     <% @active.partials.each do |partial| %>

data/app/views/style_guide/tables/_bordered.erb

@@ -0,0 +1,34 @@
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowspan="2">1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@TwBootstrap</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/style_guide/tables/_condensed.erb

@@ -0,0 +1,29 @@
+<table class="table table-condensed">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td colspan="2">Larry the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>