Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Adjust panel size calculations and clean up realTimeViz styles

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-04-07 18:37:17 +05:30
parent 1852a47775
commit bde1e6318c
2 changed files with 13 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/components/ui/componets/Panel.tsx
View File

@@ -126,18 +126,17 @@ const Panel: React.FC<PanelProps> = ({
const bottomActive = previousPanels.includes("bottom"); const bottomActive = previousPanels.includes("bottom");
// Dynamic panel sizes based on canvas width // Dynamic panel sizes based on canvas width
const panelSizeWidth = Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px const panelSizeWidth = isPlaying ? Math.max(canvasDimensions.width * 0.14, 200) : Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px
const panelSizeHeight = Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px const panelSizeHeight = isPlaying ? Math.max(canvasDimensions.width * 0.13, 200) : Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px
switch (side) { switch (side) {
case "top": case "top":
case "bottom": case "bottom":
return { return {
// minWidth: "200px", // Minimum width constraint // minWidth: "200px", // Minimum width constraint
width: `calc(100% - ${ width: `calc(100% - ${(leftActive ? panelSizeWidth : 0) +
(leftActive ? panelSizeWidth : 0) +
(rightActive ? panelSizeWidth : 0) (rightActive ? panelSizeWidth : 0)
}px)`, }px)`,
minHeight: "200px", // Minimum height constraint minHeight: "200px", // Minimum height constraint
height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin
left: leftActive ? `${panelSizeWidth}px` : "0", left: leftActive ? `${panelSizeWidth}px` : "0",
@@ -151,10 +150,9 @@ const Panel: React.FC<PanelProps> = ({
minWidth: "200px", // Minimum width constraint minWidth: "200px", // Minimum width constraint
width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin
// minHeight: "200px", // Minimum height constraint // minHeight: "200px", // Minimum height constraint
height: `calc(100% - ${ height: `calc(100% - ${(topActive ? panelSizeHeight : 0) +
(topActive ? panelSizeHeight : 0) +
(bottomActive ? panelSizeHeight : 0) (bottomActive ? panelSizeHeight : 0)
}px)`, }px)`,
top: topActive ? `${panelSizeHeight}px` : "0", top: topActive ? `${panelSizeHeight}px` : "0",
bottom: bottomActive ? `${panelSizeHeight}px` : "0", bottom: bottomActive ? `${panelSizeHeight}px` : "0",
[side]: "0", [side]: "0",
@@ -299,9 +297,8 @@ const Panel: React.FC<PanelProps> = ({
{selectedZone.activeSides.map((side) => ( {selectedZone.activeSides.map((side) => (
<div <div
key={side} key={side}
className={`panel ${side}-panel absolute ${isPlaying ? "" : ""} ${ className={`panel ${side}-panel absolute ${isPlaying ? "" : ""} ${hiddenPanels.includes(side) ? "hidePanel" : ""
hiddenPanels.includes(side) ? "hidePanel" : "" }`}
}`}
style={getPanelStyle(side)} style={getPanelStyle(side)}
onDrop={(e) => handleDrop(e, side)} onDrop={(e) => handleDrop(e, side)}
onDragOver={(e) => e.preventDefault()} onDragOver={(e) => e.preventDefault()}

18
app/src/styles/pages/realTimeViz.scss
View File

@@ -306,7 +306,6 @@
min-height: 150px; min-height: 150px;
.chart-container { .chart-container {
min-width: 160px; min-width: 160px;
} }
} }
@@ -324,14 +323,12 @@
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
&.right-panel { &.right-panel {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0 bottom: 0;
} }
&.left-panel, &.left-panel,
@@ -342,7 +339,6 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: 6px; gap: 6px;
.chart-container { .chart-container {
@@ -355,8 +351,6 @@
background-color: var(--background-color); background-color: var(--background-color);
position: relative; position: relative;
} }
} }
} }
} }
@@ -368,8 +362,8 @@
.playingFlase { .playingFlase {
.zone-wrapper.bottom { .zone-wrapper.bottom {
bottom: calc(var(--realTimeViz-container-height) * 0.3); bottom: calc(var(--realTimeViz-container-height) * 0.25);
bottom: 210px; // bottom: 210px;
} }
} }
@@ -658,9 +652,6 @@
} }
} }
} }
} }
} }
@@ -756,14 +747,13 @@
} }
.connectionSuccess { .connectionSuccess {
outline-color: #43C06D; outline-color: #43c06d;
} }
.connectionFails { .connectionFails {
outline-color: #ffe3e0; outline-color: #ffe3e0;
} }
.editWidgetOptions { .editWidgetOptions {
position: absolute; position: absolute;
// top: 50%; // top: 50%;