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

add the mail example

pull/253/head
connors 11 years ago
parent
62b4f30914
commit
ccf8706a6b
7 changed files with 189 additions and 3 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. 7
      dist/ratchet.css
  2. 7
      docs/dist/ratchet.css
  3. 11
      docs/examples/app-ios-mail/css/app.css
  4. 61
      docs/examples/app-ios-mail/inbox.html
  5. 98
      docs/examples/app-ios-mail/index.html
  6. 3
      sass/forms.scss
  7. 5
      sass/table-views.scss

7
dist/ratchet.css vendored
Unescape View File

@ -780,6 +780,10 @@ input[type="button"] {
right: 35px; right: 35px;
} }
.content > .table-view:first-child {
margin-top: 15px;
}
input, input,
textarea, textarea,
button, button,
@ -849,7 +853,8 @@ select {
border-radius: 0; border-radius: 0;
} }
.input-group input { .input-group input,
.input-group textarea {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;

7
docs/dist/ratchet.css vendored
Unescape View File

@ -780,6 +780,10 @@ input[type="button"] {
right: 35px; right: 35px;
} }
.content > .table-view:first-child {
margin-top: 15px;
}
input, input,
textarea, textarea,
button, button,
@ -849,7 +853,8 @@ select {
border-radius: 0; border-radius: 0;
} }
.input-group input { .input-group input,
.input-group textarea {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;

11
docs/examples/app-ios-mail/css/app.css
Unescape View File

@ -0,0 +1,11 @@
.updated-text {
position: absolute;
left: 0;
right: 0;
padding: 10px 0;
text-align: center;
}
.table-view-cell .icon {
color: #007aff;
}

61
docs/examples/app-ios-mail/inbox.html
Unescape View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mail</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/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-left-nav pull-left" href="index.html" data-transition="slide-out"></a>
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">Mailboxes</h1>
</header>
<div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small>
</div>
<div class="content">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="#">
Argo
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</a>
</li>
</ul>
</div><!-- /.content -->
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="btn btn-link pull-right" href="#composeModal">
<strong>Send</strong>
</a>
<a class="btn btn-link pull-left" href="#composeModal">
Cancel
</a>
<h1 class="title">New message</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="To:">
<input type="email" placeholder="From:">
<input type="text" placeholder="Subject:">
<textarea rows="20"></textarea>
</form>
</div>
</div><!-- /.modal -->
</body>
</html>

98
docs/examples/app-ios-mail/index.html
Unescape View File

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mail</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/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-refresh pull-right"></a>
<h1 class="title">Mailboxes</h1>
</header>
<div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small>
</div>
<div class="content">
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-pages pull-left"></span>
<div class="media-body">
All inboxes
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-person pull-left"></span>
<div class="media-body">
Personal email
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-star-filled pull-left"></span>
<div class="media-body">
Starred
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-trash pull-left"></span>
<div class="media-body">
Trash
</div>
</a>
</li>
</ul>
<h5>Other accounts</h5>
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-home pull-left"></span>
<div class="media-body">
Home
</div>
</a>
</li>
</ul>
</div><!-- /.content -->
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="btn btn-link pull-right" href="#composeModal">
<strong>Send</strong>
</a>
<a class="btn btn-link pull-left" href="#composeModal">
Cancel
</a>
<h1 class="title">New message</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="To:">
<input type="email" placeholder="From:">
<input type="text" placeholder="Subject:">
<textarea rows="20"></textarea>
</form>
</div>
</div><!-- /.modal -->
</body>
</html>

3
sass/forms.scss
Unescape View File

@ -80,7 +80,8 @@ select {
} }
// Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input // Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
.input-group input { .input-group input,
.input-group textarea {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-bottom: $border-default; border-bottom: $border-default;

5
sass/table-views.scss
Unescape View File

@ -98,3 +98,8 @@
} }
} }
} }
// If the table view is the first component, give it extra margin on top.
.content > .table-view:first-child {
margin-top: 15px;
}

Write Preview
Loading…
Cancel
Save