Permalink
Browse files

STYLECITY

  • Loading branch information...
1 parent b7f0bbb commit db7169b27d1d06c4fa84520a2a4a75b734fec296 @nakajima committed Jun 20, 2010
@@ -5,35 +5,36 @@
<% form_for(@bookmarklet) do |f| %>
<%= f.error_messages %>
- <p>
- <%= f.label :name %><br />
- <%= f.text_field :name %>
- </p>
-
- <p>
- <%= f.label :password, 'Password (optional, but required to edit)' %><br />
- <%= f.text_field :password %>
- </p>
-
- <p>
- <%= f.label :code %><br />
- <%= f.text_area :code %>
- </p>
-
- <p>
- <%= f.label :description, 'Description (optional)' %><br />
- <%= f.text_area :description %>
- </p>
-
- <p style="display: inline-block; margin-right: 550px; margin-top: 0">
+ <div id="info">
+ <p>
+ <%= f.label :name %><br />
+ <%= f.text_field :name %>
+ </p>
+
+ <p>
+ <%= f.label :password, 'Password (optional, but required to edit)' %><br />
+ <%= f.text_field :password %>
+ </p>
+ </div>
+
+ <div id="code-and-description">
+ <p>
+ <%= f.label :code %><br />
+ <%= f.text_area :code %>
+ </p>
+
+ <p>
+ <%= f.label :description, 'Description (optional)' %><br />
+ <%= f.text_area :description %>
+ </p>
+ </div>
+
+ <p id="inject-label">
<%= f.check_box :jquery %>
- <%= f.label :jquery, 'Inject jQuery' %>
+ <%= 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' %>
</p>
- <p style="display: inline-block">
- <%= f.submit 'Create Bookmarklet' %>
+ <p class="last">
+ <%= f.submit 'Create Bookmarklet' %> or <%= link_to 'Back', @bookmarklet %>
</p>
<% end %>
-
-<%= link_to 'Show', @bookmarklet %> |
-<%= link_to 'Back', bookmarklets_path %>
@@ -5,33 +5,37 @@
<% form_for(@bookmarklet) do |f| %>
<%= f.error_messages %>
- <p>
- <%= f.label :name %><br />
- <%= f.text_field :name %>
- </p>
-
- <p>
- <%= f.label :password, 'Password (optional, but required to edit)' %><br />
- <%= f.text_field :password %>
- </p>
-
- <p>
- <%= f.label :code %><br />
- <%= f.text_area :code %>
- </p>
-
- <p>
- <%= f.label :description, 'Description (optional)' %><br />
- <%= f.text_area :description %>
- </p>
-
- <p style="display: inline-block; margin-right: 550px; margin-top: 0">
+ <div id="info">
+ <p>
+ <%= f.label :name %><br />
+ <%= f.text_field :name %>
+ </p>
+
+ <p>
+ <%= f.label :password, 'Password (optional, but required to edit)' %><br />
+ <%= f.text_field :password %>
+ </p>
+ </div>
+
+ <div id="code-and-description">
+ <p>
+ <%= f.label :code %><br />
+ <%= f.text_area :code %>
+ </p>
+
+ <p>
+ <%= f.label :description, 'Description (optional)' %><br />
+ <%= f.text_area :description %>
+ </p>
+ </div>
+
+ <p id="inject-label">
<%= f.check_box :jquery %>
- <%= f.label :jquery, 'Inject jQuery' %>
+ <%= 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' %>
</p>
- <p style="display: inline-block">
- <%= f.submit 'Create Bookmarklet' %>
+ <p class="last">
+ <%= f.submit 'Create Bookmarklet' %> or <%= link_to 'Back', bookmarklets_path %>
</p>
<p class="required">
@@ -45,5 +49,3 @@
});
</script>
<% end %>
-
-<%= link_to 'Back', bookmarklets_path %>
@@ -9,17 +9,18 @@ Drag this to your Bookmarks Bar:
<blockquote>
<%= h(@bookmarklet.description) %>
-<% if @bookmarklet.jquery? %>
- <small id="uses-jquery">Includes jQuery</small>
-<% end %>
</blockquote>
-
-
-<%= link_to_function 'View Source', 'showTheCodes(); return false' %>
+<% link_to '#', :onclick => 'toggleTheCodes(); return false;' do %>
+ View Source
+ <% if @bookmarklet.jquery? %>
+ <small id="uses-jquery">Includes jQuery</small>
+ <% end %>
+<% end %>
<div id="source" style="display:none;">
<pre><%= @bookmarklet.highlighted_code %></pre>
+ <%= link_to_function 'Hide', 'hideTheCodes(); return false;' %>
</div>
<%- if @bookmarklet.password? -%>
@@ -1,5 +1,37 @@
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
function showTheCodes() {
- $('source').appear({ duration: 0.3 });
-}
+ var source = $('source');
+ var wrapper = $('source').wrap('div');
+ wrapper.hide();
+ source.show();
+ source.addClassName('visible');
+ wrapper.slideDown({
+ duration: 0.2,
+ afterFinish: function() {
+ wrapper.replace(source)
+ }
+ });
+}
+
+function hideTheCodes() {
+ var source = $('source');
+ var wrapper = $('source').wrap('div');
+ wrapper.slideUp({
+ duration: 0.2,
+ afterFinish: function() {
+ wrapper.replace(source)
+ source.removeClassName('visible');
+ source.hide();
+ }
+ });
+}
+
+function toggleTheCodes() {
+ var source = $('source');
+ if (source.hasClassName('visible')) {
+ hideTheCodes();
+ } else {
+ showTheCodes();
+ }
+}
@@ -18,6 +18,9 @@ a {
text-decoration: none;
padding: 3px 5px;
margin-left: -3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
a:hover {
@@ -35,28 +38,57 @@ form {
label {
font-size: 14px;
+ cursor: pointer;
}
input[type="text"] {
- font-size: 32px;
- width: 800px;
+ font-size: 18px;
margin-bottom: 1em;
+ padding: 5px;
}
input[type="submit"] {
font-size: 32px;
cursor: pointer;
}
+input[type="checkbox"] {
+ height: 15px;
+ width: 15px;
+}
+
textarea {
width: 800px;
- height: 200px;
+ height: 100px;
font-family: Courier, monospace;
margin-bottom: 2em;
padding: 10px;
font-size: 16px;
}
+#inject-label {
+ font-size: 16px;
+}
+
+#inject-label span {
+ color: #aaa;
+}
+
+#info p {
+ width: 400px;
+ float: left;
+ margin-right: 20px;
+}
+
+#info p input[type="text"] {
+ width: 390px;
+}
+
+#code-and-description {
+ clear: both;
+ margin-bottom: -10px;
+}
+
#main-title {
margin: 1em 0 0.4em;
}
@@ -109,22 +141,26 @@ textarea {
top: 28px;
}
+form p.last {
+ margin-top: 20px;
+ font-size: 16px;
+}
+
blockquote {
margin: 20px 0;
color: #ccc;
}
-blockquote small {
+a small {
font-size: 16px;
background: #ffa;
padding: 4px 8px;
color: #111;
margin-right: 10px;
- margin-top: 0.6em;
+ margin-top: 0.7em;
display: inline-block;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
- float: left;
- vertical-align: baseline;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ vertical-align: top;
}

0 comments on commit db7169b

Please sign in to comment.