@jaisocx/css-table-ordered 2.2.4 → 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.
Files changed (9) hide show
  1. package/README.md +11 -3
  2. package/css_table_ordered.example.html +1927 -0
  3. package/css_table_ordered.jaisocx_folder_listing.example.html +1927 -0
  4. package/css_table_ordered_3_records.example.html +1928 -0
  5. package/index.example.html +68 -23
  6. package/package.json +7 -6
  7. package/webpack.aliases.json +1 -2
  8. package/index.example_3_records.html +0 -537
  9. package/jaisocx-folder-listing-preview.html +0 -1883
package/index.example.html CHANGED
@@ -2,30 +2,60 @@
2
2
  <html lang="en" class="jsx theme_visible_height">
3
3
  <head>
4
4
 
5
- <title>js orderby and sticky scroll</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
 
13
+
14
+ <!--# FAVICON -->
11
15
  <!-- <link
12
16
  rel="icon"
13
17
  type="image/x-icon"
14
- href="favicon/Icon_Jaisocx.ico"
15
- href-fallback="/favicon.ico"
18
+ href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Jaisocx.ico"
19
+ href-fallback="favicon/Icon_Jaisocx.ico"
16
20
  onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
17
21
  /> -->
18
22
 
19
23
  <link
20
24
  rel="icon"
21
25
  type="image/x-icon"
22
- href="favicon/sandbox_brightday.ico"
23
- href-fallback="/favicon.ico"
26
+ href="https://sandbox.brightday.email/cdn/www/media/images/favicon/Icon_Sandbox_Brightday.ico"
27
+ href-fallback="favicon/Icon_Sandbox_Brightday.ico"
24
28
  onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
25
29
  />
26
30
 
27
31
 
28
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
+
29
59
  <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
30
60
 
31
61
  <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
@@ -33,8 +63,8 @@
33
63
  rel="stylesheet"
34
64
  type="text/css"
35
65
  charset="utf-8"
36
- href="node_modules/@jaisocx/css-table/MediaAndStyles/CssTable_main_relative.css"
37
- href-fallback="../css-table/MediaAndStyles/CssTable_main_relative.css"
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"
38
68
  onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
39
69
  /> -->
40
70
 
@@ -43,15 +73,14 @@
43
73
  rel="stylesheet"
44
74
  type="text/css"
45
75
  charset="utf-8"
46
- href="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
47
- href-fallback="../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_resolved_minimal.css"
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"
48
78
  onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
49
79
  />
50
80
 
51
81
 
52
82
 
53
83
 
54
-
55
84
  <!--# CSS TABLE: css FOR THE SERVER SIDE PRODUCED TABLE MARKUP -->
56
85
 
57
86
  <!--# importing @jaisocx/css-table IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB -->
@@ -59,8 +88,8 @@
59
88
  rel="stylesheet"
60
89
  type="text/css"
61
90
  charset="utf-8"
62
- href="node_modules/@jaisocx/css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
63
- href-fallback="./../css-clean-start-2/MediaAndStyles/CssCleanStart_2_main_relative.css"
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"
64
93
  onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
65
94
  /> -->
66
95
 
@@ -69,15 +98,13 @@
69
98
  rel="stylesheet"
70
99
  type="text/css"
71
100
  charset="utf-8"
72
- href="node_modules/@jaisocx/css-table/MediaAndStyles/CssTable_main_resolved_minimal.css"
73
- href-fallback="../css-table/MediaAndStyles/CssTable_main_resolved_minimal.css"
101
+ href="../css-table/MediaAndStyles/CssTable_main_resolved_minimal.css"
102
+ href-fallback="node_modules/@jaisocx/css-table/MediaAndStyles/CssTable_main_resolved_minimal.css"
74
103
  onerror="javascript: ( () => { console.log( this ); this.onerror = null; this.href = this.getAttribute( 'href-fallback' ); } )();"
75
104
  />
76
105
 
77
106
 
78
107
 
79
-
80
-
81
108
  <!--# CSS TABLE STICKY SCROLL-->
82
109
  <!--# importing theme in this @jaisocx/css-table-ordered npm package for the table first line columns labels sticky scroll -->
83
110
  <link
@@ -100,16 +127,26 @@
100
127
 
101
128
 
102
129
 
103
-
104
130
  <style>
105
131
 
106
132
  .jsx {
133
+ --jsx--css-clean-start-2--site--padding: 2rem 1rem 3rem 1rem;
134
+
107
135
  --jsx--css-clean-start-2--h1--font-size: 1.05rem;
108
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;
109
140
 
110
141
  --theme-button-width: fit-content;
111
142
  }
112
143
 
144
+ @media screen and (orientation: portrait) {
145
+ .jsx description {
146
+ display: none;
147
+ }
148
+ }
149
+
113
150
  .jsx themebuttons {
114
151
  width: fit-content;
115
152
  display: grid;
@@ -153,8 +190,15 @@
153
190
 
154
191
  <content>
155
192
 
156
- <h1>js orderby and sticky scroll</h1>
157
- <h2>@jaisocx/css-table-ordered</h1>
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
+
158
202
 
159
203
  <ThemeButtons>
160
204
  <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
@@ -165,11 +209,10 @@
165
209
  </content>
166
210
 
167
211
 
212
+
168
213
  <!--starts markup of the table styled by @jaisocx/css-table-ordered npm package-->
169
- <!--@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-->
170
214
  <div class="jsx-css-table-holder jaisocx-folder-listing-columns theme_fixed_columns_labels theme_imaged theme_imaged_base">
171
215
  <div class="jsx-css-table desktop-columns-labels-holder">
172
-
173
216
  <!--the first table record with the names of the table columns, shown in the table bright mode-->
174
217
  <div class="row">
175
218
 
@@ -412,7 +455,7 @@
412
455
  <div class="cell name string video_mp4 ">
413
456
  <span class="column-label">Name</span>
414
457
  <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
415
- <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>
416
459
  </div>
417
460
 
418
461
  <div class="cell mimeType string video_mp4 table-thin-field-hide-mobile ">
@@ -550,7 +593,7 @@
550
593
  <div class="cell size number text_plain table-thin-field-hide-mobile ">
551
594
  <span class="column-label">size</span>
552
595
  <span class="cell-mini-image"><span class="in-cell-mini-image"></span></span>
553
- <span class="cell-value">12</span>
596
+ <span class="cell-value">11</span>
554
597
  </div>
555
598
 
556
599
  <div class="cell fileLastModifiedTimestampFormatted string text_plain table-thin-field-hide-mobile ">
@@ -1760,9 +1803,11 @@
1760
1803
 
1761
1804
 
1762
1805
  <script src="transpiled/Simple/scroll/CssTableScroll.js"></script>
1806
+
1763
1807
  <script src="transpiled/Simple/orderby/CssTableOrderby.js"></script>
1764
1808
 
1765
1809
 
1810
+
1766
1811
  <script>
1767
1812
 
1768
1813
  let currentButtonNodeClicked = null;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@jaisocx/css-table-ordered",
3
- "version": "2.2.4",
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
- "index.example_3_records.html",
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.4",
49
- "@jaisocx/css-table": "~3.2.9"
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
- "@CssTable_MediaAndStyles": "${packageRoot}/node_modules/@jaisocx/css-table/MediaAndStyles/",
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