@rpg-engine/long-bow 0.8.221 → 0.8.223
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/dist/long-bow.cjs.development.js +10 -8
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +10 -8
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DraggableContainer.tsx +6 -0
- package/src/components/Store/CartView.tsx +39 -2
package/package.json
CHANGED
|
@@ -181,6 +181,12 @@ const Container = styled.div<IContainerProps>`
|
|
|
181
181
|
&.rpgui-container {
|
|
182
182
|
padding-top: 1.5rem;
|
|
183
183
|
}
|
|
184
|
+
|
|
185
|
+
@media (max-width: 600px) {
|
|
186
|
+
width: 100vw !important;
|
|
187
|
+
min-width: unset !important;
|
|
188
|
+
height: 100dvh !important;
|
|
189
|
+
}
|
|
184
190
|
`;
|
|
185
191
|
|
|
186
192
|
const CloseButton = styled.div`
|
|
@@ -252,6 +252,10 @@ const Container = styled.div`
|
|
|
252
252
|
padding: 1rem;
|
|
253
253
|
overflow: hidden;
|
|
254
254
|
box-sizing: border-box;
|
|
255
|
+
|
|
256
|
+
@media (max-width: 480px) {
|
|
257
|
+
padding: 0.75rem 0.5rem;
|
|
258
|
+
}
|
|
255
259
|
`;
|
|
256
260
|
|
|
257
261
|
const Header = styled.div`
|
|
@@ -282,16 +286,26 @@ const CloseButton = styled.div`
|
|
|
282
286
|
|
|
283
287
|
const MainContent = styled.div`
|
|
284
288
|
display: grid;
|
|
285
|
-
grid-template-columns: 1fr 260px;
|
|
289
|
+
grid-template-columns: minmax(0, 1fr) 260px;
|
|
286
290
|
gap: 1rem;
|
|
287
291
|
flex: 1;
|
|
288
292
|
min-height: 0;
|
|
289
293
|
margin: 1rem 0;
|
|
290
294
|
|
|
291
295
|
@media (max-width: 700px) {
|
|
292
|
-
grid-template-columns: 1fr;
|
|
296
|
+
grid-template-columns: minmax(0, 1fr) 180px;
|
|
293
297
|
gap: 0.75rem;
|
|
294
298
|
}
|
|
299
|
+
|
|
300
|
+
@media (max-width: 480px) {
|
|
301
|
+
grid-template-columns: minmax(0, 1fr) 130px;
|
|
302
|
+
gap: 0.5rem;
|
|
303
|
+
margin: 0.5rem 0;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
@media (max-width: 349px) {
|
|
307
|
+
grid-template-columns: 1fr;
|
|
308
|
+
}
|
|
295
309
|
`;
|
|
296
310
|
|
|
297
311
|
const CartItems = styled.div`
|
|
@@ -328,6 +342,12 @@ const OrderSummaryPanel = styled.div`
|
|
|
328
342
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
329
343
|
border-radius: 6px;
|
|
330
344
|
align-self: start;
|
|
345
|
+
min-width: 0;
|
|
346
|
+
|
|
347
|
+
@media (max-width: 480px) {
|
|
348
|
+
padding: 0.5rem;
|
|
349
|
+
gap: 0.35rem;
|
|
350
|
+
}
|
|
331
351
|
`;
|
|
332
352
|
|
|
333
353
|
const EmptyCart = styled.div`
|
|
@@ -348,6 +368,11 @@ const CartItemRow = styled.div`
|
|
|
348
368
|
padding: 0.5rem 0.75rem;
|
|
349
369
|
background: rgba(0, 0, 0, 0.2);
|
|
350
370
|
border-radius: 4px;
|
|
371
|
+
|
|
372
|
+
@media (max-width: 480px) {
|
|
373
|
+
gap: 0.5rem;
|
|
374
|
+
padding: 0.4rem 0.5rem;
|
|
375
|
+
}
|
|
351
376
|
`;
|
|
352
377
|
|
|
353
378
|
const ItemIconContainer = styled.div`
|
|
@@ -376,6 +401,7 @@ const ItemName = styled.div`
|
|
|
376
401
|
const ItemInfo = styled.div`
|
|
377
402
|
display: flex;
|
|
378
403
|
align-items: center;
|
|
404
|
+
flex-wrap: wrap;
|
|
379
405
|
gap: 0.4rem;
|
|
380
406
|
font-family: 'Press Start 2P', cursive;
|
|
381
407
|
font-size: 0.55rem;
|
|
@@ -403,6 +429,12 @@ const OrderSummaryLabel = styled.div`
|
|
|
403
429
|
text-transform: uppercase;
|
|
404
430
|
letter-spacing: 0.05em;
|
|
405
431
|
margin-bottom: 0.25rem;
|
|
432
|
+
|
|
433
|
+
@media (max-width: 480px) {
|
|
434
|
+
font-size: 0.45rem;
|
|
435
|
+
letter-spacing: 0;
|
|
436
|
+
margin-bottom: 0;
|
|
437
|
+
}
|
|
406
438
|
`;
|
|
407
439
|
|
|
408
440
|
const TotalRow = styled.div<{ $isTotal?: boolean }>`
|
|
@@ -422,6 +454,11 @@ const TotalRow = styled.div<{ $isTotal?: boolean }>`
|
|
|
422
454
|
span:last-child {
|
|
423
455
|
color: #fef08a;
|
|
424
456
|
}
|
|
457
|
+
|
|
458
|
+
@media (max-width: 480px) {
|
|
459
|
+
font-size: ${p => p.$isTotal ? '0.7rem' : '0.55rem'};
|
|
460
|
+
gap: 0.5rem;
|
|
461
|
+
}
|
|
425
462
|
`;
|
|
426
463
|
|
|
427
464
|
const PaymentMethodRow = styled.div`
|