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

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

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

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