styleguide_rails 0.1.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,20 @@
1
1
  <nav>
2
2
  <ul>
3
3
  <li><a>Widgets</a>
4
- <ul>
5
- <%= render :partial => 'widget_link', :collection => @widgets, :as => :widget %>
6
- </ul>
4
+ <ul>
5
+ <%= render :partial => 'widget_link', :collection => @widgets, :as => :widget %>
6
+ </ul>
7
+ <li><a>Width</a>
8
+ <ul id='width-options'>
9
+ <li class='width-option' data-width='320px'>320</li>
10
+ <li class='width-option' data-width='480px'>480</li>
11
+ <li class='width-option' data-width='748px'>748</li>
12
+ <li class='width-option' data-width='960px'>960</li>
13
+ <li class='width-option' data-width='1024px'>1024</li>
14
+ <li class='width-option' data-width='1280px'>1280</li>
15
+ <li class='width-option' data-width='640px'>iPhone</li>
16
+ <li class='width-option' data-width='100%'>Full</li>
17
+ </ul>
7
18
  </li>
8
19
  </ul>
9
20
  </nav>
@@ -17,12 +17,6 @@
17
17
  width: 100%;
18
18
  line-height: 32px;
19
19
  }
20
- #styleguide_rails > nav > ul ul {
21
- display: none;
22
- }
23
- #styleguide_rails > nav > ul > li:hover > ul {
24
- display: block;
25
- }
26
20
  #styleguide_rails > nav ul {
27
21
  background: #efefef;
28
22
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
@@ -37,39 +31,49 @@
37
31
  }
38
32
  #styleguide_rails > nav > ul > li {
39
33
  float: left;
34
+ cursor: pointer;
40
35
  }
41
- #styleguide_rails > nav > ul > li:hover {
42
- background: #4b545f;
43
- background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
44
- background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
45
- background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
36
+ #styleguide_rails > nav > ul a {
37
+ text-decoration: none;
46
38
  }
47
- #styleguide_rails > nav > ul > li:hover > a {
39
+ #styleguide_rails > nav > ul > li:hover,
40
+ #styleguide_rails > nav > ul > li.open {
41
+ background: #545454;
42
+ }
43
+ #styleguide_rails > nav > ul > li:hover > a,
44
+ #styleguide_rails > nav > ul > li.open > a {
48
45
  color: #fff;
49
46
  }
50
- #styleguide_rails > nav > ul > li a {
47
+ #styleguide_rails > nav > ul > li > a {
51
48
  display: block;
52
49
  padding: 0 10px;
53
50
  color: #757575;
54
- text-decoration: none;
55
51
  }
56
52
  #styleguide_rails > nav > ul ul {
57
- background: #5f6975;
53
+ display: none;
54
+ background: #757575;
58
55
  padding: 0;
59
56
  position: absolute;
60
57
  top: 100%;
58
+ z-index: 100;
61
59
  }
62
60
  #styleguide_rails > nav > ul ul > li {
63
61
  float: none;
64
- border-top: 1px solid #6b727c;
65
- border-bottom: 1px solid #575f6a;
62
+ padding: 0 10px;
63
+ border-top: 1px solid #7c7c7c;
64
+ border-bottom: 1px solid #545454;
66
65
  position: relative;
66
+ color: #fff;
67
67
  }
68
- #styleguide_rails > nav > ul ul > li > a {
68
+ #styleguide_rails > nav > ul ul > li a {
69
69
  color: #fff;
70
70
  }
71
- #styleguide_rails > nav > ul ul > li > a:hover {
72
- background: #4b545f;
71
+ #styleguide_rails > nav > ul ul > li:hover,
72
+ #styleguide_rails > nav > ul ul > li.selected {
73
+ background: #545454;
74
+ }
75
+ #styleguide_rails > nav > #width-options {
76
+ display: none;
73
77
  }
74
78
  #styleguide_rails > dl {
75
79
  padding: 0 10px;
@@ -88,6 +92,10 @@
88
92
  margin: 0;
89
93
  }
90
94
  #styleguide_rails > dl > dd.preview {
95
+ margin: 0 auto;
96
+ border: 1px solid white;
97
+ }
98
+ #styleguide_rails > dl > dd.preview:hover {
91
99
  border-bottom: 1px dashed #CCC;
92
100
  border-left: 1px dashed #CCC;
93
101
  border-right: 1px dashed #CCC;
@@ -97,12 +105,27 @@
97
105
  font-style: italic;
98
106
  color: #ddd;
99
107
  margin-top: 0.5em;
108
+ cursor: pointer;
109
+ }
110
+ #styleguide_rails > dl > dd > div.location:after {
111
+ font-style: normal;
112
+ content: '\25B2';
113
+ padding-left: 5px;
114
+ }
115
+ #styleguide_rails > dl > dd > div.location.show-code:after {
116
+ content: '\25BC';
100
117
  }
101
118
  #styleguide_rails a[name] {
102
119
  display: block;
103
120
  padding-top: 42px;
104
121
  }
105
122
 
123
+ pre[class*="language-"] {
124
+ display: none;
125
+ }
126
+ div.show-code + pre[class*="language-"] {
127
+ display: block;
128
+ }
106
129
 
107
130
  /**
108
131
  * prism.js default theme for JavaScript, CSS and HTML
@@ -396,4 +396,40 @@ Prism.hooks.add('wrap', function(env) {
396
396
  if (env.type === 'entity') {
397
397
  env.attributes['title'] = env.content.replace(/&amp;/, '&');
398
398
  }
399
- });;
399
+ });
400
+
401
+ (function() {
402
+ var activateMenus = function () {
403
+ $('#styleguide_rails > nav > ul > li').click(function () {
404
+ $('#styleguide_rails > nav > ul > li').not(this).find('ul').hide();
405
+ $('#styleguide_rails > nav > ul > li').not(this).removeClass('open');
406
+ $(this).find('ul').toggle();
407
+ $(this).toggleClass('open');
408
+ });
409
+
410
+ $('#styleguide_rails > dl').click(function () {
411
+ $('#styleguide_rails > nav > ul > li > ul').hide();
412
+ $('#styleguide_rails > nav > ul > li').removeClass('open');
413
+ });
414
+ };
415
+
416
+ var bindWidthPickers = function () {
417
+ $('li[data-width]').click(function () {
418
+ $('dd.preview').css('width', $(this).data('width'));
419
+ $(this).siblings().removeClass('selected');
420
+ $(this).addClass('selected');
421
+ });
422
+ };
423
+
424
+ var activateCodeShowing = function () {
425
+ $('div.location').click(function () {
426
+ $(this).toggleClass('show-code');
427
+ });
428
+ };
429
+
430
+ $(function () {
431
+ activateMenus();
432
+ bindWidthPickers();
433
+ activateCodeShowing();
434
+ });
435
+ })();
@@ -7,9 +7,9 @@ class StyleguideController < ApplicationController
7
7
  @widgets = widget_files.reduce([]) do |widgets, filename|
8
8
  lang = filename.match(/haml$/) ? 'haml' : 'markup'
9
9
 
10
- name = File.basename(filename)
11
- .sub(/.html.*/, '')
12
- .sub(/^_/, '')
10
+ name = File.basename(filename).
11
+ sub(/.html.*/, '').
12
+ sub(/^_/, '')
13
13
 
14
14
  widgets << { :name => name,
15
15
  :filename => filename,
@@ -1,3 +1,3 @@
1
1
  module StyleguideRails
2
- VERSION = "0.1.3"
2
+ VERSION = "0.2.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: styleguide_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.3
4
+ version: 0.2.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2013-02-13 00:00:00.000000000 Z
13
+ date: 2013-04-26 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: rails
@@ -67,15 +67,21 @@ required_ruby_version: !ruby/object:Gem::Requirement
67
67
  - - ! '>='
68
68
  - !ruby/object:Gem::Version
69
69
  version: '0'
70
+ segments:
71
+ - 0
72
+ hash: 1160601883018097668
70
73
  required_rubygems_version: !ruby/object:Gem::Requirement
71
74
  none: false
72
75
  requirements:
73
76
  - - ! '>='
74
77
  - !ruby/object:Gem::Version
75
78
  version: '0'
79
+ segments:
80
+ - 0
81
+ hash: 1160601883018097668
76
82
  requirements: []
77
83
  rubyforge_project:
78
- rubygems_version: 1.8.24
84
+ rubygems_version: 1.8.25
79
85
  signing_key:
80
86
  specification_version: 3
81
87
  summary: Generates a controller, route, and views for your styleguide