@stack-spot/portal-layout 0.0.3 → 0.0.4

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 (56) hide show
  1. package/dist/Layout.d.ts +17 -3
  2. package/dist/Layout.d.ts.map +1 -1
  3. package/dist/Layout.js +8 -4
  4. package/dist/Layout.js.map +1 -1
  5. package/dist/LayoutOverlayManager.d.ts.map +1 -1
  6. package/dist/LayoutOverlayManager.js +10 -7
  7. package/dist/LayoutOverlayManager.js.map +1 -1
  8. package/dist/components/Dialog.d.ts.map +1 -1
  9. package/dist/components/Dialog.js +4 -1
  10. package/dist/components/Dialog.js.map +1 -1
  11. package/dist/components/Header.d.ts +2 -1
  12. package/dist/components/Header.d.ts.map +1 -1
  13. package/dist/components/Header.js +1 -1
  14. package/dist/components/Header.js.map +1 -1
  15. package/dist/components/Menu/MenuContent.d.ts.map +1 -1
  16. package/dist/components/Menu/MenuContent.js +12 -5
  17. package/dist/components/Menu/MenuContent.js.map +1 -1
  18. package/dist/components/Menu/MenuSections.d.ts +1 -0
  19. package/dist/components/Menu/MenuSections.d.ts.map +1 -1
  20. package/dist/components/Menu/MenuSections.js +12 -5
  21. package/dist/components/Menu/MenuSections.js.map +1 -1
  22. package/dist/components/Menu/PageSelector.d.ts.map +1 -1
  23. package/dist/components/Menu/PageSelector.js +1 -1
  24. package/dist/components/Menu/PageSelector.js.map +1 -1
  25. package/dist/components/Menu/types.d.ts +7 -0
  26. package/dist/components/Menu/types.d.ts.map +1 -1
  27. package/dist/components/OverlayContent.d.ts.map +1 -1
  28. package/dist/components/OverlayContent.js +5 -1
  29. package/dist/components/OverlayContent.js.map +1 -1
  30. package/dist/components/SelectionList.d.ts +2 -1
  31. package/dist/components/SelectionList.d.ts.map +1 -1
  32. package/dist/components/SelectionList.js +3 -3
  33. package/dist/components/SelectionList.js.map +1 -1
  34. package/dist/components/Toaster.d.ts.map +1 -1
  35. package/dist/components/Toaster.js +5 -1
  36. package/dist/components/Toaster.js.map +1 -1
  37. package/dist/dictionary.d.ts +15 -0
  38. package/dist/dictionary.d.ts.map +1 -0
  39. package/dist/dictionary.js +23 -0
  40. package/dist/dictionary.js.map +1 -0
  41. package/dist/layout.css +22 -8
  42. package/package.json +4 -3
  43. package/src/Layout.tsx +34 -12
  44. package/src/LayoutOverlayManager.tsx +15 -10
  45. package/src/components/Dialog.tsx +4 -1
  46. package/src/components/Header.tsx +3 -2
  47. package/src/components/Menu/MenuContent.tsx +12 -4
  48. package/src/components/Menu/MenuSections.tsx +14 -6
  49. package/src/components/Menu/PageSelector.tsx +1 -0
  50. package/src/components/Menu/types.ts +7 -0
  51. package/src/components/OverlayContent.tsx +16 -12
  52. package/src/components/SelectionList.tsx +5 -3
  53. package/src/components/Toaster.tsx +9 -5
  54. package/src/dictionary.ts +25 -0
  55. package/src/layout.css +22 -8
  56. package/src/citric.fix.d.ts +0 -7
package/src/layout.css CHANGED
@@ -68,20 +68,23 @@ body {
68
68
  }
69
69
 
70
70
  #page {
71
- flex: 1;
71
+ position: absolute;
72
+ top: var(--header-height);
73
+ left: var(--menu-sections-width);
74
+ right: 0;
75
+ bottom: 0;
76
+ overflow-y: auto;
72
77
  display: flex;
73
78
  flex-direction: column;
74
79
  background-color: var(--light-300);
75
80
  border-top-left-radius: 0.5rem;
76
81
  align-items: center;
77
82
  padding: 24px;
78
- margin-top: var(--header-height);
79
- margin-left: var(--menu-sections-width);
80
- transition: margin ease-in-out var(--menu-animation-duration);
83
+ transition: left ease-in-out var(--menu-animation-duration);
81
84
  }
82
85
 
83
86
  #layout.menu-content-visible #page {
84
- margin-left: calc(var(--menu-sections-width) + var(--menu-content-width));
87
+ left: calc(var(--menu-sections-width) + var(--menu-content-width));
85
88
  }
86
89
 
87
90
  #content {
@@ -330,7 +333,7 @@ body {
330
333
  bottom: -420px;
331
334
  left: 20px;
332
335
  height: 400px;
333
- transition: transform bottom 0.3s;
336
+ transition: bottom 0.3s;
334
337
  }
335
338
 
336
339
  #bottomPanel.visible {
@@ -340,12 +343,23 @@ body {
340
343
  #bottomDialog {
341
344
  position: fixed;
342
345
  display: flex;
343
- flex-direction: column;
346
+ flex-direction: row;
344
347
  bottom: -80px;
345
348
  left: 0;
346
349
  right: 0;
347
350
  height: 80px;
348
- transition: transform bottom 0.3s;
351
+ transition: bottom 0.3s;
352
+ background-color: var(--inverse-500);
353
+ color: var(--inverse-contrastText);
354
+ justify-content: center;
355
+ align-items: center;
356
+ gap: 16px;
357
+ }
358
+
359
+ #bottomDialog .btn-group {
360
+ display: flex;
361
+ flex-direction: row;
362
+ gap: 8px;
349
363
  }
350
364
 
351
365
  #bottomDialog.visible {
@@ -1,7 +0,0 @@
1
- import '../node_modules/styled-components/dist/index.d.ts'
2
-
3
- declare module 'styled-components' {
4
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
5
- type StyledComponent<Tag = 'div', Theme = object, Props = object, Optional = never> =
6
- import('react').FunctionComponent<JSX.IntrinsicElements[Tag] & Props>
7
- }