From 1f1eced1590f2269752a9dfd13b24c44bc0875b5 Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Wed, 23 Jul 2025 13:44:24 -0700 Subject: [PATCH 1/2] beautified the widget the widgets now don't shrink past the size of the header. The canvas in the widget is scrollable and the scroller is pretty. The resizing arrow button at the bottom of the widget stays at the bottom (this is because only the canvas can scroll now). --- client/src/App.jsx | 22 +++++++++++++++++-- .../src/components/layout/Canvas/Widget.jsx | 6 ++--- .../layout/Canvas/views/WidgetCanvas.jsx | 17 +++++++------- .../src/components/layout/Sidebar/Sidebar.jsx | 1 + client/src/theme.js | 18 ++++++++++----- 5 files changed, 45 insertions(+), 19 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index c60c2f9..603d97f 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -21,9 +21,27 @@ function App() { } .react-resizable-handle-se { - position: sticky; - right: 0; + position: absolute; bottom: 0; + z-index: 1; + border-radius: 5px; + } + + * { + scrollbar-width: thin; /* Firefox */ + scrollbar-color: #a0aec0 transparent; /* Firefox */ + } + + /* Chrome, Edge, Safari */ + ::-webkit-scrollbar { + width: 8px; + } + ::-webkit-scrollbar-thumb { + background-color: rgba(100, 100, 100, 0.4); + border-radius: 4px; + } + ::-webkit-scrollbar-track { + background: transparent; } `} /> diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx index 1c83c21..6b723ea 100644 --- a/client/src/components/layout/Canvas/Widget.jsx +++ b/client/src/components/layout/Canvas/Widget.jsx @@ -5,14 +5,14 @@ export default function Widget({ title }) { const styles = recipe(); return ( - + <> {title} - This is the widget content - drag or resize me! + This is their widget content - drag or resize me! - + ); } diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx index ba57e32..33e0912 100644 --- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx +++ b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx @@ -5,19 +5,19 @@ import { useState } from 'react'; import GridLayout, { WidthProvider } from 'react-grid-layout'; import Widget from '../Widget.jsx'; -import { useSlotRecipe, chakra } from '@chakra-ui/react'; +import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react'; export default function WidgetCanvas() { // Define widgets initial position and size // TODO Add dynamic adding/deleting of widgets via options button const recipe = useSlotRecipe({ key: "widget" }); - const styles = recipe(); - const ResponsiveGridLayout = WidthProvider(GridLayout); + const styles = recipe(); // using root recipe for widget below + const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size const [layout, setLayout] = useState([ - { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false }, - { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false }, - { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false } + { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }, + { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }, + { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false } ]); const onLayoutChange = (newLayout) => { @@ -49,9 +49,10 @@ export default function WidgetCanvas() { onDragStop={handleDragStop} > {layout.map((item) => ( - + // this flex wrapper allows the widget to shrink down to the header size, no less + - + ))} diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx index 55de0b0..b488a94 100644 --- a/client/src/components/layout/Sidebar/Sidebar.jsx +++ b/client/src/components/layout/Sidebar/Sidebar.jsx @@ -60,6 +60,7 @@ export const Users = createIcon({ export default function Sidebar() { const [isOpen, setIsOpen] = useState(true); + // this list of btns will come from the db (not every usr will have access to admin) const buttons = [ {icon: PushPin, name: "Dashboard"}, {icon: Globe, name: "Global Map"}, diff --git a/client/src/theme.js b/client/src/theme.js index f2fb2ca..0ac34e4 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -53,22 +53,30 @@ const widgetRecipe = defineSlotRecipe({ slots: ["root", "header", "canvas"], base: { root: { + flexDirection: "column", + gap: "1", + position: "relative", bg: "base100", borderRadius: "md", p: "1", + paddingBottom: "2", border: "1px solid", borderColor: "{base300}", textAlign: "center", - overflow: "auto" + height: "100%" }, header: { - bg: "base100", + bg: "base200", cursor: "move", - borderRadius: "md" + borderRadius: "sm", + whiteSpace: "nowrap" }, canvas: { + flex: "1 1 auto", bg: "base100", - cursor: "default" + cursor: "default", + borderRadius: "md", + overflow: "auto", } } }); @@ -99,8 +107,6 @@ const config = defineConfig({ }, }, recipes: { - // sidebar: sidebarRecipe, - // sidebarBTN: sidebarBtnRecipe, header: headerRecipe, canvas: canvasRecipe, }, From cde87274c647e8eb9db91b2c07ba552021e81c5d Mon Sep 17 00:00:00 2001 From: "Kuchenik, Venessa J" Date: Wed, 23 Jul 2025 21:31:18 +0000 Subject: [PATCH 2/2] Copied and pasted most recent App.jsx into Dashboard.jsx --- client/src/components/layout/Dashboard.jsx | 88 +++++++++++++--------- 1 file changed, 52 insertions(+), 36 deletions(-) diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx index 11be033..ce97e00 100644 --- a/client/src/components/layout/Dashboard.jsx +++ b/client/src/components/layout/Dashboard.jsx @@ -13,42 +13,58 @@ export default function Dashboard() { const [view, setView] = useState("widget"); return ( - <> - + - - -
- - - - - - - - + .react-resizable-handle-se { + position: absolute; + bottom: 0; + z-index: 1; + border-radius: 5px; + } + + * { + scrollbar-width: thin; /* Firefox */ + scrollbar-color: #a0aec0 transparent; /* Firefox */ + } + + /* Chrome, Edge, Safari */ + ::-webkit-scrollbar { + width: 8px; + } + ::-webkit-scrollbar-thumb { + background-color: rgba(100, 100, 100, 0.4); + border-radius: 4px; + } + ::-webkit-scrollbar-track { + background: transparent; + } + `} + /> + + +
+ + + + + + + + ); -} - - +} \ No newline at end of file