jattac.libs.web.responsive-table 0.2.1 → 0.2.3
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 +626 -581
- package/dist/UI/ResponsiveTable.d.ts +4 -0
- package/dist/index.js +20 -3
- package/dist/index.js.map +1 -1
- package/gemini/project_memos.md +3 -0
- package/gemini/release_git_steps.md +79 -79
- package/package.json +1 -1
- package/src/Styles/ResponsiveTable.module.css +260 -253
- package/src/UI/ResponsiveTable.tsx +552 -532
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
## Release Git Steps
|
|
2
|
-
|
|
3
|
-
This document outlines the sequence of Git commands to perform at the end of every release cycle to ensure the `master` branch is up-to-date, tagged, and all changes are pushed to the remote repository.
|
|
4
|
-
|
|
5
|
-
**Prerequisites:**
|
|
6
|
-
- Ensure all development work for the release is complete and committed to the `develop` branch.
|
|
7
|
-
- Ensure you are on the `develop` branch (`git checkout develop`).
|
|
8
|
-
|
|
9
|
-
**Steps:**
|
|
10
|
-
|
|
11
|
-
1. **Stage all changes (if any uncommitted changes exist on `develop`):**
|
|
12
|
-
```bash
|
|
13
|
-
git add .
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
2. **Commit changes on `develop` (if not already done):**
|
|
17
|
-
```bash
|
|
18
|
-
git commit -m "feat(release): Release vX.Y.Z
|
|
19
|
-
|
|
20
|
-
Summarize the key changes, new features, bug fixes, and any breaking changes
|
|
21
|
-
introduced in this release. This message should provide a high-level overview
|
|
22
|
-
of what's new since the last release.
|
|
23
|
-
|
|
24
|
-
Example:
|
|
25
|
-
- Introduced extensible plugin system with Filter and Infinite Scroll plugins.
|
|
26
|
-
- Refactored animation props into a dedicated object.
|
|
27
|
-
- Added virtualized scrolling for large datasets.
|
|
28
|
-
- Updated dependencies."
|
|
29
|
-
# Or, if you have a multi-line message, use a temporary file:
|
|
30
|
-
# echo "Your detailed commit message" > commit_message.txt
|
|
31
|
-
# git commit -F commit_message.txt
|
|
32
|
-
```
|
|
33
|
-
*(Note: We assume the main feature/bugfix commits are already on `develop`.)*
|
|
34
|
-
|
|
35
|
-
3. **Switch to the `master` branch:**
|
|
36
|
-
```bash
|
|
37
|
-
git checkout master
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
4. **Merge `develop` into `master`:**
|
|
41
|
-
```bash
|
|
42
|
-
git merge develop
|
|
43
|
-
```
|
|
44
|
-
*This will bring all the latest changes from `develop` into `master`.*
|
|
45
|
-
|
|
46
|
-
5. **Get the current version from `package.json`:**
|
|
47
|
-
```bash
|
|
48
|
-
# Manually read the "version" field from package.json
|
|
49
|
-
# Example: "version": "1.0.0"
|
|
50
|
-
# Let's assume the version is X.Y.Z
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
6. **Create a new Git tag for the release:**
|
|
54
|
-
```bash
|
|
55
|
-
git tag vX.Y.Z
|
|
56
|
-
```
|
|
57
|
-
*Replace `X.Y.Z` with the actual version number obtained from `package.json`.*
|
|
58
|
-
|
|
59
|
-
7. **Push the `master` branch and all tags to the remote repository:**
|
|
60
|
-
```bash
|
|
61
|
-
git push origin master --tags
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
8. **Switch back to the `develop` branch:**
|
|
65
|
-
```bash
|
|
66
|
-
git checkout develop
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
9. **Push the `develop` branch to the remote repository (to ensure it's up-to-date after the merge):**
|
|
70
|
-
```bash
|
|
71
|
-
git push origin develop
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
This sequence ensures a clean release process, updating `master`, creating a version tag, and synchronizing both branches with the remote.
|
|
75
|
-
|
|
76
|
-
10. **Delete temporary files:**
|
|
77
|
-
```bash
|
|
78
|
-
del commit_message.txt
|
|
79
|
-
```
|
|
1
|
+
## Release Git Steps
|
|
2
|
+
|
|
3
|
+
This document outlines the sequence of Git commands to perform at the end of every release cycle to ensure the `master` branch is up-to-date, tagged, and all changes are pushed to the remote repository.
|
|
4
|
+
|
|
5
|
+
**Prerequisites:**
|
|
6
|
+
- Ensure all development work for the release is complete and committed to the `develop` branch.
|
|
7
|
+
- Ensure you are on the `develop` branch (`git checkout develop`).
|
|
8
|
+
|
|
9
|
+
**Steps:**
|
|
10
|
+
|
|
11
|
+
1. **Stage all changes (if any uncommitted changes exist on `develop`):**
|
|
12
|
+
```bash
|
|
13
|
+
git add .
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
2. **Commit changes on `develop` (if not already done):**
|
|
17
|
+
```bash
|
|
18
|
+
git commit -m "feat(release): Release vX.Y.Z
|
|
19
|
+
|
|
20
|
+
Summarize the key changes, new features, bug fixes, and any breaking changes
|
|
21
|
+
introduced in this release. This message should provide a high-level overview
|
|
22
|
+
of what's new since the last release.
|
|
23
|
+
|
|
24
|
+
Example:
|
|
25
|
+
- Introduced extensible plugin system with Filter and Infinite Scroll plugins.
|
|
26
|
+
- Refactored animation props into a dedicated object.
|
|
27
|
+
- Added virtualized scrolling for large datasets.
|
|
28
|
+
- Updated dependencies."
|
|
29
|
+
# Or, if you have a multi-line message, use a temporary file:
|
|
30
|
+
# echo "Your detailed commit message" > commit_message.txt
|
|
31
|
+
# git commit -F commit_message.txt
|
|
32
|
+
```
|
|
33
|
+
*(Note: We assume the main feature/bugfix commits are already on `develop`.)*
|
|
34
|
+
|
|
35
|
+
3. **Switch to the `master` branch:**
|
|
36
|
+
```bash
|
|
37
|
+
git checkout master
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
4. **Merge `develop` into `master`:**
|
|
41
|
+
```bash
|
|
42
|
+
git merge develop
|
|
43
|
+
```
|
|
44
|
+
*This will bring all the latest changes from `develop` into `master`.*
|
|
45
|
+
|
|
46
|
+
5. **Get the current version from `package.json`:**
|
|
47
|
+
```bash
|
|
48
|
+
# Manually read the "version" field from package.json
|
|
49
|
+
# Example: "version": "1.0.0"
|
|
50
|
+
# Let's assume the version is X.Y.Z
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
6. **Create a new Git tag for the release:**
|
|
54
|
+
```bash
|
|
55
|
+
git tag vX.Y.Z
|
|
56
|
+
```
|
|
57
|
+
*Replace `X.Y.Z` with the actual version number obtained from `package.json`.*
|
|
58
|
+
|
|
59
|
+
7. **Push the `master` branch and all tags to the remote repository:**
|
|
60
|
+
```bash
|
|
61
|
+
git push origin master --tags
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
8. **Switch back to the `develop` branch:**
|
|
65
|
+
```bash
|
|
66
|
+
git checkout develop
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
9. **Push the `develop` branch to the remote repository (to ensure it's up-to-date after the merge):**
|
|
70
|
+
```bash
|
|
71
|
+
git push origin develop
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
This sequence ensures a clean release process, updating `master`, creating a version tag, and synchronizing both branches with the remote.
|
|
75
|
+
|
|
76
|
+
10. **Delete temporary files:**
|
|
77
|
+
```bash
|
|
78
|
+
del commit_message.txt
|
|
79
|
+
```
|
|
80
80
|
*Ensure to delete any temporary files created during the release process.*
|
package/package.json
CHANGED
|
@@ -1,253 +1,260 @@
|
|
|
1
|
-
/* Using CSS variables for a more maintainable and themeable design */
|
|
2
|
-
.responsiveTable {
|
|
3
|
-
--table-border-color: #e0e0e0;
|
|
4
|
-
--table-header-bg: #f8f9fa;
|
|
5
|
-
--table-row-hover-bg: #e9ecef;
|
|
6
|
-
--table-row-stripe-bg: #f2f2f2;
|
|
7
|
-
--card-bg: #ffffff;
|
|
8
|
-
--card-border-color: #e0e0e0;
|
|
9
|
-
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
10
|
-
--text-color: #212529;
|
|
11
|
-
--text-color-muted: #6c757d;
|
|
12
|
-
--interactive-color: #0056b3;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/* Mobile Card View */
|
|
16
|
-
.card {
|
|
17
|
-
background-color: var(--card-bg);
|
|
18
|
-
border: 1px solid var(--card-border-color);
|
|
19
|
-
margin-bottom: 1rem;
|
|
20
|
-
border-radius: 8px;
|
|
21
|
-
overflow: hidden;
|
|
22
|
-
box-shadow: var(--card-shadow);
|
|
23
|
-
transition: box-shadow 0.2s ease-in-out;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.card:hover {
|
|
27
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* This is not used in the component, but keeping it styled in case it's added back */
|
|
31
|
-
.card-header {
|
|
32
|
-
background-color: var(--table-header-bg);
|
|
33
|
-
padding: 0.75rem 1rem;
|
|
34
|
-
font-weight: 600; /* Bolder */
|
|
35
|
-
border-bottom: 1px solid var(--table-border-color);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.card-body {
|
|
39
|
-
padding: 1rem;
|
|
40
|
-
font-size: 0.9rem;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.card-body p {
|
|
44
|
-
margin: 0 0 0.75rem;
|
|
45
|
-
display: flex;
|
|
46
|
-
justify-content: space-between;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.card-body p:last-child {
|
|
50
|
-
margin-bottom: 0;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.card-label {
|
|
54
|
-
font-weight: 600;
|
|
55
|
-
color: var(--text-color);
|
|
56
|
-
margin-right: 0.5rem;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* Desktop Table View */
|
|
60
|
-
.responsiveTable {
|
|
61
|
-
width: 100%;
|
|
62
|
-
border-collapse: collapse;
|
|
63
|
-
color: var(--text-color);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.responsiveTable thead th {
|
|
67
|
-
background-color: var(--table-header-bg);
|
|
68
|
-
position: sticky;
|
|
69
|
-
top: 0;
|
|
70
|
-
z-index:
|
|
71
|
-
font-weight: 600;
|
|
72
|
-
text-align: left;
|
|
73
|
-
padding: 1rem;
|
|
74
|
-
border-bottom: 2px solid var(--table-border-color);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.responsiveTable td {
|
|
78
|
-
padding: 1rem;
|
|
79
|
-
border-bottom: 1px solid var(--table-border-color);
|
|
80
|
-
text-align: left;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.responsiveTable tr {
|
|
84
|
-
background-color: var(--card-bg);
|
|
85
|
-
transition: background-color 0.2s ease-in-out;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/* Subtle striping for better readability */
|
|
89
|
-
.responsiveTable tr:nth-child(even) {
|
|
90
|
-
background-color: var(--table-row-stripe-bg);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
/* Modern hover effect */
|
|
94
|
-
.responsiveTable tr:hover {
|
|
95
|
-
background-color: var(--table-row-hover-bg);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/* Clickable Header Style */
|
|
99
|
-
.clickableHeader {
|
|
100
|
-
cursor: pointer;
|
|
101
|
-
color: var(--interactive-color);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.clickableHeader:hover {
|
|
105
|
-
text-decoration: underline;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.responsiveTable tfoot {
|
|
109
|
-
background-color: var(--table-header-bg);
|
|
110
|
-
border-top: 2px solid var(--table-border-color);
|
|
111
|
-
font-weight: 600;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.footerCell {
|
|
115
|
-
padding: 1rem;
|
|
116
|
-
text-align: right;
|
|
117
|
-
font-weight: 600;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.clickableFooterCell {
|
|
121
|
-
cursor: pointer;
|
|
122
|
-
color: var(--interactive-color);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.clickableFooterCell:hover {
|
|
126
|
-
text-decoration: underline;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.footerCard {
|
|
130
|
-
background-color: var(--table-header-bg);
|
|
131
|
-
border: 1px solid var(--card-border-color);
|
|
132
|
-
border-top: 2px solid var(--table-border-color);
|
|
133
|
-
margin-bottom: 1rem;
|
|
134
|
-
border-radius: 8px;
|
|
135
|
-
overflow: hidden;
|
|
136
|
-
box-shadow: none;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.footer-card-body {
|
|
140
|
-
padding: 1rem;
|
|
141
|
-
font-size: 0.9rem;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.footer-card-row {
|
|
145
|
-
margin: 0 0 0.75rem;
|
|
146
|
-
display: flex;
|
|
147
|
-
justify-content: space-between;
|
|
148
|
-
font-weight: 600;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
/* No Data State */
|
|
152
|
-
|
|
153
|
-
/* Staggered Entrance Animation */
|
|
154
|
-
.animatedRow {
|
|
155
|
-
animation: fadeInUp 0.5s ease-out forwards;
|
|
156
|
-
opacity: 0;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
@keyframes fadeInUp {
|
|
160
|
-
from {
|
|
161
|
-
opacity: 0;
|
|
162
|
-
transform: translateY(20px);
|
|
163
|
-
}
|
|
164
|
-
to {
|
|
165
|
-
opacity: 1;
|
|
166
|
-
transform: translateY(0);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
/* Skeleton Loader */
|
|
171
|
-
.skeleton {
|
|
172
|
-
background-color: #e0e0e0;
|
|
173
|
-
border-radius: 4px;
|
|
174
|
-
position: relative;
|
|
175
|
-
overflow: hidden;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
.skeleton::after {
|
|
179
|
-
content: '';
|
|
180
|
-
position: absolute;
|
|
181
|
-
top: 0;
|
|
182
|
-
left: -150%;
|
|
183
|
-
width: 150%;
|
|
184
|
-
height: 100%;
|
|
185
|
-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
|
186
|
-
animation: shimmer 1.5s infinite;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.skeletonText {
|
|
190
|
-
height: 1.2em;
|
|
191
|
-
width: 100%;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.skeletonCard {
|
|
195
|
-
background-color: var(--card-bg);
|
|
196
|
-
border: 1px solid var(--card-border-color);
|
|
197
|
-
margin-bottom: 1rem;
|
|
198
|
-
border-radius: 8px;
|
|
199
|
-
overflow: hidden;
|
|
200
|
-
padding: 1rem;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
@keyframes shimmer {
|
|
204
|
-
0% {
|
|
205
|
-
transform: translateX(0);
|
|
206
|
-
}
|
|
207
|
-
100% {
|
|
208
|
-
transform: translateX(100%);
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
.noDataWrapper {
|
|
212
|
-
color: var(--text-color-muted); /* Softer color */
|
|
213
|
-
display: flex;
|
|
214
|
-
justify-content: center;
|
|
215
|
-
align-items: center;
|
|
216
|
-
height: 100%;
|
|
217
|
-
gap: 10px;
|
|
218
|
-
padding: 40px;
|
|
219
|
-
background-color: var(--table-header-bg);
|
|
220
|
-
border: 1px dashed var(--table-border-color);
|
|
221
|
-
border-radius: 8px;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
.noData {
|
|
225
|
-
text-align: center;
|
|
226
|
-
font-weight: 500; /* Less aggressive than bold */
|
|
227
|
-
font-size: 1rem;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.row-exit {
|
|
231
|
-
opacity: 0;
|
|
232
|
-
transform: scaleY(0);
|
|
233
|
-
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.row-enter {
|
|
237
|
-
opacity: 0;
|
|
238
|
-
transform: translateY(20px);
|
|
239
|
-
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
.row-flash {
|
|
243
|
-
animation: flash 0.5s ease-out;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
@keyframes flash {
|
|
247
|
-
0% {
|
|
248
|
-
background-color: var(--table-row-hover-bg);
|
|
249
|
-
}
|
|
250
|
-
100% {
|
|
251
|
-
background-color: transparent;
|
|
252
|
-
}
|
|
253
|
-
}
|
|
1
|
+
/* Using CSS variables for a more maintainable and themeable design */
|
|
2
|
+
.responsiveTable {
|
|
3
|
+
--table-border-color: #e0e0e0;
|
|
4
|
+
--table-header-bg: #f8f9fa;
|
|
5
|
+
--table-row-hover-bg: #e9ecef;
|
|
6
|
+
--table-row-stripe-bg: #f2f2f2;
|
|
7
|
+
--card-bg: #ffffff;
|
|
8
|
+
--card-border-color: #e0e0e0;
|
|
9
|
+
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
10
|
+
--text-color: #212529;
|
|
11
|
+
--text-color-muted: #6c757d;
|
|
12
|
+
--interactive-color: #0056b3;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Mobile Card View */
|
|
16
|
+
.card {
|
|
17
|
+
background-color: var(--card-bg);
|
|
18
|
+
border: 1px solid var(--card-border-color);
|
|
19
|
+
margin-bottom: 1rem;
|
|
20
|
+
border-radius: 8px;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
box-shadow: var(--card-shadow);
|
|
23
|
+
transition: box-shadow 0.2s ease-in-out;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.card:hover {
|
|
27
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* This is not used in the component, but keeping it styled in case it's added back */
|
|
31
|
+
.card-header {
|
|
32
|
+
background-color: var(--table-header-bg);
|
|
33
|
+
padding: 0.75rem 1rem;
|
|
34
|
+
font-weight: 600; /* Bolder */
|
|
35
|
+
border-bottom: 1px solid var(--table-border-color);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.card-body {
|
|
39
|
+
padding: 1rem;
|
|
40
|
+
font-size: 0.9rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.card-body p {
|
|
44
|
+
margin: 0 0 0.75rem;
|
|
45
|
+
display: flex;
|
|
46
|
+
justify-content: space-between;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.card-body p:last-child {
|
|
50
|
+
margin-bottom: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.card-label {
|
|
54
|
+
font-weight: 600;
|
|
55
|
+
color: var(--text-color);
|
|
56
|
+
margin-right: 0.5rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Desktop Table View */
|
|
60
|
+
.responsiveTable {
|
|
61
|
+
width: 100%;
|
|
62
|
+
border-collapse: collapse;
|
|
63
|
+
color: var(--text-color);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.responsiveTable thead th {
|
|
67
|
+
background-color: var(--table-header-bg);
|
|
68
|
+
position: sticky;
|
|
69
|
+
top: 0;
|
|
70
|
+
z-index: 1;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
text-align: left;
|
|
73
|
+
padding: 1rem;
|
|
74
|
+
border-bottom: 2px solid var(--table-border-color);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.responsiveTable td {
|
|
78
|
+
padding: 1rem;
|
|
79
|
+
border-bottom: 1px solid var(--table-border-color);
|
|
80
|
+
text-align: left;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.responsiveTable tr {
|
|
84
|
+
background-color: var(--card-bg);
|
|
85
|
+
transition: background-color 0.2s ease-in-out;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Subtle striping for better readability */
|
|
89
|
+
.responsiveTable tr:nth-child(even) {
|
|
90
|
+
background-color: var(--table-row-stripe-bg);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Modern hover effect */
|
|
94
|
+
.responsiveTable tr:hover {
|
|
95
|
+
background-color: var(--table-row-hover-bg);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Clickable Header Style */
|
|
99
|
+
.clickableHeader {
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
color: var(--interactive-color);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.clickableHeader:hover {
|
|
105
|
+
text-decoration: underline;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.responsiveTable tfoot {
|
|
109
|
+
background-color: var(--table-header-bg);
|
|
110
|
+
border-top: 2px solid var(--table-border-color);
|
|
111
|
+
font-weight: 600;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.footerCell {
|
|
115
|
+
padding: 1rem;
|
|
116
|
+
text-align: right;
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.clickableFooterCell {
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
color: var(--interactive-color);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.clickableFooterCell:hover {
|
|
126
|
+
text-decoration: underline;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.footerCard {
|
|
130
|
+
background-color: var(--table-header-bg);
|
|
131
|
+
border: 1px solid var(--card-border-color);
|
|
132
|
+
border-top: 2px solid var(--table-border-color);
|
|
133
|
+
margin-bottom: 1rem;
|
|
134
|
+
border-radius: 8px;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
box-shadow: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.footer-card-body {
|
|
140
|
+
padding: 1rem;
|
|
141
|
+
font-size: 0.9rem;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.footer-card-row {
|
|
145
|
+
margin: 0 0 0.75rem;
|
|
146
|
+
display: flex;
|
|
147
|
+
justify-content: space-between;
|
|
148
|
+
font-weight: 600;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* No Data State */
|
|
152
|
+
|
|
153
|
+
/* Staggered Entrance Animation */
|
|
154
|
+
.animatedRow {
|
|
155
|
+
animation: fadeInUp 0.5s ease-out forwards;
|
|
156
|
+
opacity: 0;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
@keyframes fadeInUp {
|
|
160
|
+
from {
|
|
161
|
+
opacity: 0;
|
|
162
|
+
transform: translateY(20px);
|
|
163
|
+
}
|
|
164
|
+
to {
|
|
165
|
+
opacity: 1;
|
|
166
|
+
transform: translateY(0);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* Skeleton Loader */
|
|
171
|
+
.skeleton {
|
|
172
|
+
background-color: #e0e0e0;
|
|
173
|
+
border-radius: 4px;
|
|
174
|
+
position: relative;
|
|
175
|
+
overflow: hidden;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.skeleton::after {
|
|
179
|
+
content: '';
|
|
180
|
+
position: absolute;
|
|
181
|
+
top: 0;
|
|
182
|
+
left: -150%;
|
|
183
|
+
width: 150%;
|
|
184
|
+
height: 100%;
|
|
185
|
+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
|
186
|
+
animation: shimmer 1.5s infinite;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.skeletonText {
|
|
190
|
+
height: 1.2em;
|
|
191
|
+
width: 100%;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.skeletonCard {
|
|
195
|
+
background-color: var(--card-bg);
|
|
196
|
+
border: 1px solid var(--card-border-color);
|
|
197
|
+
margin-bottom: 1rem;
|
|
198
|
+
border-radius: 8px;
|
|
199
|
+
overflow: hidden;
|
|
200
|
+
padding: 1rem;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
@keyframes shimmer {
|
|
204
|
+
0% {
|
|
205
|
+
transform: translateX(0);
|
|
206
|
+
}
|
|
207
|
+
100% {
|
|
208
|
+
transform: translateX(100%);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
.noDataWrapper {
|
|
212
|
+
color: var(--text-color-muted); /* Softer color */
|
|
213
|
+
display: flex;
|
|
214
|
+
justify-content: center;
|
|
215
|
+
align-items: center;
|
|
216
|
+
height: 100%;
|
|
217
|
+
gap: 10px;
|
|
218
|
+
padding: 40px;
|
|
219
|
+
background-color: var(--table-header-bg);
|
|
220
|
+
border: 1px dashed var(--table-border-color);
|
|
221
|
+
border-radius: 8px;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.noData {
|
|
225
|
+
text-align: center;
|
|
226
|
+
font-weight: 500; /* Less aggressive than bold */
|
|
227
|
+
font-size: 1rem;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.row-exit {
|
|
231
|
+
opacity: 0;
|
|
232
|
+
transform: scaleY(0);
|
|
233
|
+
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.row-enter {
|
|
237
|
+
opacity: 0;
|
|
238
|
+
transform: translateY(20px);
|
|
239
|
+
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.row-flash {
|
|
243
|
+
animation: flash 0.5s ease-out;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
@keyframes flash {
|
|
247
|
+
0% {
|
|
248
|
+
background-color: var(--table-row-hover-bg);
|
|
249
|
+
}
|
|
250
|
+
100% {
|
|
251
|
+
background-color: transparent;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.stickyHeader {
|
|
256
|
+
position: sticky;
|
|
257
|
+
top: 0;
|
|
258
|
+
z-index: 1;
|
|
259
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
260
|
+
}
|