remove blueprint, use easyframework
|
@ -1,3 +1,10 @@
|
|||
<% content_for :secondary do %>
|
||||
<ul>
|
||||
<li><%= link_to 'New pages', new_admin_page_path, :class => 'button positive' %></li>
|
||||
<li><%= link_to 'New root menu snippets', new_admin_snippet_path( :menu => 'root' ), :class => 'button positive' %></li>
|
||||
</ul>
|
||||
<% end -%>
|
||||
|
||||
<h1>Listing pages</h1>
|
||||
|
||||
<table>
|
||||
|
@ -35,7 +42,3 @@
|
|||
<% end %>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<%= link_to 'New pages', new_admin_page_path, :class => 'button positive' %>
|
||||
<%= link_to 'New root menu snippets', new_admin_snippet_path( :menu => 'root' ), :class => 'button positive' %>
|
|
@ -5,29 +5,43 @@
|
|||
<title>R4</title>
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<%= yield :page_specific_link %>
|
||||
<%= stylesheet_link_tag "blueprint/screen", "blueprint/plugins/buttons/screen", "forms", "main", :media => "screen, projection" %>
|
||||
<%= stylesheet_link_tag "blueprint/print", :media => "print" %>
|
||||
<%= stylesheet_link_tag "easy", "main", :media => "screen, projection" %>
|
||||
<%= stylesheet_link_tag "easyprint", :media => "print" %>
|
||||
<!--[if IE]>
|
||||
<%= stylesheet_link_tag "blueprint/ie", :media => "screen, projection" %>
|
||||
<%= stylesheet_link_tag "ie", :media => "screen, projection" %>
|
||||
<![endif]-->
|
||||
<%= yield :page_specific_css %>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id ="nav" class="span-24">
|
||||
<%= link_to t(:home, :scope => :admin), root_path %> |
|
||||
<%= link_to t(:page, :scope => :admin), admin_pages_path %> |
|
||||
<%= link_to t(:snippet, :scope => :admin), admin_snippets_path %> |
|
||||
<%= link_to t(:layout, :scope => :admin), admin_layouts_path %> |
|
||||
<%= link_to t(:announcement, :scope => :admin), admin_announcements_path %>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
|
||||
<h1>RulingSite</h1>
|
||||
|
||||
<ul id="nav">
|
||||
<li><%= link_to t(:home, :scope => :admin), root_path %></li>
|
||||
<li><%= link_to t(:page, :scope => :admin), admin_pages_path %></li>
|
||||
<li><%= link_to t(:snippet, :scope => :admin), admin_snippets_path %></li>
|
||||
<li><%= link_to t(:layout, :scope => :admin), admin_layouts_path %></li>
|
||||
<li><%= link_to t(:announcement, :scope => :admin), admin_announcements_path %></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<%= yield %>
|
||||
<div class="content">
|
||||
<div class="main"><%= yield %></div>
|
||||
<div class="secondary"><%= yield :secondary %></div>
|
||||
<div class="tertiary"><%= yield :tertiary %></div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<p>Rulingcom</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= javascript_include_tag "jquery",
|
||||
"jquery-ui",
|
||||
"jrails",
|
||||
"easy",
|
||||
"application", :cache => 'all' %>
|
||||
<%= yield :page_specific_javascript %>
|
||||
</body>
|
||||
|
|
|
@ -0,0 +1,92 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
.comments, .comments ul, #comments li{
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
.comments li{margin:0 0 1.5em 0;position:relative;}
|
||||
.comments .meta{margin-bottom:.5em;}
|
||||
.comments .meta li{
|
||||
margin:0;
|
||||
display:inline;
|
||||
color:#777;
|
||||
}
|
||||
.comments .meta .author{
|
||||
font-size:14px;
|
||||
font-weight:bold;
|
||||
}
|
||||
.comments .meta img{
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:2.5em;
|
||||
z-index:100;
|
||||
border:1px solid #ccc;
|
||||
}
|
||||
.comments .body{
|
||||
border-top:1px solid #ccc;
|
||||
padding-top:1em;
|
||||
padding-left:70px;
|
||||
}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
|
||||
<ol class="comments">
|
||||
|
||||
<li>
|
||||
<ul class="meta">
|
||||
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
|
||||
<li class="author"><a href="#">Author's name</a></li>
|
||||
<li class="date">posted on September 23rd, 2009</li>
|
||||
</ul>
|
||||
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
|
||||
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
|
||||
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
|
||||
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<ul class="meta">
|
||||
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
|
||||
<li class="author"><a href="#">Author's name</a></li>
|
||||
<li class="date">posted on September 23rd, 2009</li>
|
||||
</ul>
|
||||
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
|
||||
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
|
||||
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
|
||||
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<ul class="meta">
|
||||
<li class="image"><img src="http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48" alt="Author's name" /></li>
|
||||
<li class="author"><a href="#">Author's name</a></li>
|
||||
<li class="date">posted on September 23rd, 2009</li>
|
||||
</ul>
|
||||
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Suspendisse at enim augue, et luctus odio. Duis porttitor orci id arcu consequat varius.
|
||||
Pellentesque tempus augue sed purus facilisis vitae feugiat sem convallis. Maecenas a dolor velit.
|
||||
Ut tempus elit et nibh pellentesque et molestie mauris adipiscing.
|
||||
Curabitur elementum rutrum augue vitae tempus. Donec tincidunt ipsum ac arcu</div>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,417 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Easy front-end framework</title>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<meta http-equiv="imagetoolbar" content="no" />
|
||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
<link rel="stylesheet" href="../stylesheets/easyprint.css" media="print" />
|
||||
<script type="text/javascript" src="../javascripts/jquery.js"></script>
|
||||
<script type="text/javascript" src="../javascripts/easy.js"></script>
|
||||
<script type="text/javascript" src="../javascripts/application.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
|
||||
<div id="header">
|
||||
|
||||
<h1>Easy front-end framework</h1>
|
||||
|
||||
<ul id="nav">
|
||||
<li><a href="http://easyframework.com">Home</a></li>
|
||||
<li><a href="http://easyframework.com/overview.php">Overview</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="http://easyframework.com/documentation.php">Documentation</a>
|
||||
<ul>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
<li><a href="#">Sub-navigation item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="http://easyframework.com/demo.php">Demo</a></li>
|
||||
<li><a href="http://easyframework.com/contact.php">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="main">
|
||||
|
||||
<h1>H1 Title</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis dui nec eros varius
|
||||
ac molestie ante malesuada. Duis sed justo et sem hendrerit suscipit et ac eros. </p>
|
||||
|
||||
<p><strong>Aliquam suscipit</strong> sodales sapien eu egestas. Nulla laoreet sem ac diam
|
||||
suscipit condimentum. Vestibulum tempor odio iaculis enim cursus pharetra faucibus dui lobortis.
|
||||
Pellentesque at nisl nibh. </p>
|
||||
|
||||
<blockquote> Aliquam hendrerit accumsan porta. Nam vehicula eleifend sem eu pellentesque. </blockquote>
|
||||
|
||||
<p class="left"><a href="../images/img_logo1.jpg" title="Click for larger image" class="tooltip popup"><img src="../images/img_logo2.jpg" alt="" /></a></p>
|
||||
<p>Donec aliquam cursus tortor, faucibus lobortis convallis. Integer pharetra consequat felis, id malesuada metus vulputate a. Nunc ut magna massa. Donec commodo odio a ligula varius id vulputate nulla tristique. Suspendisse et egestas dolor. Aliquam hendrerit accumsan porta. Nam vehicula eleifend sem eu pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec in lacus nec justo porta congue id vel magna. </p>
|
||||
|
||||
<pre>pre{
|
||||
padding:1em 2em;
|
||||
background:#f1f1f1;
|
||||
}</pre>
|
||||
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
<caption>Table caption</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table header</th>
|
||||
<th>Table header</th>
|
||||
<th>Table header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Table footer</td>
|
||||
<td>Table footer</td>
|
||||
<td>Table footer</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table data</td>
|
||||
<td>Table data</td>
|
||||
<td>Table data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table data</td>
|
||||
<td>Table data</td>
|
||||
<td>Table data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui.
|
||||
Nulla viverra bibendum nisi, sit amet ullamcorper nibh euismod at. </p>
|
||||
|
||||
<h2>H2 Title</h2>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Class aptent taciti sociosqu</li>
|
||||
<li>Ad litora torquent per </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Class aptent taciti sociosqu</li>
|
||||
<li>Ad litora torquent per </li>
|
||||
</ul>
|
||||
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
|
||||
Integer a orci orci. Morbi dignissim pharetra nulla, vitae sollicitudin sapien tristique in.
|
||||
Donec quis nulla magna, ac mattis ligula. Ut rhoncus porttitor magna quis pulvinar. </p>
|
||||
|
||||
<p><a href="#">Read more...</a></p>
|
||||
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Class aptent taciti sociosqu</li>
|
||||
<li>Ad litora torquent per </li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Class aptent taciti sociosqu</li>
|
||||
<li>Ad litora torquent per </li>
|
||||
</ol>
|
||||
|
||||
<p>Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo, et commodo odio posuere sed. Morbi a erat est.</p>
|
||||
|
||||
<dl>
|
||||
<dt>Consectetur adipiscing elit</dt>
|
||||
<dd>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia</dd>
|
||||
<dt>Ad litora torquent per</dt>
|
||||
<dd>Ut rhoncus porttitor magna quis pulvinar. Nullam in dui ac tellus consequat iaculis.</dd>
|
||||
</dl>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
|
||||
<p class="pullquote">Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo.</p>
|
||||
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
|
||||
<p class="boxout">Nullam in dui ac tellus consequat iaculis. Donec faucibus imperdiet leo.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
|
||||
<div class="cols">
|
||||
|
||||
<div class="col first">
|
||||
<h3>Column 1</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Column 2</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cols cols3">
|
||||
|
||||
<div class="col first">
|
||||
<h3>Column 1</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Column 2</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Column 3</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cols cols4">
|
||||
|
||||
<div class="col first">
|
||||
<h2>Column 1</h2>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Column 2</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Column 3</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia tortor vitae erat lobortis sit amet semper lectus accumsan.</p>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h3>Column 4</h3>
|
||||
<p>Vivamus nunc tortor, consequat in porta nec, suscipit lacinia dui. Nulla viverra bibendum nisi,
|
||||
sit amet ullamcorper nibh euismod at. </p>
|
||||
<p>Integer vehicula tempor metus eu dignissim.
|
||||
Curabitur lobortis quam vestibulum risus sodales mattis.
|
||||
Nulla lacinia.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h4>H4 Title</h4>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
|
||||
<h5>H5 Title</h5>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
|
||||
<h6>H6 Title</h6>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
||||
per inceptos himenaeos. Mauris et lacus lectus, ut sodales lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
|
||||
<h2>Form</h2>
|
||||
|
||||
<p class="note">This is the style for notifications.</p>
|
||||
<p class="success">This is the style for successful actions.</p>
|
||||
<p class="error">This is the style for errors!</p>
|
||||
|
||||
<form id="contactForm" action="/" method="post">
|
||||
|
||||
<fieldset>
|
||||
|
||||
<legend>Basic options</legend>
|
||||
<div>
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" id="name" size="30" class="field required" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="url">URL</label>
|
||||
<input type="text" name="url" id="url" size="30" class="field required url" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="email" size="30" class="field required email" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="phonenumber">Phone Number</label>
|
||||
<input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="city">City</label>
|
||||
<select name="city" id="city" class="select">
|
||||
<option>New York</option>
|
||||
<option>London</option>
|
||||
<option>Paris</option>
|
||||
<option>Tokio</option>
|
||||
<option>Sydney</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Message</label>
|
||||
<textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>More options...</legend>
|
||||
<p>Following text field uses label as a default value.</p>
|
||||
<div>
|
||||
<label for="location">Where do you live?</label>
|
||||
<input type="text" name="location" id="location" size="30" class="field label" />
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>... and more options</legend>
|
||||
<div>
|
||||
<label><input type="radio" name="radio" value="1" checked="checked" class="radio" /> Value 1</label>
|
||||
<label><input type="radio" name="radio" value="2" class="radio" /> Value 2</label>
|
||||
<label><input type="radio" name="radio" value="3" class="radio" /> Value 3</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input type="checkbox" name="checkbox" value="1" checked="checked" class="required" /> Checkbox here</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="submit"><button type="submit">Submit</button></div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="secondary">
|
||||
<h2>Interactive Elements</h2>
|
||||
|
||||
<p>This will display <a href="http://easyframework.com" class="tooltip" title="Regular Tooltip">regular tooltip.</a></p>
|
||||
|
||||
<p>This will display an <a href="http://easyframework.com/images/img_logo1.jpg" class="popup">image in a popup box</a>.</p>
|
||||
|
||||
<p>This will open a <a href="http://easyframework.com" class="popup">URL in a popup box</a> using <strong>default settings</strong>.</p>
|
||||
|
||||
<p>This will open a <a href="http://easyframework.com" class="popup" rel="width:800;height:300">URL in a popup box</a> using <strong>custom settings</strong> for width and height.</p>
|
||||
|
||||
<p>This will open a <a href="http://www.youtube.com/v/cnvkeJds7zc&hl=en_US&fs" class="popup flash" rel="width:560;height:340">Flash movie in a popup box</a>.</p>
|
||||
|
||||
<p>This will display <a href="#header" class="popup">any element from the page in a popup box</a>.</p>
|
||||
|
||||
<p class="toggle">Click on this to show/hide <strong>next sibling</strong>.</p>
|
||||
|
||||
<p><em>This is the NEXT sibling!</em></p>
|
||||
|
||||
<p><em>This is the PREVIOUS sibling!</em></p>
|
||||
|
||||
<p class="toggle prev">Click on this to show/hide <strong>previous sibling</strong>.</p>
|
||||
|
||||
<p>Click on this to show/hide <a href="#toggler" title="Show and hide element with id=toggler" class="toggle id tooltip">element based on ID</a>.
|
||||
It can be placed anywhere on the page. (This works only on anchor elements)</p>
|
||||
|
||||
<p id="toggler"><em>This is the element with ID "toggler"!</em></p>
|
||||
|
||||
<p>Click on this link to <a href="#footer" class="jump">jump to the footer</a></p>
|
||||
|
||||
<ul class="rotate">
|
||||
<li>Built-in rotation script...</li>
|
||||
<li>...rotates child nodes of any element!</li>
|
||||
</ul>
|
||||
|
||||
<h2>Styled Elements</h2>
|
||||
|
||||
<p>
|
||||
This is <abbr title="title">abbreviation</abbr><br />
|
||||
This is <strong>strong</strong><br />
|
||||
This is <em>emphasis</em><br />
|
||||
This is <b>bold text</b><br />
|
||||
This is <i>italic text</i><br />
|
||||
This is <cite>cite</cite><br />
|
||||
This is <code>code sample</code><br />
|
||||
This is <small>small text</small><br />
|
||||
This is <big>small text</big><br />
|
||||
This is <del>deleted text</del><br />
|
||||
This is <ins>inserted text</ins><br />
|
||||
This is <dfn>defining instance</dfn><br />
|
||||
This is <kbd>user input</kbd><br />
|
||||
This is <samp>sample output</samp><br />
|
||||
This is <q>inline quote</q> <br />
|
||||
These are <sup>superscript</sup> and <sub>subscript</sub><br />
|
||||
This is <var>variable or program argument</var>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<p>© Alen Grakalic Easy front-end framework (Read <a href="http://easyframework.com/license.php">license agreement</a>)<br/>
|
||||
Made with <a href="http://easyframework.com">Easy</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,89 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
.form fieldset{border:none;margin:0;padding:0;}
|
||||
.form legend{display:none;}
|
||||
.form div{clear:both;margin:.5em 0;}
|
||||
.form label{
|
||||
float:left;
|
||||
width:150px;
|
||||
}
|
||||
.form .field, .form .area{
|
||||
width:250px;
|
||||
padding:3px;
|
||||
}
|
||||
.form select{padding:3px;width:256px;}
|
||||
.form .submit{margin-left:150px;}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<form action="/" method="post" class="form">
|
||||
|
||||
<fieldset><legend>Contact form</legend>
|
||||
<div>
|
||||
<label for="firstname">First Name</label>
|
||||
<input type="text" name="firstname" id="firstname" size="30" class="field required" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Last Name</label>
|
||||
<input type="text" name="lastname" id="lastname" size="30" class="field" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="address">Address</label>
|
||||
<input type="text" name="address" id="address" size="30" class="field" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="url">URL</label>
|
||||
<input type="text" name="url" id="url" size="30" class="field required url" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="email" size="30" class="field required email" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="phonenumber">Phone Number</label>
|
||||
<input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="city">City</label>
|
||||
<select name="city" id="city" class="select">
|
||||
<option>New York</option>
|
||||
<option>London</option>
|
||||
<option>Paris</option>
|
||||
<option>Tokio</option>
|
||||
<option>Sydney</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="country">Country</label>
|
||||
<select name="country" class="select">
|
||||
<option>USA</option>
|
||||
<option>UK</option>
|
||||
<option>France</option>
|
||||
<option>Japan</option>
|
||||
<option>Australia</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Message</label>
|
||||
<textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
|
||||
</div>
|
||||
<div class="submit"><button type="submit">Submit</button></div>
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,83 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
.form fieldset{border:none;margin:0;padding:0;background:#ccc;}
|
||||
.form legend{display:none;}
|
||||
.form div{clear:both;margin:.25em 0;}
|
||||
.form label{display:block;}
|
||||
.form .field{padding:3px;width:250px;}
|
||||
.form .area{padding:3px;width:580px;}
|
||||
.form select{padding:3px;width:256px;}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<form action="/" method="post" class="form">
|
||||
|
||||
<fieldset class="cols"><legend>Contact form</legend>
|
||||
<div class="col first">
|
||||
<label for="firstname">First Name</label>
|
||||
<input type="text" name="firstname" id="firstname" size="30" class="field required" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<label for="lastname">Last Name</label>
|
||||
<input type="text" name="lastname" id="lastname" size="30" class="field" />
|
||||
</div>
|
||||
<div class="col first">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" name="address" id="address" size="30" class="field" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<label for="url">URL</label>
|
||||
<input type="text" name="url" id="url" size="30" class="field required url" />
|
||||
</div>
|
||||
<div class="col first">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="email" size="30" class="field required email" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<label for="phonenumber">Phone Number</label>
|
||||
<input type="text" name="phonenumber" id="phonenumber" size="30" class="field" />
|
||||
</div>
|
||||
<div class="col first">
|
||||
<label for="city">City</label>
|
||||
<select name="city" id="city" class="select">
|
||||
<option>New York</option>
|
||||
<option>London</option>
|
||||
<option>Paris</option>
|
||||
<option>Tokio</option>
|
||||
<option>Sydney</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label for="country">Country</label>
|
||||
<select name="country" class="select">
|
||||
<option>USA</option>
|
||||
<option>UK</option>
|
||||
<option>France</option>
|
||||
<option>Japan</option>
|
||||
<option>Australia</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Message</label>
|
||||
<textarea name="message" id="message" cols="30" rows="10" class="area"></textarea>
|
||||
</div>
|
||||
<div class="submit"><button type="submit">Submit</button></div>
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,54 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
<script type="text/javascript" src="../javascripts/jquery.js"></script>
|
||||
<script type="text/javascript" src="../javascripts/easy.js"></script>
|
||||
<script type="text/javascript" src="../javascripts/application.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
form#searchForm{
|
||||
margin:0;
|
||||
padding:1em 10px;
|
||||
background:#f1f1f1;
|
||||
float:left;
|
||||
position:absolute;
|
||||
top:2em;
|
||||
right:0;
|
||||
}
|
||||
#searchForm .field{
|
||||
border:1px solid #999;
|
||||
padding:5px;
|
||||
width:150px;
|
||||
float:left;
|
||||
}
|
||||
#searchForm button{
|
||||
display:inline;
|
||||
float:left;
|
||||
background:#ccc; /* place search icon here */
|
||||
height:26px;
|
||||
width:26px;
|
||||
margin-left:5px;
|
||||
}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<form id="searchForm" action="/" method="post">
|
||||
|
||||
<label for="keyword">Search</label>
|
||||
<input type="text" name="keyword" id="keyword" size="30" class="field label" />
|
||||
<button type="submit" class="graphic">Go</button>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Easy front-end framework</title>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
|
||||
<meta name="keywords" content=""></meta>
|
||||
<meta name="description" content=""></meta>
|
||||
<meta http-equiv="imagetoolbar" content="no" />
|
||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
<link rel="stylesheet" href="../stylesheets/easyprint.css" media="print" />
|
||||
<script type="text/javascript" src="../javascripts/jquery.js"></script>
|
||||
<script type="text/javascript" src="../javascripts/easy.js"></script>
|
||||
<script type="text/javascript" src="../javascripts/application.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
|
||||
<div id="header">
|
||||
|
||||
<h1><a href="http://easyframework.com" title="click here to return to the homepage">Easy front-end framework</a></h1>
|
||||
|
||||
<ul id="nav">
|
||||
<li><a href="http://easyframework.com">Home</a></li>
|
||||
<li><a href="#">Overview</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Demo</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="main"></div>
|
||||
|
||||
<div class="secondary"></div>
|
||||
|
||||
<div class="tertiary"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<p>Made with <a href="http://easyframework.com">Easy</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,42 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
ul.list{
|
||||
margin:1em 0;
|
||||
padding:0;
|
||||
border-top:1px solid #ccc;
|
||||
width:200px;
|
||||
}
|
||||
ul.list li{
|
||||
margin:0;
|
||||
padding:.5em 0;
|
||||
list-style:none;
|
||||
border-bottom:1px solid #ccc;
|
||||
}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
|
||||
<ul class="list">
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,50 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
div.list{
|
||||
margin-bottom:1.5em;
|
||||
width:255px;
|
||||
overflow:hidden;
|
||||
}
|
||||
div.list ul{
|
||||
margin:-5px 0 0 -5px;
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
div.list ul li{
|
||||
margin:5px 0 0 5px;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
float:left;
|
||||
width:125px;
|
||||
height:125px;
|
||||
background:#ccc;
|
||||
}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<div class="list">
|
||||
<ul class="fixed">
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,54 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
div.list{
|
||||
width:600px;
|
||||
border-top:1px solid #999;
|
||||
margin-bottom:1.5em;
|
||||
}
|
||||
div.list ul{
|
||||
margin:0 0 0 -15px;
|
||||
padding:0;
|
||||
}
|
||||
div.list ul li{
|
||||
margin:0 0 0 15px;
|
||||
padding:.5em 0;
|
||||
list-style:none;
|
||||
border-bottom:1px solid #ccc;
|
||||
float:left;
|
||||
width:190px;
|
||||
}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<div class="list">
|
||||
<ul class="fixed">
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
<li><a href="#">Lorem ipsum</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,49 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
ul.nav{
|
||||
margin:0;
|
||||
padding:0;
|
||||
position:absolute;
|
||||
top:2em;
|
||||
right:0;
|
||||
}
|
||||
ul.nav li{
|
||||
margin:0;
|
||||
padding:0 .5em;
|
||||
line-height:1em;
|
||||
float:left;
|
||||
list-style:none;
|
||||
border-left:1px solid #555;
|
||||
}
|
||||
ul.nav li.first{
|
||||
padding-left:0;
|
||||
border-left:none;
|
||||
}
|
||||
ul.nav li a{float:left;}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<ul class="nav fixed">
|
||||
<li class="first"><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,46 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
ul.nav{
|
||||
margin:0 0 1.5em 0;
|
||||
padding:0;
|
||||
}
|
||||
ul.nav li{
|
||||
margin:0;
|
||||
padding:0 .5em;
|
||||
line-height:1em;
|
||||
float:left;
|
||||
list-style:none;
|
||||
border-left:1px solid #555;
|
||||
}
|
||||
ul.nav li.first{
|
||||
padding-left:0;
|
||||
border-left:none;
|
||||
}
|
||||
ul.nav li a{float:left;}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<ul class="nav fixed">
|
||||
<li class="first"><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,48 @@
|
|||
<link rel="stylesheet" href="../stylesheets/easy.css" media="screen" />
|
||||
|
||||
<style>
|
||||
|
||||
/* COPY START HERE */
|
||||
|
||||
ol.pagination{
|
||||
margin:1em 0;
|
||||
padding:0;
|
||||
}
|
||||
ol.pagination li{
|
||||
margin:0 .5em 0 0;
|
||||
padding:0;
|
||||
float:left;
|
||||
list-style:none;
|
||||
}
|
||||
ol.pagination li a, ol.pagination li span{
|
||||
float:left;
|
||||
border:1px solid #ccc;
|
||||
line-height:1.5em;
|
||||
padding:0 .5em;
|
||||
background:#fff;
|
||||
}
|
||||
ol.pagination li a:hover{background:#f1f1f1;}
|
||||
ol.pagination li span{background:#ccc;color:#fff;}
|
||||
|
||||
/* COPY END HERE */
|
||||
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="main">
|
||||
|
||||
<!-- COPY START HERE -->
|
||||
|
||||
<ol class="pagination fixed">
|
||||
<li><a href="#">1</a></li>
|
||||
<li><span>2</span></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">6</a></li>
|
||||
</ol>
|
||||
|
||||
<!-- COPY END HERE -->
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -1,2 +1,10 @@
|
|||
// Place your application-specific JavaScript functions and classes here
|
||||
// This file is automatically included by javascript_include_tag :defaults
|
||||
$(document).ready(function(){
|
||||
$.easy.navigation();
|
||||
$.easy.tooltip();
|
||||
$.easy.popup();
|
||||
$.easy.external();
|
||||
$.easy.rotate();
|
||||
$.easy.forms();
|
||||
$.easy.showhide();
|
||||
$.easy.jump();
|
||||
});
|
|
@ -1,963 +0,0 @@
|
|||
// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
// (c) 2005-2008 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
||||
// (c) 2005-2008 Jon Tirsen (http://www.tirsen.com)
|
||||
// Contributors:
|
||||
// Richard Livsey
|
||||
// Rahul Bhargava
|
||||
// Rob Wills
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
// Autocompleter.Base handles all the autocompletion functionality
|
||||
// that's independent of the data source for autocompletion. This
|
||||
// includes drawing the autocompletion menu, observing keyboard
|
||||
// and mouse events, and similar.
|
||||
//
|
||||
// Specific autocompleters need to provide, at the very least,
|
||||
// a getUpdatedChoices function that will be invoked every time
|
||||
// the text inside the monitored textbox changes. This method
|
||||
// should get the text for which to provide autocompletion by
|
||||
// invoking this.getToken(), NOT by directly accessing
|
||||
// this.element.value. This is to allow incremental tokenized
|
||||
// autocompletion. Specific auto-completion logic (AJAX, etc)
|
||||
// belongs in getUpdatedChoices.
|
||||
//
|
||||
// Tokenized incremental autocompletion is enabled automatically
|
||||
// when an autocompleter is instantiated with the 'tokens' option
|
||||
// in the options parameter, e.g.:
|
||||
// new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });
|
||||
// will incrementally autocomplete with a comma as the token.
|
||||
// Additionally, ',' in the above example can be replaced with
|
||||
// a token array, e.g. { tokens: [',', '\n'] } which
|
||||
// enables autocompletion on multiple tokens. This is most
|
||||
// useful when one of the tokens is \n (a newline), as it
|
||||
// allows smart autocompletion after linebreaks.
|
||||
|
||||
if(typeof Effect == 'undefined')
|
||||
throw("controls.js requires including script.aculo.us' effects.js library");
|
||||
|
||||
var Autocompleter = { };
|
||||
Autocompleter.Base = Class.create({
|
||||
baseInitialize: function(element, update, options) {
|
||||
element = $(element);
|
||||
this.element = element;
|
||||
this.update = $(update);
|
||||
this.hasFocus = false;
|
||||
this.changed = false;
|
||||
this.active = false;
|
||||
this.index = 0;
|
||||
this.entryCount = 0;
|
||||
this.oldElementValue = this.element.value;
|
||||
|
||||
if(this.setOptions)
|
||||
this.setOptions(options);
|
||||
else
|
||||
this.options = options || { };
|
||||
|
||||
this.options.paramName = this.options.paramName || this.element.name;
|
||||
this.options.tokens = this.options.tokens || [];
|
||||
this.options.frequency = this.options.frequency || 0.4;
|
||||
this.options.minChars = this.options.minChars || 1;
|
||||
this.options.onShow = this.options.onShow ||
|
||||
function(element, update){
|
||||
if(!update.style.position || update.style.position=='absolute') {
|
||||
update.style.position = 'absolute';
|
||||
Position.clone(element, update, {
|
||||
setHeight: false,
|
||||
offsetTop: element.offsetHeight
|
||||
});
|
||||
}
|
||||
Effect.Appear(update,{duration:0.15});
|
||||
};
|
||||
this.options.onHide = this.options.onHide ||
|
||||
function(element, update){ new Effect.Fade(update,{duration:0.15}) };
|
||||
|
||||
if(typeof(this.options.tokens) == 'string')
|
||||
this.options.tokens = new Array(this.options.tokens);
|
||||
// Force carriage returns as token delimiters anyway
|
||||
if (!this.options.tokens.include('\n'))
|
||||
this.options.tokens.push('\n');
|
||||
|
||||
this.observer = null;
|
||||
|
||||
this.element.setAttribute('autocomplete','off');
|
||||
|
||||
Element.hide(this.update);
|
||||
|
||||
Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));
|
||||
Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
|
||||
if(!this.iefix &&
|
||||
(Prototype.Browser.IE) &&
|
||||
(Element.getStyle(this.update, 'position')=='absolute')) {
|
||||
new Insertion.After(this.update,
|
||||
'<iframe id="' + this.update.id + '_iefix" '+
|
||||
'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
|
||||
'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
|
||||
this.iefix = $(this.update.id+'_iefix');
|
||||
}
|
||||
if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
|
||||
},
|
||||
|
||||
fixIEOverlapping: function() {
|
||||
Position.clone(this.update, this.iefix, {setTop:(!this.update.style.height)});
|
||||
this.iefix.style.zIndex = 1;
|
||||
this.update.style.zIndex = 2;
|
||||
Element.show(this.iefix);
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.stopIndicator();
|
||||
if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);
|
||||
if(this.iefix) Element.hide(this.iefix);
|
||||
},
|
||||
|
||||
startIndicator: function() {
|
||||
if(this.options.indicator) Element.show(this.options.indicator);
|
||||
},
|
||||
|
||||
stopIndicator: function() {
|
||||
if(this.options.indicator) Element.hide(this.options.indicator);
|
||||
},
|
||||
|
||||
onKeyPress: function(event) {
|
||||
if(this.active)
|
||||
switch(event.keyCode) {
|
||||
case Event.KEY_TAB:
|
||||
case Event.KEY_RETURN:
|
||||
this.selectEntry();
|
||||
Event.stop(event);
|
||||
case Event.KEY_ESC:
|
||||
this.hide();
|
||||
this.active = false;
|
||||
Event.stop(event);
|
||||
return;
|
||||
case Event.KEY_LEFT:
|
||||
case Event.KEY_RIGHT:
|
||||
return;
|
||||
case Event.KEY_UP:
|
||||
this.markPrevious();
|
||||
this.render();
|
||||
Event.stop(event);
|
||||
return;
|
||||
case Event.KEY_DOWN:
|
||||
this.markNext();
|
||||
this.render();
|
||||
Event.stop(event);
|
||||
return;
|
||||
}
|
||||
else
|
||||
if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
|
||||
(Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;
|
||||
|
||||
this.changed = true;
|
||||
this.hasFocus = true;
|
||||
|
||||
if(this.observer) clearTimeout(this.observer);
|
||||
this.observer =
|
||||
setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
this.changed = false;
|
||||
this.hasFocus = true;
|
||||
this.getUpdatedChoices();
|
||||
},
|
||||
|
||||
onHover: function(event) {
|
||||
var element = Event.findElement(event, 'LI');
|
||||
if(this.index != element.autocompleteIndex)
|
||||
{
|
||||
this.index = element.autocompleteIndex;
|
||||
this.render();
|
||||
}
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
onClick: function(event) {
|
||||
var element = Event.findElement(event, 'LI');
|
||||
this.index = element.autocompleteIndex;
|
||||
this.selectEntry();
|
||||
this.hide();
|
||||
},
|
||||
|
||||
onBlur: function(event) {
|
||||
// needed to make click events working
|
||||
setTimeout(this.hide.bind(this), 250);
|
||||
this.hasFocus = false;
|
||||
this.active = false;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
if(this.entryCount > 0) {
|
||||
for (var i = 0; i < this.entryCount; i++)
|
||||
this.index==i ?
|
||||
Element.addClassName(this.getEntry(i),"selected") :
|
||||
Element.removeClassName(this.getEntry(i),"selected");
|
||||
if(this.hasFocus) {
|
||||
this.show();
|
||||
this.active = true;
|
||||
}
|
||||
} else {
|
||||
this.active = false;
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
markPrevious: function() {
|
||||
if(this.index > 0) this.index--;
|
||||
else this.index = this.entryCount-1;
|
||||
this.getEntry(this.index).scrollIntoView(true);
|
||||
},
|
||||
|
||||
markNext: function() {
|
||||
if(this.index < this.entryCount-1) this.index++;
|
||||
else this.index = 0;
|
||||
this.getEntry(this.index).scrollIntoView(false);
|
||||
},
|
||||
|
||||
getEntry: function(index) {
|
||||
return this.update.firstChild.childNodes[index];
|
||||
},
|
||||
|
||||
getCurrentEntry: function() {
|
||||
return this.getEntry(this.index);
|
||||
},
|
||||
|
||||
selectEntry: function() {
|
||||
this.active = false;
|
||||
this.updateElement(this.getCurrentEntry());
|
||||
},
|
||||
|
||||
updateElement: function(selectedElement) {
|
||||
if (this.options.updateElement) {
|
||||
this.options.updateElement(selectedElement);
|
||||
return;
|
||||
}
|
||||
var value = '';
|
||||
if (this.options.select) {
|
||||
var nodes = $(selectedElement).select('.' + this.options.select) || [];
|
||||
if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
|
||||
} else
|
||||
value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
|
||||
|
||||
var bounds = this.getTokenBounds();
|
||||
if (bounds[0] != -1) {
|
||||
var newValue = this.element.value.substr(0, bounds[0]);
|
||||
var whitespace = this.element.value.substr(bounds[0]).match(/^\s+/);
|
||||
if (whitespace)
|
||||
newValue += whitespace[0];
|
||||
this.element.value = newValue + value + this.element.value.substr(bounds[1]);
|
||||
} else {
|
||||
this.element.value = value;
|
||||
}
|
||||
this.oldElementValue = this.element.value;
|
||||
this.element.focus();
|
||||
|
||||
if (this.options.afterUpdateElement)
|
||||
this.options.afterUpdateElement(this.element, selectedElement);
|
||||
},
|
||||
|
||||
updateChoices: function(choices) {
|
||||
if(!this.changed && this.hasFocus) {
|
||||
this.update.innerHTML = choices;
|
||||
Element.cleanWhitespace(this.update);
|
||||
Element.cleanWhitespace(this.update.down());
|
||||
|
||||
if(this.update.firstChild && this.update.down().childNodes) {
|
||||
this.entryCount =
|
||||
this.update.down().childNodes.length;
|
||||
for (var i = 0; i < this.entryCount; i++) {
|
||||
var entry = this.getEntry(i);
|
||||
entry.autocompleteIndex = i;
|
||||
this.addObservers(entry);
|
||||
}
|
||||
} else {
|
||||
this.entryCount = 0;
|
||||
}
|
||||
|
||||
this.stopIndicator();
|
||||
this.index = 0;
|
||||
|
||||
if(this.entryCount==1 && this.options.autoSelect) {
|
||||
this.selectEntry();
|
||||
this.hide();
|
||||
} else {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addObservers: function(element) {
|
||||
Event.observe(element, "mouseover", this.onHover.bindAsEventListener(this));
|
||||
Event.observe(element, "click", this.onClick.bindAsEventListener(this));
|
||||
},
|
||||
|
||||
onObserverEvent: function() {
|
||||
this.changed = false;
|
||||
this.tokenBounds = null;
|
||||
if(this.getToken().length>=this.options.minChars) {
|
||||
this.getUpdatedChoices();
|
||||
} else {
|
||||
this.active = false;
|
||||
this.hide();
|
||||
}
|
||||
this.oldElementValue = this.element.value;
|
||||
},
|
||||
|
||||
getToken: function() {
|
||||
var bounds = this.getTokenBounds();
|
||||
return this.element.value.substring(bounds[0], bounds[1]).strip();
|
||||
},
|
||||
|
||||
getTokenBounds: function() {
|
||||
if (null != this.tokenBounds) return this.tokenBounds;
|
||||
var value = this.element.value;
|
||||
if (value.strip().empty()) return [-1, 0];
|
||||
var diff = arguments.callee.getFirstDifferencePos(value, this.oldElementValue);
|
||||
var offset = (diff == this.oldElementValue.length ? 1 : 0);
|
||||
var prevTokenPos = -1, nextTokenPos = value.length;
|
||||
var tp;
|
||||
for (var index = 0, l = this.options.tokens.length; index < l; ++index) {
|
||||
tp = value.lastIndexOf(this.options.tokens[index], diff + offset - 1);
|
||||
if (tp > prevTokenPos) prevTokenPos = tp;
|
||||
tp = value.indexOf(this.options.tokens[index], diff + offset);
|
||||
if (-1 != tp && tp < nextTokenPos) nextTokenPos = tp;
|
||||
}
|
||||
return (this.tokenBounds = [prevTokenPos + 1, nextTokenPos]);
|
||||
}
|
||||
});
|
||||
|
||||
Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function(newS, oldS) {
|
||||
var boundary = Math.min(newS.length, oldS.length);
|
||||
for (var index = 0; index < boundary; ++index)
|
||||
if (newS[index] != oldS[index])
|
||||
return index;
|
||||
return boundary;
|
||||
};
|
||||
|
||||
Ajax.Autocompleter = Class.create(Autocompleter.Base, {
|
||||
initialize: function(element, update, url, options) {
|
||||
this.baseInitialize(element, update, options);
|
||||
this.options.asynchronous = true;
|
||||
this.options.onComplete = this.onComplete.bind(this);
|
||||
this.options.defaultParams = this.options.parameters || null;
|
||||
this.url = url;
|
||||
},
|
||||
|
||||
getUpdatedChoices: function() {
|
||||
this.startIndicator();
|
||||
|
||||
var entry = encodeURIComponent(this.options.paramName) + '=' +
|
||||
encodeURIComponent(this.getToken());
|
||||
|
||||
this.options.parameters = this.options.callback ?
|
||||
this.options.callback(this.element, entry) : entry;
|
||||
|
||||
if(this.options.defaultParams)
|
||||
this.options.parameters += '&' + this.options.defaultParams;
|
||||
|
||||
new Ajax.Request(this.url, this.options);
|
||||
},
|
||||
|
||||
onComplete: function(request) {
|
||||
this.updateChoices(request.responseText);
|
||||
}
|
||||
});
|
||||
|
||||
// The local array autocompleter. Used when you'd prefer to
|
||||
// inject an array of autocompletion options into the page, rather
|
||||
// than sending out Ajax queries, which can be quite slow sometimes.
|
||||
//
|
||||
// The constructor takes four parameters. The first two are, as usual,
|
||||
// the id of the monitored textbox, and id of the autocompletion menu.
|
||||
// The third is the array you want to autocomplete from, and the fourth
|
||||
// is the options block.
|
||||
//
|
||||
// Extra local autocompletion options:
|
||||
// - choices - How many autocompletion choices to offer
|
||||
//
|
||||
// - partialSearch - If false, the autocompleter will match entered
|
||||
// text only at the beginning of strings in the
|
||||
// autocomplete array. Defaults to true, which will
|
||||
// match text at the beginning of any *word* in the
|
||||
// strings in the autocomplete array. If you want to
|
||||
// search anywhere in the string, additionally set
|
||||
// the option fullSearch to true (default: off).
|
||||
//
|
||||
// - fullSsearch - Search anywhere in autocomplete array strings.
|
||||
//
|
||||
// - partialChars - How many characters to enter before triggering
|
||||
// a partial match (unlike minChars, which defines
|
||||
// how many characters are required to do any match
|
||||
// at all). Defaults to 2.
|
||||
//
|
||||
// - ignoreCase - Whether to ignore case when autocompleting.
|
||||
// Defaults to true.
|
||||
//
|
||||
// It's possible to pass in a custom function as the 'selector'
|
||||
// option, if you prefer to write your own autocompletion logic.
|
||||
// In that case, the other options above will not apply unless
|
||||
// you support them.
|
||||
|
||||
Autocompleter.Local = Class.create(Autocompleter.Base, {
|
||||
initialize: function(element, update, array, options) {
|
||||
this.baseInitialize(element, update, options);
|
||||
this.options.array = array;
|
||||
},
|
||||
|
||||
getUpdatedChoices: function() {
|
||||
this.updateChoices(this.options.selector(this));
|
||||
},
|
||||
|
||||
setOptions: function(options) {
|
||||
this.options = Object.extend({
|
||||
choices: 10,
|
||||
partialSearch: true,
|
||||
partialChars: 2,
|
||||
ignoreCase: true,
|
||||
fullSearch: false,
|
||||
selector: function(instance) {
|
||||
var ret = []; // Beginning matches
|
||||
var partial = []; // Inside matches
|
||||
var entry = instance.getToken();
|
||||
var count = 0;
|
||||
|
||||
for (var i = 0; i < instance.options.array.length &&
|
||||
ret.length < instance.options.choices ; i++) {
|
||||
|
||||
var elem = instance.options.array[i];
|
||||
var foundPos = instance.options.ignoreCase ?
|
||||
elem.toLowerCase().indexOf(entry.toLowerCase()) :
|
||||
elem.indexOf(entry);
|
||||
|
||||
while (foundPos != -1) {
|
||||
if (foundPos == 0 && elem.length != entry.length) {
|
||||
ret.push("<li><strong>" + elem.substr(0, entry.length) + "</strong>" +
|
||||
elem.substr(entry.length) + "</li>");
|
||||
break;
|
||||
} else if (entry.length >= instance.options.partialChars &&
|
||||
instance.options.partialSearch && foundPos != -1) {
|
||||
if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos-1,1))) {
|
||||
partial.push("<li>" + elem.substr(0, foundPos) + "<strong>" +
|
||||
elem.substr(foundPos, entry.length) + "</strong>" + elem.substr(
|
||||
foundPos + entry.length) + "</li>");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
foundPos = instance.options.ignoreCase ?
|
||||
elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
|
||||
elem.indexOf(entry, foundPos + 1);
|
||||
|
||||
}
|
||||
}
|
||||
if (partial.length)
|
||||
ret = ret.concat(partial.slice(0, instance.options.choices - ret.length));
|
||||
return "<ul>" + ret.join('') + "</ul>";
|
||||
}
|
||||
}, options || { });
|
||||
}
|
||||
});
|
||||
|
||||
// AJAX in-place editor and collection editor
|
||||
// Full rewrite by Christophe Porteneuve <tdd@tddsworld.com> (April 2007).
|
||||
|
||||
// Use this if you notice weird scrolling problems on some browsers,
|
||||
// the DOM might be a bit confused when this gets called so do this
|
||||
// waits 1 ms (with setTimeout) until it does the activation
|
||||
Field.scrollFreeActivate = function(field) {
|
||||
setTimeout(function() {
|
||||
Field.activate(field);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
Ajax.InPlaceEditor = Class.create({
|
||||
initialize: function(element, url, options) {
|
||||
this.url = url;
|
||||
this.element = element = $(element);
|
||||
this.prepareOptions();
|
||||
this._controls = { };
|
||||
arguments.callee.dealWithDeprecatedOptions(options); // DEPRECATION LAYER!!!
|
||||
Object.extend(this.options, options || { });
|
||||
if (!this.options.formId && this.element.id) {
|
||||
this.options.formId = this.element.id + '-inplaceeditor';
|
||||
if ($(this.options.formId))
|
||||
this.options.formId = '';
|
||||
}
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl = $(this.options.externalControl);
|
||||
if (!this.options.externalControl)
|
||||
this.options.externalControlOnly = false;
|
||||
this._originalBackground = this.element.getStyle('background-color') || 'transparent';
|
||||
this.element.title = this.options.clickToEditText;
|
||||
this._boundCancelHandler = this.handleFormCancellation.bind(this);
|
||||
this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this);
|
||||
this._boundFailureHandler = this.handleAJAXFailure.bind(this);
|
||||
this._boundSubmitHandler = this.handleFormSubmission.bind(this);
|
||||
this._boundWrapperHandler = this.wrapUp.bind(this);
|
||||
this.registerListeners();
|
||||
},
|
||||
checkForEscapeOrReturn: function(e) {
|
||||
if (!this._editing || e.ctrlKey || e.altKey || e.shiftKey) return;
|
||||
if (Event.KEY_ESC == e.keyCode)
|
||||
this.handleFormCancellation(e);
|
||||
else if (Event.KEY_RETURN == e.keyCode)
|
||||
this.handleFormSubmission(e);
|
||||
},
|
||||
createControl: function(mode, handler, extraClasses) {
|
||||
var control = this.options[mode + 'Control'];
|
||||
var text = this.options[mode + 'Text'];
|
||||
if ('button' == control) {
|
||||
var btn = document.createElement('input');
|
||||
btn.type = 'submit';
|
||||
btn.value = text;
|
||||
btn.className = 'editor_' + mode + '_button';
|
||||
if ('cancel' == mode)
|
||||
btn.onclick = this._boundCancelHandler;
|
||||
this._form.appendChild(btn);
|
||||
this._controls[mode] = btn;
|
||||
} else if ('link' == control) {
|
||||
var link = document.createElement('a');
|
||||
link.href = '#';
|
||||
link.appendChild(document.createTextNode(text));
|
||||
link.onclick = 'cancel' == mode ? this._boundCancelHandler : this._boundSubmitHandler;
|
||||
link.className = 'editor_' + mode + '_link';
|
||||
if (extraClasses)
|
||||
link.className += ' ' + extraClasses;
|
||||
this._form.appendChild(link);
|
||||
this._controls[mode] = link;
|
||||
}
|
||||
},
|
||||
createEditField: function() {
|
||||
var text = (this.options.loadTextURL ? this.options.loadingText : this.getText());
|
||||
var fld;
|
||||
if (1 >= this.options.rows && !/\r|\n/.test(this.getText())) {
|
||||
fld = document.createElement('input');
|
||||
fld.type = 'text';
|
||||
var size = this.options.size || this.options.cols || 0;
|
||||
if (0 < size) fld.size = size;
|
||||
} else {
|
||||
fld = document.createElement('textarea');
|
||||
fld.rows = (1 >= this.options.rows ? this.options.autoRows : this.options.rows);
|
||||
fld.cols = this.options.cols || 40;
|
||||
}
|
||||
fld.name = this.options.paramName;
|
||||
fld.value = text; // No HTML breaks conversion anymore
|
||||
fld.className = 'editor_field';
|
||||
if (this.options.submitOnBlur)
|
||||
fld.onblur = this._boundSubmitHandler;
|
||||
this._controls.editor = fld;
|
||||
if (this.options.loadTextURL)
|
||||
this.loadExternalText();
|
||||
this._form.appendChild(this._controls.editor);
|
||||
},
|
||||
createForm: function() {
|
||||
var ipe = this;
|
||||
function addText(mode, condition) {
|
||||
var text = ipe.options['text' + mode + 'Controls'];
|
||||
if (!text || condition === false) return;
|
||||
ipe._form.appendChild(document.createTextNode(text));
|
||||
};
|
||||
this._form = $(document.createElement('form'));
|
||||
this._form.id = this.options.formId;
|
||||
this._form.addClassName(this.options.formClassName);
|
||||
this._form.onsubmit = this._boundSubmitHandler;
|
||||
this.createEditField();
|
||||
if ('textarea' == this._controls.editor.tagName.toLowerCase())
|
||||
this._form.appendChild(document.createElement('br'));
|
||||
if (this.options.onFormCustomization)
|
||||
this.options.onFormCustomization(this, this._form);
|
||||
addText('Before', this.options.okControl || this.options.cancelControl);
|
||||
this.createControl('ok', this._boundSubmitHandler);
|
||||
addText('Between', this.options.okControl && this.options.cancelControl);
|
||||
this.createControl('cancel', this._boundCancelHandler, 'editor_cancel');
|
||||
addText('After', this.options.okControl || this.options.cancelControl);
|
||||
},
|
||||
destroy: function() {
|
||||
if (this._oldInnerHTML)
|
||||
this.element.innerHTML = this._oldInnerHTML;
|
||||
this.leaveEditMode();
|
||||
this.unregisterListeners();
|
||||
},
|
||||
enterEditMode: function(e) {
|
||||
if (this._saving || this._editing) return;
|
||||
this._editing = true;
|
||||
this.triggerCallback('onEnterEditMode');
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.hide();
|
||||
this.element.hide();
|
||||
this.createForm();
|
||||
this.element.parentNode.insertBefore(this._form, this.element);
|
||||
if (!this.options.loadTextURL)
|
||||
this.postProcessEditField();
|
||||
if (e) Event.stop(e);
|
||||
},
|
||||
enterHover: function(e) {
|
||||
if (this.options.hoverClassName)
|
||||
this.element.addClassName(this.options.hoverClassName);
|
||||
if (this._saving) return;
|
||||
this.triggerCallback('onEnterHover');
|
||||
},
|
||||
getText: function() {
|
||||
return this.element.innerHTML.unescapeHTML();
|
||||
},
|
||||
handleAJAXFailure: function(transport) {
|
||||
this.triggerCallback('onFailure', transport);
|
||||
if (this._oldInnerHTML) {
|
||||
this.element.innerHTML = this._oldInnerHTML;
|
||||
this._oldInnerHTML = null;
|
||||
}
|
||||
},
|
||||
handleFormCancellation: function(e) {
|
||||
this.wrapUp();
|
||||
if (e) Event.stop(e);
|
||||
},
|
||||
handleFormSubmission: function(e) {
|
||||
var form = this._form;
|
||||
var value = $F(this._controls.editor);
|
||||
this.prepareSubmission();
|
||||
var params = this.options.callback(form, value) || '';
|
||||
if (Object.isString(params))
|
||||
params = params.toQueryParams();
|
||||
params.editorId = this.element.id;
|
||||
if (this.options.htmlResponse) {
|
||||
var options = Object.extend({ evalScripts: true }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: params,
|
||||
onComplete: this._boundWrapperHandler,
|
||||
onFailure: this._boundFailureHandler
|
||||
});
|
||||
new Ajax.Updater({ success: this.element }, this.url, options);
|
||||
} else {
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: params,
|
||||
onComplete: this._boundWrapperHandler,
|
||||
onFailure: this._boundFailureHandler
|
||||
});
|
||||
new Ajax.Request(this.url, options);
|
||||
}
|
||||
if (e) Event.stop(e);
|
||||
},
|
||||
leaveEditMode: function() {
|
||||
this.element.removeClassName(this.options.savingClassName);
|
||||
this.removeForm();
|
||||
this.leaveHover();
|
||||
this.element.style.backgroundColor = this._originalBackground;
|
||||
this.element.show();
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.show();
|
||||
this._saving = false;
|
||||
this._editing = false;
|
||||
this._oldInnerHTML = null;
|
||||
this.triggerCallback('onLeaveEditMode');
|
||||
},
|
||||
leaveHover: function(e) {
|
||||
if (this.options.hoverClassName)
|
||||
this.element.removeClassName(this.options.hoverClassName);
|
||||
if (this._saving) return;
|
||||
this.triggerCallback('onLeaveHover');
|
||||
},
|
||||
loadExternalText: function() {
|
||||
this._form.addClassName(this.options.loadingClassName);
|
||||
this._controls.editor.disabled = true;
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||
onComplete: Prototype.emptyFunction,
|
||||
onSuccess: function(transport) {
|
||||
this._form.removeClassName(this.options.loadingClassName);
|
||||
var text = transport.responseText;
|
||||
if (this.options.stripLoadedTextTags)
|
||||
text = text.stripTags();
|
||||
this._controls.editor.value = text;
|
||||
this._controls.editor.disabled = false;
|
||||
this.postProcessEditField();
|
||||
}.bind(this),
|
||||
onFailure: this._boundFailureHandler
|
||||
});
|
||||
new Ajax.Request(this.options.loadTextURL, options);
|
||||
},
|
||||
postProcessEditField: function() {
|
||||
var fpc = this.options.fieldPostCreation;
|
||||
if (fpc)
|
||||
$(this._controls.editor)['focus' == fpc ? 'focus' : 'activate']();
|
||||
},
|
||||
prepareOptions: function() {
|
||||
this.options = Object.clone(Ajax.InPlaceEditor.DefaultOptions);
|
||||
Object.extend(this.options, Ajax.InPlaceEditor.DefaultCallbacks);
|
||||
[this._extraDefaultOptions].flatten().compact().each(function(defs) {
|
||||
Object.extend(this.options, defs);
|
||||
}.bind(this));
|
||||
},
|
||||
prepareSubmission: function() {
|
||||
this._saving = true;
|
||||
this.removeForm();
|
||||
this.leaveHover();
|
||||
this.showSaving();
|
||||
},
|
||||
registerListeners: function() {
|
||||
this._listeners = { };
|
||||
var listener;
|
||||
$H(Ajax.InPlaceEditor.Listeners).each(function(pair) {
|
||||
listener = this[pair.value].bind(this);
|
||||
this._listeners[pair.key] = listener;
|
||||
if (!this.options.externalControlOnly)
|
||||
this.element.observe(pair.key, listener);
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.observe(pair.key, listener);
|
||||
}.bind(this));
|
||||
},
|
||||
removeForm: function() {
|
||||
if (!this._form) return;
|
||||
this._form.remove();
|
||||
this._form = null;
|
||||
this._controls = { };
|
||||
},
|
||||
showSaving: function() {
|
||||
this._oldInnerHTML = this.element.innerHTML;
|
||||
this.element.innerHTML = this.options.savingText;
|
||||
this.element.addClassName(this.options.savingClassName);
|
||||
this.element.style.backgroundColor = this._originalBackground;
|
||||
this.element.show();
|
||||
},
|
||||
triggerCallback: function(cbName, arg) {
|
||||
if ('function' == typeof this.options[cbName]) {
|
||||
this.options[cbName](this, arg);
|
||||
}
|
||||
},
|
||||
unregisterListeners: function() {
|
||||
$H(this._listeners).each(function(pair) {
|
||||
if (!this.options.externalControlOnly)
|
||||
this.element.stopObserving(pair.key, pair.value);
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.stopObserving(pair.key, pair.value);
|
||||
}.bind(this));
|
||||
},
|
||||
wrapUp: function(transport) {
|
||||
this.leaveEditMode();
|
||||
// Can't use triggerCallback due to backward compatibility: requires
|
||||
// binding + direct element
|
||||
this._boundComplete(transport, this.element);
|
||||
}
|
||||
});
|
||||
|
||||
Object.extend(Ajax.InPlaceEditor.prototype, {
|
||||
dispose: Ajax.InPlaceEditor.prototype.destroy
|
||||
});
|
||||
|
||||
Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
|
||||
initialize: function($super, element, url, options) {
|
||||
this._extraDefaultOptions = Ajax.InPlaceCollectionEditor.DefaultOptions;
|
||||
$super(element, url, options);
|
||||
},
|
||||
|
||||
createEditField: function() {
|
||||
var list = document.createElement('select');
|
||||
list.name = this.options.paramName;
|
||||
list.size = 1;
|
||||
this._controls.editor = list;
|
||||
this._collection = this.options.collection || [];
|
||||
if (this.options.loadCollectionURL)
|
||||
this.loadCollection();
|
||||
else
|
||||
this.checkForExternalText();
|
||||
this._form.appendChild(this._controls.editor);
|
||||
},
|
||||
|
||||
loadCollection: function() {
|
||||
this._form.addClassName(this.options.loadingClassName);
|
||||
this.showLoadingText(this.options.loadingCollectionText);
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||
onComplete: Prototype.emptyFunction,
|
||||
onSuccess: function(transport) {
|
||||
var js = transport.responseText.strip();
|
||||
if (!/^\[.*\]$/.test(js)) // TODO: improve sanity check
|
||||
throw('Server returned an invalid collection representation.');
|
||||
this._collection = eval(js);
|
||||
this.checkForExternalText();
|
||||
}.bind(this),
|
||||
onFailure: this.onFailure
|
||||
});
|
||||
new Ajax.Request(this.options.loadCollectionURL, options);
|
||||
},
|
||||
|
||||
showLoadingText: function(text) {
|
||||
this._controls.editor.disabled = true;
|
||||
var tempOption = this._controls.editor.firstChild;
|
||||
if (!tempOption) {
|
||||
tempOption = document.createElement('option');
|
||||
tempOption.value = '';
|
||||
this._controls.editor.appendChild(tempOption);
|
||||
tempOption.selected = true;
|
||||
}
|
||||
tempOption.update((text || '').stripScripts().stripTags());
|
||||
},
|
||||
|
||||
checkForExternalText: function() {
|
||||
this._text = this.getText();
|
||||
if (this.options.loadTextURL)
|
||||
this.loadExternalText();
|
||||
else
|
||||
this.buildOptionList();
|
||||
},
|
||||
|
||||
loadExternalText: function() {
|
||||
this.showLoadingText(this.options.loadingText);
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||
onComplete: Prototype.emptyFunction,
|
||||
onSuccess: function(transport) {
|
||||
this._text = transport.responseText.strip();
|
||||
this.buildOptionList();
|
||||
}.bind(this),
|
||||
onFailure: this.onFailure
|
||||
});
|
||||
new Ajax.Request(this.options.loadTextURL, options);
|
||||
},
|
||||
|
||||
buildOptionList: function() {
|
||||
this._form.removeClassName(this.options.loadingClassName);
|
||||
this._collection = this._collection.map(function(entry) {
|
||||
return 2 === entry.length ? entry : [entry, entry].flatten();
|
||||
});
|
||||
var marker = ('value' in this.options) ? this.options.value : this._text;
|
||||
var textFound = this._collection.any(function(entry) {
|
||||
return entry[0] == marker;
|
||||
}.bind(this));
|
||||
this._controls.editor.update('');
|
||||
var option;
|
||||
this._collection.each(function(entry, index) {
|
||||
option = document.createElement('option');
|
||||
option.value = entry[0];
|
||||
option.selected = textFound ? entry[0] == marker : 0 == index;
|
||||
option.appendChild(document.createTextNode(entry[1]));
|
||||
this._controls.editor.appendChild(option);
|
||||
}.bind(this));
|
||||
this._controls.editor.disabled = false;
|
||||
Field.scrollFreeActivate(this._controls.editor);
|
||||
}
|
||||
});
|
||||
|
||||
//**** DEPRECATION LAYER FOR InPlace[Collection]Editor! ****
|
||||
//**** This only exists for a while, in order to let ****
|
||||
//**** users adapt to the new API. Read up on the new ****
|
||||
//**** API and convert your code to it ASAP! ****
|
||||
|
||||
Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function(options) {
|
||||
if (!options) return;
|
||||
function fallback(name, expr) {
|
||||
if (name in options || expr === undefined) return;
|
||||
options[name] = expr;
|
||||
};
|
||||
fallback('cancelControl', (options.cancelLink ? 'link' : (options.cancelButton ? 'button' :
|
||||
options.cancelLink == options.cancelButton == false ? false : undefined)));
|
||||
fallback('okControl', (options.okLink ? 'link' : (options.okButton ? 'button' :
|
||||
options.okLink == options.okButton == false ? false : undefined)));
|
||||
fallback('highlightColor', options.highlightcolor);
|
||||
fallback('highlightEndColor', options.highlightendcolor);
|
||||
};
|
||||
|
||||
Object.extend(Ajax.InPlaceEditor, {
|
||||
DefaultOptions: {
|
||||
ajaxOptions: { },
|
||||
autoRows: 3, // Use when multi-line w/ rows == 1
|
||||
cancelControl: 'link', // 'link'|'button'|false
|
||||
cancelText: 'cancel',
|
||||
clickToEditText: 'Click to edit',
|
||||
externalControl: null, // id|elt
|
||||
externalControlOnly: false,
|
||||
fieldPostCreation: 'activate', // 'activate'|'focus'|false
|
||||
formClassName: 'inplaceeditor-form',
|
||||
formId: null, // id|elt
|
||||
highlightColor: '#ffff99',
|
||||
highlightEndColor: '#ffffff',
|
||||
hoverClassName: '',
|
||||
htmlResponse: true,
|
||||
loadingClassName: 'inplaceeditor-loading',
|
||||
loadingText: 'Loading...',
|
||||
okControl: 'button', // 'link'|'button'|false
|
||||
okText: 'ok',
|
||||
paramName: 'value',
|
||||
rows: 1, // If 1 and multi-line, uses autoRows
|
||||
savingClassName: 'inplaceeditor-saving',
|
||||
savingText: 'Saving...',
|
||||
size: 0,
|
||||
stripLoadedTextTags: false,
|
||||
submitOnBlur: false,
|
||||
textAfterControls: '',
|
||||
textBeforeControls: '',
|
||||
textBetweenControls: ''
|
||||
},
|
||||
DefaultCallbacks: {
|
||||
callback: function(form) {
|
||||
return Form.serialize(form);
|
||||
},
|
||||
onComplete: function(transport, element) {
|
||||
// For backward compatibility, this one is bound to the IPE, and passes
|
||||
// the element directly. It was too often customized, so we don't break it.
|
||||
new Effect.Highlight(element, {
|
||||
startcolor: this.options.highlightColor, keepBackgroundImage: true });
|
||||
},
|
||||
onEnterEditMode: null,
|
||||
onEnterHover: function(ipe) {
|
||||
ipe.element.style.backgroundColor = ipe.options.highlightColor;
|
||||
if (ipe._effect)
|
||||
ipe._effect.cancel();
|
||||
},
|
||||
onFailure: function(transport, ipe) {
|
||||
alert('Error communication with the server: ' + transport.responseText.stripTags());
|
||||
},
|
||||
onFormCustomization: null, // Takes the IPE and its generated form, after editor, before controls.
|
||||
onLeaveEditMode: null,
|
||||
onLeaveHover: function(ipe) {
|
||||
ipe._effect = new Effect.Highlight(ipe.element, {
|
||||
startcolor: ipe.options.highlightColor, endcolor: ipe.options.highlightEndColor,
|
||||
restorecolor: ipe._originalBackground, keepBackgroundImage: true
|
||||
});
|
||||
}
|
||||
},
|
||||
Listeners: {
|
||||
click: 'enterEditMode',
|
||||
keydown: 'checkForEscapeOrReturn',
|
||||
mouseover: 'enterHover',
|
||||
mouseout: 'leaveHover'
|
||||
}
|
||||
});
|
||||
|
||||
Ajax.InPlaceCollectionEditor.DefaultOptions = {
|
||||
loadingCollectionText: 'Loading options...'
|
||||
};
|
||||
|
||||
// Delayed observer, like Form.Element.Observer,
|
||||
// but waits for delay after last key input
|
||||
// Ideal for live-search fields
|
||||
|
||||
Form.Element.DelayedObserver = Class.create({
|
||||
initialize: function(element, delay, callback) {
|
||||
this.delay = delay || 0.5;
|
||||
this.element = $(element);
|
||||
this.callback = callback;
|
||||
this.timer = null;
|
||||
this.lastValue = $F(this.element);
|
||||
Event.observe(this.element,'keyup',this.delayedListener.bindAsEventListener(this));
|
||||
},
|
||||
delayedListener: function(event) {
|
||||
if(this.lastValue == $F(this.element)) return;
|
||||
if(this.timer) clearTimeout(this.timer);
|
||||
this.timer = setTimeout(this.onTimerEvent.bind(this), this.delay * 1000);
|
||||
this.lastValue = $F(this.element);
|
||||
},
|
||||
onTimerEvent: function() {
|
||||
this.timer = null;
|
||||
this.callback(this.element, $F(this.element));
|
||||
}
|
||||
});
|
|
@ -1,973 +0,0 @@
|
|||
// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
// (c) 2005-2008 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
if(Object.isUndefined(Effect))
|
||||
throw("dragdrop.js requires including script.aculo.us' effects.js library");
|
||||
|
||||
var Droppables = {
|
||||
drops: [],
|
||||
|
||||
remove: function(element) {
|
||||
this.drops = this.drops.reject(function(d) { return d.element==$(element) });
|
||||
},
|
||||
|
||||
add: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend({
|
||||
greedy: true,
|
||||
hoverclass: null,
|
||||
tree: false
|
||||
}, arguments[1] || { });
|
||||
|
||||
// cache containers
|
||||
if(options.containment) {
|
||||
options._containers = [];
|
||||
var containment = options.containment;
|
||||
if(Object.isArray(containment)) {
|
||||
containment.each( function(c) { options._containers.push($(c)) });
|
||||
} else {
|
||||
options._containers.push($(containment));
|
||||
}
|
||||
}
|
||||
|
||||
if(options.accept) options.accept = [options.accept].flatten();
|
||||
|
||||
Element.makePositioned(element); // fix IE
|
||||
options.element = element;
|
||||
|
||||
this.drops.push(options);
|
||||
},
|
||||
|
||||
findDeepestChild: function(drops) {
|
||||
deepest = drops[0];
|
||||
|
||||
for (i = 1; i < drops.length; ++i)
|
||||
if (Element.isParent(drops[i].element, deepest.element))
|
||||
deepest = drops[i];
|
||||
|
||||
return deepest;
|
||||
},
|
||||
|
||||
isContained: function(element, drop) {
|
||||
var containmentNode;
|
||||
if(drop.tree) {
|
||||
containmentNode = element.treeNode;
|
||||
} else {
|
||||
containmentNode = element.parentNode;
|
||||
}
|
||||
return drop._containers.detect(function(c) { return containmentNode == c });
|
||||
},
|
||||
|
||||
isAffected: function(point, element, drop) {
|
||||
return (
|
||||
(drop.element!=element) &&
|
||||
((!drop._containers) ||
|
||||
this.isContained(element, drop)) &&
|
||||
((!drop.accept) ||
|
||||
(Element.classNames(element).detect(
|
||||
function(v) { return drop.accept.include(v) } ) )) &&
|
||||
Position.within(drop.element, point[0], point[1]) );
|
||||
},
|
||||
|
||||
deactivate: function(drop) {
|
||||
if(drop.hoverclass)
|
||||
Element.removeClassName(drop.element, drop.hoverclass);
|
||||
this.last_active = null;
|
||||
},
|
||||
|
||||
activate: function(drop) {
|
||||
if(drop.hoverclass)
|
||||
Element.addClassName(drop.element, drop.hoverclass);
|
||||
this.last_active = drop;
|
||||
},
|
||||
|
||||
show: function(point, element) {
|
||||
if(!this.drops.length) return;
|
||||
var drop, affected = [];
|
||||
|
||||
this.drops.each( function(drop) {
|
||||
if(Droppables.isAffected(point, element, drop))
|
||||
affected.push(drop);
|
||||
});
|
||||
|
||||
if(affected.length>0)
|
||||
drop = Droppables.findDeepestChild(affected);
|
||||
|
||||
if(this.last_active && this.last_active != drop) this.deactivate(this.last_active);
|
||||
if (drop) {
|
||||
Position.within(drop.element, point[0], point[1]);
|
||||
if(drop.onHover)
|
||||
drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
|
||||
|
||||
if (drop != this.last_active) Droppables.activate(drop);
|
||||
}
|
||||
},
|
||||
|
||||
fire: function(event, element) {
|
||||
if(!this.last_active) return;
|
||||
Position.prepare();
|
||||
|
||||
if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
|
||||
if (this.last_active.onDrop) {
|
||||
this.last_active.onDrop(element, this.last_active.element, event);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
if(this.last_active)
|
||||
this.deactivate(this.last_active);
|
||||
}
|
||||
};
|
||||
|
||||
var Draggables = {
|
||||
drags: [],
|
||||
observers: [],
|
||||
|
||||
register: function(draggable) {
|
||||
if(this.drags.length == 0) {
|
||||
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
|
||||
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
|
||||
this.eventKeypress = this.keyPress.bindAsEventListener(this);
|
||||
|
||||
Event.observe(document, "mouseup", this.eventMouseUp);
|
||||
Event.observe(document, "mousemove", this.eventMouseMove);
|
||||
Event.observe(document, "keypress", this.eventKeypress);
|
||||
}
|
||||
this.drags.push(draggable);
|
||||
},
|
||||
|
||||
unregister: function(draggable) {
|
||||
this.drags = this.drags.reject(function(d) { return d==draggable });
|
||||
if(this.drags.length == 0) {
|
||||
Event.stopObserving(document, "mouseup", this.eventMouseUp);
|
||||
Event.stopObserving(document, "mousemove", this.eventMouseMove);
|
||||
Event.stopObserving(document, "keypress", this.eventKeypress);
|
||||
}
|
||||
},
|
||||
|
||||
activate: function(draggable) {
|
||||
if(draggable.options.delay) {
|
||||
this._timeout = setTimeout(function() {
|
||||
Draggables._timeout = null;
|
||||
window.focus();
|
||||
Draggables.activeDraggable = draggable;
|
||||
}.bind(this), draggable.options.delay);
|
||||
} else {
|
||||
window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
|
||||
this.activeDraggable = draggable;
|
||||
}
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
this.activeDraggable = null;
|
||||
},
|
||||
|
||||
updateDrag: function(event) {
|
||||
if(!this.activeDraggable) return;
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
// Mozilla-based browsers fire successive mousemove events with
|
||||
// the same coordinates, prevent needless redrawing (moz bug?)
|
||||
if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
|
||||
this._lastPointer = pointer;
|
||||
|
||||
this.activeDraggable.updateDrag(event, pointer);
|
||||
},
|
||||
|
||||
endDrag: function(event) {
|
||||
if(this._timeout) {
|
||||
clearTimeout(this._timeout);
|
||||
this._timeout = null;
|
||||
}
|
||||
if(!this.activeDraggable) return;
|
||||
this._lastPointer = null;
|
||||
this.activeDraggable.endDrag(event);
|
||||
this.activeDraggable = null;
|
||||
},
|
||||
|
||||
keyPress: function(event) {
|
||||
if(this.activeDraggable)
|
||||
this.activeDraggable.keyPress(event);
|
||||
},
|
||||
|
||||
addObserver: function(observer) {
|
||||
this.observers.push(observer);
|
||||
this._cacheObserverCallbacks();
|
||||
},
|
||||
|
||||
removeObserver: function(element) { // element instead of observer fixes mem leaks
|
||||
this.observers = this.observers.reject( function(o) { return o.element==element });
|
||||
this._cacheObserverCallbacks();
|
||||
},
|
||||
|
||||
notify: function(eventName, draggable, event) { // 'onStart', 'onEnd', 'onDrag'
|
||||
if(this[eventName+'Count'] > 0)
|
||||
this.observers.each( function(o) {
|
||||
if(o[eventName]) o[eventName](eventName, draggable, event);
|
||||
});
|
||||
if(draggable.options[eventName]) draggable.options[eventName](draggable, event);
|
||||
},
|
||||
|
||||
_cacheObserverCallbacks: function() {
|
||||
['onStart','onEnd','onDrag'].each( function(eventName) {
|
||||
Draggables[eventName+'Count'] = Draggables.observers.select(
|
||||
function(o) { return o[eventName]; }
|
||||
).length;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
var Draggable = Class.create({
|
||||
initialize: function(element) {
|
||||
var defaults = {
|
||||
handle: false,
|
||||
reverteffect: function(element, top_offset, left_offset) {
|
||||
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
|
||||
new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur,
|
||||
queue: {scope:'_draggable', position:'end'}
|
||||
});
|
||||
},
|
||||
endeffect: function(element) {
|
||||
var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0;
|
||||
new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity,
|
||||
queue: {scope:'_draggable', position:'end'},
|
||||
afterFinish: function(){
|
||||
Draggable._dragging[element] = false
|
||||
}
|
||||
});
|
||||
},
|
||||
zindex: 1000,
|
||||
revert: false,
|
||||
quiet: false,
|
||||
scroll: false,
|
||||
scrollSensitivity: 20,
|
||||
scrollSpeed: 15,
|
||||
snap: false, // false, or xy or [x,y] or function(x,y){ return [x,y] }
|
||||
delay: 0
|
||||
};
|
||||
|
||||
if(!arguments[1] || Object.isUndefined(arguments[1].endeffect))
|
||||
Object.extend(defaults, {
|
||||
starteffect: function(element) {
|
||||
element._opacity = Element.getOpacity(element);
|
||||
Draggable._dragging[element] = true;
|
||||
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
|
||||
}
|
||||
});
|
||||
|
||||
var options = Object.extend(defaults, arguments[1] || { });
|
||||
|
||||
this.element = $(element);
|
||||
|
||||
if(options.handle && Object.isString(options.handle))
|
||||
this.handle = this.element.down('.'+options.handle, 0);
|
||||
|
||||
if(!this.handle) this.handle = $(options.handle);
|
||||
if(!this.handle) this.handle = this.element;
|
||||
|
||||
if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
|
||||
options.scroll = $(options.scroll);
|
||||
this._isScrollChild = Element.childOf(this.element, options.scroll);
|
||||
}
|
||||
|
||||
Element.makePositioned(this.element); // fix IE
|
||||
|
||||
this.options = options;
|
||||
this.dragging = false;
|
||||
|
||||
this.eventMouseDown = this.initDrag.bindAsEventListener(this);
|
||||
Event.observe(this.handle, "mousedown", this.eventMouseDown);
|
||||
|
||||
Draggables.register(this);
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
|
||||
Draggables.unregister(this);
|
||||
},
|
||||
|
||||
currentDelta: function() {
|
||||
return([
|
||||
parseInt(Element.getStyle(this.element,'left') || '0'),
|
||||
parseInt(Element.getStyle(this.element,'top') || '0')]);
|
||||
},
|
||||
|
||||
initDrag: function(event) {
|
||||
if(!Object.isUndefined(Draggable._dragging[this.element]) &&
|
||||
Draggable._dragging[this.element]) return;
|
||||
if(Event.isLeftClick(event)) {
|
||||
// abort on form elements, fixes a Firefox issue
|
||||
var src = Event.element(event);
|
||||
if((tag_name = src.tagName.toUpperCase()) && (
|
||||
tag_name=='INPUT' ||
|
||||
tag_name=='SELECT' ||
|
||||
tag_name=='OPTION' ||
|
||||
tag_name=='BUTTON' ||
|
||||
tag_name=='TEXTAREA')) return;
|
||||
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
var pos = Position.cumulativeOffset(this.element);
|
||||
this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) });
|
||||
|
||||
Draggables.activate(this);
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
|
||||
startDrag: function(event) {
|
||||
this.dragging = true;
|
||||
if(!this.delta)
|
||||
this.delta = this.currentDelta();
|
||||
|
||||
if(this.options.zindex) {
|
||||
this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
|
||||
this.element.style.zIndex = this.options.zindex;
|
||||
}
|
||||
|
||||
if(this.options.ghosting) {
|
||||
this._clone = this.element.cloneNode(true);
|
||||
this._originallyAbsolute = (this.element.getStyle('position') == 'absolute');
|
||||
if (!this._originallyAbsolute)
|
||||
Position.absolutize(this.element);
|
||||
this.element.parentNode.insertBefore(this._clone, this.element);
|
||||
}
|
||||
|
||||
if(this.options.scroll) {
|
||||
if (this.options.scroll == window) {
|
||||
var where = this._getWindowScroll(this.options.scroll);
|
||||
this.originalScrollLeft = where.left;
|
||||
this.originalScrollTop = where.top;
|
||||
} else {
|
||||
this.originalScrollLeft = this.options.scroll.scrollLeft;
|
||||
this.originalScrollTop = this.options.scroll.scrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
Draggables.notify('onStart', this, event);
|
||||
|
||||
if(this.options.starteffect) this.options.starteffect(this.element);
|
||||
},
|
||||
|
||||
updateDrag: function(event, pointer) {
|
||||
if(!this.dragging) this.startDrag(event);
|
||||
|
||||
if(!this.options.quiet){
|
||||
Position.prepare();
|
||||
Droppables.show(pointer, this.element);
|
||||
}
|
||||
|
||||
Draggables.notify('onDrag', this, event);
|
||||
|
||||
this.draw(pointer);
|
||||
if(this.options.change) this.options.change(this);
|
||||
|
||||
if(this.options.scroll) {
|
||||
this.stopScrolling();
|
||||
|
||||
var p;
|
||||
if (this.options.scroll == window) {
|
||||
with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; }
|
||||
} else {
|
||||
p = Position.page(this.options.scroll);
|
||||
p[0] += this.options.scroll.scrollLeft + Position.deltaX;
|
||||
p[1] += this.options.scroll.scrollTop + Position.deltaY;
|
||||
p.push(p[0]+this.options.scroll.offsetWidth);
|
||||
p.push(p[1]+this.options.scroll.offsetHeight);
|
||||
}
|
||||
var speed = [0,0];
|
||||
if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity);
|
||||
if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity);
|
||||
if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity);
|
||||
if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity);
|
||||
this.startScrolling(speed);
|
||||
}
|
||||
|
||||
// fix AppleWebKit rendering
|
||||
if(Prototype.Browser.WebKit) window.scrollBy(0,0);
|
||||
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
finishDrag: function(event, success) {
|
||||
this.dragging = false;
|
||||
|
||||
if(this.options.quiet){
|
||||
Position.prepare();
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
Droppables.show(pointer, this.element);
|
||||
}
|
||||
|
||||
if(this.options.ghosting) {
|
||||
if (!this._originallyAbsolute)
|
||||
Position.relativize(this.element);
|
||||
delete this._originallyAbsolute;
|
||||
Element.remove(this._clone);
|
||||
this._clone = null;
|
||||
}
|
||||
|
||||
var dropped = false;
|
||||
if(success) {
|
||||
dropped = Droppables.fire(event, this.element);
|
||||
if (!dropped) dropped = false;
|
||||
}
|
||||
if(dropped && this.options.onDropped) this.options.onDropped(this.element);
|
||||
Draggables.notify('onEnd', this, event);
|
||||
|
||||
var revert = this.options.revert;
|
||||
if(revert && Object.isFunction(revert)) revert = revert(this.element);
|
||||
|
||||
var d = this.currentDelta();
|
||||
if(revert && this.options.reverteffect) {
|
||||
if (dropped == 0 || revert != 'failure')
|
||||
this.options.reverteffect(this.element,
|
||||
d[1]-this.delta[1], d[0]-this.delta[0]);
|
||||
} else {
|
||||
this.delta = d;
|
||||
}
|
||||
|
||||
if(this.options.zindex)
|
||||
this.element.style.zIndex = this.originalZ;
|
||||
|
||||
if(this.options.endeffect)
|
||||
this.options.endeffect(this.element);
|
||||
|
||||
Draggables.deactivate(this);
|
||||
Droppables.reset();
|
||||
},
|
||||
|
||||
keyPress: function(event) {
|
||||
if(event.keyCode!=Event.KEY_ESC) return;
|
||||
this.finishDrag(event, false);
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
endDrag: function(event) {
|
||||
if(!this.dragging) return;
|
||||
this.stopScrolling();
|
||||
this.finishDrag(event, true);
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
draw: function(point) {
|
||||
var pos = Position.cumulativeOffset(this.element);
|
||||
if(this.options.ghosting) {
|
||||
var r = Position.realOffset(this.element);
|
||||
pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
|
||||
}
|
||||
|
||||
var d = this.currentDelta();
|
||||
pos[0] -= d[0]; pos[1] -= d[1];
|
||||
|
||||
if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
|
||||
pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft;
|
||||
pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop;
|
||||
}
|
||||
|
||||
var p = [0,1].map(function(i){
|
||||
return (point[i]-pos[i]-this.offset[i])
|
||||
}.bind(this));
|
||||
|
||||
if(this.options.snap) {
|
||||
if(Object.isFunction(this.options.snap)) {
|
||||
p = this.options.snap(p[0],p[1],this);
|
||||
} else {
|
||||
if(Object.isArray(this.options.snap)) {
|
||||
p = p.map( function(v, i) {
|
||||
return (v/this.options.snap[i]).round()*this.options.snap[i] }.bind(this));
|
||||
} else {
|
||||
p = p.map( function(v) {
|
||||
return (v/this.options.snap).round()*this.options.snap }.bind(this));
|
||||
}
|
||||
}}
|
||||
|
||||
var style = this.element.style;
|
||||
if((!this.options.constraint) || (this.options.constraint=='horizontal'))
|
||||
style.left = p[0] + "px";
|
||||
if((!this.options.constraint) || (this.options.constraint=='vertical'))
|
||||
style.top = p[1] + "px";
|
||||
|
||||
if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
|
||||
},
|
||||
|
||||
stopScrolling: function() {
|
||||
if(this.scrollInterval) {
|
||||
clearInterval(this.scrollInterval);
|
||||
this.scrollInterval = null;
|
||||
Draggables._lastScrollPointer = null;
|
||||
}
|
||||
},
|
||||
|
||||
startScrolling: function(speed) {
|
||||
if(!(speed[0] || speed[1])) return;
|
||||
this.scrollSpeed = [speed[0]*this.options.scrollSpeed,speed[1]*this.options.scrollSpeed];
|
||||
this.lastScrolled = new Date();
|
||||
this.scrollInterval = setInterval(this.scroll.bind(this), 10);
|
||||
},
|
||||
|
||||
scroll: function() {
|
||||
var current = new Date();
|
||||
var delta = current - this.lastScrolled;
|
||||
this.lastScrolled = current;
|
||||
if(this.options.scroll == window) {
|
||||
with (this._getWindowScroll(this.options.scroll)) {
|
||||
if (this.scrollSpeed[0] || this.scrollSpeed[1]) {
|
||||
var d = delta / 1000;
|
||||
this.options.scroll.scrollTo( left + d*this.scrollSpeed[0], top + d*this.scrollSpeed[1] );
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
|
||||
this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000;
|
||||
}
|
||||
|
||||
Position.prepare();
|
||||
Droppables.show(Draggables._lastPointer, this.element);
|
||||
Draggables.notify('onDrag', this);
|
||||
if (this._isScrollChild) {
|
||||
Draggables._lastScrollPointer = Draggables._lastScrollPointer || $A(Draggables._lastPointer);
|
||||
Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000;
|
||||
Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000;
|
||||
if (Draggables._lastScrollPointer[0] < 0)
|
||||
Draggables._lastScrollPointer[0] = 0;
|
||||
if (Draggables._lastScrollPointer[1] < 0)
|
||||
Draggables._lastScrollPointer[1] = 0;
|
||||
this.draw(Draggables._lastScrollPointer);
|
||||
}
|
||||
|
||||
if(this.options.change) this.options.change(this);
|
||||
},
|
||||
|
||||
_getWindowScroll: function(w) {
|
||||
var T, L, W, H;
|
||||
with (w.document) {
|
||||
if (w.document.documentElement && documentElement.scrollTop) {
|
||||
T = documentElement.scrollTop;
|
||||
L = documentElement.scrollLeft;
|
||||
} else if (w.document.body) {
|
||||
T = body.scrollTop;
|
||||
L = body.scrollLeft;
|
||||
}
|
||||
if (w.innerWidth) {
|
||||
W = w.innerWidth;
|
||||
H = w.innerHeight;
|
||||
} else if (w.document.documentElement && documentElement.clientWidth) {
|
||||
W = documentElement.clientWidth;
|
||||
H = documentElement.clientHeight;
|
||||
} else {
|
||||
W = body.offsetWidth;
|
||||
H = body.offsetHeight;
|
||||
}
|
||||
}
|
||||
return { top: T, left: L, width: W, height: H };
|
||||
}
|
||||
});
|
||||
|
||||
Draggable._dragging = { };
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
var SortableObserver = Class.create({
|
||||
initialize: function(element, observer) {
|
||||
this.element = $(element);
|
||||
this.observer = observer;
|
||||
this.lastValue = Sortable.serialize(this.element);
|
||||
},
|
||||
|
||||
onStart: function() {
|
||||
this.lastValue = Sortable.serialize(this.element);
|
||||
},
|
||||
|
||||
onEnd: function() {
|
||||
Sortable.unmark();
|
||||
if(this.lastValue != Sortable.serialize(this.element))
|
||||
this.observer(this.element)
|
||||
}
|
||||
});
|
||||
|
||||
var Sortable = {
|
||||
SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
|
||||
|
||||
sortables: { },
|
||||
|
||||
_findRootElement: function(element) {
|
||||
while (element.tagName.toUpperCase() != "BODY") {
|
||||
if(element.id && Sortable.sortables[element.id]) return element;
|
||||
element = element.parentNode;
|
||||
}
|
||||
},
|
||||
|
||||
options: function(element) {
|
||||
element = Sortable._findRootElement($(element));
|
||||
if(!element) return;
|
||||
return Sortable.sortables[element.id];
|
||||
},
|
||||
|
||||
destroy: function(element){
|
||||
element = $(element);
|
||||
var s = Sortable.sortables[element.id];
|
||||
|
||||
if(s) {
|
||||
Draggables.removeObserver(s.element);
|
||||
s.droppables.each(function(d){ Droppables.remove(d) });
|
||||
s.draggables.invoke('destroy');
|
||||
|
||||
delete Sortable.sortables[s.element.id];
|
||||
}
|
||||
},
|
||||
|
||||
create: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend({
|
||||
element: element,
|
||||
tag: 'li', // assumes li children, override with tag: 'tagname'
|
||||
dropOnEmpty: false,
|
||||
tree: false,
|
||||
treeTag: 'ul',
|
||||
overlap: 'vertical', // one of 'vertical', 'horizontal'
|
||||
constraint: 'vertical', // one of 'vertical', 'horizontal', false
|
||||
containment: element, // also takes array of elements (or id's); or false
|
||||
handle: false, // or a CSS class
|
||||
only: false,
|
||||
delay: 0,
|
||||
hoverclass: null,
|
||||
ghosting: false,
|
||||
quiet: false,
|
||||
scroll: false,
|
||||
scrollSensitivity: 20,
|
||||
scrollSpeed: 15,
|
||||
format: this.SERIALIZE_RULE,
|
||||
|
||||
// these take arrays of elements or ids and can be
|
||||
// used for better initialization performance
|
||||
elements: false,
|
||||
handles: false,
|
||||
|
||||
onChange: Prototype.emptyFunction,
|
||||
onUpdate: Prototype.emptyFunction
|
||||
}, arguments[1] || { });
|
||||
|
||||
// clear any old sortable with same element
|
||||
this.destroy(element);
|
||||
|
||||
// build options for the draggables
|
||||
var options_for_draggable = {
|
||||
revert: true,
|
||||
quiet: options.quiet,
|
||||
scroll: options.scroll,
|
||||
scrollSpeed: options.scrollSpeed,
|
||||
scrollSensitivity: options.scrollSensitivity,
|
||||
delay: options.delay,
|
||||
ghosting: options.ghosting,
|
||||
constraint: options.constraint,
|
||||
handle: options.handle };
|
||||
|
||||
if(options.starteffect)
|
||||
options_for_draggable.starteffect = options.starteffect;
|
||||
|
||||
if(options.reverteffect)
|
||||
options_for_draggable.reverteffect = options.reverteffect;
|
||||
else
|
||||
if(options.ghosting) options_for_draggable.reverteffect = function(element) {
|
||||
element.style.top = 0;
|
||||
element.style.left = 0;
|
||||
};
|
||||
|
||||
if(options.endeffect)
|
||||
options_for_draggable.endeffect = options.endeffect;
|
||||
|
||||
if(options.zindex)
|
||||
options_for_draggable.zindex = options.zindex;
|
||||
|
||||
// build options for the droppables
|
||||
var options_for_droppable = {
|
||||
overlap: options.overlap,
|
||||
containment: options.containment,
|
||||
tree: options.tree,
|
||||
hoverclass: options.hoverclass,
|
||||
onHover: Sortable.onHover
|
||||
};
|
||||
|
||||
var options_for_tree = {
|
||||
onHover: Sortable.onEmptyHover,
|
||||
overlap: options.overlap,
|
||||
containment: options.containment,
|
||||
hoverclass: options.hoverclass
|
||||
};
|
||||
|
||||
// fix for gecko engine
|
||||
Element.cleanWhitespace(element);
|
||||
|
||||
options.draggables = [];
|
||||
options.droppables = [];
|
||||
|
||||
// drop on empty handling
|
||||
if(options.dropOnEmpty || options.tree) {
|
||||
Droppables.add(element, options_for_tree);
|
||||
options.droppables.push(element);
|
||||
}
|
||||
|
||||
(options.elements || this.findElements(element, options) || []).each( function(e,i) {
|
||||
var handle = options.handles ? $(options.handles[i]) :
|
||||
(options.handle ? $(e).select('.' + options.handle)[0] : e);
|
||||
options.draggables.push(
|
||||
new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
|
||||
Droppables.add(e, options_for_droppable);
|
||||
if(options.tree) e.treeNode = element;
|
||||
options.droppables.push(e);
|
||||
});
|
||||
|
||||
if(options.tree) {
|
||||
(Sortable.findTreeElements(element, options) || []).each( function(e) {
|
||||
Droppables.add(e, options_for_tree);
|
||||
e.treeNode = element;
|
||||
options.droppables.push(e);
|
||||
});
|
||||
}
|
||||
|
||||
// keep reference
|
||||
this.sortables[element.id] = options;
|
||||
|
||||
// for onupdate
|
||||
Draggables.addObserver(new SortableObserver(element, options.onUpdate));
|
||||
|
||||
},
|
||||
|
||||
// return all suitable-for-sortable elements in a guaranteed order
|
||||
findElements: function(element, options) {
|
||||
return Element.findChildren(
|
||||
element, options.only, options.tree ? true : false, options.tag);
|
||||
},
|
||||
|
||||
findTreeElements: function(element, options) {
|
||||
return Element.findChildren(
|
||||
element, options.only, options.tree ? true : false, options.treeTag);
|
||||
},
|
||||
|
||||
onHover: function(element, dropon, overlap) {
|
||||
if(Element.isParent(dropon, element)) return;
|
||||
|
||||
if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
|
||||
return;
|
||||
} else if(overlap>0.5) {
|
||||
Sortable.mark(dropon, 'before');
|
||||
if(dropon.previousSibling != element) {
|
||||
var oldParentNode = element.parentNode;
|
||||
element.style.visibility = "hidden"; // fix gecko rendering
|
||||
dropon.parentNode.insertBefore(element, dropon);
|
||||
if(dropon.parentNode!=oldParentNode)
|
||||
Sortable.options(oldParentNode).onChange(element);
|
||||
Sortable.options(dropon.parentNode).onChange(element);
|
||||
}
|
||||
} else {
|
||||
Sortable.mark(dropon, 'after');
|
||||
var nextElement = dropon.nextSibling || null;
|
||||
if(nextElement != element) {
|
||||
var oldParentNode = element.parentNode;
|
||||
element.style.visibility = "hidden"; // fix gecko rendering
|
||||
dropon.parentNode.insertBefore(element, nextElement);
|
||||
if(dropon.parentNode!=oldParentNode)
|
||||
Sortable.options(oldParentNode).onChange(element);
|
||||
Sortable.options(dropon.parentNode).onChange(element);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onEmptyHover: function(element, dropon, overlap) {
|
||||
var oldParentNode = element.parentNode;
|
||||
var droponOptions = Sortable.options(dropon);
|
||||
|
||||
if(!Element.isParent(dropon, element)) {
|
||||
var index;
|
||||
|
||||
var children = Sortable.findElements(dropon, {tag: droponOptions.tag, only: droponOptions.only});
|
||||
var child = null;
|
||||
|
||||
if(children) {
|
||||
var offset = Element.offsetSize(dropon, droponOptions.overlap) * (1.0 - overlap);
|
||||
|
||||
for (index = 0; index < children.length; index += 1) {
|
||||
if (offset - Element.offsetSize (children[index], droponOptions.overlap) >= 0) {
|
||||
offset -= Element.offsetSize (children[index], droponOptions.overlap);
|
||||
} else if (offset - (Element.offsetSize (children[index], droponOptions.overlap) / 2) >= 0) {
|
||||
child = index + 1 < children.length ? children[index + 1] : null;
|
||||
break;
|
||||
} else {
|
||||
child = children[index];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dropon.insertBefore(element, child);
|
||||
|
||||
Sortable.options(oldParentNode).onChange(element);
|
||||
droponOptions.onChange(element);
|
||||
}
|
||||
},
|
||||
|
||||
unmark: function() {
|
||||
if(Sortable._marker) Sortable._marker.hide();
|
||||
},
|
||||
|
||||
mark: function(dropon, position) {
|
||||
// mark on ghosting only
|
||||
var sortable = Sortable.options(dropon.parentNode);
|
||||
if(sortable && !sortable.ghosting) return;
|
||||
|
||||
if(!Sortable._marker) {
|
||||
Sortable._marker =
|
||||
($('dropmarker') || Element.extend(document.createElement('DIV'))).
|
||||
hide().addClassName('dropmarker').setStyle({position:'absolute'});
|
||||
document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
|
||||
}
|
||||
var offsets = Position.cumulativeOffset(dropon);
|
||||
Sortable._marker.setStyle({left: offsets[0]+'px', top: offsets[1] + 'px'});
|
||||
|
||||
if(position=='after')
|
||||
if(sortable.overlap == 'horizontal')
|
||||
Sortable._marker.setStyle({left: (offsets[0]+dropon.clientWidth) + 'px'});
|
||||
else
|
||||
Sortable._marker.setStyle({top: (offsets[1]+dropon.clientHeight) + 'px'});
|
||||
|
||||
Sortable._marker.show();
|
||||
},
|
||||
|
||||
_tree: function(element, options, parent) {
|
||||
var children = Sortable.findElements(element, options) || [];
|
||||
|
||||
for (var i = 0; i < children.length; ++i) {
|
||||
var match = children[i].id.match(options.format);
|
||||
|
||||
if (!match) continue;
|
||||
|
||||
var child = {
|
||||
id: encodeURIComponent(match ? match[1] : null),
|
||||
element: element,
|
||||
parent: parent,
|
||||
children: [],
|
||||
position: parent.children.length,
|
||||
container: $(children[i]).down(options.treeTag)
|
||||
};
|
||||
|
||||
/* Get the element containing the children and recurse over it */
|
||||
if (child.container)
|
||||
this._tree(child.container, options, child);
|
||||
|
||||
parent.children.push (child);
|
||||
}
|
||||
|
||||
return parent;
|
||||
},
|
||||
|
||||
tree: function(element) {
|
||||
element = $(element);
|
||||
var sortableOptions = this.options(element);
|
||||
var options = Object.extend({
|
||||
tag: sortableOptions.tag,
|
||||
treeTag: sortableOptions.treeTag,
|
||||
only: sortableOptions.only,
|
||||
name: element.id,
|
||||
format: sortableOptions.format
|
||||
}, arguments[1] || { });
|
||||
|
||||
var root = {
|
||||
id: null,
|
||||
parent: null,
|
||||
children: [],
|
||||
container: element,
|
||||
position: 0
|
||||
};
|
||||
|
||||
return Sortable._tree(element, options, root);
|
||||
},
|
||||
|
||||
/* Construct a [i] index for a particular node */
|
||||
_constructIndex: function(node) {
|
||||
var index = '';
|
||||
do {
|
||||
if (node.id) index = '[' + node.position + ']' + index;
|
||||
} while ((node = node.parent) != null);
|
||||
return index;
|
||||
},
|
||||
|
||||
sequence: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend(this.options(element), arguments[1] || { });
|
||||
|
||||
return $(this.findElements(element, options) || []).map( function(item) {
|
||||
return item.id.match(options.format) ? item.id.match(options.format)[1] : '';
|
||||
});
|
||||
},
|
||||
|
||||
setSequence: function(element, new_sequence) {
|
||||
element = $(element);
|
||||
var options = Object.extend(this.options(element), arguments[2] || { });
|
||||
|
||||
var nodeMap = { };
|
||||
this.findElements(element, options).each( function(n) {
|
||||
if (n.id.match(options.format))
|
||||
nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
|
||||
n.parentNode.removeChild(n);
|
||||
});
|
||||
|
||||
new_sequence.each(function(ident) {
|
||||
var n = nodeMap[ident];
|
||||
if (n) {
|
||||
n[1].appendChild(n[0]);
|
||||
delete nodeMap[ident];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
serialize: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend(Sortable.options(element), arguments[1] || { });
|
||||
var name = encodeURIComponent(
|
||||
(arguments[1] && arguments[1].name) ? arguments[1].name : element.id);
|
||||
|
||||
if (options.tree) {
|
||||
return Sortable.tree(element, arguments[1]).children.map( function (item) {
|
||||
return [name + Sortable._constructIndex(item) + "[id]=" +
|
||||
encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
|
||||
}).flatten().join('&');
|
||||
} else {
|
||||
return Sortable.sequence(element, arguments[1]).map( function(item) {
|
||||
return name + "[]=" + encodeURIComponent(item);
|
||||
}).join('&');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Returns true if child is contained within element
|
||||
Element.isParent = function(child, element) {
|
||||
if (!child.parentNode || child == element) return false;
|
||||
if (child.parentNode == element) return true;
|
||||
return Element.isParent(child.parentNode, element);
|
||||
};
|
||||
|
||||
Element.findChildren = function(element, only, recursive, tagName) {
|
||||
if(!element.hasChildNodes()) return null;
|
||||
tagName = tagName.toUpperCase();
|
||||
if(only) only = [only].flatten();
|
||||
var elements = [];
|
||||
$A(element.childNodes).each( function(e) {
|
||||
if(e.tagName && e.tagName.toUpperCase()==tagName &&
|
||||
(!only || (Element.classNames(e).detect(function(v) { return only.include(v) }))))
|
||||
elements.push(e);
|
||||
if(recursive) {
|
||||
var grandchildren = Element.findChildren(e, only, recursive, tagName);
|
||||
if(grandchildren) elements.push(grandchildren);
|
||||
}
|
||||
});
|
||||
|
||||
return (elements.length>0 ? elements.flatten() : []);
|
||||
};
|
||||
|
||||
Element.offsetSize = function (element, type) {
|
||||
return element['offset' + ((type=='vertical' || type=='height') ? 'Height' : 'Width')];
|
||||
};
|
|
@ -1,27 +0,0 @@
|
|||
/* -----------------------------------------------------------------------
|
||||
|
||||
|
||||
Blueprint CSS Framework 0.8
|
||||
http://blueprintcss.org
|
||||
|
||||
* Copyright (c) 2007-Present. See LICENSE for more info.
|
||||
* See README for instructions on how to use Blueprint.
|
||||
* For credits and origins, see AUTHORS.
|
||||
* This is a compressed file. See the sources in the 'src' directory.
|
||||
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
/* ie.css */
|
||||
body {text-align:center;}
|
||||
.container {text-align:left;}
|
||||
* html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 {overflow-x:hidden;}
|
||||
* html legend {margin:0px -8px 16px 0;padding:0;}
|
||||
ol {margin-left:2em;}
|
||||
sup {vertical-align:text-top;}
|
||||
sub {vertical-align:text-bottom;}
|
||||
html>body p code {*white-space:normal;}
|
||||
hr {margin:-8px auto 11px;}
|
||||
img {-ms-interpolation-mode:bicubic;}
|
||||
.clearfix, .container {display:inline-block;}
|
||||
* html .clearfix, * html .container {height:1%;}
|
||||
fieldset {padding-top:0;}
|
Before Width: | Height: | Size: 655 B |
Before Width: | Height: | Size: 455 B |
Before Width: | Height: | Size: 537 B |
|
@ -1,32 +0,0 @@
|
|||
Buttons
|
||||
|
||||
* Gives you great looking CSS buttons, for both <a> and <button>.
|
||||
* Demo: particletree.com/features/rediscovering-the-button-element
|
||||
|
||||
|
||||
Credits
|
||||
----------------------------------------------------------------
|
||||
|
||||
* Created by Kevin Hale [particletree.com]
|
||||
* Adapted for Blueprint by Olav Bjorkoy [bjorkoy.com]
|
||||
|
||||
|
||||
Usage
|
||||
----------------------------------------------------------------
|
||||
|
||||
1) Add this plugin to lib/settings.yml.
|
||||
See compress.rb for instructions.
|
||||
|
||||
2) Use the following HTML code to place the buttons on your site:
|
||||
|
||||
<button type="submit" class="button positive">
|
||||
<img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
|
||||
</button>
|
||||
|
||||
<a class="button" href="/password/reset/">
|
||||
<img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
|
||||
</a>
|
||||
|
||||
<a href="#" class="button negative">
|
||||
<img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
|
||||
</a>
|
|
@ -1,97 +0,0 @@
|
|||
/* --------------------------------------------------------------
|
||||
|
||||
buttons.css
|
||||
* Gives you some great CSS-only buttons.
|
||||
|
||||
Created by Kevin Hale [particletree.com]
|
||||
* particletree.com/features/rediscovering-the-button-element
|
||||
|
||||
See Readme.txt in this folder for instructions.
|
||||
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
a.button, button {
|
||||
display:block;
|
||||
float:left;
|
||||
margin: 0.7em 0.5em 0.7em 0;
|
||||
padding:5px 10px 5px 7px; /* Links */
|
||||
|
||||
border:1px solid #dedede;
|
||||
border-top:1px solid #eee;
|
||||
border-left:1px solid #eee;
|
||||
|
||||
background-color:#f5f5f5;
|
||||
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
|
||||
font-size:100%;
|
||||
line-height:130%;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:#565656;
|
||||
cursor:pointer;
|
||||
}
|
||||
button {
|
||||
width:auto;
|
||||
overflow:visible;
|
||||
padding:4px 10px 3px 7px; /* IE6 */
|
||||
}
|
||||
button[type] {
|
||||
padding:4px 10px 4px 7px; /* Firefox */
|
||||
line-height:17px; /* Safari */
|
||||
}
|
||||
*:first-child+html button[type] {
|
||||
padding:4px 10px 3px 7px; /* IE7 */
|
||||
}
|
||||
button img, a.button img{
|
||||
margin:0 3px -3px 0 !important;
|
||||
padding:0;
|
||||
border:none;
|
||||
width:16px;
|
||||
height:16px;
|
||||
float:none;
|
||||
}
|
||||
|
||||
|
||||
/* Button colors
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
/* Standard */
|
||||
button:hover, a.button:hover{
|
||||
background-color:#dff4ff;
|
||||
border:1px solid #c2e1ef;
|
||||
color:#336699;
|
||||
}
|
||||
a.button:active{
|
||||
background-color:#6299c5;
|
||||
border:1px solid #6299c5;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* Positive */
|
||||
body .positive {
|
||||
color:#529214;
|
||||
}
|
||||
a.positive:hover, button.positive:hover {
|
||||
background-color:#E6EFC2;
|
||||
border:1px solid #C6D880;
|
||||
color:#529214;
|
||||
}
|
||||
a.positive:active {
|
||||
background-color:#529214;
|
||||
border:1px solid #529214;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* Negative */
|
||||
body .negative {
|
||||
color:#d12f19;
|
||||
}
|
||||
a.negative:hover, button.negative:hover {
|
||||
background-color:#fbe3e4;
|
||||
border:1px solid #fbc2c4;
|
||||
color:#d12f19;
|
||||
}
|
||||
a.negative:active {
|
||||
background-color:#d12f19;
|
||||
border:1px solid #d12f19;
|
||||
color:#fff;
|
||||
}
|
|
@ -1,14 +0,0 @@
|
|||
Fancy Type
|
||||
|
||||
* Gives you classes to use if you'd like some
|
||||
extra fancy typography.
|
||||
|
||||
Credits and instructions are specified above each class
|
||||
in the fancy-type.css file in this directory.
|
||||
|
||||
|
||||
Usage
|
||||
----------------------------------------------------------------
|
||||
|
||||
1) Add this plugin to lib/settings.yml.
|
||||
See compress.rb for instructions.
|
|
@ -1,71 +0,0 @@
|
|||
/* --------------------------------------------------------------
|
||||
|
||||
fancy-type.css
|
||||
* Lots of pretty advanced classes for manipulating text.
|
||||
|
||||
See the Readme file in this folder for additional instructions.
|
||||
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
/* Indentation instead of line shifts for sibling paragraphs. */
|
||||
p + p { text-indent:2em; margin-top:-1.5em; }
|
||||
form p + p { text-indent: 0; } /* Don't want this in forms. */
|
||||
|
||||
|
||||
/* For great looking type, use this code instead of asdf:
|
||||
<span class="alt">asdf</span>
|
||||
Best used on prepositions and ampersands. */
|
||||
|
||||
.alt {
|
||||
color: #666;
|
||||
font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* For great looking quote marks in titles, replace "asdf" with:
|
||||
<span class="dquo">“</span>asdf”
|
||||
(That is, when the title starts with a quote mark).
|
||||
(You may have to change this value depending on your font size). */
|
||||
|
||||
.dquo { margin-left: -.5em; }
|
||||
|
||||
|
||||
/* Reduced size type with incremental leading
|
||||
(http://www.markboulton.co.uk/journal/comments/incremental_leading/)
|
||||
|
||||
This could be used for side notes. For smaller type, you don't necessarily want to
|
||||
follow the 1.5x vertical rhythm -- the line-height is too much.
|
||||
|
||||
Using this class, it reduces your font size and line-height so that for
|
||||
every four lines of normal sized type, there is five lines of the sidenote. eg:
|
||||
|
||||
New type size in em's:
|
||||
10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)
|
||||
|
||||
New line-height value:
|
||||
12px x 1.5 = 18px (old line-height)
|
||||
18px x 4 = 72px
|
||||
72px / 5 = 14.4px (new line height)
|
||||
14.4px / 10px = 1.44 (new line height in em's) */
|
||||
|
||||
p.incr, .incr p {
|
||||
font-size: 10px;
|
||||
line-height: 1.44em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
/* Surround uppercase words and abbreviations with this class.
|
||||
Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
|
||||
|
||||
.caps {
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 1px;
|
||||
text-transform: lowercase;
|
||||
font-size:1.2em;
|
||||
line-height:1%;
|
||||
font-weight:bold;
|
||||
padding:0 2px;
|
||||
}
|
Before Width: | Height: | Size: 777 B |
Before Width: | Height: | Size: 641 B |
Before Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 691 B |
Before Width: | Height: | Size: 741 B |
Before Width: | Height: | Size: 591 B |
Before Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 663 B |
|
@ -1,18 +0,0 @@
|
|||
Link Icons
|
||||
* Icons for links based on protocol or file type.
|
||||
|
||||
This is not supported in IE versions < 7.
|
||||
|
||||
|
||||
Credits
|
||||
----------------------------------------------------------------
|
||||
|
||||
* Marc Morgan
|
||||
* Olav Bjorkoy [bjorkoy.com]
|
||||
|
||||
|
||||
Usage
|
||||
----------------------------------------------------------------
|
||||
|
||||
1) Add this line to your HTML:
|
||||
<link rel="stylesheet" href="css/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection">
|
|
@ -1,40 +0,0 @@
|
|||
/* --------------------------------------------------------------
|
||||
|
||||
link-icons.css
|
||||
* Icons for links based on protocol or file type.
|
||||
|
||||
See the Readme file in this folder for additional instructions.
|
||||
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
/* Use this class if a link gets an icon when it shouldn't. */
|
||||
body a.noicon {
|
||||
background:transparent none !important;
|
||||
padding:0 !important;
|
||||
margin:0 !important;
|
||||
}
|
||||
|
||||
/* Make sure the icons are not cut */
|
||||
a[href^="http:"], a[href^="mailto:"], a[href^="http:"]:visited,
|
||||
a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"], a[href$=".rss"],
|
||||
a[href$=".rdf"], a[href^="aim:"] {
|
||||
padding:2px 22px 2px 0;
|
||||
margin:-2px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
/* External links */
|
||||
a[href^="http:"] { background-image: url(icons/external.png); }
|
||||
a[href^="mailto:"] { background-image: url(icons/email.png); }
|
||||
a[href^="http:"]:visited { background-image: url(icons/visited.png); }
|
||||
|
||||
/* Files */
|
||||
a[href$=".pdf"] { background-image: url(icons/pdf.png); }
|
||||
a[href$=".doc"] { background-image: url(icons/doc.png); }
|
||||
a[href$=".xls"] { background-image: url(icons/xls.png); }
|
||||
|
||||
/* Misc */
|
||||
a[href$=".rss"],
|
||||
a[href$=".rdf"] { background-image: url(icons/feed.png); }
|
||||
a[href^="aim:"] { background-image: url(icons/im.png); }
|
|
@ -1,10 +0,0 @@
|
|||
RTL
|
||||
* Mirrors Blueprint, so it can be used with Right-to-Left languages.
|
||||
|
||||
By Ran Yaniv Hartstein, ranh.co.il
|
||||
|
||||
Usage
|
||||
----------------------------------------------------------------
|
||||
|
||||
1) Add this line to your HTML:
|
||||
<link rel="stylesheet" href="css/blueprint/plugins/rtl/screen.css" type="text/css" media="screen, projection">
|
|
@ -1,109 +0,0 @@
|
|||
/* --------------------------------------------------------------
|
||||
|
||||
rtl.css
|
||||
* Mirrors Blueprint for left-to-right languages
|
||||
|
||||
By Ran Yaniv Hartstein [ranh.co.il]
|
||||
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
body .container { direction: rtl; }
|
||||
body .column {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
body div.last { margin-left: 0; }
|
||||
body table .last { padding-left: 0; }
|
||||
|
||||
body .append-1 { padding-right: 0; padding-left: 40px; }
|
||||
body .append-2 { padding-right: 0; padding-left: 80px; }
|
||||
body .append-3 { padding-right: 0; padding-left: 120px; }
|
||||
body .append-4 { padding-right: 0; padding-left: 160px; }
|
||||
body .append-5 { padding-right: 0; padding-left: 200px; }
|
||||
body .append-6 { padding-right: 0; padding-left: 240px; }
|
||||
body .append-7 { padding-right: 0; padding-left: 280px; }
|
||||
body .append-8 { padding-right: 0; padding-left: 320px; }
|
||||
body .append-9 { padding-right: 0; padding-left: 360px; }
|
||||
body .append-10 { padding-right: 0; padding-left: 400px; }
|
||||
body .append-11 { padding-right: 0; padding-left: 440px; }
|
||||
body .append-12 { padding-right: 0; padding-left: 480px; }
|
||||
body .append-13 { padding-right: 0; padding-left: 520px; }
|
||||
body .append-14 { padding-right: 0; padding-left: 560px; }
|
||||
body .append-15 { padding-right: 0; padding-left: 600px; }
|
||||
body .append-16 { padding-right: 0; padding-left: 640px; }
|
||||
body .append-17 { padding-right: 0; padding-left: 680px; }
|
||||
body .append-18 { padding-right: 0; padding-left: 720px; }
|
||||
body .append-19 { padding-right: 0; padding-left: 760px; }
|
||||
body .append-20 { padding-right: 0; padding-left: 800px; }
|
||||
body .append-21 { padding-right: 0; padding-left: 840px; }
|
||||
body .append-22 { padding-right: 0; padding-left: 880px; }
|
||||
body .append-23 { padding-right: 0; padding-left: 920px; }
|
||||
|
||||
body .prepend-1 { padding-left: 0; padding-right: 40px; }
|
||||
body .prepend-2 { padding-left: 0; padding-right: 80px; }
|
||||
body .prepend-3 { padding-left: 0; padding-right: 120px; }
|
||||
body .prepend-4 { padding-left: 0; padding-right: 160px; }
|
||||
body .prepend-5 { padding-left: 0; padding-right: 200px; }
|
||||
body .prepend-6 { padding-left: 0; padding-right: 240px; }
|
||||
body .prepend-7 { padding-left: 0; padding-right: 280px; }
|
||||
body .prepend-8 { padding-left: 0; padding-right: 320px; }
|
||||
body .prepend-9 { padding-left: 0; padding-right: 360px; }
|
||||
body .prepend-10 { padding-left: 0; padding-right: 400px; }
|
||||
body .prepend-11 { padding-left: 0; padding-right: 440px; }
|
||||
body .prepend-12 { padding-left: 0; padding-right: 480px; }
|
||||
body .prepend-13 { padding-left: 0; padding-right: 520px; }
|
||||
body .prepend-14 { padding-left: 0; padding-right: 560px; }
|
||||
body .prepend-15 { padding-left: 0; padding-right: 600px; }
|
||||
body .prepend-16 { padding-left: 0; padding-right: 640px; }
|
||||
body .prepend-17 { padding-left: 0; padding-right: 680px; }
|
||||
body .prepend-18 { padding-left: 0; padding-right: 720px; }
|
||||
body .prepend-19 { padding-left: 0; padding-right: 760px; }
|
||||
body .prepend-20 { padding-left: 0; padding-right: 800px; }
|
||||
body .prepend-21 { padding-left: 0; padding-right: 840px; }
|
||||
body .prepend-22 { padding-left: 0; padding-right: 880px; }
|
||||
body .prepend-23 { padding-left: 0; padding-right: 920px; }
|
||||
|
||||
body .border {
|
||||
padding-right: 0;
|
||||
padding-left: 4px;
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
border-right: none;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
body .colborder {
|
||||
padding-right: 0;
|
||||
padding-left: 24px;
|
||||
margin-right: 0;
|
||||
margin-left: 25px;
|
||||
border-right: none;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
body .pull-1 { margin-left: 0; margin-right: -40px; }
|
||||
body .pull-2 { margin-left: 0; margin-right: -80px; }
|
||||
body .pull-3 { margin-left: 0; margin-right: -120px; }
|
||||
body .pull-4 { margin-left: 0; margin-right: -160px; }
|
||||
|
||||
body .push-0 { margin: 0 18px 0 0; }
|
||||
body .push-1 { margin: 0 18px 0 -40px; }
|
||||
body .push-2 { margin: 0 18px 0 -80px; }
|
||||
body .push-3 { margin: 0 18px 0 -120px; }
|
||||
body .push-4 { margin: 0 18px 0 -160px; }
|
||||
body .push-0, body .push-1, body .push-2,
|
||||
body .push-3, body .push-4 { float: left; }
|
||||
|
||||
|
||||
/* Typography with RTL support */
|
||||
body h1,body h2,body h3,
|
||||
body h4,body h5,body h6 { font-family: Arial, sans-serif; }
|
||||
html body { font-family: Arial, sans-serif; }
|
||||
body pre,body code,body tt { font-family: monospace; }
|
||||
|
||||
/* Mirror floats and margins on typographic elements */
|
||||
body p img { float: right; margin: 1.5em 0 1.5em 1.5em; }
|
||||
body dd, body ul, body ol { margin-left: 0; margin-right: 1.5em;}
|
||||
body td, body th { text-align:right; }
|
|
@ -1,30 +0,0 @@
|
|||
/* -----------------------------------------------------------------------
|
||||
|
||||
|
||||
Blueprint CSS Framework 0.8
|
||||
http://blueprintcss.org
|
||||
|
||||
* Copyright (c) 2007-Present. See LICENSE for more info.
|
||||
* See README for instructions on how to use Blueprint.
|
||||
* For credits and origins, see AUTHORS.
|
||||
* This is a compressed file. See the sources in the 'src' directory.
|
||||
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
/* print.css */
|
||||
body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;}
|
||||
.container {background:none;}
|
||||
hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
|
||||
hr.space {background:#fff;color:#fff;}
|
||||
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}
|
||||
code {font:.9em "Courier New", Monaco, Courier, monospace;}
|
||||
img {float:left;margin:1.5em 1.5em 1.5em 0;}
|
||||
a img {border:none;}
|
||||
p img.top {margin-top:0;}
|
||||
blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
|
||||
.small {font-size:.9em;}
|
||||
.large {font-size:1.1em;}
|
||||
.quiet {color:#999;}
|
||||
.hide {display:none;}
|
||||
a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
|
||||
a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}
|
|
@ -1,252 +0,0 @@
|
|||
/* -----------------------------------------------------------------------
|
||||
|
||||
|
||||
Blueprint CSS Framework 0.8
|
||||
http://blueprintcss.org
|
||||
|
||||
* Copyright (c) 2007-Present. See LICENSE for more info.
|
||||
* See README for instructions on how to use Blueprint.
|
||||
* For credits and origins, see AUTHORS.
|
||||
* This is a compressed file. See the sources in the 'src' directory.
|
||||
|
||||
----------------------------------------------------------------------- */
|
||||
|
||||
/* reset.css */
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
|
||||
body {line-height:1.5;}
|
||||
table {border-collapse:separate;border-spacing:0;}
|
||||
caption, th, td {text-align:left;font-weight:normal;}
|
||||
table, td, th {vertical-align:middle;}
|
||||
blockquote:before, blockquote:after, q:before, q:after {content:"";}
|
||||
blockquote, q {quotes:"" "";}
|
||||
a img {border:none;}
|
||||
|
||||
/* typography.css */
|
||||
body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
|
||||
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
|
||||
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
|
||||
h2 {font-size:2em;margin-bottom:0.75em;}
|
||||
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
|
||||
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
|
||||
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
|
||||
h6 {font-size:1em;font-weight:bold;}
|
||||
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
|
||||
p {margin:0 0 1.5em;}
|
||||
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
|
||||
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
|
||||
a:focus, a:hover {color:#000;}
|
||||
a {color:#009;text-decoration:underline;}
|
||||
blockquote {margin:1.5em;color:#666;font-style:italic;}
|
||||
strong {font-weight:bold;}
|
||||
em, dfn {font-style:italic;}
|
||||
dfn {font-weight:bold;}
|
||||
sup, sub {line-height:0;}
|
||||
abbr, acronym {border-bottom:1px dotted #666;}
|
||||
address {margin:0 0 1.5em;font-style:italic;}
|
||||
del {color:#666;}
|
||||
pre {margin:1.5em 0;white-space:pre;}
|
||||
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
|
||||
li ul, li ol {margin:0 1.5em;}
|
||||
ul, ol {margin:0 1.5em 1.5em 1.5em;}
|
||||
ul {list-style-type:disc;}
|
||||
ol {list-style-type:decimal;}
|
||||
dl {margin:0 0 1.5em 0;}
|
||||
dl dt {font-weight:bold;}
|
||||
dd {margin-left:1.5em;}
|
||||
table {margin-bottom:1.4em;width:100%;}
|
||||
th {font-weight:bold;}
|
||||
thead th {background:#c3d9ff;}
|
||||
th, td, caption {padding:4px 10px 4px 5px;}
|
||||
tr.even td {background:#e5ecf9;}
|
||||
tfoot {font-style:italic;}
|
||||
caption {background:#eee;}
|
||||
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
|
||||
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
|
||||
.hide {display:none;}
|
||||
.quiet {color:#666;}
|
||||
.loud {color:#000;}
|
||||
.highlight {background:#ff0;}
|
||||
.added {background:#060;color:#fff;}
|
||||
.removed {background:#900;color:#fff;}
|
||||
.first {margin-left:0;padding-left:0;}
|
||||
.last {margin-right:0;padding-right:0;}
|
||||
.top {margin-top:0;padding-top:0;}
|
||||
.bottom {margin-bottom:0;padding-bottom:0;}
|
||||
|
||||
/* forms.css */
|
||||
label {font-weight:bold;}
|
||||
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
|
||||
legend {font-weight:bold;font-size:1.2em;}
|
||||
input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}
|
||||
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
|
||||
input.text, input.title {width:300px;padding:5px;}
|
||||
input.title {font-size:1.5em;}
|
||||
textarea {width:390px;height:250px;padding:5px;}
|
||||
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
|
||||
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
|
||||
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
|
||||
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
|
||||
.error a {color:#8a1f11;}
|
||||
.notice a {color:#514721;}
|
||||
.success a {color:#264409;}
|
||||
|
||||
/* grid.css */
|
||||
.container {width:950px;margin:0 auto;}
|
||||
.showgrid {background:url(src/grid.png);}
|
||||
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
|
||||
.last, div.last {margin-right:0;}
|
||||
.span-1 {width:30px;}
|
||||
.span-2 {width:70px;}
|
||||
.span-3 {width:110px;}
|
||||
.span-4 {width:150px;}
|
||||
.span-5 {width:190px;}
|
||||
.span-6 {width:230px;}
|
||||
.span-7 {width:270px;}
|
||||
.span-8 {width:310px;}
|
||||
.span-9 {width:350px;}
|
||||
.span-10 {width:390px;}
|
||||
.span-11 {width:430px;}
|
||||
.span-12 {width:470px;}
|
||||
.span-13 {width:510px;}
|
||||
.span-14 {width:550px;}
|
||||
.span-15 {width:590px;}
|
||||
.span-16 {width:630px;}
|
||||
.span-17 {width:670px;}
|
||||
.span-18 {width:710px;}
|
||||
.span-19 {width:750px;}
|
||||
.span-20 {width:790px;}
|
||||
.span-21 {width:830px;}
|
||||
.span-22 {width:870px;}
|
||||
.span-23 {width:910px;}
|
||||
.span-24, div.span-24 {width:950px;margin:0;}
|
||||
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;}
|
||||
input.span-1, textarea.span-1 {width:18px!important;}
|
||||
input.span-2, textarea.span-2 {width:58px!important;}
|
||||
input.span-3, textarea.span-3 {width:98px!important;}
|
||||
input.span-4, textarea.span-4 {width:138px!important;}
|
||||
input.span-5, textarea.span-5 {width:178px!important;}
|
||||
input.span-6, textarea.span-6 {width:218px!important;}
|
||||
input.span-7, textarea.span-7 {width:258px!important;}
|
||||
input.span-8, textarea.span-8 {width:298px!important;}
|
||||
input.span-9, textarea.span-9 {width:338px!important;}
|
||||
input.span-10, textarea.span-10 {width:378px!important;}
|
||||
input.span-11, textarea.span-11 {width:418px!important;}
|
||||
input.span-12, textarea.span-12 {width:458px!important;}
|
||||
input.span-13, textarea.span-13 {width:498px!important;}
|
||||
input.span-14, textarea.span-14 {width:538px!important;}
|
||||
input.span-15, textarea.span-15 {width:578px!important;}
|
||||
input.span-16, textarea.span-16 {width:618px!important;}
|
||||
input.span-17, textarea.span-17 {width:658px!important;}
|
||||
input.span-18, textarea.span-18 {width:698px!important;}
|
||||
input.span-19, textarea.span-19 {width:738px!important;}
|
||||
input.span-20, textarea.span-20 {width:778px!important;}
|
||||
input.span-21, textarea.span-21 {width:818px!important;}
|
||||
input.span-22, textarea.span-22 {width:858px!important;}
|
||||
input.span-23, textarea.span-23 {width:898px!important;}
|
||||
input.span-24, textarea.span-24 {width:938px!important;}
|
||||
.append-1 {padding-right:40px;}
|
||||
.append-2 {padding-right:80px;}
|
||||
.append-3 {padding-right:120px;}
|
||||
.append-4 {padding-right:160px;}
|
||||
.append-5 {padding-right:200px;}
|
||||
.append-6 {padding-right:240px;}
|
||||
.append-7 {padding-right:280px;}
|
||||
.append-8 {padding-right:320px;}
|
||||
.append-9 {padding-right:360px;}
|
||||
.append-10 {padding-right:400px;}
|
||||
.append-11 {padding-right:440px;}
|
||||
.append-12 {padding-right:480px;}
|
||||
.append-13 {padding-right:520px;}
|
||||
.append-14 {padding-right:560px;}
|
||||
.append-15 {padding-right:600px;}
|
||||
.append-16 {padding-right:640px;}
|
||||
.append-17 {padding-right:680px;}
|
||||
.append-18 {padding-right:720px;}
|
||||
.append-19 {padding-right:760px;}
|
||||
.append-20 {padding-right:800px;}
|
||||
.append-21 {padding-right:840px;}
|
||||
.append-22 {padding-right:880px;}
|
||||
.append-23 {padding-right:920px;}
|
||||
.prepend-1 {padding-left:40px;}
|
||||
.prepend-2 {padding-left:80px;}
|
||||
.prepend-3 {padding-left:120px;}
|
||||
.prepend-4 {padding-left:160px;}
|
||||
.prepend-5 {padding-left:200px;}
|
||||
.prepend-6 {padding-left:240px;}
|
||||
.prepend-7 {padding-left:280px;}
|
||||
.prepend-8 {padding-left:320px;}
|
||||
.prepend-9 {padding-left:360px;}
|
||||
.prepend-10 {padding-left:400px;}
|
||||
.prepend-11 {padding-left:440px;}
|
||||
.prepend-12 {padding-left:480px;}
|
||||
.prepend-13 {padding-left:520px;}
|
||||
.prepend-14 {padding-left:560px;}
|
||||
.prepend-15 {padding-left:600px;}
|
||||
.prepend-16 {padding-left:640px;}
|
||||
.prepend-17 {padding-left:680px;}
|
||||
.prepend-18 {padding-left:720px;}
|
||||
.prepend-19 {padding-left:760px;}
|
||||
.prepend-20 {padding-left:800px;}
|
||||
.prepend-21 {padding-left:840px;}
|
||||
.prepend-22 {padding-left:880px;}
|
||||
.prepend-23 {padding-left:920px;}
|
||||
div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
|
||||
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
|
||||
.pull-1 {margin-left:-40px;}
|
||||
.pull-2 {margin-left:-80px;}
|
||||
.pull-3 {margin-left:-120px;}
|
||||
.pull-4 {margin-left:-160px;}
|
||||
.pull-5 {margin-left:-200px;}
|
||||
.pull-6 {margin-left:-240px;}
|
||||
.pull-7 {margin-left:-280px;}
|
||||
.pull-8 {margin-left:-320px;}
|
||||
.pull-9 {margin-left:-360px;}
|
||||
.pull-10 {margin-left:-400px;}
|
||||
.pull-11 {margin-left:-440px;}
|
||||
.pull-12 {margin-left:-480px;}
|
||||
.pull-13 {margin-left:-520px;}
|
||||
.pull-14 {margin-left:-560px;}
|
||||
.pull-15 {margin-left:-600px;}
|
||||
.pull-16 {margin-left:-640px;}
|
||||
.pull-17 {margin-left:-680px;}
|
||||
.pull-18 {margin-left:-720px;}
|
||||
.pull-19 {margin-left:-760px;}
|
||||
.pull-20 {margin-left:-800px;}
|
||||
.pull-21 {margin-left:-840px;}
|
||||
.pull-22 {margin-left:-880px;}
|
||||
.pull-23 {margin-left:-920px;}
|
||||
.pull-24 {margin-left:-960px;}
|
||||
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
|
||||
.push-1 {margin:0 -40px 1.5em 40px;}
|
||||
.push-2 {margin:0 -80px 1.5em 80px;}
|
||||
.push-3 {margin:0 -120px 1.5em 120px;}
|
||||
.push-4 {margin:0 -160px 1.5em 160px;}
|
||||
.push-5 {margin:0 -200px 1.5em 200px;}
|
||||
.push-6 {margin:0 -240px 1.5em 240px;}
|
||||
.push-7 {margin:0 -280px 1.5em 280px;}
|
||||
.push-8 {margin:0 -320px 1.5em 320px;}
|
||||
.push-9 {margin:0 -360px 1.5em 360px;}
|
||||
.push-10 {margin:0 -400px 1.5em 400px;}
|
||||
.push-11 {margin:0 -440px 1.5em 440px;}
|
||||
.push-12 {margin:0 -480px 1.5em 480px;}
|
||||
.push-13 {margin:0 -520px 1.5em 520px;}
|
||||
.push-14 {margin:0 -560px 1.5em 560px;}
|
||||
.push-15 {margin:0 -600px 1.5em 600px;}
|
||||
.push-16 {margin:0 -640px 1.5em 640px;}
|
||||
.push-17 {margin:0 -680px 1.5em 680px;}
|
||||
.push-18 {margin:0 -720px 1.5em 720px;}
|
||||
.push-19 {margin:0 -760px 1.5em 760px;}
|
||||
.push-20 {margin:0 -800px 1.5em 800px;}
|
||||
.push-21 {margin:0 -840px 1.5em 840px;}
|
||||
.push-22 {margin:0 -880px 1.5em 880px;}
|
||||
.push-23 {margin:0 -920px 1.5em 920px;}
|
||||
.push-24 {margin:0 -960px 1.5em 960px;}
|
||||
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}
|
||||
.prepend-top {margin-top:1.5em;}
|
||||
.append-bottom {margin-bottom:1.5em;}
|
||||
.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
|
||||
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
|
||||
hr.space {background:#fff;color:#fff;}
|
||||
.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
|
||||
.clearfix, .container {display:block;}
|
||||
.clear {clear:both;}
|
|
@ -0,0 +1,316 @@
|
|||
/*
|
||||
*
|
||||
* Easy front-end framework
|
||||
*
|
||||
* Copyright (c) 2009 Alen Grakalic
|
||||
* http://easyframework.com/license.php
|
||||
*
|
||||
* supported by Templatica (http://templatica.com)
|
||||
* and Css Globe (http://cssglobe.com)
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
|
||||
for more info about the strucure of this file
|
||||
please read http://easyframework.com/documentation.php
|
||||
|
||||
*/
|
||||
|
||||
/* HTML elements */
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
font-weight:normal;
|
||||
margin:0;
|
||||
line-height:1em;
|
||||
}
|
||||
h1{font-size:2em;margin-bottom:.5em;}
|
||||
h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}
|
||||
h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
|
||||
h4{font-size:1.25em;margin-bottom:.6em;}
|
||||
h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}
|
||||
|
||||
p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
|
||||
ul, ol, dl{padding:0;}
|
||||
ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
|
||||
li{margin:0 0 0 2em;display:list-item;list-style-position:outside;}
|
||||
blockquote, dd{padding:0 0 0 2em;}
|
||||
pre, code, samp, kbd, var{font:100% mono-space,monospace;}
|
||||
pre{overflow:auto;}
|
||||
abbr, acronym{
|
||||
text-transform:uppercase;
|
||||
border-bottom:1px dotted #000;
|
||||
letter-spacing:1px;
|
||||
}
|
||||
abbr[title], acronym[title]{cursor:help;}
|
||||
small{font-size:.9em;}
|
||||
sup, sub{font-size:.8em;}
|
||||
em, cite, q{font-style:italic;}
|
||||
img{border:none;}
|
||||
hr{display:none;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
th,caption{text-align:left;}
|
||||
form div{margin:.5em 0;clear:both;}
|
||||
label{display:block;}
|
||||
fieldset{margin:0;padding:0;border:none;}
|
||||
legend{font-weight:bold;}
|
||||
input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}
|
||||
|
||||
/* // HTML elements */
|
||||
|
||||
/* common */
|
||||
|
||||
.left{float:left;margin-right:1em;}
|
||||
.right{float:right;margin-left:1em;}
|
||||
.center{text-align:center;}
|
||||
|
||||
.clear{clear:both;}
|
||||
.first{margin-left:0 !important;}
|
||||
.last{margin-right:0 !important;}
|
||||
.top{margin-top:0 !important;}
|
||||
.bottom{margin-bottom:0 !important;}
|
||||
.hidden, .print{display:none;}
|
||||
.graphic{
|
||||
margin:0;
|
||||
padding:0;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
text-indent:-8000px;
|
||||
}
|
||||
|
||||
/* // common */
|
||||
|
||||
/* base */
|
||||
|
||||
body, table, input, textarea, select, li, button{
|
||||
font:1em Helvetica, Arial, Sans-Serif;
|
||||
line-height:1.5em;
|
||||
color:#333;
|
||||
}
|
||||
body{
|
||||
font-size:13px;
|
||||
background:#fff;
|
||||
margin:0;
|
||||
padding:0;
|
||||
text-align:center;
|
||||
}
|
||||
a, a:visited{
|
||||
text-decoration:none;
|
||||
color:#06C;
|
||||
}
|
||||
a:hover{color:#999;}
|
||||
ins{text-decoration:none;color:#900;font-style:italic;}
|
||||
code{color:#555;}
|
||||
pre{
|
||||
margin-left:2em;
|
||||
padding-left:2em;
|
||||
border-left:1px solid #ccc;
|
||||
}
|
||||
blockquote{
|
||||
margin-left:2em;
|
||||
border-left:1px solid #ccc;
|
||||
font-style:italic;
|
||||
}
|
||||
dt{font-weight:bold;}
|
||||
th, td{padding:.5em 1em;line-height:1.5em;}
|
||||
th{background:#eee;}
|
||||
td{border-bottom:1px solid #eee;}
|
||||
caption{font-style:italic;color:#777;margin:.5em 0;}
|
||||
fieldset{
|
||||
border:1px solid #ccc;
|
||||
padding:1em 2em;
|
||||
margin:0 0 1.5em 0;
|
||||
}
|
||||
legend{padding:2px 5px;}
|
||||
form div.col{clear:none;}form div.first{clear:both;}
|
||||
form div{overflow:hidden;}
|
||||
|
||||
input[type="text"], input[type="password"], textarea, .field, .area, select{
|
||||
border:1px solid #aaa;
|
||||
padding:5px;
|
||||
background:#fff;
|
||||
width:300px;
|
||||
line-height:1em;
|
||||
margin:0;
|
||||
}
|
||||
select{width:312px;}
|
||||
textarea, .area{overflow:auto; height:150px; width:400px;}
|
||||
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus, .focus{background:#f5f5f5;outline:none;}
|
||||
.submit{}
|
||||
button{
|
||||
border:none;
|
||||
background:#555;
|
||||
color:#fff;
|
||||
padding:0 2.5em;
|
||||
height:2em;
|
||||
line-height:2em;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.note, .success, .error{display:block;}
|
||||
.error{color:#900;}
|
||||
.success{color:#060;}
|
||||
.note{font-weight:bold;}
|
||||
.notvalid{border:1px solid #900 !important;}
|
||||
|
||||
.pullquote{
|
||||
width:20%;
|
||||
float:left;
|
||||
margin-right:2em;
|
||||
padding-right:2em;
|
||||
border-right:1px solid #ccc;
|
||||
text-align:right;
|
||||
font-size:1.1em;
|
||||
font-style:italic;
|
||||
color:#777;
|
||||
margin-bottom:.5em;
|
||||
}
|
||||
.boxout{
|
||||
width:20%;
|
||||
float:right;
|
||||
margin-left:2em;
|
||||
padding:1em 2em;
|
||||
border:1px solid #ccc;
|
||||
margin-bottom:.5em;
|
||||
}
|
||||
#easy_tooltip{
|
||||
border:1px solid #e1e1e1;
|
||||
padding:2px 10px;
|
||||
background:#f5f5f5;
|
||||
}
|
||||
|
||||
/* base */
|
||||
|
||||
/* layout */
|
||||
|
||||
#container{
|
||||
margin:0 auto;
|
||||
width:920px;
|
||||
text-align:left;
|
||||
position:relative;
|
||||
}
|
||||
.inner{
|
||||
position:relative;
|
||||
}
|
||||
#header{
|
||||
position:relative;
|
||||
}
|
||||
#footer{
|
||||
position:relative;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.content{
|
||||
clear:both;
|
||||
padding:1em 0;
|
||||
}
|
||||
.main, .secondary, .tertiary, .quaternary{
|
||||
float:left;
|
||||
display:inline;
|
||||
}
|
||||
.main{width:600px;}
|
||||
.secondary{width:280px;margin-left:40px;}
|
||||
.tertiary{}
|
||||
.quaternary{}
|
||||
|
||||
/* grid */
|
||||
|
||||
.cols{} /* main column container class */
|
||||
.col{
|
||||
float:left;
|
||||
display:inline;
|
||||
width:48%;margin-left:4%; /* 2 equal width columns layout - default */
|
||||
}
|
||||
.cols3 .col{width:30%;margin-left:5%;} /* 3 equal width columns layout */
|
||||
.cols4 .col{width:22%;margin-left:4%;} /* 4 equal width columns layout */
|
||||
|
||||
/* use following classes to build custom grid (add as many as you want) */
|
||||
|
||||
.col1, .col2, .col3{float:left;display:inline;}
|
||||
.col1{}
|
||||
.col2{}
|
||||
.col3{}
|
||||
|
||||
.indent1{}
|
||||
.indent2{}
|
||||
.indent3{}
|
||||
|
||||
/* grid */
|
||||
|
||||
/* // layout */
|
||||
|
||||
/* navigation */
|
||||
|
||||
#nav, #nav ul, #nav li{
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#nav li{
|
||||
float:left;
|
||||
display:inline;
|
||||
position:relative;
|
||||
line-height:32px;
|
||||
height:32px;
|
||||
margin-right:2em;
|
||||
}
|
||||
|
||||
#nav ul{
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:32px;
|
||||
padding:5px 10px;
|
||||
width:200px;
|
||||
background:#fff;
|
||||
display:none;
|
||||
z-index:1000;
|
||||
}
|
||||
#nav ul li{
|
||||
float:none;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* //navigation */
|
||||
|
||||
/* header */
|
||||
|
||||
#header h1{
|
||||
line-height:50px;
|
||||
height:50px;
|
||||
margin:0;
|
||||
}
|
||||
#header h1 a{
|
||||
}
|
||||
|
||||
/* // header */
|
||||
|
||||
/* content */
|
||||
|
||||
.content a, .content a:visited{
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
/* // content */
|
||||
|
||||
/* footer */
|
||||
|
||||
#footer a, #footer a:visited{
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
/* // footer */
|
||||
|
||||
/* clearfix */
|
||||
|
||||
.inner:after, .content:after, .cols:after, .fixed:after{
|
||||
content:".";
|
||||
display:block;
|
||||
height:0;
|
||||
clear:both;
|
||||
visibility:hidden;
|
||||
}
|
||||
.inner, .content, .cols, .fixed{display:block;min-height:1%;}
|
||||
* html .inner, * html .content, * html .cols, * html .fixed{height:1%;}
|
||||
|
||||
/* // clearfix */
|
|
@ -0,0 +1,150 @@
|
|||
/*
|
||||
*
|
||||
* Easy front-end framework
|
||||
*
|
||||
* Copyright (c) 2009 Alen Grakalic
|
||||
* http://easyframework.com/license.php
|
||||
*
|
||||
* supported by Templatica (http://templatica.com)
|
||||
* and Css Globe (http://cssglobe.com)
|
||||
*
|
||||
*/
|
||||
|
||||
/* HTML elements */
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
font-weight:normal;
|
||||
margin:0;
|
||||
line-height:1em;
|
||||
}
|
||||
h1{font-size:2em;margin-bottom:.5em;}
|
||||
h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}
|
||||
h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
|
||||
h4{font-size:1.25em;margin-bottom:.6em;}
|
||||
h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}
|
||||
|
||||
p, blockquote, ul, ol, dl, form, table{line-height:inherit;margin:0 0 1.5em 0;}
|
||||
ul, ol, dl{padding:0;}
|
||||
ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
|
||||
li{margin:0;display:list-item;list-style-position:inside;}
|
||||
blockquote, dd, li{padding:0 0 0 2em;}
|
||||
pre, code, samp, kbd, var{font:100% mono-space,monospace;}
|
||||
pre{overflow:auto;}
|
||||
abbr, acronym{
|
||||
text-transform:uppercase;
|
||||
border:none;
|
||||
letter-spacing:1px;
|
||||
}
|
||||
small{font-size:90%;}
|
||||
sup, sub{font-size:85%;}
|
||||
em, cite, q{font-style:italic;}
|
||||
img{border:none;}
|
||||
table{width:100%;border-collapse:collapse;}
|
||||
th,caption{text-align:left;}
|
||||
form{display:none;}
|
||||
|
||||
/* // HTML elements */
|
||||
|
||||
/* common */
|
||||
|
||||
.left{float:left;margin-right:1em;}
|
||||
.right{float:right;margin-left:1em;}
|
||||
.center{text-align:center;}
|
||||
|
||||
.clear{clear:both;}
|
||||
.first{margin-left:0 !important;}
|
||||
.last{margin-right:0 !important;}
|
||||
.top{margin-top:0 !important;}
|
||||
.bottom{margin-bottom:0 !important;}
|
||||
.hidden, .graphic{display:none;}
|
||||
|
||||
/* // common */
|
||||
|
||||
/* base */
|
||||
|
||||
body, table, input, textarea, select, li, button{
|
||||
font:100% Helvetica, Arial, Sans-Serif;
|
||||
line-height:180%;
|
||||
color:#000;
|
||||
}
|
||||
body{
|
||||
font-size:13px;
|
||||
background:#fff;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
a{
|
||||
text-decoration:none;
|
||||
color:#555;
|
||||
}
|
||||
ins{text-decoration:none;color:#900;font-style:italic;}
|
||||
code{color:#555;}
|
||||
pre{
|
||||
margin-left:2em;
|
||||
padding-left:2em;
|
||||
border-left:1px solid #ccc;
|
||||
}
|
||||
blockquote{
|
||||
margin-left:2em;
|
||||
border-left:1px solid #ccc;
|
||||
font-style:italic;
|
||||
}
|
||||
dt{font-weight:bold;}
|
||||
th, td{padding:8px;}
|
||||
th{background:#eee;}
|
||||
td{border-bottom:1px solid #eee;}
|
||||
caption{font-style:italic;color:#777;margin:.5em 0;}
|
||||
|
||||
.excerpt{font-size:120%;font-style:italic;}
|
||||
.note{font-weight:bold;}
|
||||
|
||||
/* base */
|
||||
|
||||
/* misc */
|
||||
|
||||
#container{}
|
||||
.inner{}
|
||||
#header{
|
||||
margin-bottom:1em;
|
||||
border-bottom:1px solid #ccc;
|
||||
padding-bottom:1em;
|
||||
}
|
||||
.content{}
|
||||
.main, .secondary, .tertiary, .quaternary{}
|
||||
.main{}
|
||||
.secondary{}
|
||||
.tertiary{}
|
||||
.quaternary{}
|
||||
#footer{
|
||||
margin-top:1em;
|
||||
border-top:1px solid #ccc;
|
||||
padding-top:1em;
|
||||
position:relative;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
#nav, .nav{display:none;}
|
||||
|
||||
#header h1{
|
||||
line-height:50px;
|
||||
height:50px;
|
||||
margin:0;
|
||||
}
|
||||
#header h1 a{
|
||||
}
|
||||
|
||||
/* // misc */
|
||||
|
||||
/* clearfix */
|
||||
|
||||
.inner:after, .content:after, .cols:after, .fixed:after{
|
||||
content:".";
|
||||
display:block;
|
||||
height:0;
|
||||
clear:both;
|
||||
visibility:hidden;
|
||||
}
|
||||
.inner, .content, .cols, .fixed{display:block;min-height:1%;}
|
||||
* html .inner, * html .content, * html .cols, * html .fixed{height:1%;}
|
||||
|
||||
/* // clearfix */
|
|
@ -1,49 +0,0 @@
|
|||
/* --------------------------------------------------------------
|
||||
|
||||
forms.css
|
||||
* Sets up some default styling for forms
|
||||
* Gives you classes to enhance your forms
|
||||
|
||||
Usage:
|
||||
* For text fields, use class .title or .text
|
||||
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
label { font-weight: bold; }
|
||||
fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
|
||||
legend { font-weight: bold; font-size:1.2em; }
|
||||
|
||||
|
||||
/* Form fields
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
input.text, input.title,
|
||||
textarea, select {
|
||||
margin:0.5em 0;
|
||||
border:1px solid #bbb;
|
||||
}
|
||||
|
||||
input.text:focus, input.title:focus,
|
||||
textarea:focus, select:focus {
|
||||
border:1px solid #666;
|
||||
}
|
||||
|
||||
input.text,
|
||||
input.title { width: 300px; padding:5px; }
|
||||
input.title { font-size:1.5em; }
|
||||
textarea { width: 390px; height: 250px; padding:5px; }
|
||||
|
||||
|
||||
/* Success, notice and error boxes
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.error,
|
||||
.notice,
|
||||
.success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
|
||||
|
||||
.error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
|
||||
.notice { background: #FFF6BF; color: #514721; border-color: #FFD324; }
|
||||
.success { background: #E6EFC2; color: #264409; border-color: #C6D880; }
|
||||
.error a { color: #8a1f11; }
|
||||
.notice a { color: #514721; }
|
||||
.success a { color: #264409; }
|
|
@ -1,10 +0,0 @@
|
|||
#nav {
|
||||
background-color: #333;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
|
@ -1,54 +0,0 @@
|
|||
body { background-color: #fff; color: #333; }
|
||||
|
||||
body, p, ol, ul, td {
|
||||
font-family: verdana, arial, helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #eee;
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
a { color: #000; }
|
||||
a:visited { color: #666; }
|
||||
a:hover { color: #fff; background-color:#000; }
|
||||
|
||||
.fieldWithErrors {
|
||||
padding: 2px;
|
||||
background-color: red;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#errorExplanation {
|
||||
width: 400px;
|
||||
border: 2px solid red;
|
||||
padding: 7px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#errorExplanation h2 {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
padding: 5px 5px 5px 15px;
|
||||
font-size: 12px;
|
||||
margin: -7px;
|
||||
background-color: #c00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#errorExplanation p {
|
||||
color: #333;
|
||||
margin-bottom: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#errorExplanation ul li {
|
||||
font-size: 12px;
|
||||
list-style: square;
|
||||
}
|
||||
|