Skip to content
This repository was archived by the owner on Jan 4, 2021. It is now read-only.

Commit fd5d2fa

Browse files
RomainCscnRomainCscn
committed
[DEV] Improve examples page
1 parent 41a3f4c commit fd5d2fa

File tree

2 files changed

+102
-62
lines changed

2 files changed

+102
-62
lines changed

‎examples/examples.css

+1-4
Original file line numberDiff line numberDiff line change
@@ -299,10 +299,6 @@ select:focus {
299299
}
300300
}
301301

302-
.example-section {
303-
background: #f5f5f5;
304-
}
305-
306302
.example-section h1 {
307303
font-size: 36px;
308304
line-height: 48px;
@@ -347,6 +343,7 @@ select:focus {
347343
}
348344

349345
.example-section .notice {
346+
width: fit-content;
350347
padding: 12px 24px 12px 54px;
351348
margin-bottom: 24px;
352349
font-weight: 600;

‎examples/index.html

+101-58
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,18 @@
1111
<title>MyScriptJS: Examples</title>
1212

1313
<link rel="stylesheet" href="examples.css">
14+
15+
<style>
16+
.title {
17+
color: initial !important;
18+
}
19+
h2 {
20+
border-bottom: 1px solid #eaecef;
21+
margin-top: 24px;
22+
margin-bottom: 16px;
23+
}
24+
</style>
25+
1426
</head>
1527

1628
<body>
@@ -35,12 +47,20 @@
3547
fill="currentColor" fill-rule="evenodd"></path>
3648
</symbol>
3749
</svg>
38-
<div class="index-background">
50+
<div>
3951
<section class="example-section">
4052
<h1>MyScriptJS examples</h1>
53+
<h2>Table of contents</h2>
54+
<ul>
55+
<li><a href="#v4-ws">V4 - iink SDK Web with WebSockets</a></li>
56+
<li><a href="#non-specific">Non version specific</a></li>
57+
<li><a href="#v3">V3 - CDK v3.2</a></li>
58+
<li><a href="#experimental">Experimental</a></li>
59+
<li><a href="#development">Development</a></li>
60+
</ul>
61+
<h2><a class="title" name="v4-ws">V4 - iink SDK web (WebSockets)</a></h2>
4162
<div class="grid-wrapper">
4263
<div class="grid-column-one">
43-
<h2>V4 - iink SDK web</h2>
4464
<p><strong>TEXT with iink SDK web (with Smart Guide)</strong></p>
4565
<div class="center">
4666
<a href="v4/websocket_text_iink.html" class="btn">
@@ -54,151 +74,160 @@ <h2>V4 - iink SDK web</h2>
5474
</svg>
5575
Get source code</a>
5676
</div>
57-
<p><strong>TEXT with iink SDK web (without Smart Guide)</strong></p>
77+
<p><strong>MATH with iink SDK web</strong></p>
5878
<div class="center">
59-
<a href="v4/websocket_text_iink_no_smartguide.html" class="btn">
79+
<a href="v4/websocket_math_iink.html" class="btn">
6080
<svg class="icn">
6181
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
6282
</svg>
6383
View example</a>
64-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/websocket_text_iink_no_smartguide.html" class="btn">
84+
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/websocket_math_iink.html" class="btn">
6585
<svg class="icn">
6686
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
6787
</svg>
6888
Get source code</a>
6989
</div>
70-
<p><strong>MATH with iink SDK web</strong></p>
90+
<p><strong>Disable guides</strong></p>
7191
<div class="center">
72-
<a href="v4/websocket_math_iink.html" class="btn">
92+
<a href="v4/websocket_text_iink_no_guides.html" class="btn">
7393
<svg class="icn">
7494
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
7595
</svg>
7696
View example</a>
77-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/websocket_math_iink.html" class="btn">
97+
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/websocket_text_iink_no_guides.html"
98+
class="btn">
7899
<svg class="icn">
79100
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
80101
</svg>
81102
Get source code</a>
82103
</div>
83-
<p><strong>Interact with iink SDK web</strong></p>
104+
<p><strong>Custom resource text</strong></p>
84105
<div class="center">
85-
<a href="v4/interact.html" class="btn">
106+
<a href="v4/custom_resources_text.html" class="btn">
86107
<svg class="icn">
87108
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
88109
</svg>
89110
View example</a>
90-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/interact.html" class="btn">
111+
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/custom_resources_text.html"
112+
class="btn">
91113
<svg class="icn">
92114
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
93115
</svg>
94116
Get source code</a>
95117
</div>
96-
<p><strong>Customize the style and change the font</strong></p>
118+
<p><strong>Import content</strong></p>
97119
<div class="center">
98-
<a href="v4/customize_style.html" class="btn">
120+
<a href="v4/import_content.html" class="btn">
99121
<svg class="icn">
100122
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
101123
</svg>
102124
View example</a>
103-
<a
104-
href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/customize_style.html"
105-
class="btn">
125+
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/import_content.html" class="btn">
106126
<svg class="icn">
107127
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
108128
</svg>
109129
Get source code</a>
110130
</div>
111-
<p><strong>Use multiple inputs fields</strong></p>
131+
<p><strong>Pointer events</strong></p>
112132
<div class="center">
113-
<a href="v4/multiple_inputs.html" class="btn">
133+
<a href="v4/pointer_events.html" class="btn">
114134
<svg class="icn">
115135
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
116136
</svg>
117137
View example</a>
118-
<a
119-
href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/multiple_inputs.html"
120-
class="btn">
138+
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/pointer_events.html" class="btn">
121139
<svg class="icn">
122140
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
123141
</svg>
124142
Get source code</a>
125143
</div>
126-
<p><strong>Disable guides</strong></p>
144+
</div>
145+
<div class="grid-column-two">
146+
<p><strong>TEXT with iink SDK web (without Smart Guide)</strong></p>
127147
<div class="center">
128-
<a href="v4/websocket_text_iink_no_guides.html" class="btn">
148+
<a href="v4/websocket_text_iink_no_smartguide.html" class="btn">
129149
<svg class="icn">
130150
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
131151
</svg>
132152
View example</a>
133-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/websocket_text_iink_no_guides.html" class="btn">
153+
<a
154+
href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/websocket_text_iink_no_smartguide.html"
155+
class="btn">
134156
<svg class="icn">
135157
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
136158
</svg>
137159
Get source code</a>
138160
</div>
139-
<p><strong>Custom resource text</strong></p>
161+
<p><strong>Interact with iink SDK web</strong></p>
140162
<div class="center">
141-
<a href="v4/custom_resources_text.html" class="btn">
163+
<a href="v4/interact.html" class="btn">
142164
<svg class="icn">
143165
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
144166
</svg>
145167
View example</a>
146-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/custom_resources_text.html" class="btn">
168+
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/interact.html" class="btn">
147169
<svg class="icn">
148170
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
149171
</svg>
150172
Get source code</a>
151173
</div>
152-
<p><strong>Custom resource math</strong></p>
174+
<p><strong>Customize the style and change the font</strong></p>
153175
<div class="center">
154-
<a href="v4/custom_resources_math.html" class="btn">
176+
<a href="v4/customize_style.html" class="btn">
155177
<svg class="icn">
156178
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
157179
</svg>
158180
View example</a>
159-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/custom_resources_math.html" class="btn">
181+
<a
182+
href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/customize_style.html"
183+
class="btn">
160184
<svg class="icn">
161185
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
162186
</svg>
163187
Get source code</a>
164188
</div>
165-
<p><strong>Import content</strong></p>
189+
<p><strong>Custom resource math</strong></p>
166190
<div class="center">
167-
<a href="v4/import_content.html" class="btn">
191+
<a href="v4/custom_resources_math.html" class="btn">
168192
<svg class="icn">
169193
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
170194
</svg>
171195
View example</a>
172-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/import_content.html" class="btn">
196+
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/custom_resources_math.html"
197+
class="btn">
173198
<svg class="icn">
174199
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
175200
</svg>
176201
Get source code</a>
177202
</div>
178-
<p><strong>Pointer events</strong></p>
203+
<p><strong>Use multiple inputs fields</strong></p>
179204
<div class="center">
180-
<a href="v4/pointer_events.html" class="btn">
205+
<a href="v4/multiple_inputs.html" class="btn">
181206
<svg class="icn">
182207
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
183208
</svg>
184209
View example</a>
185-
<a href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/pointer_events.html" class="btn">
210+
<a
211+
href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/multiple_inputs.html"
212+
class="btn">
186213
<svg class="icn">
187214
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
188215
</svg>
189216
Get source code</a>
190217
</div>
191218
</div>
192-
<div class="grid-column-two">
193-
<h2>Non version specific features</h2>
194-
<div class="notice notice-info">
195-
<svg class="icn icn-info">
196-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-info"></use>
197-
</svg>
198-
<div class="notice-txt">
199-
Demonstration of features not depending of API version configured.
200-
</div>
201-
</div>
219+
</div>
220+
<h2><a class="title" name="non-specific">Non version specific features</a></h2>
221+
<div class="notice notice-info">
222+
<svg class="icn icn-info">
223+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-info"></use>
224+
</svg>
225+
<div class="notice-txt">
226+
Demonstration of features not depending of API version configured.
227+
</div>
228+
</div>
229+
<div class="grid-wrapper">
230+
<div class="grid-column-one">
202231
<p><strong>Handle errors</strong></p>
203232
<div class="center">
204233
<a href="non-version-specific/handle_errors.html" class="btn">
@@ -228,6 +257,8 @@ <h2>Non version specific features</h2>
228257
</svg>
229258
Get source code</a>
230259
</div>
260+
</div>
261+
<div class="grid-column-two">
231262
<p><strong>Change the language</strong></p>
232263
<div class="center">
233264
<a href="non-version-specific/change_language.html" class="btn">
@@ -243,7 +274,11 @@ <h2>Non version specific features</h2>
243274
</svg>
244275
Get source code</a>
245276
</div>
246-
<h2>V3 - CDK v3.2</h2>
277+
</div>
278+
</div>
279+
<h2><a class="title" name="v3">V3 - CDK v3.2</a></h2>
280+
<div class="grid-wrapper">
281+
<div class="grid-column-one">
247282
<p><strong>MATH with CDK 3.2 WebSockets</strong></p>
248283
<div class="center">
249284
<a href="v3/websocket_math.html" class="btn">
@@ -274,6 +309,8 @@ <h2>V3 - CDK v3.2</h2>
274309
</svg>
275310
Get source code</a>
276311
</div>
312+
</div>
313+
<div class="grid-column-two">
277314
<p><strong>MATH with CDK 3.2 REST/HTTP</strong></p>
278315
<div class="center">
279316
<a href="v3/rest_math.html" class="btn">
@@ -306,9 +343,9 @@ <h2>V3 - CDK v3.2</h2>
306343
</div>
307344
</div>
308345
</div>
346+
<h2><a class="title" name="development">Development</a></h2>
309347
<div class="grid-wrapper">
310348
<div class="grid-column-one">
311-
<h2>Development</h2>
312349
<p><strong>Development UI - All features, could be slow</strong></p>
313350
<div class="center">
314351
<a href="dev/dev.html" class="btn">
@@ -339,6 +376,8 @@ <h2>Development</h2>
339376
</svg>
340377
Get source code</a>
341378
</div>
379+
</div>
380+
<div class="grid-column-two">
342381
<p><strong>Configuring debug traces</strong></p>
343382
<div class="center">
344383
<a href="dev/debug.html" class="btn">
@@ -355,16 +394,18 @@ <h2>Development</h2>
355394
Get source code</a>
356395
</div>
357396
</div>
358-
<div class="grid-column-two">
359-
<h2>Experimental</h2>
360-
<div class="notice notice-warning">
361-
<svg class="icn icn-warning">
362-
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-info"></use>
363-
</svg>
364-
<div class="notice-txt">
365-
Demonstration of existing technology still limited. May not work. Contact us if you are willing to use it.
366-
</div>
367-
</div>
397+
</div>
398+
<h2><a class="title" name="experimental">Experimental</a></h2>
399+
<div class="notice notice-warning">
400+
<svg class="icn icn-warning">
401+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-info"></use>
402+
</svg>
403+
<div class="notice-txt">
404+
Demonstration of existing technology still limited. May not work. Contact us if you are willing to use it.
405+
</div>
406+
</div>
407+
<div class="grid-wrapper">
408+
<div class="grid-column-one">
368409
<p><strong>GRAPHICS with iink SDK web</strong></p>
369410
<div class="center">
370411
<a href="experimental/websocket_diagram_iink.html" class="btn">
@@ -411,6 +452,8 @@ <h2>Experimental</h2>
411452
</svg>
412453
Get source code</a>
413454
</div>
455+
</div>
456+
<div class="grid-column-two">
414457
<p><strong>MUSIC with CDK 3.2 WebSockets</strong></p>
415458
<div class="center">
416459
<a href="experimental/rest_music_cdk32.html" class="btn">

0 commit comments

Comments
 (0)