feat: refactor compareLayout styles for improved layout and responsiveness
This commit is contained in:
parent
db46327249
commit
0b9e894341
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useRef, useEffect } from "react";
|
||||
import React, { useState, useRef, useEffect, Suspense } from "react";
|
||||
import {
|
||||
CompareLayoutIcon,
|
||||
LayoutIcon,
|
||||
|
|
@ -9,6 +9,7 @@ import Search from "../inputs/Search";
|
|||
import OuterClick from "../../../utils/outerClick";
|
||||
import RegularDropDown from "../inputs/RegularDropDown";
|
||||
import { useProductStore } from "../../../store/simulation/useProductStore";
|
||||
import Scene from "../../../modules/scene/scene";
|
||||
|
||||
interface Layout {
|
||||
id: number;
|
||||
|
|
@ -90,6 +91,7 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
|
|||
window.removeEventListener("mouseup", handleMouseUp);
|
||||
document.body.classList.remove("resizing-active");
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isResizing]);
|
||||
|
||||
// Maintain proportional width on window resize
|
||||
|
|
@ -120,10 +122,22 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
|
|||
ref={wrapperRef}
|
||||
style={{ width }}
|
||||
>
|
||||
<div className="chooseLayout-container">
|
||||
<div className="resizer" onMouseDown={handleStartResizing}>
|
||||
<button
|
||||
title="resize-canvas"
|
||||
id="compare-resize-slider-btn"
|
||||
className="resizer"
|
||||
onMouseDown={handleStartResizing}
|
||||
>
|
||||
<ResizerIcon />
|
||||
</button>
|
||||
<div className="chooseLayout-container">
|
||||
{selectedLayout && (
|
||||
<div className="compare-layout-canvas-container">
|
||||
{/*<Suspense fallback={null}>
|
||||
<Scene />
|
||||
</Suspense> */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{width !== "0px" &&
|
||||
!selectedLayout && ( // Show only if no layout selected
|
||||
|
|
|
|||
|
|
@ -26,9 +26,7 @@
|
|||
animation: slideInFromRight 0.4s ease-out forwards;
|
||||
user-select: none;
|
||||
|
||||
|
||||
.selectLayout-wrapper {
|
||||
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 40px;
|
||||
|
|
@ -38,14 +36,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.chooseLayout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.resizer {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -62,9 +52,23 @@
|
|||
cursor: ew-resize;
|
||||
transition: transform 0.1s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.chooseLayout-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.compare-layout-canvas-container {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.chooseLayout-wrapper {
|
||||
|
|
@ -83,10 +87,8 @@
|
|||
text-align: center;
|
||||
|
||||
svg {
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.value {
|
||||
|
|
@ -108,12 +110,8 @@
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.displayLayouts-container {
|
||||
|
|
@ -149,7 +147,6 @@
|
|||
|
||||
.layouts-container {
|
||||
.layout {
|
||||
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
|
|
@ -168,20 +165,13 @@
|
|||
|
||||
.layout {
|
||||
color: var(--text-button-color) !important;
|
||||
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
path {
|
||||
|
||||
fill: var(--text-button-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
|
||||
color: var(--background-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -190,10 +180,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.compare-result-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -239,7 +225,6 @@
|
|||
padding-right: 65px;
|
||||
|
||||
.header {
|
||||
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
|
@ -266,7 +251,6 @@
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
padding-top: 6px;
|
||||
font-size: var(--font-size-xlarge);
|
||||
|
|
@ -298,8 +282,11 @@
|
|||
overflow: visible; // allow content like labels to overflow
|
||||
|
||||
&:nth-child(1) {
|
||||
.metric-label {
|
||||
top: -57%;
|
||||
left: 220%;
|
||||
}
|
||||
&::after {
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
|
|
@ -307,11 +294,17 @@
|
|||
left: 50%;
|
||||
width: 100%; // Required for visible shape
|
||||
height: 40px;
|
||||
background-color: #B7B7C6;
|
||||
background-color: #b7b7c6;
|
||||
|
||||
// Custom polygon shape (adjust if needed)
|
||||
clip-path: polygon(96% 52%, 96% 54%, 45% 53%, 3% 100%, 0 100%, 42% 52%);
|
||||
|
||||
clip-path: polygon(
|
||||
96% 52%,
|
||||
96% 54%,
|
||||
45% 53%,
|
||||
3% 100%,
|
||||
0 100%,
|
||||
42% 52%
|
||||
);
|
||||
|
||||
z-index: 0; // Behind any inner content
|
||||
}
|
||||
|
|
@ -322,8 +315,25 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
.metric-label {
|
||||
white-space: normal;
|
||||
width: 50px;
|
||||
left: 230%;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
grid-row: span 2 / span 2;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
margin-top: 40%;
|
||||
left: -16px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
position: absolute;
|
||||
|
|
@ -337,25 +347,6 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.metric-wrapper {
|
||||
|
||||
&:nth-child(1) {
|
||||
.metric-label {
|
||||
top: -57%;
|
||||
left: 220%;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.metric-label {
|
||||
white-space: normal;
|
||||
width: 50px;
|
||||
// top: -50%;
|
||||
left: 230%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -373,10 +364,16 @@
|
|||
height: 100%;
|
||||
|
||||
background: var(--background-color, wheat);
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
clip-path: polygon(
|
||||
25% 0%,
|
||||
75% 0%,
|
||||
100% 50%,
|
||||
75% 100%,
|
||||
25% 100%,
|
||||
0% 50%
|
||||
);
|
||||
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
|
||||
// backdrop-filter: blur(20px);
|
||||
// filter: drop-shadow(30px 10px 4px #4444dd);
|
||||
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
|
@ -386,28 +383,10 @@
|
|||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.metric-wrapper:nth-child(2) {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.metric-wrapper:nth-child(3) {
|
||||
grid-row: span 2 / span 2;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
margin-top: 40%;
|
||||
left: -16px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.simulation-tag {
|
||||
|
||||
background: var(--background-color-button);
|
||||
|
||||
color: var(--icon-default-color-active);
|
||||
|
|
@ -418,13 +397,9 @@
|
|||
border-radius: 12px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
|
|
@ -437,15 +412,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// body.compare-layout-open {
|
||||
// main {
|
||||
// padding-right: 10px;
|
||||
|
||||
// transition: padding 0.3s ease;
|
||||
// }
|
||||
// }
|
||||
|
||||
.energy-usage {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -481,18 +447,14 @@
|
|||
}
|
||||
|
||||
.chart {
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.throughPutCard-container {
|
||||
|
||||
.layers-wrapper {
|
||||
padding: 20px 10px;
|
||||
height: 100%;
|
||||
|
|
@ -544,11 +506,11 @@
|
|||
}
|
||||
|
||||
.layer-profit {
|
||||
color: #14CA44;
|
||||
color: #14ca44;
|
||||
text-align: end;
|
||||
|
||||
span {
|
||||
color: #14CA44;
|
||||
color: #14ca44;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -559,9 +521,6 @@
|
|||
.overallDowntime-container {
|
||||
.totalDownTime-wrapper {
|
||||
display: flex;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
.totalDownTime {
|
||||
width: 70%;
|
||||
|
|
@ -595,33 +554,8 @@
|
|||
}
|
||||
|
||||
.chart {
|
||||
height: auto;
|
||||
width: 30%;
|
||||
width: 20px;
|
||||
position: relative;
|
||||
perspective: 800px;
|
||||
/* Enables 3D viewing */
|
||||
|
||||
|
||||
.vertical-chart {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 6px;
|
||||
|
||||
.layout2 {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(15deg);
|
||||
/* 3D tilt */
|
||||
height: 20%;
|
||||
background-color: #F3A60D;
|
||||
}
|
||||
|
||||
.layout1 {
|
||||
height: 80%;
|
||||
background-color: #6F42C1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -638,7 +572,6 @@
|
|||
margin: 40px 0;
|
||||
|
||||
.overallScrapRate-key {
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
Loading…
Reference in New Issue