Skip to content

Commit 052b90c

Browse files
edwildeedwilde
committed
Add compiled assets for testing
1 parent f34bb7d commit 052b90c

File tree

5 files changed

+6375
-77
lines changed

5 files changed

+6375
-77
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
node_modules/
2-
client/dist/
32
npm-debug.log
43
yarn-error.log
54
.DS_Store

‎client/dist/queuedjobs-admin.css‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
/**
2+
* Queued Jobs Live Refresh - Styles
3+
*
4+
* Provides styling for the play/pause toggle button and notification system.
5+
*/
6+
7+
/* ==========================================================================
8+
Play/Pause Toggle Button
9+
========================================================================== */
10+
11+
/**
12+
* Base button styling - subtle outline style that matches SilverStripe admin UI
13+
* WCAG 2.2 AA compliant: min 44x44px touch target, sufficient contrast
14+
*/
15+
.queuedjobs-live-toggle {
16+
padding: 8px 12px;
17+
display: inline-flex;
18+
align-items: center;
19+
justify-content: center;
20+
margin-top: -4px;
21+
margin-right: 8px;
22+
vertical-align: middle;
23+
min-width: 44px;
24+
min-height: 44px;
25+
position: relative;
26+
}
27+
28+
/* Screen reader only text */
29+
.queuedjobs-live-toggle .visually-hidden {
30+
position: absolute;
31+
width: 1px;
32+
height: 1px;
33+
padding: 0;
34+
margin: -1px;
35+
overflow: hidden;
36+
clip: rect(0, 0, 0, 0);
37+
white-space: nowrap;
38+
border: 0;
39+
}
40+
41+
/* Spin the icon when refreshing */
42+
.queuedjobs-live-toggle.refreshing .toggle-icon {
43+
animation: spin 1s linear infinite;
44+
animation-delay: 200ms;
45+
}
46+
47+
/* Icon styling with smooth transitions */
48+
.queuedjobs-live-toggle .toggle-icon {
49+
display: inline-block;
50+
font-size: 16px;
51+
line-height: 1;
52+
width: 16px;
53+
text-align: center;
54+
transition: 100ms opacity 150ms ease-in-out;
55+
opacity: 1;
56+
}
57+
58+
/* ==========================================================================
59+
Animations
60+
========================================================================== */
61+
62+
/* Spin animation for refresh indicator */
63+
@keyframes spin {
64+
to {
65+
transform: rotate(360deg);
66+
}
67+
}
68+
69+
/* ==========================================================================
70+
Notification System
71+
========================================================================== */
72+
73+
/**
74+
* Error/info notification that slides in from the right
75+
* WCAG 2.2 AA compliant: role="alert", sufficient contrast, dismissible
76+
*/
77+
.queuedjobs-live-notification {
78+
position: fixed;
79+
top: 20px;
80+
right: 20px;
81+
background: #d32f2f;
82+
color: white;
83+
padding: 12px 40px 12px 16px;
84+
border-radius: 4px;
85+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
86+
z-index: 10001;
87+
max-width: 400px;
88+
animation: slideIn 0.3s ease;
89+
font-size: 14px;
90+
line-height: 1.5;
91+
}
92+
93+
/* Slide-in animation */
94+
@keyframes slideIn {
95+
from {
96+
transform: translateX(100%);
97+
opacity: 0;
98+
}
99+
to {
100+
transform: translateX(0);
101+
opacity: 1;
102+
}
103+
}
104+
105+
/* Close button within notification - WCAG 2.2 AA: 24x24px minimum */
106+
.queuedjobs-live-notification .close-btn {
107+
position: absolute;
108+
top: 8px;
109+
right: 8px;
110+
background: rgba(255, 255, 255, 0.2);
111+
border: 1px solid rgba(255, 255, 255, 0.3);
112+
border-radius: 3px;
113+
color: white;
114+
font-size: 20px;
115+
line-height: 1;
116+
cursor: pointer;
117+
padding: 0;
118+
min-width: 24px;
119+
min-height: 24px;
120+
display: flex;
121+
align-items: center;
122+
justify-content: center;
123+
}
124+
125+
.queuedjobs-live-notification .close-btn:hover,
126+
.queuedjobs-live-notification .close-btn:focus {
127+
background: rgba(255, 255, 255, 0.3);
128+
outline: 2px solid white;
129+
outline-offset: 2px;
130+
}
131+
132+
/* ==========================================================================
133+
Layout
134+
========================================================================== */
135+
136+
/* Button is inserted directly into DOM, no container needed */
137+
138+
/* ==========================================================================
139+
Responsive Design
140+
========================================================================== */
141+
142+
@media (max-width: 768px) {
143+
/* Smaller button on mobile */
144+
.queuedjobs-live-toggle {
145+
padding: 5px 10px;
146+
font-size: 12px;
147+
}
148+
149+
/* Full-width notifications on mobile */
150+
.queuedjobs-live-notification {
151+
top: 10px;
152+
right: 10px;
153+
left: 10px;
154+
max-width: none;
155+
}
156+
}

‎client/dist/queuedjobs-admin.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎composer.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,11 @@
2727
]
2828
},
2929
"minimum-stability": "dev",
30-
"prefer-stable": true
30+
"prefer-stable": true,
31+
"config": {
32+
"allow-plugins": {
33+
"composer/installers": true,
34+
"silverstripe/vendor-plugin": true
35+
}
36+
}
3137
}

0 commit comments

Comments
 (0)