Skip to content

Commit 8189651

Browse files
author
Parashuram
committed
Styled the Jquery IndexedDB Plugin Demo
1 parent ba2a286 commit 8189651

File tree

4 files changed

+228
-174
lines changed

4 files changed

+228
-174
lines changed

‎demo/index.html

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,40 @@
44
<title>IndexedDB Jquery Plugin</title>
55
<meta charset="utf-8">
66
</head>
7-
<body>
8-
<div style ="height : 80px; text-align: center; overflow : hidden" class = "title">
9-
<h1 style ="background-color: #ABCDEF; color: Navy; margin: 0; padding: 0.3em;">Jquery Plugin for IndexedDB - Examples</h1>
7+
<body style = " font-family: Helvetica Neue, Verdana, Helvetica, Arial; font-size:14px; background:#6788AD; background: -moz-linear-gradient(top, #496687 0%, #6889AE 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #496687), color-stop(100%, #6889AE) );">
8+
<div style = "width : 80%; margin : 0 auto; box-shadow: 0 0 20px #122F4B; ">
9+
<div style ="text-align: center; overflow : hidden" class = "title">
10+
<h1 style ="background-color: #122F4B; color: #ffffff; margin: 0; padding: 0.3em; font-weight:normal; font-family:Georgia, 'Times New Roman', Times">JQuery IndexedDB Plugin- API Demo</h1>
11+
</div>
12+
<div id = "examples" style = "background-color: white">
13+
</div>
14+
<script src="../lib/jquery.min.js" type="text/javascript">
15+
</script>
16+
<script src= "../jquery.indexeddb.js" type="text/javascript">
17+
</script>
18+
<script src = "../lib/demoer/demoer.js" type = "text/javascript">
19+
</script>
20+
<script src = "demo.js" type = "text/javascript">
21+
</script>
22+
<script>
23+
loadDemoes("#examples", jqueryIndexedDB_Test);
24+
</script>
25+
<script type="text/javascript">
26+
var _gaq = _gaq || [];
27+
_gaq.push(['_setAccount', 'UA-617499-9']);
28+
_gaq.push(['_setDomainName', 'github.com']);
29+
_gaq.push(['_setAllowLinker', true]);
30+
_gaq.push(['_trackPageview']);
31+
32+
(function(){
33+
var ga = document.createElement('script');
34+
ga.type = 'text/javascript';
35+
ga.async = true;
36+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
37+
var s = document.getElementsByTagName('script')[0];
38+
s.parentNode.insertBefore(ga, s);
39+
})();
40+
</script>
1041
</div>
11-
<br/>
12-
<br/>
13-
<div id = "examples" style ="padding : 1%;">
14-
</div>
15-
<script src="../lib/jquery.min.js" type="text/javascript">
16-
</script>
17-
<script src= "../jquery.indexeddb.js" type="text/javascript">
18-
</script>
19-
<script src = "../lib/demoer/demoer.js" type = "text/javascript">
20-
</script>
21-
<script src = "demo.js" type = "text/javascript">
22-
</script>
23-
<script>
24-
loadDemoes("#examples", jqueryIndexedDB_Test);
25-
</script>
26-
<script type="text/javascript">
27-
var _gaq = _gaq || [];
28-
_gaq.push(['_setAccount', 'UA-617499-9']);
29-
_gaq.push(['_setDomainName', 'github.com']);
30-
_gaq.push(['_setAllowLinker', true]);
31-
_gaq.push(['_trackPageview']);
32-
33-
(function(){
34-
var ga = document.createElement('script');
35-
ga.type = 'text/javascript';
36-
ga.async = true;
37-
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
38-
var s = document.getElementsByTagName('script')[0];
39-
s.parentNode.insertBefore(ga, s);
40-
})();
41-
</script>
4242
</body>
4343
</html>

‎lib/demoer/demoer.css

Lines changed: 147 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,147 @@
1-
body {
2-
margin: 0;
3-
padding: 0;
4-
font-family: Cambria, Times;
5-
}
6-
7-
.sample {
8-
display: none;
9-
}
10-
11-
.examples {
12-
margin: 0;
13-
padding: 0;
14-
}
15-
16-
.example-item {
17-
list-style: none;
18-
background-color: #FFFFFF;
19-
padding: 0.1em;
20-
margin: 0;
21-
cursor: pointer;
22-
}
23-
24-
.example-item .snippet {
25-
height: 0;
26-
opacity: 0;
27-
display: block;
28-
overflow: hidden;
29-
width: 98%;
30-
border: 0;
31-
-webkit-transition: all 0.2s ease-in-out;
32-
-moz-transition: all 0.2s ease-in-out;
33-
-o-transition: all 0.2s ease-in-out;
34-
}
35-
36-
.example-item .snippet .code {
37-
font-family: Monaco, Consolas, courier;
38-
font-size: 0.9em;
39-
background-color: #2A211C;
40-
color: #BDAE9D;
41-
width: 100%;
42-
padding: 0.3em 0;
43-
}
44-
45-
.floating-button {
46-
position: absolute;
47-
left: 94%;
48-
margin: 0.5em 0.5em 0 0;
49-
}
50-
51-
.example-title {
52-
text-decoration: none;
53-
color: black;
54-
padding: 0.1em;
55-
display: block;
56-
}
57-
58-
.example-item:hover {
59-
background-color: #FFFFCC;
60-
}
61-
62-
.example-item:target .example-name {
63-
background-color: #DFECFF;
64-
}
65-
66-
.example-item:target .code-linq, .example-item:target .code-full {
67-
height: auto;
68-
opacity: 1;
69-
padding: 0.3em 1em;
70-
margin: 0.1em 0.5em;
71-
}
72-
73-
.example-more-code {
74-
display: none;
75-
font-size: 0.8em;
76-
padding: 0.1em 0.5em;
77-
color: navy;
78-
float: right;
79-
}
80-
81-
.example-more-code:hover {
82-
text-decoration: underline;
83-
}
84-
85-
.example-item:target .example-more-code {
86-
display: inline;
87-
}
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: Cambria, Times;
5+
}
6+
7+
.sample {
8+
display: none;
9+
}
10+
11+
.examples {
12+
margin: 0;
13+
padding: 1%;
14+
}
15+
16+
.example-item {
17+
list-style: none;
18+
background-color: #FFFFFF;
19+
padding: 0.1em;
20+
margin: 0;
21+
cursor: pointer;
22+
}
23+
24+
.example-item .snippet {
25+
display: none;
26+
width: 100%;
27+
border: 0;
28+
-webkit-transition: all 0.2s ease-in-out;
29+
-moz-transition: all 0.2s ease-in-out;
30+
-o-transition: all 0.2s ease-in-out;
31+
}
32+
33+
.example-item .snippet .code {
34+
font-family: Monaco, Consolas, courier;
35+
font-size: 0.7em;
36+
background-color: #2A211C;
37+
color: #BDAE9D;
38+
width: 99%;
39+
height : 99%;
40+
padding : 0.5%;
41+
border: none;
42+
}
43+
44+
.example-title {
45+
text-decoration: none;
46+
color: black;
47+
padding: 0.1em;
48+
display: block;
49+
height : 100%;
50+
line-height : 20px;
51+
}
52+
53+
.example-item:hover {
54+
background-color: #FFFFCC;
55+
}
56+
57+
.example-item:target{
58+
margin-bottom : 1em;
59+
}
60+
61+
.example-item:target .example-name {
62+
background-color: #DFECFF;
63+
height : 40px;
64+
vertical-align : middle;
65+
}
66+
67+
.example-item:target .example-title {
68+
line-height : 40px;
69+
font-weight : bold;
70+
margin : 0 0em;
71+
}
72+
73+
74+
.example-item:target .code-linq, .example-item:target .code-full {
75+
height: 100px;
76+
display: block;
77+
padding: 0;
78+
margin: 0;
79+
}
80+
81+
.example-item:target .code-full{
82+
height : 200px;
83+
margin : 1em 0;
84+
}
85+
86+
.example-more-code, .floating-button {
87+
display: none;
88+
font-size: 0.8em;
89+
padding: 0.2em 0.5em;
90+
margin: 0.6em 0.5em;
91+
float: right;
92+
vertical-align : middle;
93+
}
94+
95+
.example-item:target .example-more-code, .example-item:target .floating-button {
96+
display: inline;
97+
}
98+
99+
/* blue pill (inspired by iTunes)
100+
*******************************************************************************/
101+
button.blue-pill {
102+
background-color: #a5b8da;
103+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3));
104+
background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
105+
background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
106+
background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
107+
background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
108+
background-image: linear-gradient(top, #a5b8da, #7089b3);
109+
border-top: 1px solid #758fba;
110+
border-right: 1px solid #6c84ab;
111+
border-bottom: 1px solid #5c6f91;
112+
border-left: 1px solid #6c84ab;
113+
-webkit-border-radius: 18px;
114+
-moz-border-radius: 18px;
115+
border-radius: 18px;
116+
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
117+
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
118+
box-shadow: inset 0 1px 0 0 #aec3e5;
119+
color: #fff;
120+
font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
121+
line-height: 1;
122+
padding: 8px 0;
123+
text-align: center;
124+
text-shadow: 0 -1px 1px #64799e;
125+
text-transform: uppercase;
126+
width: 150px; }
127+
button.blue-pill:hover {
128+
background-color: #9badcc;
129+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9badcc), color-stop(100%, #687fa6));
130+
background-image: -webkit-linear-gradient(top, #9badcc, #687fa6);
131+
background-image: -moz-linear-gradient(top, #9badcc, #687fa6);
132+
background-image: -ms-linear-gradient(top, #9badcc, #687fa6);
133+
background-image: -o-linear-gradient(top, #9badcc, #687fa6);
134+
background-image: linear-gradient(top, #9badcc, #687fa6);
135+
border-top: 1px solid #6d86ad;
136+
border-right: 1px solid #647a9e;
137+
border-bottom: 1px solid #546685;
138+
border-left: 1px solid #647a9e;
139+
-webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
140+
-moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
141+
box-shadow: inset 0 1px 0 0 #a5b9d9;
142+
cursor: pointer; }
143+
button.blue-pill:active {
144+
border: 1px solid #546685;
145+
-webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
146+
-moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
147+
box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }

‎lib/demoer/demoer.html

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
<ul class = "examples">
2-
<li class = "sample example-item" id = "__EXAMPLE__">
3-
<div class = "example-name">
4-
<a class = "example-more-code" href = "#__EXAMPLE__">[ Toggle Full IndexedDB Code ]</a>
5-
<a href = "#__EXAMPLE__" class = "example-title">__EXAMPLE__</a>
6-
</div>
7-
<div class = "snippet code-linq" style ="clear:both">
8-
<button class = "floating-button code-run">
9-
Run
10-
</button>
11-
<textarea class = "code" style ="height : auto">
12-
__EXAMPLE_CODE__
13-
</textarea>
14-
</div>
15-
<div class = "snippet code-full" style ="display:none">
16-
<button class ="floating-button code-run">
17-
Run
18-
</button>
19-
<textarea class = "code" style ="font-size : 0.7em; display : block; padding : 0.5em 1em; height : 20em">
20-
__EXAMPLE_ALTERNATE__
21-
</textarea>
22-
</div>
23-
</li>
24-
</ul>
1+
<ul class = "examples">
2+
<li class = "sample example-item" id = "__EXAMPLE__">
3+
<div class = "example-name">
4+
<button class = "blue-pill floating-button code-run">
5+
Run Example
6+
</button>
7+
<button class = "blue-pill example-more-code" href = "#__EXAMPLE__">Toggle Full Code</button>
8+
<a href = "#__EXAMPLE__" class = "example-title">__EXAMPLE__</a>
9+
</div>
10+
<div class = "snippet code-linq" style ="clear:both">
11+
12+
<textarea class = "code">
13+
__EXAMPLE_CODE__
14+
</textarea>
15+
</div>
16+
<div class = "snippet code-full" style ="display:none">
17+
<textarea class = "code">
18+
__EXAMPLE_ALTERNATE__
19+
</textarea>
20+
</div>
21+
</li>
22+
</ul>

0 commit comments

Comments
 (0)