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

add and android app example

pull/253/head
connors 11 years ago
parent
47f3e03085
commit
b5e695a3ea
7 changed files with 165 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      dist/android-theme.css
  2. 5
      docs-assets/css/docs.css
  3. 5
      examples/app-android-notes/css/app.css
  4. 152
      examples/app-android-notes/index.html
  5. 1
      examples/app-movies/choose-theater.html
  6. 1
      examples/app-movies/index.html
  7. 3
      lib/sass/theme-android.scss

5
dist/android-theme.css vendored
Unescape View File

@ -449,7 +449,7 @@ textarea,
width: 50px; width: 50px;
height: 24px; height: 24px;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 0; border-radius: 2px;
background-color: #bebebe; background-color: #bebebe;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
} }
@ -461,10 +461,11 @@ textarea,
color: #fff; color: #fff;
} }
.toggle.active { .toggle.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7; background-color: #d7d7d7;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
margin-right: 2px; right: 2px;
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);

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

@ -1599,7 +1599,7 @@ hr {
width: 50px; width: 50px;
height: 24px; height: 24px;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 0; border-radius: 2px;
background-color: #bebebe; background-color: #bebebe;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
} }
@ -1611,10 +1611,11 @@ hr {
color: #fff; color: #fff;
} }
.platform-android .toggle.active { .platform-android .toggle.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7; background-color: #d7d7d7;
} }
.platform-android .toggle.active .toggle-handle { .platform-android .toggle.active .toggle-handle {
margin-right: 2px; right: 2px;
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);

5
examples/app-android-notes/css/app.css
Unescape View File

@ -0,0 +1,5 @@
.slider,
.slider img {
margin-bottom: 0;
height: 150px;
}

152
examples/app-android-notes/index.html
Unescape View File

@ -0,0 +1,152 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<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="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/android-theme.css">
<link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script>
<!-- Roboto -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-compose pull-right" href="#composeModal" ></a>
<h1 class="title">
Notes
</h1>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</a>
</li>
<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 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 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 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 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 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 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="composeModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#composeModal"></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>
<div class="container">
<a class="btn btn-positive btn-block">Save settings</a>
</div>
</div>
</div>
</body>
</html>

1
examples/app-movies/choose-theater.html
Unescape View File

@ -8,7 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/ratchet.css"> <link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ios-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>
</head> </head>

1
examples/app-movies/index.html
Unescape View File

@ -8,7 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../dist/ratchet.css"> <link rel="stylesheet" href="../../dist/ratchet.css">
<link rel="stylesheet" href="../../dist/ios-theme.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="../../dist/ratchet.js"></script> <script src="../../dist/ratchet.js"></script>
</head> </head>

3
lib/sass/theme-android.scss
Unescape View File

@ -631,7 +631,7 @@ textarea,
width: 50px; width: 50px;
height: 24px; height: 24px;
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
border-radius: 0; border-radius: 2px;
background-color: #bebebe; background-color: #bebebe;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1);
} }
@ -645,6 +645,7 @@ textarea,
// Active state for toggle // Active state for toggle
&.active { &.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7; background-color: #d7d7d7;
.toggle-handle { .toggle-handle {

Write Preview
Loading…
Cancel
Save