Skip to content

Commit 9dbc0f5

Browse files
frankpaganfrankpagan
committed
fix: format demo html
1 parent d0456ae commit 9dbc0f5

File tree

2 files changed

+227
-79
lines changed

2 files changed

+227
-79
lines changed

‎demo/index.html

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link
8+
rel="icon"
9+
href="https://cdn.cocreate.app/favicon.ico"
10+
type="image/ico"
11+
sizes="16x16" />
12+
<title>lazy-loader | CoCreateJS</title>
13+
<link rel="manifest" href="/manifest.webmanifest" />
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
9-
<title>lazy-loader | CoCreateJS</title>
10-
<link rel="manifest" href="/manifest.webmanifest">
11-
</head>
12-
13-
<body>
14-
15-
16-
17-
<!--<script src="https://cdn.cocreate.app/lazy-loader/latest/CoCreate-lazy-loader.min.js"></script>-->
18-
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
19-
20-
</body>
21-
16+
<body>
17+
<!--<script src="https://cdn.cocreate.app/lazy-loader/latest/CoCreate-lazy-loader.min.js"></script>-->
18+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
19+
</body>
2220
</html>

‎docs/index.html

Lines changed: 211 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,254 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>CoCreate-lazy-loader Documentation | CoCreateJS </title>
8-
<link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
9-
<meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
10-
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>CoCreate-lazy-loader Documentation | CoCreateJS</title>
8+
<link
9+
rel="icon"
10+
type="image/png"
11+
sizes="32x32"
12+
href="https://cocreate.app/images/favicon.ico" />
13+
<meta
14+
name="description"
15+
content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
16+
<meta
17+
name="keywords"
18+
content="helper classes, utility classes, css framework, css library, inline style classes" />
1119
<meta name="robots" content="index,follow" />
12-
20+
1321
<!-- CoCreate CSS CDN -->
14-
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
15-
16-
<link rel="manifest" href="/manifest.webmanifest" />
17-
</head>
22+
<link
23+
rel="stylesheet"
24+
href="https://cdn.cocreate.app/latest/CoCreate.min.css"
25+
type="text/css" />
26+
27+
<link rel="manifest" href="/manifest.webmanifest" />
28+
</head>
1829

1930
<body>
2031
<div collection="" document_id="" name="" id="cocreate-lazy-loader">
21-
<div class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
32+
<div
33+
class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
2234
<div class="display:flex align-items:center">
2335
<h2>CoCreate-lazy-loader</h2>
2436
</div>
25-
<div class="display:flex align-items:center font-size:20px" share-height="600" share-width="500" share-media="https://via.placeholder.com/300/09f/fff.png">
26-
<a href="https://github.com/CoCreate-app/CoCreate-lazy-loader" target="_blank" class="margin-right:15px"><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
27-
<a class="margin-right:15px share" share-network="twitter" title="Share on twitter"><i class="height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a>
28-
<a class="margin-right:15px share" share-network="facebook" title="Share on Facebook"><i class="height:20px fill:#505050" src="/assets/svg/facebook.svg"></i></a>
29-
<a class="margin-right:15px share" share-network="instagram" title="Share on instagram"><i class="height:20px fill:#505050" src="/assets/svg/instagram.svg"></i></a>
30-
<a class="margin-right:15px share" share-network="share" title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
37+
<div
38+
class="display:flex align-items:center font-size:20px"
39+
share-height="600"
40+
share-width="500"
41+
share-media="https://via.placeholder.com/300/09f/fff.png">
42+
<a
43+
href="https://github.com/CoCreate-app/CoCreate-lazy-loader"
44+
target="_blank"
45+
class="margin-right:15px"
46+
><i
47+
class="height:20px fill:#505050"
48+
src="/assets/svg/github.svg"></i
49+
></a>
50+
<a
51+
class="margin-right:15px share"
52+
share-network="twitter"
53+
title="Share on twitter"
54+
><i
55+
class="height:20px fill:#505050"
56+
src="/assets/svg/twitter.svg"></i
57+
></a>
58+
<a
59+
class="margin-right:15px share"
60+
share-network="facebook"
61+
title="Share on Facebook"
62+
><i
63+
class="height:20px fill:#505050"
64+
src="/assets/svg/facebook.svg"></i
65+
></a>
66+
<a
67+
class="margin-right:15px share"
68+
share-network="instagram"
69+
title="Share on instagram"
70+
><i
71+
class="height:20px fill:#505050"
72+
src="/assets/svg/instagram.svg"></i
73+
></a>
74+
<a
75+
class="margin-right:15px share"
76+
share-network="share"
77+
title="Share on share"
78+
><i
79+
class="height:20px fill:#505050"
80+
src="/assets/svg/share-alt.svg"></i
81+
></a>
3182
</div>
3283
</div>
33-
<h1 class="max-width:500px margin:20px_10px">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</h1>
84+
<h1 class="max-width:500px margin:20px_10px">
85+
A simple HTML5, CSS and pure javascript component. Easy
86+
configuration using data-attributes and highly styleable.
87+
</h1>
3488
<div id="lazy-loader-section" class="display:flex flex-wrap:wrap">
3589
<div class="flex-grow:1 width:300px padding:20px_10px">
36-
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Install</h2>
37-
<pre class="margin-top:15px"><code class="language-javascript">npm install cocreate-lazy-loader</code></pre>
90+
<h2
91+
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
92+
Install
93+
</h2>
94+
<pre
95+
class="margin-top:15px"><code class="language-javascript">npm install cocreate-lazy-loader</code></pre>
3896
<p class="padding:10px_0px">Or you can use cdn link:</p>
3997
<pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-lazy-loader.min.js</code></pre>
40-
41-
<h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Usage</h2>
98+
99+
<h2
100+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
101+
Usage
102+
</h2>
42103
<p class="padding:10px_0px">lazy-loader usage content</p>
43104
<pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
44-
45-
<h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Reference</h2>
46-
<p class="padding:10px_0px">This is lazy-loader reference content</p>
105+
106+
<h2
107+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
108+
Reference
109+
</h2>
110+
<p class="padding:10px_0px">
111+
This is lazy-loader reference content
112+
</p>
47113
<pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
48-
<p class="padding:10px_0px">This is lazy-loader reference content</p>
114+
<p class="padding:10px_0px">
115+
This is lazy-loader reference content
116+
</p>
49117

50-
<h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Attributes</h2>
51-
<ul class="list-style-type:none ">
52-
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
53-
<h4><span>lazy-loader</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
118+
<h2
119+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
120+
Attributes
121+
</h2>
122+
<ul class="list-style-type:none">
123+
<li
124+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
125+
<h4>
126+
<span>lazy-loader</span>
127+
<span class="cocreate-badge success"
128+
>string</span
129+
>
130+
<span class="cocreate-badge warning"
131+
>optional</span
132+
>
133+
</h4>
54134
<p>lazy-loader-attribute</p>
55135
</li>
56-
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
57-
<h4><span>lazy-loader</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
136+
<li
137+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
138+
<h4>
139+
<span>lazy-loader</span>
140+
<span class="cocreate-badge success"
141+
>string</span
142+
>
143+
<span class="cocreate-badge warning"
144+
>optional</span
145+
>
146+
</h4>
58147
<p>lazy-loader-attribute</p>
59148
</li>
60149
</ul>
61150
</div>
62-
63-
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
151+
152+
<div
153+
class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
64154
<!-- SandBox -->
65-
<h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
66-
<div class="position:sticky top:0 padding:10px_0px height:100vh">
155+
<h2
156+
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
157+
Demo
158+
</h2>
159+
<div
160+
class="position:sticky top:0 padding:10px_0px height:100vh">
67161
<!-- SandBox -->
68-
<div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
69-
70-
<div id="demo-code" resizable class="position:relative height:50%">
71-
<textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
72-
<div resize="bottom" class="background:lightgrey"></div>
162+
<div
163+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
164+
id="playground">
165+
<div
166+
id="demo-code"
167+
resizable
168+
class="position:relative height:50%">
169+
<textarea
170+
type="code"
171+
lang="html"
172+
collection="demos"
173+
document_id=""
174+
name="demo"
175+
save="false"
176+
id="demo"
177+
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
178+
<div
179+
resize="bottom"
180+
class="background:lightgrey"></div>
73181
</div>
74-
75-
<div id="demo-preview" class="position:relative overflow:auto background-color:white">
182+
183+
<div
184+
id="demo-preview"
185+
class="position:relative overflow:auto background-color:white">
76186
<div class="demopreview padding:20px"></div>
77187
</div>
78-
79-
<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
80-
<a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
81-
<a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
82-
<a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
83-
<a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
84-
<a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
188+
189+
<div
190+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
191+
<a
192+
class="margin-right:10px"
193+
id="eye"
194+
show="#eye-slash"
195+
hide="#eye, #demo-preview"
196+
toggle="code-height"
197+
toggle-target="#demo-code"
198+
><i
199+
class="height:18px fill:#505050"
200+
src="/assets/svg/eye.svg"></i
201+
></a>
202+
<a
203+
class="margin-right:10px"
204+
hidden
205+
id="eye-slash"
206+
show="#eye, #demo-preview"
207+
hide="#eye-slash"
208+
toggle="code-height"
209+
toggle-target="#demo-code"
210+
><i
211+
class="height:20px fill:#505050"
212+
src="/assets/svg/eye-slash.svg"></i
213+
></a>
214+
<a
215+
class="margin-right:10px"
216+
id="code"
217+
show="#code-slash"
218+
hide="#code, #demo-code"
219+
><i
220+
class="height:20px fill:#505050"
221+
src="/assets/svg/code.svg"></i
222+
></a>
223+
<a
224+
class="margin-right:10px"
225+
hidden
226+
id="code-slash"
227+
show="#code, #demo-code"
228+
hide="#code-slash"
229+
><i
230+
class="display:flex height:18px fill:#505050"
231+
src="/assets/svg/code.svg"></i
232+
></a>
233+
<a
234+
class="margin-right:5px"
235+
fullscreen
236+
fullscreen-target="#playground"></a>
85237
</div>
86-
87238
</div>
88239
<!-- End SandBox -->
89-
</div>
240+
</div>
90241
</div>
91-
92-
</div>
242+
</div>
93243
</div>
94244
<script>
95245
var CoCreateConfig = {
96-
key: '2061acef-0451-4545-f754-60cf8160',
97-
organization_id: '5ff747727005da1c272740ab'
98-
}
246+
key: "2061acef-0451-4545-f754-60cf8160",
247+
organization_id: "5ff747727005da1c272740ab",
248+
};
99249
</script>
100-
250+
101251
<!--CoCreateJS-->
102252
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
103253
</body>
104-
</html>
254+
</html>

0 commit comments

Comments
 (0)