Skip to content

Commit 4f9c017

Browse files
ConradSollittConradSollitt
committed
📄 Example Updates
1 parent f7f6d58 commit 4f9c017

19 files changed

Lines changed: 304 additions & 303 deletions

‎examples/css/countries.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,19 @@ body {
77
a { color:navy; }
88
nav { display: flex; align-items: center; }
99
nav a { display:inline-block; margin-right:20px; }
10-
nav a:last-child { margin-right:0; }
11-
nav .download { margin-left: 20px; }
10+
nav .download { margin-right: 20px; }
11+
nav a:last-child,
12+
nav .download:last-child { margin-right:0; }
1213
nav img.download {
13-
filter:drop-shadow(0 1px 1px gray);
14+
filter: drop-shadow(0 1px 1px gray);
1415
transition: transform ease-in-out 300ms;
1516
}
16-
nav img.download:hover { transform: translate(0, -2px); }
17+
nav img.download:hover { transform: translate(0, -2px); }
18+
.download-links,
19+
[data-template-id="download-links"] {
20+
display: flex;
21+
align-items: center;
22+
}
1723
[data-export-csv-selector],
1824
[data-export-excel-selector] { cursor: pointer; }
1925
input,
@@ -174,6 +180,7 @@ table tbody tr.highlight td:first-child {background-color: yellow; }
174180

175181
.align-right { text-align:right; }
176182
.error { padding:1em; background-color:red; color:white; }
183+
.ml-20 { margin-left: 20px; }
177184

178185
.place-screen {
179186
display: flex;

‎examples/html/cities-hbs.htm‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,7 @@ <h1>{{i18n 'Largest Cities in'}} {{country}}, {{region}}</h1>
66
<nav>
77
<a href="#/{{i18n_Locale}}/">{{i18n 'Countries'}}</a>
88
<a href="#/{{i18n_Locale}}/regions/{{country}}">{{i18n 'Regions'}}</a>
9-
<span class="download">{{i18n 'Download'}}</span>
10-
<img class="download"
11-
src="img/Excel.svg"
12-
height="16"
13-
width="16"
14-
alt="{{i18n 'Download to Excel'}}"
15-
title="{{i18n 'Download to Excel'}}"
16-
data-export-excel-selector="table"
17-
data-export-file-name="{{i18n 'Cities'}}.xlsx">
18-
<img class="download"
19-
src="img/CSV.svg"
20-
height="16"
21-
width="16"
22-
alt="{{i18n 'Download to CSV'}}"
23-
title="{{i18n 'Download to CSV'}}"
24-
data-export-csv-selector="table"
25-
data-export-file-name="{{i18n 'Cities'}}.csv">
9+
<div class="ml-20" data-template-id="download-links" data-file-name="Cities"></div>
2610
</nav>
2711

2812
<input data-filter-selector="table" placeholder="{{i18n 'Enter filter'}}">

‎examples/html/cities-js.htm‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,27 @@ <h1><span data-i18n="Largest Cities in"></span> <span data-bind="country"></span
66
<nav>
77
<a href="#/en/" data-i18n="Countries" data-i18n-href></a>
88
<a href="#/[window.i18n_Locale]/regions/[country]" data-i18n="Regions" data-bind-attr="href"></a>
9-
<span class="download" data-i18n="Download"></span>
10-
<img class="download"
11-
src="img/Excel.svg"
12-
height="16"
13-
width="16"
14-
alt="Download to Excel"
15-
title="Download to Excel"
16-
data-export-excel-selector="table"
17-
data-export-file-name="[[Cities]].xlsx"
18-
data-i18n-attr="alt, title, data-export-file-name">
19-
<img class="download"
20-
src="img/CSV.svg"
21-
height="16"
22-
width="16"
23-
alt="Download to CSV"
24-
title="Download to CSV"
25-
data-export-csv-selector="table"
26-
data-export-file-name="[[Cities]].csv"
27-
data-i18n-attr="alt, title, data-export-file-name">
9+
<div class="download-links ml-20">
10+
<span class="download" data-i18n="Download"></span>
11+
<img class="download"
12+
src="img/Excel.svg"
13+
height="16"
14+
width="16"
15+
alt="Download to Excel"
16+
title="Download to Excel"
17+
data-export-excel-selector="table"
18+
data-export-file-name="[[Cities]].xlsx"
19+
data-i18n-attr="alt, title, data-export-file-name">
20+
<img class="download"
21+
src="img/CSV.svg"
22+
height="16"
23+
width="16"
24+
alt="Download to CSV"
25+
title="Download to CSV"
26+
data-export-csv-selector="table"
27+
data-export-file-name="[[Cities]].csv"
28+
data-i18n-attr="alt, title, data-export-file-name">
29+
</div>
2830
</nav>
2931

3032
<input data-filter-selector="table" placeholder="Enter filter" data-i18n-attr="placeholder">

‎examples/html/cities-vue.htm‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,27 @@ <h1><span v-i18n="'Largest Cities in'"></span> {{ country }}, {{ region }}</h1>
66
<nav>
77
<a v-bind:href="'#/' + i18n_Locale + '/'" v-i18n="'Countries'"></a>
88
<a v-bind:href="'#/' + i18n_Locale + '/regions/' + country" v-i18n="'Regions'"></a>
9-
<span class="download" v-i18n="'Download'"></span>
10-
<img class="download"
11-
src="img/Excel.svg"
12-
height="16"
13-
width="16"
14-
alt="Download to Excel"
15-
title="Download to Excel"
16-
data-export-excel-selector="table"
17-
data-export-file-name="[[Cities]].xlsx"
18-
v-i18n-attr="'alt, title, data-export-file-name'">
19-
<img class="download"
20-
src="img/CSV.svg"
21-
height="16"
22-
width="16"
23-
alt="Download to CSV"
24-
title="Download to CSV"
25-
data-export-csv-selector="table"
26-
data-export-file-name="[[Cities]].csv"
27-
v-i18n-attr="'alt, title, data-export-file-name'">
9+
<div class="download-links ml-20">
10+
<span class="download" v-i18n="'Download'"></span>
11+
<img class="download"
12+
src="img/Excel.svg"
13+
height="16"
14+
width="16"
15+
alt="Download to Excel"
16+
title="Download to Excel"
17+
data-export-excel-selector="table"
18+
data-export-file-name="[[Cities]].xlsx"
19+
v-i18n-attr="'alt, title, data-export-file-name'">
20+
<img class="download"
21+
src="img/CSV.svg"
22+
height="16"
23+
width="16"
24+
alt="Download to CSV"
25+
title="Download to CSV"
26+
data-export-csv-selector="table"
27+
data-export-file-name="[[Cities]].csv"
28+
v-i18n-attr="'alt, title, data-export-file-name'">
29+
</div>
2830
</nav>
2931

3032
<input data-filter-selector="table" placeholder="Enter filter" v-i18n-attr="'placeholder'">

‎examples/html/cities-web.htm‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,27 @@ <h1><span data-i18n="Largest Cities in"></span> <span url-param="country"></span
33
<nav>
44
<a href="#/en/" data-i18n="Countries" data-i18n-href></a>
55
<a href="#/[window.i18n_Locale]/regions/[country]" data-i18n="Regions" url-attr-param="href"></a>
6-
<span class="download" data-i18n="Download"></span>
7-
<img class="download"
8-
src="img/Excel.svg"
9-
height="16"
10-
width="16"
11-
alt="Download to Excel"
12-
title="Download to Excel"
13-
data-export-excel-selector="table"
14-
data-export-file-name="[[Cities]].xlsx"
15-
data-i18n-attr="alt, title, data-export-file-name">
16-
<img class="download"
17-
src="img/CSV.svg"
18-
height="16"
19-
width="16"
20-
alt="Download to CSV"
21-
title="Download to CSV"
22-
data-export-csv-selector="table"
23-
data-export-file-name="[[Cities]].csv"
24-
data-i18n-attr="alt, title, data-export-file-name">
6+
<div class="download-links ml-20">
7+
<span class="download" data-i18n="Download"></span>
8+
<img class="download"
9+
src="img/Excel.svg"
10+
height="16"
11+
width="16"
12+
alt="Download to Excel"
13+
title="Download to Excel"
14+
data-export-excel-selector="table"
15+
data-export-file-name="[[Cities]].xlsx"
16+
data-i18n-attr="alt, title, data-export-file-name">
17+
<img class="download"
18+
src="img/CSV.svg"
19+
height="16"
20+
width="16"
21+
alt="Download to CSV"
22+
title="Download to CSV"
23+
data-export-csv-selector="table"
24+
data-export-file-name="[[Cities]].csv"
25+
data-i18n-attr="alt, title, data-export-file-name">
26+
</div>
2527
</nav>
2628

2729
<json-data url="{rootApiUrl}/cities/:country/:region" url-params load-only-once>

‎examples/html/countries-hbs.htm‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,7 @@ <h1>{{i18n 'Countries'}}</h1>
66
<nav>
77
<a href="#/{{i18n_Locale}}/search">{{i18n 'Search'}}</a>
88
<a href="#/{{i18n_Locale}}/info">{{i18n 'Info'}}</a>
9-
<span class="download">{{i18n 'Download'}}</span>
10-
<img class="download"
11-
src="img/Excel.svg"
12-
height="16"
13-
width="16"
14-
alt="{{i18n 'Download to Excel'}}"
15-
title="{{i18n 'Download to Excel'}}"
16-
data-export-excel-selector="table"
17-
data-export-file-name="{{i18n 'Countries'}}.xlsx">
18-
<img class="download"
19-
src="img/CSV.svg"
20-
height="16"
21-
width="16"
22-
alt="{{i18n 'Download to CSV'}}"
23-
title="{{i18n 'Download to CSV'}}"
24-
data-export-csv-selector="table"
25-
data-export-file-name="{{i18n 'Countries'}}.csv">
9+
<div class="ml-20" data-template-id="download-links" data-file-name="Countries"></div>
2610
</nav>
2711

2812
<input

‎examples/html/regions-hbs.htm‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,7 @@ <h1></h1>
55

66
<nav>
77
<a href="#/{{i18n_Locale}}/">{{i18n 'Countries'}}</a>
8-
<span class="download">{{i18n 'Download'}}</span>
9-
<img class="download"
10-
src="img/Excel.svg"
11-
height="16"
12-
width="16"
13-
alt="{{i18n 'Download to Excel'}}"
14-
title="{{i18n 'Download to Excel'}}"
15-
data-export-excel-selector="table"
16-
data-export-file-name="{{i18n 'Regions'}}.xlsx">
17-
<img class="download"
18-
src="img/CSV.svg"
19-
height="16"
20-
width="16"
21-
alt="{{i18n 'Download to CSV'}}"
22-
title="{{i18n 'Download to CSV'}}"
23-
data-export-csv-selector="table"
24-
data-export-file-name="{{i18n 'Regions'}}.csv">
8+
<div class="ml-20" data-template-id="download-links" data-file-name="Regions"></div>
259
</nav>
2610

2711
<input

‎examples/html/regions-js.htm‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,27 @@ <h1></h1>
55

66
<nav>
77
<a href="#/en/" data-i18n="Countries" data-i18n-href></a>
8-
<span class="download" data-i18n="Download"></span>
9-
<img class="download"
10-
src="img/Excel.svg"
11-
height="16"
12-
width="16"
13-
alt="Download to Excel"
14-
title="Download to Excel"
15-
data-export-excel-selector="table"
16-
data-export-file-name="[[Regions]].xlsx"
17-
data-i18n-attr="alt, title, data-export-file-name">
18-
<img class="download"
19-
src="img/CSV.svg"
20-
height="16"
21-
width="16"
22-
alt="Download to CSV"
23-
title="Download to CSV"
24-
data-export-csv-selector="table"
25-
data-export-file-name="[[Regions]].csv"
26-
data-i18n-attr="alt, title, data-export-file-name">
8+
<div class="download-links ml-20">
9+
<span class="download" data-i18n="Download"></span>
10+
<img class="download"
11+
src="img/Excel.svg"
12+
height="16"
13+
width="16"
14+
alt="Download to Excel"
15+
title="Download to Excel"
16+
data-export-excel-selector="table"
17+
data-export-file-name="[[Regions]].xlsx"
18+
data-i18n-attr="alt, title, data-export-file-name">
19+
<img class="download"
20+
src="img/CSV.svg"
21+
height="16"
22+
width="16"
23+
alt="Download to CSV"
24+
title="Download to CSV"
25+
data-export-csv-selector="table"
26+
data-export-file-name="[[Regions]].csv"
27+
data-i18n-attr="alt, title, data-export-file-name">
28+
</div>
2729
</nav>
2830

2931
<input

‎examples/html/regions-vue.htm‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,27 @@ <h1></h1>
55

66
<nav>
77
<a v-bind:href="'#/' + i18n_Locale + '/'" v-i18n="'Countries'"></a>
8-
<span class="download" v-i18n="'Download'"></span>
9-
<img class="download"
10-
src="img/Excel.svg"
11-
height="16"
12-
width="16"
13-
alt="Download to Excel"
14-
title="Download to Excel"
15-
data-export-excel-selector="table"
16-
data-export-file-name="[[Regions]].xlsx"
17-
v-i18n-attr="'alt, title, data-export-file-name'">
18-
<img class="download"
19-
src="img/CSV.svg"
20-
height="16"
21-
width="16"
22-
alt="Download to CSV"
23-
title="Download to CSV"
24-
data-export-csv-selector="table"
25-
data-export-file-name="[[Regions]].csv"
26-
v-i18n-attr="'alt, title, data-export-file-name'">
8+
<div class="download-links ml-20">
9+
<span class="download" v-i18n="'Download'"></span>
10+
<img class="download"
11+
src="img/Excel.svg"
12+
height="16"
13+
width="16"
14+
alt="Download to Excel"
15+
title="Download to Excel"
16+
data-export-excel-selector="table"
17+
data-export-file-name="[[Regions]].xlsx"
18+
v-i18n-attr="'alt, title, data-export-file-name'">
19+
<img class="download"
20+
src="img/CSV.svg"
21+
height="16"
22+
width="16"
23+
alt="Download to CSV"
24+
title="Download to CSV"
25+
data-export-csv-selector="table"
26+
data-export-file-name="[[Regions]].csv"
27+
v-i18n-attr="'alt, title, data-export-file-name'">
28+
</div>
2729
</nav>
2830

2931
<input data-filter-selector="table"

‎examples/html/regions-web.htm‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,27 @@ <h1><span>Regions for Country Code</span> <span url-param="country"></span></h1>
22

33
<nav>
44
<a href="#/en/" data-i18n="Countries" data-i18n-href></a>
5-
<span class="download" data-i18n="Download"></span>
6-
<img class="download"
7-
src="img/Excel.svg"
8-
height="16"
9-
width="16"
10-
alt="Download to Excel"
11-
title="Download to Excel"
12-
data-export-excel-selector="table"
13-
data-export-file-name="[[Regions]].xlsx"
14-
data-i18n-attr="alt, title, data-export-file-name">
15-
<img class="download"
16-
src="img/CSV.svg"
17-
height="16"
18-
width="16"
19-
alt="Download to CSV"
20-
title="Download to CSV"
21-
data-export-csv-selector="table"
22-
data-export-file-name="[[Regions]].csv"
23-
data-i18n-attr="alt, title, data-export-file-name">
5+
<div class="download-links ml-20">
6+
<span class="download" data-i18n="Download"></span>
7+
<img class="download"
8+
src="img/Excel.svg"
9+
height="16"
10+
width="16"
11+
alt="Download to Excel"
12+
title="Download to Excel"
13+
data-export-excel-selector="table"
14+
data-export-file-name="[[Regions]].xlsx"
15+
data-i18n-attr="alt, title, data-export-file-name">
16+
<img class="download"
17+
src="img/CSV.svg"
18+
height="16"
19+
width="16"
20+
alt="Download to CSV"
21+
title="Download to CSV"
22+
data-export-csv-selector="table"
23+
data-export-file-name="[[Regions]].csv"
24+
data-i18n-attr="alt, title, data-export-file-name">
25+
</div>
2426
</nav>
2527

2628
<!--

0 commit comments

Comments
 (0)