playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Changing lists to table views to match the HIG.

pull/214/head
connors 12 years ago
parent
dc5fd7fc22
commit
f920cfc144
5 changed files with 144 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      dist/ratchet.css
  2. 184
      docs/index.html
  3. 2
      lib/sass/popovers.scss
  4. 2
      lib/sass/ratchet.scss
  5. 62
      lib/sass/table-views.scss

56
dist/ratchet.css vendored
Unescape View File

@ -346,34 +346,34 @@ a {
height: 32px;
margin: 0; }
/* Lists
/* Table views
-------------------------------------------------- */
.list {
.table-view {
list-style: none;
background-color: #fff; }
.list li {
.table-view li {
position: relative;
padding: 11px 60px 11px 0;
margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.list li:first-child {
.table-view li:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.1); }
.list li:last-child {
.table-view li:last-child {
border-bottom: 0; }
.list li > a:not([class*="button"]) {
.table-view li > a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
color: inherit; }
/* Inset list
/* Inset table view
-------------------------------------------------- */
.list.inset {
.table-view.inset {
width: auto;
margin-right: 10px;
margin-left: 10px;
@ -381,15 +381,15 @@ a {
border-radius: 6px;
box-sizing: border-box; }
.list.inset li:first-child {
.table-view.inset li:first-child {
border-top-width: 0; }
.list.inset li:last-child {
.table-view.inset li:last-child {
border-bottom-width: 0; }
/* List dividers
/* table view dividers
-------------------------------------------------- */
.list .list-divider {
.table-view .table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
@ -404,42 +404,42 @@ a {
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); }
/* Rounding first divider on inset lists and remove border on the top */
.list.inset .list-divider:first-child {
.table-view.inset .table-view-divider:first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0; }
/* Rounding last divider on inset lists */
.list.inset .list-divider:last-child {
/* Rounding last divider on inset table views */
.table-view.inset .table-view-divider:last-child {
border-radius: 0 0 6px 6px; }
/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
/* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
-------------------------------------------------- */
.list .chevron,
.list [class*="button"],
.list [class*="count"],
.list .toggle {
.table-view .chevron,
.table-view [class*="button"],
.table-view [class*="count"],
.table-view .toggle {
position: absolute;
top: 50%;
right: 10px; }
/* Position chevrons/counts vertically centered on the right in list items */
.list .chevron,
.list [class*="count"] {
/* Position chevrons/counts vertically centered on the right in table view items */
.table-view .chevron,
.table-view [class*="count"] {
margin-top: -10px;
/* Half height of chevron */ }
/* Push count over if there's a sibling chevron */
.list .chevron + [class*="count"] {
.table-view .chevron + [class*="count"] {
right: 30px; }
/* Position buttons vertically centered on the right in list items */
.list [class*="button"] {
/* Position buttons vertically centered on the right in table view items */
.table-view [class*="button"] {
left: auto;
margin-top: -14px;
/* Half height of button */ }
.list .toggle {
.table-view .toggle {
margin-top: -15px;
/* Half height of toggle */ }
@ -837,7 +837,7 @@ button.button-block {
/* Lists in popovers
-------------------------------------------------- */
.popover .list {
.popover .table-view {
width: auto;
max-height: 250px;
margin-right: 0;

184
docs/index.html
Unescape View File

@ -49,7 +49,7 @@
<a data-ignore="push" class="nav-components-link" href="">Components</a>
<ul class="components-list">
<li><a href="#bars">Bars</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#table-views">Table views</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#segmentedControllers">Segmented controllers</a></li>
<li><a href="#counts">Counts</a></li>
@ -405,52 +405,52 @@
</article>
<!-- Lists -->
<article class="component" id="lists">
<h3 class="component-title">Lists</h3>
<p class="component-description">Lists can be used for organizing data, showing collections of links or a series of controls.</p>
<!-- Table views -->
<article class="component" id="table-views">
<h3 class="component-title">Table views</h3>
<p class="component-description">Table views can be used for organizing data, showing collections of links or a series of controls.</p>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>List item 1</li>
<li>List item 2</li>
<li class="list-divider">List Divider</li>
<li>List item 3</li>
<ul class="table-view">
<li>Item 1</li>
<li>Item 2</li>
<li class="table-view-divider">Divider</li>
<li>Item 3</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;List item 1&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt;
&lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with chevrons</h3>
<p class="component-description">Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the list item is linked.</p>
<h3 class="component-title">Table view with chevrons</h3>
<p class="component-description">Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<div class="component-example component-example-fullbleed">
<ul class="list">
<ul class="table-view">
<li>
<a>
List item 1
Item 1
<span class="chevron"></span>
</a>
</li>
<li>
<a>
List item 2
Item 2
<span class="chevron"></span>
</a>
</li>
<li>
<a>
List item 3
Item 3
<span class="chevron"></span>
</a>
</li>
@ -458,22 +458,22 @@
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 1
Item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 2
Item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 3
Item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
@ -483,48 +483,48 @@
</article>
<article class="component">
<h3 class="component-title">List with counts</h3>
<h3 class="component-title">Table view with counts</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>List item 1 <span class="count">4</span></li>
<li>List item 2 <span class="count">1</span></li>
<li>List item 3 <span class="count">5</span></li>
<ul class="table-view">
<li>Item 1 <span class="count">4</span></li>
<li>Item 2 <span class="count">1</span></li>
<li>Item 3 <span class="count">5</span></li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;List item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;List item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;List item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with counts and chevrons</h3>
<h3 class="component-title">Table view with counts and chevrons</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<ul class="table-view">
<li>
<a>
List item 1
Item 1
<span class="chevron"></span>
<span class="count">4</span>
</a>
</li>
<li>
<a>
List item 2
Item 2
<span class="chevron"></span>
<span class="count">1</span>
</a>
</li>
<li>
<a>
List item 3
Item 3
<span class="chevron"></span>
<span class="count">5</span>
</a>
@ -533,24 +533,24 @@
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 1
Item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 2
Item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;#&quot;&gt;
List item 3
Item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
&lt;/a&gt;
@ -561,47 +561,47 @@
</article>
<article class="component">
<h3 class="component-title">List with buttons</h3>
<h3 class="component-title">Table view with buttons</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<li>List item 1 <a class="button">Button</a></li>
<li>List item 2 <a class="button-main">Button</a></li>
<li>List item 3 <a class="button-positive">Button</a></li>
<li>List item 4 <a class="button-negative">Button</a></li>
<ul class="table-view">
<li>Item 1 <a class="button">Button</a></li>
<li>Item 2 <a class="button-main">Button</a></li>
<li>Item 3 <a class="button-positive">Button</a></li>
<li>Item 4 <a class="button-negative">Button</a></li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;li&gt;List item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</article>
<article class="component">
<h3 class="component-title">List with toggles</h3>
<h3 class="component-title">Table view with toggles</h3>
<div class="component-example component-example-fullbleed">
<ul class="list">
<ul class="table-view">
<li>
List item 1
Item 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li>
List item 2
Item 2
<div class="toggle active">
<div class="toggle-handle"></div>
</div>
</li>
<li>
List item 3
Item 3
<div class="toggle">
<div class="toggle-handle"></div>
</div>
@ -610,21 +610,21 @@
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
List item 1
Item 1
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
List item 2
Item 2
&lt;div class=&quot;toggle active&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
List item 3
Item 3
&lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
@ -635,25 +635,25 @@
</article>
<article class="component">
<h3 class="component-title">Inset list</h3>
<h3 class="component-title">Inset table views</h3>
<div class="component-example">
<ul class="list inset">
<li>List item 1</li>
<li>List item 2</li>
<li class="list-divider">List Divider</li>
<li>List item 3</li>
<li>List item 4</li>
<ul class="table-view inset">
<li>Item 1</li>
<li>Item 2</li>
<li class="table-view-divider">Divider</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<pre class="prettyprint">
&lt;ul class=&quot;list inset&quot;&gt;
&lt;li&gt;List item 1&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt;
&lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt;
&lt;li&gt;List item 4&lt;/li&gt;
&lt;ul class=&quot;table-view inset&quot;&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
&lt;li&gt;Item 4&lt;/li&gt;
&lt;/ul&gt;
</pre>
@ -735,7 +735,7 @@
<a href="#item3mobile">Thing three</a>
</li>
</ul>
<ul class="inset list">
<ul class="inset table-view">
<li id="item1mobile" class="segmented-controller-item active">
Item 1
</li>
@ -760,7 +760,7 @@
&lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;inset list&quot;&gt;
&lt;ul class=&quot;inset table-view&quot;&gt;
&lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
Item 1
&lt;/li&gt;
@ -935,7 +935,7 @@ document
Right
</a>
</header>
<ul class="list">
<ul class="table-view">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
@ -955,7 +955,7 @@ document
Right
&lt;/a&gt;
&lt;/header&gt;
&lt;ul class=&quot;list&quot;&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item1&lt;/li&gt;
&lt;li&gt;Item2&lt;/li&gt;
&lt;li&gt;Item3&lt;/li&gt;
@ -1094,7 +1094,7 @@ document
<h1 class="title">Push</h1>
</header>
<div class="content">
<ul class="list">
<ul class="table-view">
<li>
<a href="two.html" data-transition="slide-in">
Load new page with push
@ -1110,7 +1110,7 @@ document
&lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
&lt;/header&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;ul class=&quot;list&quot;&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
Go to page 2
@ -1170,26 +1170,6 @@ window.addEventListener('push', myFunction);
<div class="docs-inner-wrapper">
<h3>License &amp; credit</h3>
<p>Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by <a data-ignore="push" href="http://www.twitter.com/dhg">Dave Gamache</a>, <a data-ignore="push" href="http://www.twitter.com/connors">Connor Sears</a>, and <a data-ignore="push" href="http://www.twitter.com/fat">Jacob Thornton</a>.</p>
<ul class="avatars">
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/dhg">
<img src="https://secure.gravatar.com/avatar/14267e25aa6c7ef4f396afc483d6f238?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
</a>
<a data-ignore="push" href="https://twitter.com/dhg" class="twitter-follow-button" data-show-count="false">Follow @dhg</a>
</li>
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/connors">
<img src="https://secure.gravatar.com/avatar/53d633ae4622de17906338910085275a?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
</a>
<a data-ignore="push" href="https://twitter.com/connors" class="twitter-follow-button" data-show-count="false">Follow @connors</a>
</li>
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/fat">
<img src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
</a>
<a data-ignore="push" href="https://twitter.com/fat" class="twitter-follow-button" data-show-count="false">Follow @fat</a>
</li>
</ul>
</div>
</section>
</div>

2
lib/sass/popovers.scss
Unescape View File

@ -139,7 +139,7 @@
/* Lists in popovers
-------------------------------------------------- */
.popover .list {
.popover .table-view {
width: auto;
max-height: 250px;
margin-right: 0;

2
lib/sass/ratchet.scss
Unescape View File

@ -7,7 +7,7 @@ $chrome-color: rgba(247,247,247,.98);
// Components
@import "bars.scss";
@import "lists.scss";
@import "table-views.scss";
@import "forms.scss";
@import "buttons.scss";
@import "chevrons.scss";

62
lib/sass/lists.scss → lib/sass/table-views.scss
Unescape View File

@ -1,14 +1,14 @@
/* Lists
/* Table views
-------------------------------------------------- */
// Remove usual bullet styles from list
.list {
// Remove usual bullet styles from table view
.table-view {
list-style: none;
background-color: #fff;
}
// Pad each list item and add dividers
.list li {
// Pad each table view item and add dividers
.table-view li {
position: relative;
padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
margin-left: 15px;
@ -16,17 +16,17 @@
}
// Give top border to first list items
.list li:first-child {
.table-view li:first-child {
border-top: 1px solid rgba(0, 0, 0, .1);
}
// Remove the border from the last list item
.list li:last-child {
.table-view li:last-child {
border-bottom: 0;
}
// If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though)
.list li > a:not([class*="button"]) {
// If a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
.table-view li > a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
@ -34,10 +34,10 @@
color: inherit;
}
/* Inset list
/* Inset table view
-------------------------------------------------- */
.list.inset {
.table-view.inset {
width: auto;
margin-right: 10px;
margin-left: 10px;
@ -46,19 +46,19 @@
box-sizing: border-box;
}
// Remove border from first/last standard list items to avoid double border at top/bottom of lists
.list.inset li:first-child {
// Remove border from first/last standard list items to avoid double border at top/bottom of table views
.table-view.inset li:first-child {
border-top-width: 0;
}
.list.inset li:last-child {
.table-view.inset li:last-child {
border-bottom-width: 0;
}
/* List dividers
/* table view dividers
-------------------------------------------------- */
.list .list-divider {
.table-view .table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
@ -74,45 +74,45 @@
}
/* Rounding first divider on inset lists and remove border on the top */
.list.inset .list-divider:first-child {
.table-view.inset .table-view-divider:first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0;
}
/* Rounding last divider on inset lists */
.list.inset .list-divider:last-child {
/* Rounding last divider on inset table views */
.table-view.inset .table-view-divider:last-child {
border-radius: 0 0 6px 6px;
}
/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
/* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
-------------------------------------------------- */
.list .chevron,
.list [class*="button"],
.list [class*="count"],
.list .toggle {
.table-view .chevron,
.table-view [class*="button"],
.table-view [class*="count"],
.table-view .toggle {
position: absolute;
top: 50%;
right: 10px;
}
/* Position chevrons/counts vertically centered on the right in list items */
.list .chevron,
.list [class*="count"] {
/* Position chevrons/counts vertically centered on the right in table view items */
.table-view .chevron,
.table-view [class*="count"] {
margin-top: -10px; /* Half height of chevron */
}
/* Push count over if there's a sibling chevron */
.list .chevron + [class*="count"] {
.table-view .chevron + [class*="count"] {
right: 30px;
}
/* Position buttons vertically centered on the right in list items */
.list [class*="button"] {
/* Position buttons vertically centered on the right in table view items */
.table-view [class*="button"] {
left: auto;
margin-top: -14px; /* Half height of button */
}
.list .toggle {
.table-view .toggle {
margin-top: -15px; /* Half height of toggle */
}
Write Preview
Loading…
Cancel
Save