effective_style_guide 1.5.5 → 2.0.0

data/app/views/effective/style_guide/_pagination.html

@@ -0,0 +1,126 @@
+<nav aria-label="Page navigation example">
+  <ul class="pagination">
+    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item"><a class="page-link" href="#">Next</a></li>
+  </ul>
+</nav>
+
+<br>
+
+<nav aria-label="Page navigation example">
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#" aria-label="Previous">
+        <span aria-hidden="true">&laquo;</span>
+        <span class="sr-only">Previous</span>
+      </a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#" aria-label="Next">
+        <span aria-hidden="true">&raquo;</span>
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
+  </ul>
+</nav>
+
+<br>
+
+<nav aria-label="...">
+  <ul class="pagination">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item active">
+      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>
+
+<br>
+
+<nav aria-label="...">
+  <ul class="pagination">
+    <li class="page-item disabled">
+      <span class="page-link">Previous</span>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item active">
+      <span class="page-link">
+        2
+        <span class="sr-only">(current)</span>
+      </span>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>
+
+<br>
+
+<nav aria-label="...">
+  <ul class="pagination pagination-lg">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">1</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+  </ul>
+</nav>
+
+<br>
+
+<nav aria-label="...">
+  <ul class="pagination pagination-sm">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">1</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+  </ul>
+</nav>
+
+<br>
+
+<nav aria-label="Page navigation example">
+  <ul class="pagination justify-content-center">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>
+
+<br>
+
+<nav aria-label="Page navigation example">
+  <ul class="pagination justify-content-end">
+    <li class="page-item disabled">
+      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    </li>
+    <li class="page-item"><a class="page-link" href="#">1</a></li>
+    <li class="page-item"><a class="page-link" href="#">2</a></li>
+    <li class="page-item"><a class="page-link" href="#">3</a></li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next</a>
+    </li>
+  </ul>
+</nav>

data/app/views/effective/style_guide/_progress.html

@@ -0,0 +1,120 @@
+<div class="progress">
+  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+</div>
+
+<br>
+
+<div class="progress" style="height: 1px;">
+  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress" style="height: 20px;">
+  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
+  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<br>
+
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+</div>
+

data/app/views/effective/style_guide/show.html.haml

@@ -1,89 +1,23 @@
-.row.effective-style-guide
-  .col-sm-3
-    %nav
-      %ul.nav.nav-pills.nav-stacked
-        - @partials.each_with_index do |partial, index|
-          %li{:class => ('active' if index == 0)}
-            %a{:href => "##{partial.parameterize}"}= partial.titleize
+.row{style: 'position: relative;'}
+  .col-3
+    .list-group{style: 'position: fixed;', id: 'effective-style-guide-sidebar'}
+      - @partials.each_with_index do |partial, index|
+        %a.list-group-item.list-group-item-action.py-1{href: '#' + partial.parameterize}= partial.titleize
 
-  .col-sm-9
+  .col-9
     - @partials.each do |partial|
-      %div.example{:id => "#{partial.parameterize}"}
-        %span.example= partial.titleize
-        = render :partial => partial
-
-    - 10.times do
-      %br
+      %a{name: partial.parameterize}
+      .card.my-3{id: partial.parameterize}
+        .card-header
+          = partial.titleize
+        .card-body
+          = render partial: partial
 
 :javascript
   var initStyleGuide = function() {
-    $('.effective-style-guide > div > nav').affix({
-      offset: { top: $('.effective-style-guide > div > nav').offset().top - 20 }
-    });
-
-    $('body').scrollspy({ target: '.effective-style-guide > div > nav', offset: 100 });
-
-    $('.effective-style-guide > div > nav > ul a').on('click', function(event) {
-      event.preventDefault();
-      target = $(event.currentTarget).attr('href')
-      if(target.length > 0) { $('html, body').scrollTop($(target).offset().top); }
-    });
+    $('body').scrollspy({ target: '#effective-style-guide-sidebar', offset: 100 });
+    $('#effective-style-guide-sidebar').on('click', 'a', function(event) { event.stopPropagation(); });
   };
 
   $(document).ready(function() { initStyleGuide(); });
-  $(document).on('page:change', function() { initStyleGuide(); });
   $(document).on('turbolinks:load', function() { initStyleGuide(); });
-
-:css
-  .effective-style-guide nav {
-    display: inline-block;
-  }
-
-  .effective-style-guide .nav > li > a {
-    padding: 5px 10px;
-  }
-
-  .effective-style-guide .affix {
-    position: fixed;
-    top: 20px;
-  }
-
-  .effective-style-guide div.example {
-    background-color: #fff;
-    border-color: #ddd;
-    border-radius: 4px 4px 0 0;
-    border-width: 1px;
-    box-shadow: none;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 30px;
-    border-style: solid;
-    padding: 45px 15px 15px;
-    position: relative;
-  }
-
-  .effective-style-guide span.example {
-    color: #959595;
-    font-size: 12px;
-    font-weight: 700;
-    left: 15px;
-    letter-spacing: 1px;
-    position: absolute;
-    text-transform: uppercase;
-    top: 15px;
-  }
-
-  .effective-style-guide .inline-example {
-    color: #959595;
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    margin-bottom: 20px;
-  }
-
-  / .effective-style-guide .inline-radio-or-checkboxes > span {
-  /   display: inline-block;
-  /   margin: 0px 10px 0px 0px;
-  / }
-

data/app/views/effective/{style_guide → style_guide_bootstrap3}/_thumbnails.html.haml

@@ -2,13 +2,14 @@
   - 4.times do
     .col-sm-3
       %a.thumbnail{:href => '#'}
-        %img{:src => 'http://placekitten.com/171/180', :height => 180, :width => 171}
+        %img{:src => 'http://placehold.it/171x180', :height => 180, :width => 171}
+
 
 .row
   - 3.times do
     .col-sm-4
       .thumbnail
-        %img{:src => 'http://placekitten.com/242/200', :height => 200, :width => 242}
+        %img{:src => 'http://placehold.it/242x200', :height => 200, :width => 242}
         .caption
           %h3 Thumbnail Label
           %p Cumque iste repellat rerum asperiores libero. Omnis quia et illo. Dignissimos ut quod debitis.

data/app/views/effective/style_guide_bootstrap3/show.html.haml

@@ -0,0 +1,89 @@
+.row.effective-style-guide
+  .col-sm-3
+    %nav
+      %ul.nav.nav-pills.nav-stacked
+        - @partials.each_with_index do |partial, index|
+          %li{:class => ('active' if index == 0)}
+            %a{:href => "##{partial.parameterize}"}= partial.titleize
+
+  .col-sm-9
+    - @partials.each do |partial|
+      %div.example{:id => "#{partial.parameterize}"}
+        %span.example= partial.titleize
+        = render partial: "effective/style_guide_bootstrap3/#{partial}"
+
+    - 10.times do
+      %br
+
+:javascript
+  var initStyleGuide = function() {
+    $('.effective-style-guide > div > nav').affix({
+      offset: { top: $('.effective-style-guide > div > nav').offset().top - 20 }
+    });
+
+    $('body').scrollspy({ target: '.effective-style-guide > div > nav', offset: 100 });
+
+    $('.effective-style-guide > div > nav > ul a').on('click', function(event) {
+      event.preventDefault();
+      target = $(event.currentTarget).attr('href')
+      if(target.length > 0) { $('html, body').scrollTop($(target).offset().top); }
+    });
+  };
+
+  $(document).ready(function() { initStyleGuide(); });
+  $(document).on('page:change', function() { initStyleGuide(); });
+  $(document).on('turbolinks:load', function() { initStyleGuide(); });
+
+:css
+  .effective-style-guide nav {
+    display: inline-block;
+  }
+
+  .effective-style-guide .nav > li > a {
+    padding: 5px 10px;
+  }
+
+  .effective-style-guide .affix {
+    position: fixed;
+    top: 20px;
+  }
+
+  .effective-style-guide div.example {
+    background-color: #fff;
+    border-color: #ddd;
+    border-radius: 4px 4px 0 0;
+    border-width: 1px;
+    box-shadow: none;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 30px;
+    border-style: solid;
+    padding: 45px 15px 15px;
+    position: relative;
+  }
+
+  .effective-style-guide span.example {
+    color: #959595;
+    font-size: 12px;
+    font-weight: 700;
+    left: 15px;
+    letter-spacing: 1px;
+    position: absolute;
+    text-transform: uppercase;
+    top: 15px;
+  }
+
+  .effective-style-guide .inline-example {
+    color: #959595;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    margin-bottom: 20px;
+  }
+
+  / .effective-style-guide .inline-radio-or-checkboxes > span {
+  /   display: inline-block;
+  /   margin: 0px 10px 0px 0px;
+  / }
+