Skip to content

Commit bda3ad1

Browse files
author
Schalk Neethling
authored
Merge pull request mdn#162 from mdn/import-indexeddb-examples
Import indexeddb examples
2 parents a76f61d + a02c5d4 commit bda3ad1

File tree

7 files changed

+302
-260
lines changed

7 files changed

+302
-260
lines changed

‎indexeddb-examples/idbcursor/index.html

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
1-
<!DOCTYPE HTML>
1+
<!DOCTYPE html>
22
<html lang="en-US">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=380">
6-
<title>Basic IDBCursor example — Rush studio albums 74-85</title>
7-
<link href="style/style.css" type="text/css" rel="stylesheet">
8-
</head>
9-
<body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=380" />
6+
<title>Basic IDBCursor example — Rush studio albums 74-85</title>
7+
<link href="style/style.css" type="text/css" rel="stylesheet" />
8+
</head>
9+
<body>
10+
<h1>Basic IDBCursor example — Rush studio albums 74-85</h1>
1011

11-
<h1>Basic IDBCursor example — Rush studio albums 74-85</h1>
12+
<ul></ul>
1213

13-
<ul></ul>
14-
15-
<button class="continue">Display all results</button>
16-
<button class="advance">Show every other result</button>
17-
<button class="delete">Kill Grace under pressure (it's not that great)</button>
18-
<button class="update">Update "A farewell.." year</button>
19-
<button class="direction">Display albums upsidedown</button>
20-
21-
</body>
22-
23-
<script src="scripts/main.js"></script>
14+
<button class="continue">Display all results</button>
15+
<button class="advance">Show every other result</button>
16+
<button class="delete">
17+
Kill Grace under pressure (it's not that great)
18+
</button>
19+
<button class="update">Update "A farewell.." year</button>
20+
<button class="direction">Display albums upsidedown</button>
21+
</body>
2422

23+
<script src="scripts/main.js"></script>
2524
</html>

‎indexeddb-examples/idbcursor/style/style.css

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
11
/* || basic set up + sizing for containers */
22

3-
html, body {
3+
html,
4+
body {
45
margin: 0;
56
font-family: sans-serif;
67
font-size: 100%/1.5 sans-serif;
78
}
89

910
html {
10-
background-color: rgb(200,30,30);
11+
background-color: rgb(200, 30, 30);
1112
}
1213

1314
body {
1415
max-width: 800px;
1516
margin: 0 auto;
1617
padding: 30px 0;
17-
background: linear-gradient(to bottom, rgba(255,255,255,0.3),rgba(255,255,255,0));
18+
background: linear-gradient(
19+
to bottom,
20+
rgba(255, 255, 255, 0.3),
21+
rgba(255, 255, 255, 0)
22+
);
1823
}
1924

2025
h1 {
2126
text-align: center;
2227
font-size: 2.5rem;
23-
text-shadow: 2px 2px 5px rgb(150,30,30);
28+
text-shadow: 2px 2px 5px rgb(150, 30, 30);
2429
}
2530

2631
ul {
27-
text-align: center;
28-
list-style-type: none;
32+
text-align: center;
33+
list-style-type: none;
2934
}
3035

3136
li {
3237
font-size: 2rem;
3338
padding-bottom: 1rem;
34-
color: rgb(255,255,255);
39+
color: rgb(255, 255, 255);
3540
}
3641

3742
li strong {
38-
color: black;
43+
color: black;
3944
}
40-

‎indexeddb-examples/idbindex/index.html

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,38 @@
1-
<!DOCTYPE HTML>
1+
<!DOCTYPE html>
22
<html lang="en-US">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Basic IDBIndex example — contacts directory</title>
6-
<link href='http://fonts.googleapis.com/css?family=Arvo|Bevan' rel='stylesheet' type='text/css'>
7-
<link href="style/style.css" type="text/css" rel="stylesheet">
8-
</head>
9-
<body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Basic IDBIndex example — contacts directory</title>
6+
<link
7+
href="http://fonts.googleapis.com/css?family=Arvo|Bevan"
8+
rel="stylesheet"
9+
type="text/css"
10+
/>
11+
<link href="style/style.css" type="text/css" rel="stylesheet" />
12+
</head>
13+
<body>
14+
<h1>Basic IDBIndex example — contacts directory</h1>
1015

11-
<h1>Basic IDBIndex example — contacts directory</h1>
16+
<table>
17+
<thead>
18+
<tr>
19+
<th>ID</th>
20+
<th>Last name</th>
21+
<th>First name</th>
22+
<th>Job title</th>
23+
<th>Company</th>
24+
<th>E-mail</th>
25+
<th>Phone</th>
26+
<th>Age</th>
27+
</tr>
28+
</thead>
29+
<tbody></tbody>
30+
</table>
1231

13-
<table>
14-
<thead>
15-
<tr>
16-
<th>ID</th>
17-
<th>Last name</th>
18-
<th>First name</th>
19-
<th>Job title</th>
20-
<th>Company</th>
21-
<th>E-mail</th>
22-
<th>Phone</th>
23-
<th>Age</th>
24-
</tr>
25-
</thead>
26-
<tbody>
27-
</tbody>
28-
</table>
29-
30-
<p>Click/focus each table column heading to sort the data by that column.</p>
31-
32-
</body>
33-
34-
<script src="scripts/main.js"></script>
32+
<p>
33+
Click/focus each table column heading to sort the data by that column.
34+
</p>
35+
</body>
3536

37+
<script src="scripts/main.js"></script>
3638
</html>

‎indexeddb-examples/idbindex/style/style.css

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1-
html, body {
1+
html,
2+
body {
23
margin: 0;
3-
font-family: 'Arvo', serif;
4+
font-family: "Arvo", serif;
45
font-size: 100%/1.5 serif;
56
}
67

78
h1 {
89
text-align: center;
9-
font-family: 'Bevan', cursive;
10+
font-family: "Bevan", cursive;
1011
font-size: 4rem;
1112
letter-spacing: 0.2rem;
12-
text-shadow: 1px 1px 1px #eee4fe,
13-
2px 2px 1px #eee4fe,
14-
3px 3px 1px #7b62ae,
15-
4px 4px 1px #7b62ae,
16-
5px 5px 1px #261758,
17-
6px 6px 1px #261758;
13+
text-shadow: 1px 1px 1px #eee4fe, 2px 2px 1px #eee4fe, 3px 3px 1px #7b62ae,
14+
4px 4px 1px #7b62ae, 5px 5px 1px #261758, 6px 6px 1px #261758;
1815
}
1916

2017
table {
@@ -23,10 +20,11 @@ table {
2320
letter-spacing: 0.1rem;
2421
margin: 0 auto;
2522
border-collapse: collapse;
26-
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
23+
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
2724
}
2825

29-
table,thead {
26+
table,
27+
thead {
3028
background: white;
3129
}
3230

@@ -42,13 +40,14 @@ th {
4240
font-size: 1.7rem;
4341
padding: 1.2rem;
4442
text-align: left;
45-
background: linear-gradient(to bottom,#261758,#666778);
43+
background: linear-gradient(to bottom, #261758, #666778);
4644
color: white;
4745
text-shadow: 1px 1px 1px black;
4846
cursor: pointer;
4947
}
5048

51-
th:hover, th:focus {
49+
th:hover,
50+
th:focus {
5251
color: #ddd;
5352
border: 0;
5453
}

0 commit comments

Comments
 (0)