public/images/firefox_chrome_example.png
@@ -2,9 +2,8 @@
<label for="link_website_url">Create a RubyURL</label>
<%= f.text_field :website_url %>
- <%= submit_tag 'Go!' -%>
+ <%= submit_tag 'Go!', :class => 'go' -%>
<% end %>
-<br />
-<label>
+<label class="auto_copy" for="auto_copy">
<%= check_box_tag :auto_copy, 1, cookies[:auto_copy] == '1' %> Automatically copy new RubyURL
</label>
app/views/links/_form.rhtml
@@ -1,11 +1,15 @@
<div id="app_content">
- <% if flash[:warning] %><%= flash[:warning] -%><% end %>
- <div id="url">
- <%= render :partial => 'links/form' %>
- </div>
- <h2>Add RubyURL to your favorite browser</h2>
- <p>Just drag the link below to the bookmarks toolbar of your browser and create RubyURLs on the fly!</p>
- <div id="action" class="arrow">
- <a href="javascript:void(location.host=='maps.google.com'?location.href='http://rubyurl.com/rubyurl/remote?website_url='+encodeURIComponent(document.getElementById('link').href):location.href='http://rubyurl.com/rubyurl/remote?website_url='+encodeURIComponent(location.href))">RubyURL this</a>
- </div>
+ <% if flash[:warning] %><%= flash[:warning] -%><% end %>
+ <div id="url">
+ <%= render :partial => 'links/form' %>
+ </div>
+ <div id="bookmarklet_instructions">
+ <div id="helper_copy">
+ <p>Add RubyURL to your favorite browser by dragging the link on the right to the <strong>bookmark toolbar</strong> of your browser and create RubyURLs on the fly!</p>
+ </div>
+ <div id="bookmarklet">
+ <p><a href="javascript:void(location.host=='maps.google.com'?location.href='http://rubyurl.com/rubyurl/remote?website_url='+encodeURIComponent(document.getElementById('link').href):location.href='http://rubyurl.com/rubyurl/remote?website_url='+encodeURIComponent(location.href))">RubyURL this</a> </p>
+ </div>
+ </div> <!-- /bookmarklet_instructions -->
+ <img src="/images/firefox_chrome_example.png" width="724" height="78" alt="Firefox Example">
</div><!-- end app_content -->
\ No newline at end of file
app/views/links/index.rhtml
public/images/arrow.png
public/images/logo-rubyurl.png
@@ -1 +1 @@
-/*------------------------------------------------
rubyurl
2007-08-06
coded by: Chris Griffin / http://planetargon.com
http://chriszgriffin.com
------------------------------------------------*/
/*------------------------------------------------------------------------
=Default
------------------------------------------------------------------------*/
body {
background: #f6f5ea;
font: 12px/18px Arial, 'Lucida Grande', Verdana, sans-serif;
line-height: 18px;
color: #000;
}
p {
margin-bottom: 18px;
}
ul {
margin-bottom: 18px;
}
li {
margin-left: 9px;
}
/*------------------------------------------------------------------------
=Structure
------------------------------------------------------------------------*/
.wrapper {
background: #fff;
border: 1px solid #e8e6d1;
border-bottom: 2px solid #dbd9c5;
border-right: 2px solid #dbd9c5;
width: 760px;
margin: 36px auto 0;
}
#header {
margin: 9px 18px 9px;
overflow: hidden;
padding-top: 18px;
position: relative;
}
#logo {
float: left;
width: 209px;
height: 49px;
display: block;
text-indent: -9999px;
background: url(/images/logo-rubyurl.png) no-repeat top;
}
#main_nav {
float: right;
margin: 9px 18px 0;
}
#main_nav li {
float: left;
border-left: 1px solid #ccc;
margin-left: 8px;
padding-left: 7px;
line-height: 12px;
}
#main_nav li:first-child {
border: none;
margin: 0;
padding: 0;
}
#main_nav li a {
font-size: 12px;
color: #666;
}
#main_nav li #abuse {
color: #f00;
font-weight: bold;
}
#app_content,
#info_content {
clear: both;
margin: 0 18px 18px;
/* border: 18px solid #fff;
*/}
#app_content {
background: #960000;
color: #fff;
}
#info_content {
background: #f9f9f3;
padding: 0 18px 18px;
color: #333;
}
#app_content a {
color: #fff;
}
#app_content p {
margin: 0 18px 18px;
color: #f6f5ea;
}
#app_content #url,
#app_content #action {
padding: 18px;
}
#app_content #url {
margin-bottom: 18px;
}
#app_content .arrow {
background: #cf0000 url(/images/arrow.png) no-repeat top !important;
padding: 38px 18px 18px !important;
}
#app_content #action a {
text-transform: uppercase;
}
#url_stats {
width: 210px;
overflow: hidden;
margin: 0 auto 18px;
}
#url_stats dt {
float: left;
clear: left;
}
#url_stats dd {
float: right;
font-weight: bold;
}
#tos {
margin: 0 18px;
padding: 0 18px 18px;
font-size: 12px;
color: #666;
background: #fff;
}
#tos dt {
display: inline;
margin-right: 5px;
color: #960000;
font-weight: bold;
}
#tos dd {
display: inline;
}
#footer {
margin: 18px;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #a9a57a;
}
#footer p {
margin: 0;
}
#footer a {
color: #f00;
}
#footer span {
color: #f00;
}
/*------------------------------------------------------------------------
=Typography
------------------------------------------------------------------------*/
h1 {
font-size: 18px;
line-height: 36px;
margin-bottom: 18px;
}
#info_content h1 {
font-weight: bold;
background: #960000;
margin: 0 -18px 18px;
padding: 0 18px;
color: #fff;
}
h2 {
font-size: 14px;
line-height: 18px;
margin-bottom: 18px;
}
h3 {
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
/*------------------------------------------------------------------------
=Links
------------------------------------------------------------------------*/
a {
color: #f00;
}
#info_content a {
font-weight: bold;
}
#info_content a:visited {
color: #b84d4d;
}
#info_content a:active {
color: #fff;
background: #f00;
}
/*------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------*/
label {
display: block;
font: 16px 'Times New Roman', Georgia, serif;
letter-spacing: 1px;
margin-bottom: 9px;
text-transform: uppercase;
}
input#link_website_url {
border: none;
font-size: 36px;
padding: 2px;
width: 600px;
}
/*------------------------------------------------------------------------
=Code samples
------------------------------------------------------------------------*/
pre {
background: #EFEFEF;
overflow: auto;
font-family: "Courier New", Courier, monospace
}
code {
color: #000;
display: block;
font-size: 14px;
padding: 9px;
}
\ No newline at end of file
+/*------------------------------------------------------------------------
rubyurl
2009-02-17
coded by: Chris Griffin / http://planetargon.com
http://chrisgrififn.org
------------------------------------------------------------------------*/
/*------------------------------------------------------------------------
=Default
------------------------------------------------------------------------*/
body {
background: #f6f5ea;
font: 12px/18px Arial, 'Lucida Grande', Verdana, sans-serif;
line-height: 18px;
color: #333;
}
p {
margin-bottom: 18px;
}
ul {
margin-bottom: 18px;
}
li {
margin-left: 9px;
}
/*------------------------------------------------------------------------
=Structure
------------------------------------------------------------------------*/
.wrapper {
background: #fff;
border: 1px solid #e8e6d1;
border-bottom: 2px solid #dbd9c5;
border-right: 2px solid #dbd9c5;
width: 760px;
margin: 36px auto 0;
}
#header {
margin: 9px 18px 9px;
overflow: hidden;
padding-top: 18px;
position: relative;
}
#logo {
float: left;
width: 209px;
height: 49px;
display: block;
text-indent: -9999px;
background: url(/images/logo-rubyurl.png) no-repeat top;
}
#main_nav {
float: right;
margin: 9px 18px 18px 0 ;
}
#main_nav li {
float: left;
border-left: 1px solid #ccc;
margin-left: 8px;
padding-left: 7px;
line-height: 14px;
}
#main_nav li:first-child {
border: none;
margin: 0;
padding: 0;
}
#main_nav li a {
font-size: 12px;
color: #666;
}
#main_nav li #abuse {
color: #f00;
font-weight: bold;
}
#app_content,
#info_content {
clear: both;
margin: 0 18px 18px;
}
#info_content {
background: #f9f9f3;
padding: 0 18px 18px;
color: #333;
}
#app_content #url {
padding: 18px;
}
#app_content #url {
background: #ba0000;
border-bottom: 9px solid #630000;
border-top: 9px solid #630000;
color: #fff;
margin-bottom: 18px;
}
#bookmarklet_instructions {
font-size: 14px;
margin-bottom: 9px;
overflow: hidden;
}
#bookmarklet_instructions #helper_copy {
background: #eee url(/images/arrow.png) no-repeat right;
float: left;
width: 560px;
}
#bookmarklet_instructions #helper_copy p {
margin: 9px;
padding-right: 39px;
}
#bookmarklet_instructions #bookmarklet {
background: #ba0000;
float: right;
width: 164px;
}
#bookmarklet_instructions #bookmarklet p {
margin-bottom: 0;
}
#bookmarklet_instructions #bookmarklet a {
color: #fff;
display: block;
line-height: 54px;
margin: 0 9px;
text-align: right;
}
#url_stats {
width: 210px;
overflow: hidden;
margin: 0 auto 18px;
}
#url_stats dt {
float: left;
clear: left;
}
#url_stats dd {
float: right;
font-weight: bold;
}
#tos {
background: #f9f9f9;
color: #666;
font-size: 12px;
margin: 18px;
padding: 9px;
}
#tos dt {
display: inline;
margin-right: 5px;
color: #960000;
font-weight: bold;
}
#tos dd {
display: inline;
}
#footer {
margin: 18px;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #a9a57a;
}
#footer p {
margin: 0;
}
#footer a {
color: #f00;
}
#footer span {
color: #f00;
}
/*------------------------------------------------------------------------
=Typography
------------------------------------------------------------------------*/
h1 {
font-size: 18px;
line-height: 36px;
margin-bottom: 18px;
}
#info_content h1 {
font-weight: bold;
background: #960000;
margin: 0 -18px 18px;
padding: 0 18px;
color: #fff;
}
h2 {
color: #630000;
font-size: 18px;
line-height: 18px;
margin-bottom: 18px;
}
h3 {
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
/*------------------------------------------------------------------------
=Links
------------------------------------------------------------------------*/
a {
color: #f00;
}
#info_content a {
font-weight: bold;
}
#info_content a:visited {
color: #b84d4d;
}
#info_content a:active {
background: #f00;
}
/*------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------*/
label {
clear: both;
display: block;
font-size: 16px;
margin-bottom: 9px;
}
input#link_website_url {
border: 1px solid #630000;
border-left: 2px solid #630000;
border-top: 2px solid #630000;
float: left;
font-size: 36px;
padding: 2px;
width: 600px;
}
input.go {
background: #630000;
border: 1px solid #8a0000;
border-bottom: 2px solid #8a0000;
border-right: 2px solid #8a0000;
color: #fff;
float: right;
font-size: 18px;
margin: 0;
padding: 12px;
}
label.auto_copy {
font-size: 12px;
}
input#auto_copy {
margin: 0;
position: relative;
top: 2px;
}
/*------------------------------------------------------------------------
=Code samples
------------------------------------------------------------------------*/
pre {
background: #EFEFEF;
overflow: auto;
font-family: "Courier New", Courier, monospace
}
code {
color: #000;
display: block;
font-size: 14px;
padding: 9px;
}
\ No newline at end of file
public/stylesheets/master.css
512fbc0161b97dab0ad71be609b4f8cd411211ac
Chris Griffin
chris.griffin@planetargon.com
http://github.com/robbyrussell/rubyurl/commit/51c246999972cc0cddd708a3774cb710ec717971
51c246999972cc0cddd708a3774cb710ec717971
2009-02-17T21:07:37-08:00
2009-02-17T21:07:37-08:00
Updated the bookmarklet area to make it more obvious that the link is a bookmarklet.
c1e9b2eef97675ff5adc4d0585bf8a44fd3c73cc
Chris Griffin
chris.griffin@planetargon.com