Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

STYLECITY

  • Loading branch information...
commit db7169b27d1d06c4fa84520a2a4a75b734fec296 1 parent b7f0bbb
Pat Nakajima authored
55 app/views/bookmarklets/edit.html.erb
@@ -5,35 +5,36 @@
5 5 <% form_for(@bookmarklet) do |f| %>
6 6 <%= f.error_messages %>
7 7
8   - <p>
9   - <%= f.label :name %><br />
10   - <%= f.text_field :name %>
11   - </p>
12   -
13   - <p>
14   - <%= f.label :password, 'Password (optional, but required to edit)' %><br />
15   - <%= f.text_field :password %>
16   - </p>
17   -
18   - <p>
19   - <%= f.label :code %><br />
20   - <%= f.text_area :code %>
21   - </p>
22   -
23   - <p>
24   - <%= f.label :description, 'Description (optional)' %><br />
25   - <%= f.text_area :description %>
26   - </p>
27   -
28   - <p style="display: inline-block; margin-right: 550px; margin-top: 0">
  8 + <div id="info">
  9 + <p>
  10 + <%= f.label :name %><br />
  11 + <%= f.text_field :name %>
  12 + </p>
  13 +
  14 + <p>
  15 + <%= f.label :password, 'Password (optional, but required to edit)' %><br />
  16 + <%= f.text_field :password %>
  17 + </p>
  18 + </div>
  19 +
  20 + <div id="code-and-description">
  21 + <p>
  22 + <%= f.label :code %><br />
  23 + <%= f.text_area :code %>
  24 + </p>
  25 +
  26 + <p>
  27 + <%= f.label :description, 'Description (optional)' %><br />
  28 + <%= f.text_area :description %>
  29 + </p>
  30 + </div>
  31 +
  32 + <p id="inject-label">
29 33 <%= f.check_box :jquery %>
30   - <%= f.label :jquery, 'Inject jQuery' %>
  34 + <%= f.label :jquery, 'Inject jQuery <span>Allows you to use jQuery in your bookmarklet, even if it is not loaded on the page.', :id => 'inject-label' %>
31 35 </p>
32 36
33   - <p style="display: inline-block">
34   - <%= f.submit 'Create Bookmarklet' %>
  37 + <p class="last">
  38 + <%= f.submit 'Create Bookmarklet' %> or <%= link_to 'Back', @bookmarklet %>
35 39 </p>
36 40 <% end %>
37   -
38   -<%= link_to 'Show', @bookmarklet %> |
39   -<%= link_to 'Back', bookmarklets_path %>
54 app/views/bookmarklets/new.html.erb
@@ -5,33 +5,37 @@
5 5 <% form_for(@bookmarklet) do |f| %>
6 6 <%= f.error_messages %>
7 7
8   - <p>
9   - <%= f.label :name %><br />
10   - <%= f.text_field :name %>
11   - </p>
12   -
13   - <p>
14   - <%= f.label :password, 'Password (optional, but required to edit)' %><br />
15   - <%= f.text_field :password %>
16   - </p>
17   -
18   - <p>
19   - <%= f.label :code %><br />
20   - <%= f.text_area :code %>
21   - </p>
22   -
23   - <p>
24   - <%= f.label :description, 'Description (optional)' %><br />
25   - <%= f.text_area :description %>
26   - </p>
27   -
28   - <p style="display: inline-block; margin-right: 550px; margin-top: 0">
  8 + <div id="info">
  9 + <p>
  10 + <%= f.label :name %><br />
  11 + <%= f.text_field :name %>
  12 + </p>
  13 +
  14 + <p>
  15 + <%= f.label :password, 'Password (optional, but required to edit)' %><br />
  16 + <%= f.text_field :password %>
  17 + </p>
  18 + </div>
  19 +
  20 + <div id="code-and-description">
  21 + <p>
  22 + <%= f.label :code %><br />
  23 + <%= f.text_area :code %>
  24 + </p>
  25 +
  26 + <p>
  27 + <%= f.label :description, 'Description (optional)' %><br />
  28 + <%= f.text_area :description %>
  29 + </p>
  30 + </div>
  31 +
  32 + <p id="inject-label">
29 33 <%= f.check_box :jquery %>
30   - <%= f.label :jquery, 'Inject jQuery' %>
  34 + <%= f.label :jquery, 'Inject jQuery <span>Allows you to use jQuery in your bookmarklet, even if it is not loaded on the page.', :id => 'inject-label' %>
31 35 </p>
32 36
33   - <p style="display: inline-block">
34   - <%= f.submit 'Create Bookmarklet' %>
  37 + <p class="last">
  38 + <%= f.submit 'Create Bookmarklet' %> or <%= link_to 'Back', bookmarklets_path %>
35 39 </p>
36 40
37 41 <p class="required">
@@ -45,5 +49,3 @@
45 49 });
46 50 </script>
47 51 <% end %>
48   -
49   -<%= link_to 'Back', bookmarklets_path %>
13 app/views/bookmarklets/show.html.erb
@@ -9,17 +9,18 @@ Drag this to your Bookmarks Bar:
9 9
10 10 <blockquote>
11 11 <%= h(@bookmarklet.description) %>
12   -<% if @bookmarklet.jquery? %>
13   - <small id="uses-jquery">Includes jQuery</small>
14   -<% end %>
15 12 </blockquote>
16 13
17   -
18   -
19   -<%= link_to_function 'View Source', 'showTheCodes(); return false' %>
  14 +<% link_to '#', :onclick => 'toggleTheCodes(); return false;' do %>
  15 + View Source
  16 + <% if @bookmarklet.jquery? %>
  17 + <small id="uses-jquery">Includes jQuery</small>
  18 + <% end %>
  19 +<% end %>
20 20
21 21 <div id="source" style="display:none;">
22 22 <pre><%= @bookmarklet.highlighted_code %></pre>
  23 + <%= link_to_function 'Hide', 'hideTheCodes(); return false;' %>
23 24 </div>
24 25
25 26 <%- if @bookmarklet.password? -%>
36 public/javascripts/application.js
... ... @@ -1,5 +1,37 @@
1 1 // Place your application-specific JavaScript functions and classes here
2 2 // This file is automatically included by javascript_include_tag :defaults
3 3 function showTheCodes() {
4   - $('source').appear({ duration: 0.3 });
5   -}
  4 + var source = $('source');
  5 + var wrapper = $('source').wrap('div');
  6 + wrapper.hide();
  7 + source.show();
  8 + source.addClassName('visible');
  9 + wrapper.slideDown({
  10 + duration: 0.2,
  11 + afterFinish: function() {
  12 + wrapper.replace(source)
  13 + }
  14 + });
  15 +}
  16 +
  17 +function hideTheCodes() {
  18 + var source = $('source');
  19 + var wrapper = $('source').wrap('div');
  20 + wrapper.slideUp({
  21 + duration: 0.2,
  22 + afterFinish: function() {
  23 + wrapper.replace(source)
  24 + source.removeClassName('visible');
  25 + source.hide();
  26 + }
  27 + });
  28 +}
  29 +
  30 +function toggleTheCodes() {
  31 + var source = $('source');
  32 + if (source.hasClassName('visible')) {
  33 + hideTheCodes();
  34 + } else {
  35 + showTheCodes();
  36 + }
  37 +}
56 public/stylesheets/styles.css
@@ -18,6 +18,9 @@ a {
18 18 text-decoration: none;
19 19 padding: 3px 5px;
20 20 margin-left: -3px;
  21 + -webkit-border-radius: 3px;
  22 + -moz-border-radius: 3px;
  23 + border-radius: 3px;
21 24 }
22 25
23 26 a:hover {
@@ -35,12 +38,13 @@ form {
35 38
36 39 label {
37 40 font-size: 14px;
  41 + cursor: pointer;
38 42 }
39 43
40 44 input[type="text"] {
41   - font-size: 32px;
42   - width: 800px;
  45 + font-size: 18px;
43 46 margin-bottom: 1em;
  47 + padding: 5px;
44 48 }
45 49
46 50 input[type="submit"] {
@@ -48,15 +52,43 @@ input[type="submit"] {
48 52 cursor: pointer;
49 53 }
50 54
  55 +input[type="checkbox"] {
  56 + height: 15px;
  57 + width: 15px;
  58 +}
  59 +
51 60 textarea {
52 61 width: 800px;
53   - height: 200px;
  62 + height: 100px;
54 63 font-family: Courier, monospace;
55 64 margin-bottom: 2em;
56 65 padding: 10px;
57 66 font-size: 16px;
58 67 }
59 68
  69 +#inject-label {
  70 + font-size: 16px;
  71 +}
  72 +
  73 +#inject-label span {
  74 + color: #aaa;
  75 +}
  76 +
  77 +#info p {
  78 + width: 400px;
  79 + float: left;
  80 + margin-right: 20px;
  81 +}
  82 +
  83 +#info p input[type="text"] {
  84 + width: 390px;
  85 +}
  86 +
  87 +#code-and-description {
  88 + clear: both;
  89 + margin-bottom: -10px;
  90 +}
  91 +
60 92 #main-title {
61 93 margin: 1em 0 0.4em;
62 94 }
@@ -109,22 +141,26 @@ textarea {
109 141 top: 28px;
110 142 }
111 143
  144 +form p.last {
  145 + margin-top: 20px;
  146 + font-size: 16px;
  147 +}
  148 +
112 149 blockquote {
113 150 margin: 20px 0;
114 151 color: #ccc;
115 152 }
116 153
117   -blockquote small {
  154 +a small {
118 155 font-size: 16px;
119 156 background: #ffa;
120 157 padding: 4px 8px;
121 158 color: #111;
122 159 margin-right: 10px;
123   - margin-top: 0.6em;
  160 + margin-top: 0.7em;
124 161 display: inline-block;
125   - -webkit-border-radius: 10px;
126   - -moz-border-radius: 10px;
127   - border-radius: 10px;
128   - float: left;
129   - vertical-align: baseline;
  162 + -webkit-border-radius: 6px;
  163 + -moz-border-radius: 6px;
  164 + border-radius: 6px;
  165 + vertical-align: top;
130 166 }

0 comments on commit db7169b

Please sign in to comment.
Something went wrong with that request. Please try again.