From 7e3cb2ca003fe34b7cf212c23604f5be00253e2f Mon Sep 17 00:00:00 2001 From: gigamaster <1905497+gigamaster@users.noreply.github.com> Date: Sun, 29 Sep 2024 11:01:21 +0200 Subject: [PATCH] UI ERD editor --- app/web-tools/erd-editor/css/style.css | 93 ++++++++++++++++++++++++ app/web-tools/erd-editor/erd-editor.html | 57 +++++++++++---- app/web-tools/erd-editor/index.html | 2 +- app/web-tools/vvvebjs/editor.html | 2 - 4 files changed, 137 insertions(+), 17 deletions(-) create mode 100644 app/web-tools/erd-editor/css/style.css diff --git a/app/web-tools/erd-editor/css/style.css b/app/web-tools/erd-editor/css/style.css new file mode 100644 index 00000000..d7385397 --- /dev/null +++ b/app/web-tools/erd-editor/css/style.css @@ -0,0 +1,93 @@ +*,::after,::before {box-sizing:border-box;border:0 solid} +* { margin:0 } +@supports (scrollbar-width: auto) { +* { + scrollbar-color: #262b2f #000; + scrollbar-width: thin; + } +} + +body { + background: radial-gradient(circle at 50% 100%, #262b2f, #000); + color: #aaa; + font: normal 16px/1.5 system-ui, sans-serif; + height: 100vh; + margin: 0; + overflow: hidden; + padding: 0; + width: 100vw; +} + +.split { + display: flex; + flex-direction: row; +} + +#menu { + display:block; + height:100vh; + max-width: 100%; + overflow: hidden; +} + +#menu nav { + background: #111; + border-bottom: 1px solid #212527; + box-shadow: 0px 1px 15px 10px #212527; + display: inline-block; + font-size: 1rem; + height: 30px; + padding: 5px 16px; + position: fixed; + width: calc(100% - 2rem); +} + +#menu a, #menu a:visited { color:#fff; text-decoration:none} +#menu a:active, #menu a:hover {color:#ddd} + +svg { + margin-right: .5rem; + vertical-align: -.175em; +} + +#menu > div { + height:100vh; + overflow-y: hidden; + padding: 50px 1rem; + scrollbar-gutter: stable; +} + +#menu > div:hover { + overflow-y: auto; +} + +#menu > div h3 { + font-weight: 300; +} + +#menu > div p { + font-size: 0.875rem; + margin-bottom: 1rem; +} + +kbd { + background: #212527; + border: 1px solid #111213; + border-radius: 4px; + box-shadow: 1px 1px 2px 0 #5a5a5a70; + color: #fff; + font-size: 12px; + padding: 2px 4px; +} + +.gutter { + background-color: #212527; + background-repeat: no-repeat; + background-position: 50% 50vh; + border: 1px solid #111213; +} + +.gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: col-resize; +} \ No newline at end of file diff --git a/app/web-tools/erd-editor/erd-editor.html b/app/web-tools/erd-editor/erd-editor.html index bfd0c47a..b99af5be 100644 --- a/app/web-tools/erd-editor/erd-editor.html +++ b/app/web-tools/erd-editor/erd-editor.html @@ -22,28 +22,57 @@ - + + + + +
+ +
+
+ \ No newline at end of file diff --git a/app/web-tools/erd-editor/index.html b/app/web-tools/erd-editor/index.html index 1b773cb6..6c0e87a0 100644 --- a/app/web-tools/erd-editor/index.html +++ b/app/web-tools/erd-editor/index.html @@ -163,7 +163,7 @@ -

Web Design

+

ERD Editor

diff --git a/app/web-tools/vvvebjs/editor.html b/app/web-tools/vvvebjs/editor.html index df93d6eb..53b3a64f 100644 --- a/app/web-tools/vvvebjs/editor.html +++ b/app/web-tools/vvvebjs/editor.html @@ -4,13 +4,11 @@ - VvvebJs -