@jaisocx/css-table-ordered 2.2.3 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -3
- package/css_table_ordered.example.html +1927 -0
- package/css_table_ordered.jaisocx_folder_listing.example.html +1927 -0
- package/css_table_ordered_3_records.example.html +1928 -0
- package/index.example.html +135 -13
- package/package.json +7 -6
- package/webpack.aliases.json +1 -2
- package/index.example_3_records.html +0 -457
- package/jaisocx-folder-listing-preview.html +0 -1825
package/index.example.html
CHANGED
|
@@ -2,37 +2,151 @@
|
|
|
2
2
|
<html lang="en" class="jsx theme_visible_height">
|
|
3
3
|
<head>
|
|
4
4
|
|
|
5
|
-
<title>
|
|
5
|
+
<title>Css Table Ordered</title>
|
|
6
|
+
|
|
7
|
+
<base href="./">
|
|
6
8
|
|
|
7
9
|
<meta charset="utf-8" />
|
|
8
10
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
9
11
|
|
|
10
12
|
|
|
11
13
|
|
|
14
|
+
<!--# FAVICON -->
|
|
15
|
+
<!-- <link
|
|
16
|
+
rel="icon"
|
|
17
|
+
type="image/x-icon"
|
|
18
|
+
href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
|
|
19
|
+
href-fallback="favicon/Icon_Jaisocx.ico"
|
|
20
|
+
onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
|
|
21
|
+
/> -->
|
|
22
|
+
|
|
23
|
+
<link
|
|
24
|
+
rel="icon"
|
|
25
|
+
type="image/x-icon"
|
|
26
|
+
href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
|
|
27
|
+
href-fallback="favicon/Icon_Sandbox_Brightday.ico"
|
|
28
|
+
onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
|
|
29
|
+
/>
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
|
|
34
|
+
<link
|
|
35
|
+
fetchpriority="high"
|
|
36
|
+
rel="preload"
|
|
37
|
+
as="font"
|
|
38
|
+
type="font/ttf"
|
|
39
|
+
href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
|
|
40
|
+
/>
|
|
41
|
+
|
|
42
|
+
<link
|
|
43
|
+
fetchpriority="high"
|
|
44
|
+
rel="preload"
|
|
45
|
+
as="font"
|
|
46
|
+
type="font/ttf"
|
|
47
|
+
href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
|
|
48
|
+
/>
|
|
49
|
+
|
|
50
|
+
<!--# CSS FOR FONTS -->
|
|
51
|
+
<link
|
|
52
|
+
rel="stylesheet"
|
|
53
|
+
type="text/css"
|
|
54
|
+
href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
|
|
55
|
+
/>
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
<!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
|
|
60
|
+
|
|
61
|
+
<!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
|
|
62
|
+
<!-- <link
|
|
63
|
+
rel="stylesheet"
|
|
64
|
+
type="text/css"
|
|
65
|
+
charset="utf-8"
|
|
66
|
+
href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
|
|
67
|
+
href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
|
|
68
|
+
onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
|
|
69
|
+
/> -->
|
|
70
|
+
|
|
71
|
+
<!--# THE SAME importing @jaisocx/css-clean-start-2 IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL -->
|
|
72
|
+
<link
|
|
73
|
+
rel="stylesheet"
|
|
74
|
+
type="text/css"
|
|
75
|
+
charset="utf-8"
|
|
76
|
+
href="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
|
|
77
|
+
href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
|
|
78
|
+
onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
|
|
79
|
+
/>
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
12
83
|
|
|
13
|
-
|
|
14
|
-
<link rel="stylesheet" href="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css" />
|
|
84
|
+
<!--# CSS TABLE: css FOR THE SERVER SIDE PRODUCED TABLE MARKUP -->
|
|
15
85
|
|
|
86
|
+
<!--# importing @jaisocx/css-table IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
|
|
87
|
+
<!-- <link
|
|
88
|
+
rel="stylesheet"
|
|
89
|
+
type="text/css"
|
|
90
|
+
charset="utf-8"
|
|
91
|
+
href="../css-table/MediaAndStyles/CssCleanStart_2_main_relative.css"
|
|
92
|
+
href-fallback="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
|
|
93
|
+
onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
|
|
94
|
+
/> -->
|
|
16
95
|
|
|
17
|
-
|
|
18
|
-
|
|
96
|
+
<!--# THE SAME importing @jaisocx/css-table IN PROD MODE, PACKED BY @jaisocx/css-importer TOOL -->
|
|
97
|
+
<link
|
|
98
|
+
rel="stylesheet"
|
|
99
|
+
type="text/css"
|
|
100
|
+
charset="utf-8"
|
|
101
|
+
href="../css-table/MediaAndStyles/CssTable_main_resolved_minimal.css"
|
|
102
|
+
href-fallback="node_modules/@jaisocx/css-table/MediaAndStyles/CssTable_main_resolved_minimal.css"
|
|
103
|
+
onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
|
|
104
|
+
/>
|
|
19
105
|
|
|
20
106
|
|
|
21
107
|
|
|
22
|
-
|
|
23
|
-
|
|
108
|
+
<!--# CSS TABLE STICKY SCROLL-->
|
|
109
|
+
<!--# importing theme in this @jaisocx/css-table-ordered npm package for the table first line columns labels sticky scroll -->
|
|
110
|
+
<link
|
|
111
|
+
rel="stylesheet"
|
|
112
|
+
type="text/css"
|
|
113
|
+
charset="utf-8"
|
|
114
|
+
href="MediaAndStyles/themes/theme_fixed_columns_labels/theme_fixed_columns_labels.css"
|
|
115
|
+
/>
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<!--# CSS TABLE MOBILE PORTRAIT FOLDER LISTING -->
|
|
120
|
+
<!--# importing theme in this @jaisocx/css-table-ordered npm package where mobile portrait fine-tuned for the folder listing view served by the Jaisocx Sites Server -->
|
|
121
|
+
<!-- <link
|
|
122
|
+
rel="stylesheet"
|
|
123
|
+
type="text/css"
|
|
124
|
+
charset="utf-8"
|
|
125
|
+
href="MediaAndStyles/themes/theme_jaisocx_folder_listing/CssTable_theme_jaisocx_folder_listing_Relative.css"
|
|
126
|
+
/> -->
|
|
24
127
|
|
|
25
128
|
|
|
26
129
|
|
|
27
130
|
<style>
|
|
28
131
|
|
|
29
132
|
.jsx {
|
|
133
|
+
--jsx--css-clean-start-2--site--padding: 2rem 1rem 3rem 1rem;
|
|
134
|
+
|
|
30
135
|
--jsx--css-clean-start-2--h1--font-size: 1.05rem;
|
|
31
136
|
--jsx--css-clean-start-2--h2--font-size: 0.9rem;
|
|
137
|
+
--jsx--css-clean-start-2--h3--font-size: 0.83rem;
|
|
138
|
+
|
|
139
|
+
--jsx--css-clean-start-2--h2--font-weight: 500;
|
|
32
140
|
|
|
33
141
|
--theme-button-width: fit-content;
|
|
34
142
|
}
|
|
35
143
|
|
|
144
|
+
@media screen and (orientation: portrait) {
|
|
145
|
+
.jsx description {
|
|
146
|
+
display: none;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
36
150
|
.jsx themebuttons {
|
|
37
151
|
width: fit-content;
|
|
38
152
|
display: grid;
|
|
@@ -76,8 +190,15 @@
|
|
|
76
190
|
|
|
77
191
|
<content>
|
|
78
192
|
|
|
79
|
-
<h1>
|
|
80
|
-
<h2>@jaisocx/css-table-ordered</
|
|
193
|
+
<h1>Css Table Ordered</h1>
|
|
194
|
+
<h2>@jaisocx/css-table-ordered</h2>
|
|
195
|
+
<h3>index.example.html</h3>
|
|
196
|
+
<description>
|
|
197
|
+
Css sites tool styling a server side rendered database table data to a grid view,
|
|
198
|
+
with solutions for sticky scroll and order by on columns via browser's js engine
|
|
199
|
+
</description>
|
|
200
|
+
|
|
201
|
+
|
|
81
202
|
|
|
82
203
|
<ThemeButtons>
|
|
83
204
|
<button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
|
|
@@ -88,11 +209,10 @@
|
|
|
88
209
|
</content>
|
|
89
210
|
|
|
90
211
|
|
|
212
|
+
|
|
91
213
|
<!--starts markup of the table styled by @jaisocx/css-table-ordered npm package-->
|
|
92
|
-
<!--@jaisocx/css-table-ordered extends @jaisocx/css-table having one js class to orderby records in the table, onevent click label of the table column-->
|
|
93
214
|
<div class="jsx-css-table-holder jaisocx-folder-listing-columns theme_fixed_columns_labels theme_imaged theme_imaged_base">
|
|
94
215
|
<div class="jsx-css-table desktop-columns-labels-holder">
|
|
95
|
-
|
|
96
216
|
<!--the first table record with the names of the table columns, shown in the table bright mode-->
|
|
97
217
|
<div class="row">
|
|
98
218
|
|
|
@@ -335,7 +455,7 @@
|
|
|
335
455
|
<div class="cell name string video_mp4 ">
|
|
336
456
|
<span class="column-label">Name</span>
|
|
337
457
|
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
338
|
-
<span class="cell-value"><a href="https://update-listing-secure.brightday.email:443/several_mime_types/video.mp4">video.mp4</a></span>
|
|
458
|
+
<span class="cell-value"><a href="https://update-listing-secure.brightday.email:443/several_mime_types/apply-video-elias.mp4">apply-video-elias.mp4</a></span>
|
|
339
459
|
</div>
|
|
340
460
|
|
|
341
461
|
<div class="cell mimeType string video_mp4 table-thin-field-hide-mobile ">
|
|
@@ -473,7 +593,7 @@
|
|
|
473
593
|
<div class="cell size number text_plain table-thin-field-hide-mobile ">
|
|
474
594
|
<span class="column-label">size</span>
|
|
475
595
|
<span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
|
|
476
|
-
<span class="cell-value">
|
|
596
|
+
<span class="cell-value">11</span>
|
|
477
597
|
</div>
|
|
478
598
|
|
|
479
599
|
<div class="cell fileLastModifiedTimestampFormatted string text_plain table-thin-field-hide-mobile ">
|
|
@@ -1683,9 +1803,11 @@
|
|
|
1683
1803
|
|
|
1684
1804
|
|
|
1685
1805
|
<script src="transpiled/Simple/scroll/CssTableScroll.js"></script>
|
|
1806
|
+
|
|
1686
1807
|
<script src="transpiled/Simple/orderby/CssTableOrderby.js"></script>
|
|
1687
1808
|
|
|
1688
1809
|
|
|
1810
|
+
|
|
1689
1811
|
<script>
|
|
1690
1812
|
|
|
1691
1813
|
let currentButtonNodeClicked = null;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jaisocx/css-table-ordered",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "2.3.1",
|
|
4
|
+
"description": "Css sites tool styling a server side rendered database table data to a grid view, with solutions for sticky scroll and order by on columns via browser's js engine",
|
|
5
5
|
"author": "Jaisocx",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"table",
|
|
@@ -11,9 +11,10 @@
|
|
|
11
11
|
"ui"
|
|
12
12
|
],
|
|
13
13
|
"files": [
|
|
14
|
-
"jaisocx-folder-listing-preview.html",
|
|
15
14
|
"index.example.html",
|
|
16
|
-
"
|
|
15
|
+
"css_table_ordered_3_records.example.html",
|
|
16
|
+
"css_table_ordered.example.html",
|
|
17
|
+
"css_table_ordered.jaisocx_folder_listing.example.html",
|
|
17
18
|
|
|
18
19
|
"MediaAndStyles/*.css",
|
|
19
20
|
"MediaAndStyles/themes",
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
}
|
|
46
47
|
},
|
|
47
48
|
"optionalDependencies": {
|
|
48
|
-
"@jaisocx/css-clean-start-2": "~1.1.
|
|
49
|
-
"@jaisocx/css-table": "~3.
|
|
49
|
+
"@jaisocx/css-clean-start-2": "~1.1.5",
|
|
50
|
+
"@jaisocx/css-table": "~3.3.1"
|
|
50
51
|
}
|
|
51
52
|
}
|
package/webpack.aliases.json
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"@CssTableOrdered_MediaAndStyles": "${packageRoot}/MediaAndStyles/",
|
|
3
|
-
"@
|
|
4
|
-
"@CssCleanStart_2_MediaAndStyles": "${packageRoot}/node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/"
|
|
3
|
+
"@cdn_sandbox_fonts/": "https://sandbox.brightday.email/cdn/www/fonts/"
|
|
5
4
|
}
|
|
6
5
|
|