From 852fd540821414fb389afb9b0712aa2f4b1e563d Mon Sep 17 00:00:00 2001 From: David Vogel Date: Sat, 27 May 2023 23:48:57 +0200 Subject: [PATCH] Remove margin from input elements - Remove margin from button - Remove margin from dropdown - Remove margin from input field - Remove margin from sidebar entry - Remove unnecessary margin: 0 definitions - Fix sidebar due to removed button margin - Replace modal requester paragraph with span - Replace simple toast paragraph with span --- components/input/button.vugu | 2 +- components/input/button_vgen.go | 2 +- components/input/dropdown.vugu | 1 + components/input/dropdown_vgen.go | 2 +- components/input/field.vugu | 6 +- components/input/field_vgen.go | 2 +- components/navigation/pagination.vugu | 1 - components/navigation/pagination_vgen.go | 2 +- components/navigation/sidebar-entry.vugu | 2 +- components/navigation/sidebar-entry_vgen.go | 2 +- components/navigation/sidebar.vugu | 34 ++++--- components/navigation/sidebar_vgen.go | 83 ++++++++-------- components/overlay/container.vugu | 8 +- components/overlay/container_vgen.go | 4 +- components/overlay/modal-requester.vugu | 6 +- components/overlay/modal-requester_vgen.go | 4 +- components/overlay/toast-simple.vugu | 6 +- components/overlay/toast-simple_vgen.go | 4 +- page-colors.vugu | 4 - page-colors_vgen.go | 104 ++++++++++---------- page-home.vugu | 6 +- page-home_vgen.go | 43 ++++---- 22 files changed, 160 insertions(+), 168 deletions(-) diff --git a/components/input/button.vugu b/components/input/button.vugu index f0f9989..e565642 100644 --- a/components/input/button.vugu +++ b/components/input/button.vugu @@ -11,7 +11,7 @@ gap: 0.5em; text-decoration: none; padding: 0.3em 0.5em; - margin: 0.5em 0; + /*margin: 0.5em 0;*/ border-radius: 4px; border: 1px solid var(--d3c-color-border); background-color: var(--d3c-color-background); diff --git a/components/input/button_vgen.go b/components/input/button_vgen.go index 0086e27..664f49b 100644 --- a/components/input/button_vgen.go +++ b/components/input/button_vgen.go @@ -58,7 +58,7 @@ func (c *Button) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} { - vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633424238 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1633424238, .d3c-button-vertical.d3c-1633424238 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-borderless .d3c-1633424238, .d3c-button-borderless.d3c-1633424238 {\n\t\tborder: none;\n\t}\n\n\t.d3c-1633424238-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\theight: 4px;\n\t\tleft: 0.5em;\n\t\tright: 0.5em;\n\t\tbottom: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1633424238:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1633424238:focus-visible {\n\t\toutline: 2px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633424238 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\t/*margin: 0.5em 0;*/\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1633424238, .d3c-button-vertical.d3c-1633424238 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-borderless .d3c-1633424238, .d3c-button-borderless.d3c-1633424238 {\n\t\tborder: none;\n\t}\n\n\t.d3c-1633424238-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\theight: 4px;\n\t\tleft: 0.5em;\n\t\tright: 0.5em;\n\t\tbottom: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1633424238-highlighter, .d3c-button-highlight.d3c-1633424238-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1633424238 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1633424238 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1633424238:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1633424238:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1633424238:focus-visible {\n\t\toutline: 2px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/input/dropdown.vugu b/components/input/dropdown.vugu index db7b84a..f99db63 100644 --- a/components/input/dropdown.vugu +++ b/components/input/dropdown.vugu @@ -5,6 +5,7 @@ diff --git a/components/input/dropdown_vgen.go b/components/input/dropdown_vgen.go index 9b1cc45..00782ad 100644 --- a/components/input/dropdown_vgen.go +++ b/components/input/dropdown_vgen.go @@ -50,7 +50,7 @@ func (c *Dropdown) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} { - vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1685186383 {\n\t\tpadding: 0.25em 0.5em;\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1685186383 {\n\t\tpadding: 0.25em 0.5em;\n\t\t/*margin: 0.5em 0;*/\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/input/field.vugu b/components/input/field.vugu index 5d91568..1fa9736 100644 --- a/components/input/field.vugu +++ b/components/input/field.vugu @@ -9,7 +9,7 @@ position: relative; display: inline-flex; overflow: hidden; - margin: 0.5em 0; + /*margin: 0.5em 0;*/ padding-left: 0.25em; border-radius: 4px; height: 2em; @@ -34,10 +34,6 @@ flex-grow: 1; } - .d3c-1684925699 > * { - margin: 0; - } - .d3c-1684925699:has(> input:focus) { outline: 2px solid var(--d3c-color-accent); } diff --git a/components/input/field_vgen.go b/components/input/field_vgen.go index 308d89a..b2b9cbb 100644 --- a/components/input/field_vgen.go +++ b/components/input/field_vgen.go @@ -57,7 +57,7 @@ func (c *Field) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} { - vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684925699 {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\tmargin: 0.5em 0;\n\t\tpadding-left: 0.25em;\n\t\tborder-radius: 4px;\n\t\theight: 2em;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\t/*gap: 0.5em;*/\n\t}\n\n\t.d3c-1684925699-error {\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbackground-color: var(--d3c-color-background);\n\t}\n\n\t.d3c-1684925699 > input {\n\t\tborder: none !important;\n\t\toutline: none;\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1684925699 > * {\n\t\tmargin: 0;\n\t}\n\n\t.d3c-1684925699:has(> input:focus) {\n\t\toutline: 2px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684925699 {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\toverflow: hidden;\n\t\t/*margin: 0.5em 0;*/\n\t\tpadding-left: 0.25em;\n\t\tborder-radius: 4px;\n\t\theight: 2em;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\t/*gap: 0.5em;*/\n\t}\n\n\t.d3c-1684925699-error {\n\t\tposition: absolute;\n\t\theight: 2px;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbackground-color: var(--d3c-color-background);\n\t}\n\n\t.d3c-1684925699 > input {\n\t\tborder: none !important;\n\t\toutline: none;\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1684925699:has(> input:focus) {\n\t\toutline: 2px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/navigation/pagination.vugu b/components/navigation/pagination.vugu index 4e23b69..f6c602f 100644 --- a/components/navigation/pagination.vugu +++ b/components/navigation/pagination.vugu @@ -17,7 +17,6 @@ } .d3c-1684167638 > * { - margin: 0; min-width: 2em; text-align: center; } diff --git a/components/navigation/pagination_vgen.go b/components/navigation/pagination_vgen.go index 24898a9..bd2ad73 100644 --- a/components/navigation/pagination_vgen.go +++ b/components/navigation/pagination_vgen.go @@ -149,7 +149,7 @@ func (c *Pagination) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} { - vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684167638 {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tmargin: 0.5em 0;\n\t\t/*border-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);*/\n\t\t/*width: min-content;*/\n\t\t/*overflow: hidden;*/\n\t}\n\n\t.d3c-1684167638 > * {\n\t\tmargin: 0;\n\t\tmin-width: 2em;\n\t\ttext-align: center;\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684167638 {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tmargin: 0.5em 0;\n\t\t/*border-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);*/\n\t\t/*width: min-content;*/\n\t\t/*overflow: hidden;*/\n\t}\n\n\t.d3c-1684167638 > * {\n\t\tmin-width: 2em;\n\t\ttext-align: center;\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/navigation/sidebar-entry.vugu b/components/navigation/sidebar-entry.vugu index 9edd9e7..934b892 100644 --- a/components/navigation/sidebar-entry.vugu +++ b/components/navigation/sidebar-entry.vugu @@ -10,7 +10,7 @@ gap: 0.5em; text-decoration: none; padding: 0.3em 0.5em; - margin: 0.5em 0; + /*margin: 0.5em 0;*/ border-radius: 4px; border: 1px solid var(--d3c-color-border); background-color: var(--d3c-color-background); diff --git a/components/navigation/sidebar-entry_vgen.go b/components/navigation/sidebar-entry_vgen.go index 86b2538..239bbb4 100644 --- a/components/navigation/sidebar-entry_vgen.go +++ b/components/navigation/sidebar-entry_vgen.go @@ -58,7 +58,7 @@ func (c *SidebarEntry) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} { - vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1683622560 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\tmargin: 0.5em 0;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1683622560, .d3c-button-vertical.d3c-1683622560 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-borderless .d3c-1683622560, .d3c-button-borderless.d3c-1683622560 {\n\t\tborder: none;\n\t}\n\n\t.d3c-1683622560-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\twidth: 4px;\n\t\ttop: 0.5em;\n\t\tbottom: 0.5em;\n\t\tleft: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1683622560:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1683622560:focus-visible {\n\t\toutline: 2px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1683622560 {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.5em;\n\t\ttext-decoration: none;\n\t\tpadding: 0.3em 0.5em;\n\t\t/*margin: 0.5em 0;*/\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid var(--d3c-color-border);\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: 1em;\n\t\tfont-family: \"Segoe UI\", sans-serif;\n\t\tmin-height: 2em;\n\t\tuser-select: none;\n\t}\n\n\t.d3c-button-vertical .d3c-1683622560, .d3c-button-vertical.d3c-1683622560 {\n\t\tflex-direction: column;\n\t}\n\n\t.d3c-button-borderless .d3c-1683622560, .d3c-button-borderless.d3c-1683622560 {\n\t\tborder: none;\n\t}\n\n\t.d3c-1683622560-highlighter {\n\t\tposition: absolute;\n\t\tborder-radius: 2px;\n\t\twidth: 4px;\n\t\ttop: 0.5em;\n\t\tbottom: 0.5em;\n\t\tleft: 0;\n\t}\n\n\t.d3c-button-highlight .d3c-1683622560-highlighter, .d3c-button-highlight.d3c-1683622560-highlighter {\n\t\tbackground-color: var(--d3c-color-accent) !important;\n\t}\n\n\t.d3c-button-only-icon .d3c-1683622560 > *:nth-child(n+3), .d3c-button-only-icon.d3c-1683622560 > *:nth-child(n+3) {\n\t\tdisplay: none;\n\t}\n\n\t.d3c-1683622560:hover {\n\t\tbackground-color: var(--d3c-color-hovered);\n\t}\n\n\t.d3c-1683622560:active {\n\t\tbackground-color: var(--d3c-color-activated);\n\t}\n\n\t.d3c-1683622560:focus-visible {\n\t\toutline: 2px solid var(--d3c-color-accent);\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/navigation/sidebar.vugu b/components/navigation/sidebar.vugu index 7632b31..30a5ca9 100644 --- a/components/navigation/sidebar.vugu +++ b/components/navigation/sidebar.vugu @@ -1,15 +1,16 @@
- - - +
+ + + +
-
@@ -44,7 +45,7 @@ display: flex; position: relative; gap: 0.5em; - padding: 0 0.5em; + padding: 0.5em; box-sizing: border-box; background-color: var(--d3c-color-background); color: var(--d3c-color-text); @@ -52,18 +53,21 @@ .d3c-1633357633-sidebar { height: 100%; + box-sizing: border-box; border-right: 1px solid var(--d3c-color-border); - padding: 0 0.5em; + padding: 0.5em; display: flex; flex-direction: column; + gap: 1em; background-color: var(--d3c-color-background); color: var(--d3c-color-text); z-index: 1; } .d3c-1633357633-sidebar-menu { - /*display: flex; - flex-direction: column;*/ + display: flex; + flex-direction: column; + gap: 0.5em; } @media (min-aspect-ratio: 1/1) { @@ -81,7 +85,17 @@ } .d3c-1633357633-sidebar-entries { + display: flex; + flex-direction: column; + gap: 0.5em; overflow-y: scroll; + flex-grow: 1; + } + + .d3c-1633357633-bottom-entries { + display: flex; + flex-direction: column; + gap: 0.5em; } .d3c-1633357633-sidebar-entries > * { @@ -92,10 +106,6 @@ width: 100%; } - .d3c-1633357633-spacer { - flex-grow: 1; - } - .d3c-1633357633-body { overflow: auto; flex-grow: 1; diff --git a/components/navigation/sidebar_vgen.go b/components/navigation/sidebar_vgen.go index f330c6b..167510a 100644 --- a/components/navigation/sidebar_vgen.go +++ b/components/navigation/sidebar_vgen.go @@ -44,42 +44,52 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"} vgparent.AppendChild(vgn) + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute(nil)} + vgparent.AppendChild(vgn) { - vgcompKey := vugu.MakeCompKey(0xF056B7F7D7F7A2C6^vgin.CurrentPositionHash(), vgiterkey) - // ask BuildEnv for prior instance of this specific component - vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button) - if vgcomp == nil { - // create new one if needed - vgcomp = new(input.Button) - vgin.BuildEnv.WireComponent(vgcomp) - } - vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around - vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleMenuButton(event) }) - vgcomp.IconSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { - vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)} - vgout = &vugu.BuildOut{} - vgout.Out = append(vgout.Out, vgn) - vgparent := vgn - _ = vgparent + vgparent := vgn + _ = vgparent + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"} + vgparent.AppendChild(vgn) + { + vgcompKey := vugu.MakeCompKey(0xF056B7F7D7F7A2C6^vgin.CurrentPositionHash(), vgiterkey) + // ask BuildEnv for prior instance of this specific component + vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button) + if vgcomp == nil { + // create new one if needed + vgcomp = new(input.Button) + vgin.BuildEnv.WireComponent(vgcomp) + } + vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around + vgcomp.Click = input.ClickFunc(func(event input.ClickEvent) { c.handleMenuButton(event) }) + vgcomp.IconSlot = vugu.NewBuilderFunc(func(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { + vgn := &vugu.VGNode{Type: vugu.VGNodeType(3)} + vgout = &vugu.BuildOut{} + vgout.Out = append(vgout.Out, vgn) + vgparent := vgn + _ = vgparent - { - vgcompKey := vugu.MakeCompKey(0x2C2D8D3889E31C6A^vgin.CurrentPositionHash(), vgiterkey) - // ask BuildEnv for prior instance of this specific component - vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobalNav) - if vgcomp == nil { - // create new one if needed - vgcomp = new(icons.LGlobalNav) - vgin.BuildEnv.WireComponent(vgcomp) + { + vgcompKey := vugu.MakeCompKey(0x2C2D8D3889E31C6A^vgin.CurrentPositionHash(), vgiterkey) + // ask BuildEnv for prior instance of this specific component + vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobalNav) + if vgcomp == nil { + // create new one if needed + vgcomp = new(icons.LGlobalNav) + vgin.BuildEnv.WireComponent(vgcomp) + } + vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around + vgout.Components = append(vgout.Components, vgcomp) + vgn = &vugu.VGNode{Component: vgcomp} + vgparent.AppendChild(vgn) } - vgin.BuildEnv.UseComponent(vgcompKey, vgcomp) // ensure we can use this in the cache next time around - vgout.Components = append(vgout.Components, vgcomp) - vgn = &vugu.VGNode{Component: vgcomp} - vgparent.AppendChild(vgn) - } - return - }) - vgout.Components = append(vgout.Components, vgcomp) - vgn = &vugu.VGNode{Component: vgcomp} + return + }) + vgout.Components = append(vgout.Components, vgcomp) + vgn = &vugu.VGNode{Component: vgcomp} + vgparent.AppendChild(vgn) + } + vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"} vgparent.AppendChild(vgn) } vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"} @@ -119,11 +129,6 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"} vgparent.AppendChild(vgn) - vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633357633-spacer"}}} - vgparent.AppendChild(vgn) - vgn.SetInnerHTML(vugu.HTML("")) - vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"} - vgparent.AppendChild(vgn) vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "div", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1633357633-bottom-entries"}}} vgparent.AppendChild(vgn) { @@ -250,7 +255,7 @@ func (c *Sidebar) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} { - vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633357633 {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-menu {\n\t\twidth: 100%;\n\t\tborder-bottom: 1px solid var(--d3c-color-border);\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tgap: 0.5em;\n\t\tpadding: 0 0.5em;\n\t\tbox-sizing: border-box;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-sidebar {\n\t\theight: 100%;\n\t\tborder-right: 1px solid var(--d3c-color-border);\n\t\tpadding: 0 0.5em;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1633357633-sidebar-menu {\n\t\t/*display: flex;\n\t\tflex-direction: column;*/\n\t}\n\n\t@media (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-menu, .d3c-1633357633-body-overlay {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t@media not all and (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-sidebar-minimized {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.d3c-1633357633-sidebar {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t.d3c-1633357633-sidebar-entries {\n\t\toverflow-y: scroll;\n\t}\n\n\t.d3c-1633357633-sidebar-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-bottom-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-spacer {\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1633357633-body {\n\t\toverflow: auto;\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t}\n\n\t.d3c-1633357633-body-overlay {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: fixed;\n\t\t/*backdrop-filter: blur(1px);*/\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1633357633 {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-menu {\n\t\twidth: 100%;\n\t\tborder-bottom: 1px solid var(--d3c-color-border);\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tgap: 0.5em;\n\t\tpadding: 0.5em;\n\t\tbox-sizing: border-box;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1633357633-sidebar {\n\t\theight: 100%;\n\t\tbox-sizing: border-box;\n\t\tborder-right: 1px solid var(--d3c-color-border);\n\t\tpadding: 0.5em;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1em;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1633357633-sidebar-menu {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.5em;\n\t}\n\n\t@media (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-menu, .d3c-1633357633-body-overlay {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t@media not all and (min-aspect-ratio: 1/1) {\n\t\t.d3c-1633357633-sidebar-minimized {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.d3c-1633357633-sidebar {\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t.d3c-1633357633-sidebar-entries {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.5em;\n\t\toverflow-y: scroll;\n\t\tflex-grow: 1;\n\t}\n\n\t.d3c-1633357633-bottom-entries {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.5em;\n\t}\n\n\t.d3c-1633357633-sidebar-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-bottom-entries > * {\n\t\twidth: 100%;\n\t}\n\n\t.d3c-1633357633-body {\n\t\toverflow: auto;\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t}\n\n\t.d3c-1633357633-body-overlay {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: fixed;\n\t\t/*backdrop-filter: blur(1px);*/\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/overlay/container.vugu b/components/overlay/container.vugu index 4f9d648..257ee80 100644 --- a/components/overlay/container.vugu +++ b/components/overlay/container.vugu @@ -2,7 +2,7 @@
-

+

@@ -56,10 +56,6 @@ color: var(--d3c-color-text); } - .d3c-1684423938-modal-menu > * { - margin: 0 !important; - } - .d3c-1684423938-modal-title { text-align: center; } @@ -97,7 +93,7 @@ } .d3c-1684423938-toast-menu { - padding-right: 0.5em; + padding: 0.5em 0.5em 0 0; } diff --git a/components/overlay/container_vgen.go b/components/overlay/container_vgen.go index f9bda27..d64c528 100644 --- a/components/overlay/container_vgen.go +++ b/components/overlay/container_vgen.go @@ -51,7 +51,7 @@ func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { _ = vgparent vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"} vgparent.AppendChild(vgn) - vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h3", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-modal-title"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "flex-grow:1"}}} + vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h3", Attr: []vugu.VGAttribute{vugu.VGAttribute{Namespace: "", Key: "class", Val: "d3c-1684423938-modal-title"}, vugu.VGAttribute{Namespace: "", Key: "style", Val: "flex-grow:1; margin: 0;"}}} vgparent.AppendChild(vgn) vgn.SetInnerHTML(c.modalTitle) vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"} @@ -223,7 +223,7 @@ func (c *Container) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) { } vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)} { - vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684423938 {\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t}\n\n\t.d3c-1684423938-modal-container {\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tbackdrop-filter: blur(1px) brightness(80%);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1684423938-modal-container > div {\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tborder-radius: 4px;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t\toverflow: auto;\n\t\tbox-shadow: 0 1em 3em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-modal-menu {\n\t\tpadding: 0.5em;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tjustify-content: flex-end;\n\t\talign-items: baseline;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-modal-menu > * {\n\t\tmargin: 0 !important;\n\t}\n\n\t.d3c-1684423938-modal-title {\n\t\ttext-align: center;\n\t}\n\n\t.d3c-1684423938-toast-container {\n\t\tpadding: 1em;\n\t\tpointer-events: none;\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tgap: 1em;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.d3c-1684423938-toast {\n\t\tpointer-events: auto;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tborder-radius: 4px;\n\t\toverflow: hidden;\n\t\tcolor: var(--d3c-color-text);\n\t\tbox-shadow: 0 1em 2em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-toast-signal {\n\t\twidth: 0.5em;\n\t\theight: 100%;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-toast-menu {\n\t\tpadding-right: 0.5em;\n\t}\n", Attr: []vugu.VGAttribute(nil)}) + vgn.AppendChild(&vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t.d3c-1684423938 {\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t}\n\n\t.d3c-1684423938-modal-container {\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tbackdrop-filter: blur(1px) brightness(80%);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tz-index: 1;\n\t}\n\n\t.d3c-1684423938-modal-container > div {\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t\tborder-radius: 4px;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t\toverflow: auto;\n\t\tbox-shadow: 0 1em 3em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-modal-menu {\n\t\tpadding: 0.5em;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tjustify-content: flex-end;\n\t\talign-items: baseline;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-modal-title {\n\t\ttext-align: center;\n\t}\n\n\t.d3c-1684423938-toast-container {\n\t\tpadding: 1em;\n\t\tpointer-events: none;\n\t\twidth: 100vw;\n\t\theight: 100vh;\n\t\tposition: fixed;\n\t\tz-index: 2;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-end;\n\t\talign-items: center;\n\t\tgap: 1em;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.d3c-1684423938-toast {\n\t\tpointer-events: auto;\n\t\tdisplay: flex;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tborder-radius: 4px;\n\t\toverflow: hidden;\n\t\tcolor: var(--d3c-color-text);\n\t\tbox-shadow: 0 1em 2em var(--d3c-color-shadow);\n\t}\n\n\t.d3c-1684423938-toast-signal {\n\t\twidth: 0.5em;\n\t\theight: 100%;\n\t\tbackground-color: var(--d3c-color-background);\n\t\tcolor: var(--d3c-color-text);\n\t}\n\n\t.d3c-1684423938-toast-menu {\n\t\tpadding: 0.5em 0.5em 0 0;\n\t}\n", Attr: []vugu.VGAttribute(nil)}) } vgout.AppendCSS(vgn) return vgout diff --git a/components/overlay/modal-requester.vugu b/components/overlay/modal-requester.vugu index 2caeffe..ddb9136 100644 --- a/components/overlay/modal-requester.vugu +++ b/components/overlay/modal-requester.vugu @@ -2,7 +2,7 @@
-

+
Abort @@ -17,10 +17,6 @@ display: flex; gap: 0.5em; } - - .d3c-1684441516-flex > * { - margin: 0; - }