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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. 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 ( return (
<div ref={drop} className="flex-grow" id="canvas" > <div ref={drop} className="flex-grow h-full" id="canvas">
<div ref={canvas} className="w-full h-screen"> <div ref={canvas} className="w-full h-full">
<svg <svg
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}

18
src/components/control_panel.jsx
View File

@ -236,9 +236,9 @@ export default function ControlPanel(props) {
}; };
return ( return (
<> <div>
{props.layout.header && header()} {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"> <div className="flex justify-start items-center">
{layoutDropdown()} {layoutDropdown()}
<Divider layout="vertical" margin="8px" /> <Divider layout="vertical" margin="8px" />
@ -276,8 +276,9 @@ export default function ControlPanel(props) {
} }
trigger="click" 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">
zoom <IconCaretdown /> <div>zoom</div>
<IconCaretdown />
</div> </div>
</Dropdown> </Dropdown>
<button <button
@ -313,8 +314,9 @@ export default function ControlPanel(props) {
} }
trigger="click" trigger="click"
> >
<div className="py-1 px-2 hover:bg-slate-200 rounded"> <div className="py-1 px-2 hover:bg-slate-200 flex">
<i className="fa-solid fa-plus"></i> <IconCaretdown /> <i className="fa-solid fa-plus"></i>
<IconCaretdown />
</div> </div>
</Dropdown> </Dropdown>
<button className="py-1 px-2 hover:bg-slate-200 rounded" title="Edit"> <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Edit">
@ -380,7 +382,7 @@ export default function ControlPanel(props) {
/> />
</Form> </Form>
</Modal> </Modal>
</> </div>
); );
function header() { function header() {
@ -678,7 +680,7 @@ export default function ControlPanel(props) {
} }
trigger="click" 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 /> <i className="fa-solid fa-table-list"></i> <IconCaretdown />
</div> </div>
</Dropdown> </Dropdown>

6
src/components/editor_panel.jsx
View File

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

7
src/pages/editor.jsx
View File

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