Permalink
Browse files

Styles for the demo

  • Loading branch information...
1 parent 57c0b5f commit 414060bb774dab6f911407a694c8cb9dbbd3e8d1 @screeley screeley committed Oct 18, 2011
Showing with 64 additions and 5 deletions.
  1. +54 −5 demo/index.html
  2. +3 −0 demo/large.html
  3. +1 −0 demo/link.html
  4. +1 −0 demo/multi.html
  5. +2 −0 demo/rich.html
  6. +3 −0 demo/status.html
  7. BIN images/arrow.png
View
@@ -27,7 +27,43 @@
line-height: 20px;
}
#feed {
- margin: 0 0 0 20px;
+ margin:0 100px 0 120px;
+ }
+
+ #doc {
+ display: block;
+ width: 90px;
+ margin: 20px 20px 0 0;
+ float: right;
+ }
+
+ #preview_form {
+ position: relative;
+ margin: 0 0 0 100px;
+ padding-top:35px;
+ }
+
+ .arrow {
+ width:200px;
+ position: absolute;
+ top: 0;
+ right: 16px;
+ }
+ .arrow p {
+ position: absolute;
+ top: 0;
+ display:block;
+ right:75px;
+ line-height: 20px;
+ }
+ .arrow img {
+ position: absolute;
+ display:block;
+ top: 0;
+ right:45px;
+ }
+ .item .attributes {
+ padding: 0 0 0 120px;
}
</style>
@@ -50,16 +86,24 @@
<div class="container">
<div class="row">
<div class="hero-unit">
- <h1> jQuery Preview </h1>
+ <h1> jQuery Preview <a id="doc" href="https://github.com/embedly/jquery-preview" class="btn primary">Get the Code &raquo;</a></h1>
<p>
- <a href="https://github.com/embedly/embedly-jquery-preview">jQuery Preview</a>
+ <a href="https://github.com/embedly/jquery-preview">jQuery Preview</a>
is a plugin that allows users to preview URLs before
submitting them to be saved by an application. Facebook, Google+
and Yammer are all examples of tools with this functionality.
+
+
+ <div class="clearfix"></div>
</p>
<form id="preview_form" class="form-stacked" method="post" action=".">
+ <div class="arrow">
+ <p>Try it out.</p>
+ <img src='../images/arrow.png'>
+ </div>
<fieldset>
+ <div class="clearfix"></div>
<input type="text" class="xxlarge" name="url" id="id_url" value="http://vimeo.com/18150336" />
<button id="id_attach" class="btn primary">Attach</button>
<span class="help-block">Enter your own url or select attach.</span>
@@ -71,8 +115,11 @@
<!-- Placeholder that tells Preview where to put the selector-->
<div class="selector"></div>
</form>
-
<div id="feed"></div>
+
+
+
+
</div>
<div class="span12 columns offset1">
<p>
@@ -98,7 +145,7 @@
</p>
<p>
- The documentation and code is available on Embedly's Github here: <a href="https://github.com/embedly/embedly-jquery-preview">github.com/embedly/embedly-jquery-preview</a>.
+ The documentation and code is available on Embedly's Github here: <a href="https://github.com/embedly/jquery-preview">github.com/embedly/jquery-preview</a>.
</p>
@@ -126,6 +173,8 @@
e.preventDefault();
$('#id_url').trigger('attach');
+ $('.arrow p').text('Now Share it!')
+
$('#id_attach').replaceWith($('<input/>').attr({
'id' : 'id_submit',
'class' : 'btn primary',
View
@@ -8,6 +8,9 @@
<script src="../jquery.preview.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css">
<link rel="stylesheet" href="../preview.css" />
+
+ <title>jQuery Preview - Large</title>
+
<style>
.topbar{
position:relative;
View
@@ -8,6 +8,7 @@
<script src="../jquery.preview.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css">
<link rel="stylesheet" href="../preview.css" />
+ <title>jQuery Preview - Link</title>
<style>
.topbar{
position:relative;
View
@@ -8,6 +8,7 @@
<script src="../jquery.preview.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css">
<link rel="stylesheet" href="../preview.css" />
+ <title>jQuery Preview - Multi</title>
<style>
.topbar{
position:relative;
View
@@ -8,6 +8,8 @@
<script src="../jquery.preview.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css">
<link rel="stylesheet" href="../preview.css" />
+
+ <title>jQuery Preview - Rich</title>
<style>
.topbar{
position:relative;
View
@@ -8,6 +8,9 @@
<script src="../jquery.preview.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css">
<link rel="stylesheet" href="../preview.css" />
+
+ <title>jQuery Preview - Status</title>
+
<style>
.topbar{
position:relative;
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 414060b

Please sign in to comment.