me/frm
1
0
Fork 0
mirror of https://github.com/acaloiaro/frm synced 2026-07-21 18:29:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: use fixed nav position

Browse source
This commit is contained in:
Adriano Caloiaro 2025-01-29 11:55:26 -07:00
parent ae3dc35063
commit 8b0afd52ee
No known key found for this signature in database
GPG key ID: C2BC56DE73CE3F75
4 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
static/css/styles.css
View file

@ -2460,6 +2460,10 @@ input.tab:checked + .tab-content,
margin-inline-start: calc(var(--border-btn) * -1);
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
@ -2923,6 +2927,10 @@ input.tab:checked + .tab-content,
padding-top: 3rem;
}
.pt-20 {
padding-top: 5rem;
}
.pt-3 {
padding-top: 0.75rem;
}

4
ui/builder/common.templ
View file

@ -51,7 +51,7 @@ templ Builder(form frm.Form) {
@ui.App("Form builder") {
<section id="app-container h-2/3 max-h-1/3">
@FormBuilderNav(form)
<section id="builder-main" class="flex">
<section id="builder-main" class="flex pt-20">
<!-- Left column -->
@builderColumnLeft(form)
<!-- Middle Column -->
@ -74,7 +74,7 @@ templ FormBuilderNavTitle(form frm.Form) {
// FormBuilderNav is the top-of-the-page navigation bar
templ FormBuilderNav(form frm.Form) {
<div id="form-builder-nav" data-hx-swap-oob="true" class="p-2 flex gap-x-2 items-center bg-white z-50">
<div id="form-builder-nav" data-hx-swap-oob="true" class="fixed w-full p-2 flex gap-x-2 items-center bg-white z-50">
<div id="form-editor-navbar-tabs">
<div role="tablist" aria-orientation="horizontal" class="tabs tabs-boxed bg-gray-50 dark:bg-gray-800 rounded-lg p-1 h-auto grid grid-cols-2 items-center gap-x-1.5 px-2">
@ui.MutedButton(ui.ButtonArgs{Label: "Build", Classes: []string{"cursor-pointer tab-active [--fallback-p:white] [--fallback-pc:black] place-self-center"}}, templ.Attributes{

4
ui/builder/common_templ.go
View file

@ -96,7 +96,7 @@ func Builder(form frm.Form) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<section id=\"builder-main\" class=\"flex\"><!-- Left column -->")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<section id=\"builder-main\" class=\"flex pt-20\"><!-- Left column -->")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -199,7 +199,7 @@ func FormBuilderNav(form frm.Form) templ.Component {
templ_7745c5c3_Var5 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div id=\"form-builder-nav\" data-hx-swap-oob=\"true\" class=\"p-2 flex gap-x-2 items-center bg-white z-50\"><div id=\"form-editor-navbar-tabs\"><div role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs tabs-boxed bg-gray-50 dark:bg-gray-800 rounded-lg p-1 h-auto grid grid-cols-2 items-center gap-x-1.5 px-2\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div id=\"form-builder-nav\" data-hx-swap-oob=\"true\" class=\"fixed w-full p-2 flex gap-x-2 items-center bg-white z-50\"><div id=\"form-editor-navbar-tabs\"><div role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs tabs-boxed bg-gray-50 dark:bg-gray-800 rounded-lg p-1 h-auto grid grid-cols-2 items-center gap-x-1.5 px-2\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

4
ui/builder/common_templ.txt
View file

@ -1,11 +1,11 @@
<section id=\"app-container h-2/3 max-h-1/3\">
<section id=\"builder-main\" class=\"flex\"><!-- Left column -->
<section id=\"builder-main\" class=\"flex pt-20\"><!-- Left column -->
<!-- Middle Column -->
<!-- Right Column -->
</section></section>
<div id=\"form-builder-nav-title\" data-hx-swap-oob=\"true\" class=\"flex-grow flex justify-center\"><h3 tabindex=\"0\" class=\"rounded px-2 cursor-pointer relative font-medium py-1 text-2xl w-2/3 text-center text-gray-500 truncate form-editor-title\" style=\"height: auto;\" id=\"form-editor-title\">
</h3></div>
<div id=\"form-builder-nav\" data-hx-swap-oob=\"true\" class=\"p-2 flex gap-x-2 items-center bg-white z-50\"><div id=\"form-editor-navbar-tabs\"><div role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs tabs-boxed bg-gray-50 dark:bg-gray-800 rounded-lg p-1 h-auto grid grid-cols-2 items-center gap-x-1.5 px-2\">
<div id=\"form-builder-nav\" data-hx-swap-oob=\"true\" class=\"fixed w-full p-2 flex gap-x-2 items-center bg-white z-50\"><div id=\"form-editor-navbar-tabs\"><div role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs tabs-boxed bg-gray-50 dark:bg-gray-800 rounded-lg p-1 h-auto grid grid-cols-2 items-center gap-x-1.5 px-2\">
</div></div>
<div class=\"flex items-stretch gap-x-2\"><div class=\"inline-flex items-center relative\"><a href=\"#\" class=\"text-sm p-2 hover:bg-gray-100 cursor-pointer rounded-lg text-gray-500 hover:text-gray-800 cursor-pointer\"><span class=\"iconify i-heroicons:question-mark-circle w-5 h-5\" aria-hidden=\"true\"></span></a><!----></div><div class=\"relative inline-flex\"><button type=\"button\" class=\"focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 aria-disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 dark:aria-disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center px-8 md:px-4 py-2\" data-hx-put=\"
\" data-hx-trigger=\"click\" data-hx-swap=\"none\"><!----><svg class=\"w-4 h-4 text-white inline mr-1 -mt-1\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg> Save Form <!----></button><!----></div></div></div>