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

build an example app

pull/253/head
connors 11 years ago
parent
101254a034
commit
f80b7735b6
10 changed files with 183 additions and 145 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. 13
      dist/ios-theme.css
  2. 12
      dist/ratchet.css
  3. 13
      docs-assets/css/docs.css
  4. 34
      examples/app-default/choose-theater.html
  5. 15
      examples/app-default/css/app.css
  6. 218
      examples/app-default/index.html
  7. 6
      lib/sass/cards.scss
  8. 2
      lib/sass/forms.scss
  9. 4
      lib/sass/table-views.scss
  10. 11
      lib/sass/theme-ios.scss

13
dist/ios-theme.css vendored
Unescape View File

@ -186,10 +186,17 @@ p {
background-image: none;
}
.table-view {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.table-view .table-view-cell {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-position: 0 100%;
background-repeat: no-repeat;
}
.table-view .table-view-cell:last-child {
@ -245,6 +252,10 @@ textarea,
.input-group {
padding: 0;
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.input-group input {

12
dist/ratchet.css vendored
Unescape View File

@ -672,15 +672,23 @@ input[type="button"] {
color: inherit;
}
.card .table-view {
margin: 0;
border-top: 0;
border-bottom: 0;
}
.card .table-view li:last-child {
border: 0;
}
.table-view {
padding: 0;
margin: 0;
margin: 0 0 20px 0;
list-style: none;
background-color: #fff;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.table-view .table-view-cell {
position: relative;
@ -793,7 +801,7 @@ input[type="color"],
.input-group {
width: 100%;
height: 35px;
padding: 0 10px;
padding: 0 15px;
margin-bottom: 10px;
line-height: 21px;
background-color: #fff;

13
docs-assets/css/docs.css
Unescape View File

@ -952,10 +952,17 @@ hr {
.platform-ios .card .table-view-cell:last-child {
background-image: none;
}
.platform-ios .table-view {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.platform-ios .table-view .table-view-cell {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-position: 0 100%;
background-repeat: no-repeat;
}
.platform-ios .table-view .table-view-cell:last-child {
@ -1006,6 +1013,10 @@ hr {
}
.platform-ios .input-group {
padding: 0;
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.platform-ios .input-group input {
border: 0;

34
examples/app-default/choose-theater.html
Unescape View File

@ -3,48 +3,32 @@
<head>
<meta charset="utf-8">
<title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<!-- <link rel="stylesheet" href="../../dist/ios-theme.css"> -->
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="btn pull-left" href="index.html" data-transition="slide-out">
<a class="btn btn-link pull-left" href="index.html" data-transition="slide-out">
<span class="icon icon-left-nav"></span>
Back
</a>
<a class="btn btn-link pull-right">
Test
</a>
<h1 class="title">Argo</h1>
</header>
<nav class="bar bar-standard bar-header-secondary">
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search theaters">
</form>
</nav>
<nav class="bar bar-tab">
<a class="tab-item selected" href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</nav>
</div>
<div class="content">
<ul class="table-view">

15
examples/app-default/css/app.css
Unescape View File

@ -1,16 +1,5 @@
.slider {
.slider,
.slider img {
margin-bottom: 0;
height: 150px;
}
.slider li img {
width: 100%;
}
.form-wrapper {
padding: 10px 0;
}
.form-wrapper .btn {
margin: 0 10px;
}

218
examples/app-default/index.html
Unescape View File

@ -3,148 +3,170 @@
<head>
<meta charset="utf-8">
<title>Movie finder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
<link rel="stylesheet" href="../../dist/ratchet.css">
<!-- <link rel="stylesheet" href="../../dist/ios-theme.css"> -->
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-gear pull-right" href="#settingsModal" ></a>
<h1 class="title">Movie finder</h1>
</header>
<nav class="bar bar-standard bar-header-secondary">
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
</form>
</nav>
<nav class="bar bar-tab">
<a class="tab-item selected" href="index.html" data-transition="fade">
<span class="icon icon-share"></span>
<div class="tab-label">Movies</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-pages"></span>
<div class="tab-label">Theaters</div>
</a>
<a class="tab-item" href="#" data-transition="fade">
<span class="icon icon-sound"></span>
<div class="tab-label">Settings</div>
</a>
</nav>
</div>
<div class="content">
<div class="slider">
<ul>
<li>
<div class="slide-group">
<div class="slide">
<img src="img/argo.png">
</li>
<li>
</div>
<div class="slide">
<img src="img/skyfall.png">
</li>
<li>
</div>
<div class="slide">
<img src="img/ralph.png">
</li>
</ul>
</div>
</div>
</div>
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Argo</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Skyfall: 007</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Wreck-it Ralph</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell table-view-divider">Top movies</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 4</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 5</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 6</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 7</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 8</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 9</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 10</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Skyfall: 007
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 11</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
</a>
</li>
<li class="table-view-cell">
<a href="choose-theater.html" data-transition="slide-in">
<strong>Movie 12</strong>
<p>Lorem ipsum dolor sit amet</p>
<span class="chevron"></span>
<li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64">
<div class="media-body">
Wreck-it Ralph
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</a>
</li>
</ul>
</div>
<!-- Settings modal -->
<div id="settingsModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#settingsModal"></a>
<h1 class="title">Settings</h1>
</header>
<div class="content">
<h5>User settings</h5>
<form class="input-group">
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Username">
</form>
<h5>App settings</h5>
<ul class="table-view">
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-sound"></span>
<div class="media-body">
Enable sounds
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell media">
<span class="media-object pull-left icon icon-person"></span>
<div class="media-body">
Parental controls
</div>
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<a class="btn btn-positive btn-block">Save settings</a>
</div>
</div>
</body>
</html>

6
lib/sass/cards.scss
Unescape View File

@ -20,7 +20,11 @@
// Cards with table-views
// --------------------------------------------------
.card .table-view {
margin: 0;
border-top: 0;
border-bottom: 0;
}
.card .table-view li:last-child {
border: 0;
}

2
lib/sass/forms.scss
Unescape View File

@ -31,7 +31,7 @@ input[type="color"],
.input-group {
width: 100%;
height: 35px;
padding: 0 10px;
padding: 0 15px;
margin-bottom: 10px;
line-height: $line-height-default;
background-color: #fff;

4
lib/sass/table-views.scss
Unescape View File

@ -4,9 +4,11 @@
.table-view {
padding: 0;
margin: 0;
margin: 0 0 20px 0;
list-style: none; // Remove usual bullet styles from table view
background-color: #fff;
border-top: $border-default;
border-bottom: $border-default;
// Pad each table view item and add dividers
.table-view-cell {

11
lib/sass/theme-ios.scss
Unescape View File

@ -287,9 +287,13 @@ p {
// --------------------------------------------------
.table-view {
border-top: 0;
border-bottom: 0;
@include hairline(double, #c8c7cc, 0); // Double grey border.
.table-view-cell {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
@include hairline(single, #c8c7cc, 0); // Single grey border.
// Remove the border from the last table view item
&:last-child {
@ -327,7 +331,8 @@ input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2);
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
}
// Rounded search input
@ -351,6 +356,8 @@ textarea,
// -------------------------------------------------------------------
.input-group {
padding: 0;
border: 0;
@include hairline(double, #c8c7cc, 0); // Double grey border.
}
.input-group input {
border: 0;

Write Preview
Loading…
Cancel
Save