titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:38 +03:00
parent ef09ded98c
commit 2a0c5071a4
5 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -28,7 +28,7 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root" class="h-full"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

4
src/components/canvas.jsx
View File

@ -235,8 +235,8 @@ export default function Canvas(props) {
);
return (
<div ref={drop} className="flex-grow" id="canvas" >
<div ref={canvas} className="w-full h-screen">
<div ref={drop} className="flex-grow h-full" id="canvas">
<div ref={canvas} className="w-full h-full">
<svg
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}

18
src/components/control_panel.jsx
View File

@ -236,9 +236,9 @@ export default function ControlPanel(props) {
};
return (
<>
<div>
{props.layout.header && header()}
<div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none">
<div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden">
<div className="flex justify-start items-center">
{layoutDropdown()}
<Divider layout="vertical" margin="8px" />
@ -276,8 +276,9 @@ export default function ControlPanel(props) {
}
trigger="click"
>
<div className="py-1 px-2 hover:bg-slate-200 rounded">
zoom <IconCaretdown />
<div className="py-1 px-2 hover:bg-slate-200 rounded flex">
<div>zoom</div>
<IconCaretdown />
</div>
</Dropdown>
<button
@ -313,8 +314,9 @@ export default function ControlPanel(props) {
}
trigger="click"
>
<div className="py-1 px-2 hover:bg-slate-200 rounded">
<i className="fa-solid fa-plus"></i> <IconCaretdown />
<div className="py-1 px-2 hover:bg-slate-200 flex">
<i className="fa-solid fa-plus"></i>
<IconCaretdown />
</div>
</Dropdown>
<button className="py-1 px-2 hover:bg-slate-200 rounded" title="Edit">
@ -380,7 +382,7 @@ export default function ControlPanel(props) {
/>
</Form>
</Modal>
</>
</div>
);
function header() {
@ -678,7 +680,7 @@ export default function ControlPanel(props) {
}
trigger="click"
>
<div className="py-1 px-2 hover:bg-slate-200 rounded">
<div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center align-middle">
<i className="fa-solid fa-table-list"></i> <IconCaretdown />
</div>
</Dropdown>

6
src/components/editor_panel.jsx
View File

@ -54,8 +54,8 @@ const EditorPanel = (props) => {
];
return (
<div className="h-screen flex overflow-clip relative">
<div style={{ width: `${props.width}px` }}>
<div className="flex h-full">
<div style={{ width: `${props.width}px` }} className="overflow-y-auto">
<Tabs
type="card"
tabList={tabList}
@ -143,7 +143,7 @@ const EditorPanel = (props) => {
</button>
</div>
<div
className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${
className={`flex justify-center items-center p-1 h-auto hover:bg-slate-300 cursor-col-resize ${
props.resize ? "bg-slate-300" : ""
}`}
onMouseDown={() => props.setResize(true)}

7
src/pages/editor.jsx
View File

@ -32,10 +32,10 @@ export default function Editor(props) {
};
return (
<>
<div className="h-[100vh] overflow-hidden">
<ControlPanel layout={layout} setLayout={setLayout} />
<div
className={`flex h-full`}
className={`flex h-[calc(100vh-123.93px)]`}
onMouseUp={() => setResize(false)}
onMouseMove={dragHandler}
>
@ -56,6 +56,7 @@ export default function Editor(props) {
/>
)}
<Canvas
width={window.innerWidth-width-8}
tables={tables}
setTables={setTables}
code={code}
@ -68,6 +69,6 @@ export default function Editor(props) {
</DndProvider>
{layout.services && <Sidebar />}
</div>
</>
</div>
);
}