d38fa7a507
- Add responsive design for mobile devices (≤768px) - Switch from horizontal to vertical layout on mobile - Hide middle divider panel on mobile - Optimize button sizes for mobile touch interaction - Improve input field and button alignment on mobile
35 lines
859 B
TypeScript
35 lines
859 B
TypeScript
import {createUseStyles} from "react-jss";
|
|
|
|
const useStyle = createUseStyles({
|
|
container: {
|
|
backgroundColor: 'lightgray',
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
|
|
"@media (max-width: 768px)": {
|
|
display: "none",
|
|
},
|
|
},
|
|
left: {
|
|
backgroundColor: "#e3f2fd",
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
clipPath: 'polygon(0 0, 100% 0, 0 100%)'
|
|
},
|
|
right: {
|
|
backgroundColor: "#e8f5e9",
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
clipPath: 'polygon(100% 0, 100% 100%, 0 100%)'
|
|
},
|
|
})
|
|
export const PanelMid = () => {
|
|
const style = useStyle()
|
|
return <div className={style.container}>
|
|
<div className={style.left}></div>
|
|
<div className={style.right}></div>
|
|
</div>
|
|
};
|