Far better form.

This commit is contained in:
Yann Esposito (Yogsototh) 2011-08-10 00:15:22 +02:00
parent ef07b046f6
commit 61d9e9b909
10 changed files with 139 additions and 44 deletions

View file

@ -5,13 +5,28 @@ no_entete: true
menupriority: 4
---
<% content_for :bodyclass do %>std support<% end %>
<% content_for :js do %>
<script>
$.fn.clearOnFocus = function() {
return this.focus(function(){
var v = $(this).val();
$(this).val( v === this.defaultValue ? '' : v );
}).blur(function(){
var v = $(this).val();
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
});
};
$('input[type=text]').clearOnFocus();
$('textarea').clearOnFocus();
</script>
<% end %>
## A problem? A remark?
<form name="email" id="email" action="/contact" method="post">
<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
<input type="text" name="mail" value="Your email" onfocus="this.value=''" style="display: block; width=20em"/>
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
<input type="text" name="name" value="Your Name"/>
<input type="text" name="mail" value="Your email"/>
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
<input type="submit" value="Send"/>
</form>

View file

@ -5,13 +5,28 @@ no_entete: true
menupriority: 4
---
<% content_for :bodyclass do %>std support<% end %>
<% content_for :js do %>
<script>
$.fn.clearOnFocus = function() {
return this.focus(function(){
var v = $(this).val();
$(this).val( v === this.defaultValue ? '' : v );
}).blur(function(){
var v = $(this).val();
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
});
};
$('input[type=text]').clearOnFocus();
$('textarea').clearOnFocus();
</script>
<% end %>
## A problem? A remark?
<form name="email" id="email" action="/contact" method="post">
<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
<input type="text" name="mail" value="Your email" onfocus="this.value=''" style="display: block; width=20em"/>
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
<input type="text" name="name" value="Your Name"/>
<input type="text" name="mail" value="Your email"/>
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
<input type="submit" value="Send"/>
</form>

View file

@ -6,13 +6,28 @@ no_entete: true
menupriority: 4
---
<% content_for :bodyclass do %>std support<% end %>
<% content_for :js do %>
<script>
$.fn.clearOnFocus = function() {
return this.focus(function(){
var v = $(this).val();
$(this).val( v === this.defaultValue ? '' : v );
}).blur(function(){
var v = $(this).val();
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
});
};
$('input[type=text]').clearOnFocus();
$('textarea').clearOnFocus();
</script>
<% end %>
## A problem? A remark?
<form name="email" id="email" action="/contact" method="post">
<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
<input type="text" name="mail" value="Your email" onfocus="this.value=''" style="display: block; width=20em"/>
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
<input type="text" name="name" value="Your Name"/>
<input type="text" name="mail" value="Your email"/>
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
<input type="submit" value="Send"/>
</form>

View file

@ -14,6 +14,10 @@
<title type="html">Screenshots</title>
<published>2011-05-05T09:27:11Z</published>
<updated>2011-05-05T09:27:11Z</updated>
<author>
<name>Yann Esposito</name>
<uri>yannesposito.com</uri>
</author>
<link href="http://ypassword.espozito.com/Scratch/en/blog/2011-05-05-Screenshots/" rel="alternate"/>
<content type="html">
&lt;div class="intro"&gt;

View file

@ -58,9 +58,9 @@
<h2 class="first" id="a-problem-a-remark">A problem? A remark?</h2>
<form name="email" id="email" action="/contact" method="post">
<input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />
<input type="text" name="mail" value="Your email" onfocus="this.value=</code>" style="display: block; width=20em" />
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
<input type="text" name="name" value="Your Name" />
<input type="text" name="mail" value="Your email" />
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
<input type="submit" value="Send" />
</form>
@ -76,7 +76,7 @@
</div>
<footer>
<ul class="article_metadata">
<li>Modified: <time>07/12/2011</time></li>
<li>Modified: <time>08/08/2011</time></li>
</ul>
</footer>
</article>
@ -106,6 +106,20 @@
<script src="/js/plugins.js"></script>
<script src="/js/script.js"></script>
<script>
$.fn.clearOnFocus = function() {
return this.focus(function(){
var v = $(this).val();
$(this).val( v === this.defaultValue ? '' : v );
}).blur(function(){
var v = $(this).val();
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
});
};
$('input[type=text]').clearOnFocus();
$('textarea').clearOnFocus();
</script>
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="/js/libs/dd_belatedpng.js"></script>

View file

@ -14,6 +14,10 @@
<title type="html">Captures d'&#233;cran</title>
<published>2011-05-05T09:27:11Z</published>
<updated>2011-05-05T09:27:11Z</updated>
<author>
<name>Yann Esposito</name>
<uri>yannesposito.com</uri>
</author>
<link href="http://ypassword.espozito.com/Scratch/fr/blog/2011-05-05-Screenshots/" rel="alternate"/>
<content type="html">
&lt;div class="intro"&gt;

View file

@ -58,9 +58,9 @@
<h2 class="first" id="a-problem-a-remark">A problem? A remark?</h2>
<form name="email" id="email" action="/contact" method="post">
<input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />
<input type="text" name="mail" value="Your email" onfocus="this.value=</code>" style="display: block; width=20em" />
<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
<input type="text" name="name" value="Your Name" />
<input type="text" name="mail" value="Your email" />
<textarea name="body" id="bodytextarea" value="">Enter your comment here</textarea>
<input type="submit" value="Send" />
</form>
@ -76,7 +76,7 @@
</div>
<footer>
<ul class="article_metadata">
<li>modifié le : <time>12/07/2011</time></li>
<li>modifié le : <time>08/08/2011</time></li>
</ul>
</footer>
</article>
@ -106,6 +106,20 @@
<script src="/js/plugins.js"></script>
<script src="/js/script.js"></script>
<script>
$.fn.clearOnFocus = function() {
return this.focus(function(){
var v = $(this).val();
$(this).val( v === this.defaultValue ? '' : v );
}).blur(function(){
var v = $(this).val();
$(this).val( v.match(/^\s*$/) ? this.defaultValue : v );
});
};
$('input[type=text]').clearOnFocus();
$('textarea').clearOnFocus();
</script>
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="/js/libs/dd_belatedpng.js"></script>

View file

@ -1,36 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://ypassword.espozito.com/Scratch/fr/blog/2011-05-05-Screenshots/</loc>
<lastmod>2011-07-12</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/en/getit/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-07-24</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/fr/blog/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-07-27</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/fr/getit/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-07-24</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/en/support/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-08-09</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/en/blog/feed/feed.xml</loc>
<lastmod>2011-05-04</lastmod>
<lastmod>2011-05-02</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/fr/support/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-08-09</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/en/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-07-27</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/en/blog/2011-05-05-Screenshots/</loc>
@ -38,18 +38,18 @@
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/sitemap.xml</loc>
<lastmod>2011-05-04</lastmod>
<lastmod>2011-05-02</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/fr/blog/feed/feed.xml</loc>
<lastmod>2011-05-04</lastmod>
<lastmod>2011-05-02</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/en/blog/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-07-27</lastmod>
</url>
<url>
<loc>http://ypassword.espozito.com/Scratch/fr/</loc>
<lastmod>2011-08-08</lastmod>
<lastmod>2011-07-27</lastmod>
</url>
</urlset>

View file

@ -73,7 +73,6 @@ hgroup#maintitle {
background-image: -webkit-linear-gradient(top, #60646c, #51555c);
background-image: -moz-linear-gradient(top, #60646c, #51555c);
background-image: -o-linear-gradient(top, #60646c, #51555c);
background-image: -ms-linear-gradient(top, #60646c, #51555c);
background-image: linear-gradient(top, #60646c, #51555c);
}
/* line 75, ../src/main.sass */
@ -109,7 +108,6 @@ footer {
background-image: -webkit-linear-gradient(top, #60646c, #51555c);
background-image: -moz-linear-gradient(top, #60646c, #51555c);
background-image: -o-linear-gradient(top, #60646c, #51555c);
background-image: -ms-linear-gradient(top, #60646c, #51555c);
background-image: linear-gradient(top, #60646c, #51555c);
}
/* line 96, ../src/main.sass */
@ -729,7 +727,6 @@ body.support #main > article form {
background-image: -webkit-linear-gradient(top, #60646c, #51555c);
background-image: -moz-linear-gradient(top, #60646c, #51555c);
background-image: -o-linear-gradient(top, #60646c, #51555c);
background-image: -ms-linear-gradient(top, #60646c, #51555c);
background-image: linear-gradient(top, #60646c, #51555c);
}
/* line 354, ../src/main.sass */
@ -765,8 +762,11 @@ iframe {
border-radius: 5px;
}
/* line 369, ../src/main.sass */
/* line 371, ../src/main.sass */
input[type=text], textarea {
display: block;
width: 28em;
font-size: 0.9em;
-moz-box-shadow: #868b96 0 0 3px inset, #efeff4 0 0 3px;
-webkit-box-shadow: #868b96 0 0 3px inset, #efeff4 0 0 3px;
-o-box-shadow: #868b96 0 0 3px inset, #efeff4 0 0 3px;
@ -784,16 +784,22 @@ input[type=text], textarea {
margin: 1em 0;
}
/* line 378, ../src/main.sass */
/* line 382, ../src/main.sass */
textarea {
height: 17.305em;
}
/* line 385, ../src/main.sass */
input[type=submit], .bluebutton {
display: block;
text-align: center;
font-size: 0.9em;
padding: 1ex 3ex;
margin: 1em 0;
-moz-box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
-webkit-box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
-o-box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
box-shadow: #868b96 0 0 3px, #efeff4 2px 0;
margin: 0.5em 0;
-moz-box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
-webkit-box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
-o-box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
box-shadow: #66aaff 0 1px 2px inset, #efeff4 2px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
@ -801,12 +807,12 @@ input[type=submit], .bluebutton {
-khtml-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 -1px #303237;
border: solid 1px #66aaff;
border: solid 3px #303237;
color: #efeff4 !important;
font-weight: bold;
background: #4269a7;
}
/* line 390, ../src/main.sass */
/* line 398, ../src/main.sass */
input[type=submit]:hover, .bluebutton:hover {
color: #efeff4;
text-shadow: 0 0 1px #005588;

View file

@ -366,7 +366,12 @@ iframe
+box-shadow(rgba(#000,.6) 0 0 15px)
+border-radius()
$inputWidth: 28em
input[type=text], textarea
display: block
width: $inputWidth
font-size: .9em
+box-shadow($ycolor3 0 0 3px inset, $ycolorb 0 0 3px)
+border-radius()
border: solid 1px $ycolor3
@ -374,16 +379,19 @@ input[type=text], textarea
background: $ycolorb
padding: 1ex
margin: 1em 0
textarea
height: $inputWidth/1.618
input[type=submit],.bluebutton
display: block
text-align: center
font-size: .9em
padding: 1ex 3ex
margin: 1em 0
+box-shadow($ycolor3 0 0 3px, $ycolorb 2px 0)
margin: .5em 0
+box-shadow($higlightcolor-reflect 0 1px 2px inset, $ycolorb 2px 0)
+border-radius()
text-shadow: 0 -1px $ycolor7
border: solid 1px $higlightcolor-reflect
border: solid 3px $ycolor7
color: $ycolorb !important
font-weight: bold
background: $higlightcolor