Browse Source

fixing up some example pages

pull/253/head
connors 11 years ago
parent
commit
c0b11bdc61
  1. 6
      components.html
  2. 10
      dist/ratchet.css
  3. 6
      lib/sass/bars.scss
  4. 13
      one.html
  5. 13
      two.html

6
components.html

@ -1123,8 +1123,7 @@ document
<div class="card"> <div class="card">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a href="{{ page.base_url }}two.html" data-transition="slide-in"> <a class="push-right" href="{{ page.base_url }}two.html" data-transition="slide-in">
<span class="icon icon-right pull-right"></span>
Load new page with push Load new page with push
</a> </a>
</li> </li>
@ -1141,8 +1140,7 @@ document
<div class="card"> <div class="card">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a href="{{ page.base_url }}two.html" data-transition="slide-in"> <a class="push-right" href="{{ page.base_url }}two.html" data-transition="slide-in">
<span class="icon icon-right pull-right"></span>
Load new page with push Load new page with push
</a> </a>
</li> </li>

10
dist/ratchet.css vendored

@ -556,7 +556,7 @@ input[type="button"] {
.bar-nav .btn { .bar-nav .btn {
position: relative; position: relative;
z-index: 10; z-index: 20;
padding: 6px 12px; padding: 6px 12px;
margin-top: 8px; margin-top: 8px;
font-weight: 400; font-weight: 400;
@ -612,14 +612,16 @@ input[type="button"] {
margin: 0 auto; margin: 0 auto;
} }
.bar .icon { .bar > .icon {
position: relative;
z-index: 20;
font-size: 24px; font-size: 24px;
margin-top: 11px; margin-top: 11px;
} }
.bar .icon.pull-left { .bar > .icon.pull-left {
margin-left: -3px; margin-left: -3px;
} }
.bar .icon.pull-right { .bar > .icon.pull-right {
margin-right: -3px; margin-right: -3px;
} }

6
lib/sass/bars.scss

@ -139,7 +139,7 @@
.bar-nav .btn { .bar-nav .btn {
position: relative; position: relative;
z-index: 10; // Position the buttons on top of .title z-index: 20; // Position the buttons on top of .title
padding: 6px 12px; padding: 6px 12px;
margin-top: 8px; margin-top: 8px;
font-weight: $font-weight-light; font-weight: $font-weight-light;
@ -221,7 +221,9 @@
// Nav bars with Ratchicons // Nav bars with Ratchicons
// -------------------------------------------------- // --------------------------------------------------
.bar .icon { .bar > .icon {
position: relative;
z-index: 20; // Position the buttons on top of .title
font-size: 24px; font-size: 24px;
margin-top: 11px; margin-top: 11px;

13
one.html

@ -10,27 +10,18 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<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="css/docs.css">
<link rel="stylesheet" href="css/prettify.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
.iphone [class*="bar"] {
position: absolute;
}
</style>
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png"> <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
</head> </head>
<body ontouchstart=""> <body ontouchstart="">
<header class="bar-nav"> <header class="bar bar-nav">
<h1 class="title">Push</h1> <h1 class="title">Push</h1>
</header> </header>
<div class="content"> <div class="content">
<div class="card"> <div class="card">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a href="two.html" data-transition="slide-in" data-selector=".iphone-content"> <a class="push-right" href="two.html" data-transition="slide-in" data-selector=".device-content">
<span class="icon icon-right pull-right"></span>
Load new page with push Load new page with push
</a> </a>
</li> </li>

13
two.html

@ -10,20 +10,13 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<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="css/docs.css">
<link rel="stylesheet" href="css/prettify.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
.iphone [class*="bar"] {
position: absolute;
}
</style>
<link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png"> <link rel="apple-touch-icon-precomposed" sizes="512x512" href="img/apple-touch-icon-512x512.png">
</head> </head>
<body ontouchstart=""> <body ontouchstart="">
<header class="bar-nav"> <header class="bar bar-nav">
<h1 class="title">Push</h1> <a class="icon icon-lg-left pull-left" href="one.html" data-transition="slide-out"></a>
<h1 class="title">Page two</h1>
</header> </header>
<div class="content"> <div class="content">
<div class="card"> <div class="card">

Loading…
Cancel
Save