Merge branch 'example' into develop

jdm · Nov 16, 2011 · 79eef97 · 79eef97
2 parents d6879a4 + 4ea64fa
commit 79eef97
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 26 deletions.
diff --git a/example/index.html b/example/index.html
@@ -2,16 +2,20 @@
 <html>
 	<head>
 		<title>IndexedDB Wrapper Examples</title>
+		<link rel="stylesheet" type="text/css" href="style.css">
 	</head>
 	<body>
-		<h1>IndexedDB Wrapper Examples</h1>
-		<p>
-			There are a couple of examples to try out / look at:
-		</p>
-		<ul>
-			<li><a href="quicktest/">Quicktest</a> – Just a quick test to see if IDB opens and fool around in the console.</li>
-			<li><a href="basic/">Basic CRUD</a> – A basic CRUD example using an IDB store as fixed table.</li>
-			<li><a href="objectstore/">ObjectStore</a> – An example to show the difference between a table and an object store.</li>
-		</ul>
+		<div id="head">IDBWrapper Examples</div>
+		<div class="container">
+			<h1>IDBWrapper Examples</h1>
+			<p>
+				There are a couple of examples to try out / look at:
+			</p>
+			<ul>
+				<li><a href="quicktest/">Quicktest</a> – Just a quick test to see if IDB opens and fool around in the console.</li>
+				<li><a href="basic/">Basic CRUD</a> – A basic CRUD example using an IDB store as fixed table.</li>
+				<li><a href="objectstore/">ObjectStore</a> – An example to show the difference between a table and an object store.</li>
+			</ul>
+		</div>
 	</body>
 </html>
diff --git a/example/quicktest/index.html b/example/quicktest/index.html
@@ -1,24 +1,28 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title>IndexedDB Wrapper</title>
+		<title>IndexedDB Wrapper Quick Test</title>
+		<link rel="stylesheet" type="text/css" href="style.css">
 	</head>
-	<body onload="onload();">
-		<p>Open the console and click 'Open DB'. You will then see a bunch of buttons that allow data manipulation. Click them, and check the console for results.</p>
-		<p id="openWrapper" style="display: none;">
-			<button onclick="createStore_1_1()">Open DB</button>
-		</p>
-		<p id="dataWrapper" style="display: none;">
-			<button onclick="testWrite()">put</button>
-			<br />
-			<button onclick="testRead()">get</button>
-			<br />
-			<button onclick="testGetAll()">getAll</button>
-			<br />
-			<button onclick="testRemove()">remove</button>
-			<br />
-			<button onclick="testClear()">clear</button>
-		</p>
+	<body class="vbox" onload="onload();">
+		<div id="head">IDBWrapper Quick Test</div>
+		<div class="container">
+			<p>Open the console and click 'Open DB'. You will then see a bunch of buttons that allow data manipulation. Click them, and check the console for results.</p>
+			<p id="openWrapper" style="display: none;">
+				<button onclick="createStore_1_1()">Open DB</button>
+			</p>
+			<p id="dataWrapper" style="display: none;">
+				<button onclick="testWrite()">put</button>
+				<br />
+				<button onclick="testRead()">get</button>
+				<br />
+				<button onclick="testGetAll()">getAll</button>
+				<br />
+				<button onclick="testRemove()">remove</button>
+				<br />
+				<button onclick="testClear()">clear</button>
+			</p>
+		</div>
 
 		<script type="text/javascript" src="../../IDBStore.js"></script>
 		<script type="text/javascript">

diff --git a/example/quicktest/style.css b/example/quicktest/style.css
@@ -0,0 +1,88 @@
+html {
+	width: 100%;
+	height: 100%;
+}
+body {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	font-family: sans-serif;
+}
+a {
+	color: black;
+	text-decoration: none;
+}
+
+/* box setup */
+.vbox {
+	display: -webkit-box;
+	display: -moz-box;
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+}
+.hbox {
+	display: -webkit-box;
+	display: -moz-box;
+	-webkit-box-orient: horizontal;
+	-moz-box-orient: horizontal;
+}
+.flex {
+	-webkit-box-flex: 1;
+	-moz-box-flex: 1;
+}
+.container {
+	overflow: auto;
+	padding: 10px;
+}
+
+/* head */
+#head {
+	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
+	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
+	padding: 10px;
+	border-bottom: solid 1px #9E9E9E;
+}
+
+/* table */
+#results-container {
+	border-right: solid 1px black;
+	padding: 10px;
+	overflow: auto;
+}
+#results-container table {
+	border-collapse: collapse;
+}
+#results-container th {
+	border-bottom: solid 1px #808080;
+}
+#results-container th,
+#results-container td {
+	padding: 2px 5px;
+	font-size: 14px;
+}
+#results-container input {
+	border: none;
+	border-bottom: solid 1px white;
+	font-size: 14px;
+}
+#results-container input:hover,
+#results-container input:active {
+	border-bottom: dotted 1px black;
+}
+
+/* input */
+#input {
+	padding: 10px;
+	width: 300px;
+}
+#input div {
+	padding: 5px;
+}
+#input label {
+	display: inline-block;
+	width: 100px;
+}
+
+#clear {
+	padding: 10px;
+}
diff --git a/example/style.css b/example/style.css
@@ -0,0 +1,87 @@
+html {
+	width: 100%;
+	height: 100%;
+}
+body {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	font-family: sans-serif;
+}
+a {
+	color: black;
+}
+
+/* box setup */
+.vbox {
+	display: -webkit-box;
+	display: -moz-box;
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+}
+.hbox {
+	display: -webkit-box;
+	display: -moz-box;
+	-webkit-box-orient: horizontal;
+	-moz-box-orient: horizontal;
+}
+.flex {
+	-webkit-box-flex: 1;
+	-moz-box-flex: 1;
+}
+.container {
+	overflow: auto;
+	padding: 10px;
+}
+
+/* head */
+#head {
+	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
+	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
+	padding: 10px;
+	border-bottom: solid 1px #9E9E9E;
+}
+
+/* table */
+#results-container {
+	border-right: solid 1px black;
+	padding: 10px;
+	overflow: auto;
+}
+#results-container table {
+	border-collapse: collapse;
+}
+#results-container th {
+	border-bottom: solid 1px #808080;
+}
+#results-container th,
+#results-container td {
+	padding: 2px 5px;
+	font-size: 14px;
+}
+#results-container input {
+	border: none;
+	border-bottom: solid 1px white;
+	font-size: 14px;
+}
+#results-container input:hover,
+#results-container input:active {
+	border-bottom: dotted 1px black;
+}
+
+/* input */
+#input {
+	padding: 10px;
+	width: 300px;
+}
+#input div {
+	padding: 5px;
+}
+#input label {
+	display: inline-block;
+	width: 100px;
+}
+
+#clear {
+	padding: 10px;
+}