style-guide 0.5.0 → 0.6.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.
Files changed (10) hide show
  1. data/.gitignore +1 -0
  2. data/.pairs +1 -0
  3. data/app/assets/javascripts/style_guide/docs.js +1 -1
  4. data/app/assets/stylesheets/style_guide/layout.css +10 -1
  5. data/app/assets/stylesheets/style_guide/navbar.css +14 -14
  6. data/app/assets/stylesheets/style_guide/partial.css +41 -13
  7. data/app/views/layouts/style_guide/application.html.erb +4 -4
  8. data/app/views/style_guide/style/_partial.erb +7 -2
  9. data/lib/style_guide/version.rb +1 -1
  10. metadata +1 -1
data/.gitignore CHANGED
@@ -11,3 +11,4 @@ spec/dummy/app/assets/.DS_Store
11
11
  spec/dummy/app/assets/stylesheets/.DS_Store
12
12
  /tmp
13
13
  *.gem
14
+ /.idea
data/.pairs CHANGED
@@ -3,6 +3,7 @@
3
3
  pairs:
4
4
  dr: Doc Ritezel; doc
5
5
  oa: Ofri Afek; ofri
6
+ cbg: Can Berk Güder; cbguder
6
7
 
7
8
  email:
8
9
  prefix: pair
data/app/assets/javascripts/style_guide/docs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  (function($) {
2
2
  $(function(){
3
- $(".style-guide-example [href^=#]").click(function(e) {
3
+ $(".style-guide-partial [href^=#], .style-guide-partial-source").click(function(e) {
4
4
  e.preventDefault();
5
5
  });
6
6
  window.prettyPrint && prettyPrint();
data/app/assets/stylesheets/style_guide/layout.css CHANGED
@@ -23,9 +23,10 @@ body {
23
23
  position: absolute;
24
24
  }
25
25
 
26
- .style-guide-sidebar.style-guide-fixed {
26
+ .style-guide-content .style-guide-sidebar.style-guide-fixed {
27
27
  position: fixed;
28
28
  top: 0;
29
+ width: 144px;
29
30
  }
30
31
 
31
32
  .style-guide-content .style-guide-partials {
@@ -45,6 +46,10 @@ body {
45
46
  margin-left: 26%;
46
47
  float: left;
47
48
  }
49
+
50
+ .style-guide-content .style-guide-sidebar.style-guide-fixed {
51
+ width: 210px;
52
+ }
48
53
  }
49
54
 
50
55
  @media (min-width: 960px) {
@@ -61,4 +66,8 @@ body {
61
66
  margin-left: 31%;
62
67
  float: left;
63
68
  }
69
+
70
+ .style-guide-content .style-guide-sidebar.style-guide-fixed {
71
+ width: 288px;
72
+ }
64
73
  }
data/app/assets/stylesheets/style_guide/navbar.css CHANGED
@@ -56,12 +56,12 @@
56
56
  display: none;
57
57
  }
58
58
 
59
- .style-guide-bar input:checked + ul {
59
+ .style-guide-bar input:checked + .style-guide-bar-sections {
60
60
  height: auto;
61
61
  padding: 5px 10px;
62
62
  }
63
63
 
64
- .style-guide-bar ul {
64
+ .style-guide-bar-sections {
65
65
  overflow: hidden;
66
66
  height: 0;
67
67
  background: #ddd;
@@ -73,17 +73,17 @@
73
73
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
74
74
  }
75
75
 
76
- .style-guide-bar li {
76
+ .style-guide-bar-section {
77
77
  margin: 10px 0;
78
78
  font-size: 14px;
79
79
  }
80
80
 
81
- .style-guide-bar li a {
81
+ .style-guide-bar-section a {
82
82
  padding: 2px 5px;
83
83
  }
84
84
 
85
- .style-guide-bar .active a,
86
- .style-guide-bar li a:hover {
85
+ .style-guide-bar-section.active a,
86
+ .style-guide-bar-section a:hover {
87
87
  background-color: #888;
88
88
  color: #f5f5f5;
89
89
  }
@@ -97,11 +97,11 @@
97
97
  float: right;
98
98
  }
99
99
 
100
- .style-guide-bar input:checked + ul {
100
+ .style-guide-bar input:checked + .style-guide-bar-sections {
101
101
  padding: 0;
102
102
  }
103
103
 
104
- .style-guide-bar ul {
104
+ .style-guide-bar-sections {
105
105
  margin: 0;
106
106
  height: auto;
107
107
  clear: none;
@@ -111,13 +111,13 @@
111
111
  box-shadow: none;
112
112
  }
113
113
 
114
- .style-guide-bar li {
114
+ .style-guide-bar-section {
115
115
  display: inline-block;
116
116
  margin: 0;
117
117
  padding: 0;
118
118
  }
119
119
 
120
- .style-guide-bar li a {
120
+ .style-guide-bar-section a {
121
121
  color: #888;
122
122
  display: block;
123
123
  height: 20px;
@@ -125,14 +125,14 @@
125
125
  padding: 10px;
126
126
  }
127
127
 
128
- .style-guide-bar .active a,
129
- .style-guide-bar li a:hover {
128
+ .style-guide-bar-section.active a,
129
+ .style-guide-bar-section a:hover {
130
130
  background-color: #ddd;
131
131
  color: #888;
132
132
  }
133
133
 
134
- .style-guide-bar .active a:hover,
135
- .style-guide-bar .active a {
134
+ .style-guide-bar-section.active a:hover,
135
+ .style-guide-bar-section.active a {
136
136
  background-color: #ddd;
137
137
  color: #888;
138
138
  }
data/app/assets/stylesheets/style_guide/partial.css CHANGED
@@ -47,24 +47,28 @@
47
47
  border-top-width: 0;
48
48
  }
49
49
 
50
+ .style-guide-toggle,
50
51
  .style-guide-partial-rendered:after,
51
52
  .style-guide-partial-identifiers:after {
52
- position: absolute;
53
- top: -1px;
54
- left: -1px;
55
- padding: 0 5px;
56
-
53
+ height: 18px;
57
54
  border: 1px solid #ddd;
58
55
 
59
56
  font-size: 11px;
60
57
  line-height: 18px;
61
- height: 18px;
62
58
  font-weight: 100;
63
59
  background-color: #f5f5f5;
64
60
  color: #888;
65
61
  opacity: 0.75;
66
62
  }
67
63
 
64
+ .style-guide-partial-rendered:after,
65
+ .style-guide-partial-identifiers:after {
66
+ position: absolute;
67
+ top: -1px;
68
+ left: -1px;
69
+ padding: 0 5px;
70
+ }
71
+
68
72
  .style-guide-partial-rendered:after {
69
73
  content: "Example";
70
74
  }
@@ -74,9 +78,11 @@
74
78
  }
75
79
 
76
80
  pre.style-guide-partial-source {
81
+ display: none;
77
82
  white-space: pre;
78
83
  word-wrap: normal;
79
84
  margin-top: 0;
85
+ margin-bottom: 0;
80
86
  padding: 10px 10px 10px 14px;
81
87
  background: #f5f5f5;
82
88
  border-color: #ddd;
@@ -86,17 +92,39 @@ pre.style-guide-partial-source {
86
92
  border-radius: 0;
87
93
  }
88
94
 
89
- .style-guide-partial-source {
95
+ .style-guide-partial-source span {
96
+ cursor: text;
97
+ }
98
+
99
+ .style-guide-toggle {
100
+ border-top: 0;
101
+ text-align: center;
102
+ cursor: pointer;
103
+
104
+ -webkit-user-select: none;
105
+ -moz-user-select: -moz-none;
106
+ -khtml-user-select: none;
107
+ user-select: none;
108
+ }
109
+
110
+ .style-guide-toggle.hide {
111
+ display: none;
112
+ }
113
+
114
+ .style-guide-partial input[type=checkbox] {
90
115
  display: none;
91
116
  }
92
117
 
118
+ input:checked + label .style-guide-toggle.show {
119
+ display: none;
120
+ }
121
+
122
+ input:checked + label .style-guide-toggle.hide,
123
+ input:checked + label .style-guide-partial-source {
124
+ display: block;
125
+ }
126
+
93
127
  .style-guide-partial .style-guide-partial-rendered > * {
94
128
  float: none;
95
129
  position: relative;
96
130
  }
97
-
98
- @media (min-width: 720px) {
99
- .style-guide-partial-source {
100
- display: block;
101
- }
102
- }
data/app/views/layouts/style_guide/application.html.erb CHANGED
@@ -17,13 +17,13 @@
17
17
  <label for="style-guide-checkbox">Sections</label>
18
18
  <a class="brand" href="/">Style Guide</a>
19
19
  <input id="style-guide-checkbox" type="checkbox" />
20
- <ul>
20
+ <div class="style-guide-bar-sections">
21
21
  <% @sections.each_with_index do |section, index| %>
22
- <li<%= (section == @current_section) ? ' class="active"'.html_safe : '' %>>
22
+ <div class="style-guide-bar-section <%= (section == @current_section) ? 'active'.html_safe : '' %>">
23
23
  <a href="<%= style_path(section.id) %>"><%= section.title %></a>
24
- </li>
24
+ </div>
25
25
  <% end %>
26
- </ul>
26
+ </div>
27
27
  </div>
28
28
  </div>
29
29
 
data/app/views/style_guide/style/_partial.erb CHANGED
@@ -16,10 +16,15 @@
16
16
  <% if partial.identifiers.any? %>
17
17
  <div class="style-guide-partial-identifiers">
18
18
  <% partial.identifiers.each do |identifier_name| %>
19
- <code><%= identifier_name %></code>
19
+ &nbsp;<code><%= identifier_name %></code>
20
20
  <% end %>
21
21
  </div>
22
22
  <% end %>
23
23
 
24
- <pre class="style-guide-partial-source prettyprint linenums"><%= partial.content %></pre>
24
+ <input id="style-guide-toggle-<%= partial.id %>" type="checkbox" />
25
+ <label for="style-guide-toggle-<%= partial.id %>">
26
+ <pre class="style-guide-partial-source prettyprint linenums"><%= partial.content %></pre>
27
+ <div class="style-guide-toggle show">Show source code</div>
28
+ <div class="style-guide-toggle hide">Hide source code</div>
29
+ </label>
25
30
  </div>
data/lib/style_guide/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module StyleGuide
2
- VERSION = "0.5.0"
2
+ VERSION = "0.6.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: style-guide
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.5.0
4
+ version: 0.6.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors: