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: design refactor (sky blue)

Browse source
This commit is contained in:
Adriano Caloiaro 2025-01-21 10:35:43 -07:00
parent 3b6ef7cc8c
commit 1dade5b8b4
No known key found for this signature in database
GPG key ID: C2BC56DE73CE3F75
4 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
static/css/styles.css
View file

@ -2621,6 +2621,10 @@ input.tab:checked + .tab-content,
border-radius: 0.25rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
@ -2629,6 +2633,10 @@ input.tab:checked + .tab-content,
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.border {
border-width: 1px;
}
@ -2676,6 +2684,16 @@ input.tab:checked + .tab-content,
background-color: rgb(0 159 255 / var(--tw-bg-opacity));
}
.bg-sky-100 {
--tw-bg-opacity: 1;
background-color: rgb(224 242 254 / var(--tw-bg-opacity));
}
.bg-sky-50 {
--tw-bg-opacity: 1;
background-color: rgb(240 249 255 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));

11
ui/common.templ
View file

@ -315,11 +315,11 @@ templ builderColumnLeft(form frm.Form) {
// FormPreview previews a frm.Form
templ FormPreview(form frm.Form) {
<section id="builder-main-middle-col" class="w-full h-screen overflow-y-auto overscroll-auto p-4 bg-gray-50 border-y-1">
<div class="mockup-browser border-base-300 border bg-white">
<div class="mockup-browser border-base-300 border">
<div class="mockup-browser-toolbar">
<div class="input border-base-300 border">https://your-form-domain.com/form</div>
</div>
<div class="h-full border-base-300 flex border-t px-4 py-8">
<div class="flex h-full border-base-300 bg-sky-100 border-t px-4 py-8">
@FormView(form, true)
</div>
</div>
@ -825,7 +825,7 @@ func (v ViewerMetadata) JSON() string {
// FormView renders forms
templ FormView(form frm.Form, isPreview bool) {
<div id="form-viewer" class="flex flex-col w-full justify-top" data-hx-swap-oob="true">
<div id="form-viewer" class="flex flex-col w-1/2 mx-auto justify-top" data-hx-swap-oob="true">
<div
id="form-metadata"
data-data={ ViewerMetadata{Form: form}.JSON() }
@ -859,18 +859,19 @@ templ FormView(form frm.Form, isPreview bool) {
type="text"
autocomplete="off"
_={ fmt.Sprintf("on keyup debounced at 250ms trigger field_change(field_id: '%s', value: my.value)", field.ID.String()) }
class="border-gray-300 dark:border-gray-600 rounded-full bg-sky-50"
/>
case types.FormFieldTypeTextMultiple:
@fieldLabel(field)
<textarea
id={ field.ID.String() }
name={ field.ID.String() }
class="flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100 rounded-lg px-4 py-2 text-base resize-y block"
name="98e021e4-68e0-4273-8576-de89b4459e62"
class="flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100 px-4 py-2 text-base resize-y block rounded-xl bg-sky-50"
placeholder={ field.Placeholder }
autocomplete="off"
style="--tw-ring-color: #3B82F6;"
_={ fmt.Sprintf("on keyup debounced at 250ms trigger field_change(field_id: '%s', value: my.value)", field.ID.String()) }
rows="3"
></textarea>
case types.FormFieldTypeSingleSelect, types.FormFieldTypeMultiSelect:
@selector.Selector(selector.SelectArgs{

4
ui/common_templ.go
View file

@ -2677,7 +2677,7 @@ func FormView(form frm.Form, isPreview bool) templ.Component {
var templ_7745c5c3_Var118 string
templ_7745c5c3_Var118, templ_7745c5c3_Err = templ.JoinStringErrs(field.ID.String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/common.templ`, Line: 866, Col: 30}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/common.templ`, Line: 867, Col: 30}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var118))
if templ_7745c5c3_Err != nil {
@ -2690,7 +2690,7 @@ func FormView(form frm.Form, isPreview bool) templ.Component {
var templ_7745c5c3_Var119 string
templ_7745c5c3_Var119, templ_7745c5c3_Err = templ.JoinStringErrs(field.ID.String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/common.templ`, Line: 867, Col: 32}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `ui/common.templ`, Line: 868, Col: 32}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var119))
if templ_7745c5c3_Err != nil {

10
ui/common_templ.txt
View file

@ -51,7 +51,7 @@
\"></form></div>
<section id=\"builder-main-left-col\" class=\"flex flex-col gap-3 w-1/4 min-w-max h-full p-4 text-gray-800 rounded-md\">
</section>
<section id=\"builder-main-middle-col\" class=\"w-full h-screen overflow-y-auto overscroll-auto p-4 bg-gray-50 border-y-1\"><div class=\"mockup-browser border-base-300 border bg-white\"><div class=\"mockup-browser-toolbar\"><div class=\"input border-base-300 border\">https://your-form-domain.com/form</div></div><div class=\"h-full border-base-300 flex border-t px-4 py-8\">
<section id=\"builder-main-middle-col\" class=\"w-full h-screen overflow-y-auto overscroll-auto p-4 bg-gray-50 border-y-1\"><div class=\"mockup-browser border-base-300 border\"><div class=\"mockup-browser-toolbar\"><div class=\"input border-base-300 border\">https://your-form-domain.com/form</div></div><div class=\"flex h-full border-base-300 bg-sky-100 border-t px-4 py-8\">
</div></div></section>
<div class=\"p-1 rounded-md flex items-center justify-center bg-blue-100 text-blue-900 ml-2\">
</div>
@ -157,7 +157,7 @@ Multi select
\">
</label>
<div id=\"form-viewer\" class=\"flex flex-col w-full justify-top\" data-hx-swap-oob=\"true\"><div id=\"form-metadata\" data-data=\"
<div id=\"form-viewer\" class=\"flex flex-col w-1/2 mx-auto justify-top\" data-hx-swap-oob=\"true\"><div id=\"form-metadata\" data-data=\"
\"></div><h1 class=\"hover:bg-gray-50 dark:hover:bg-gray-800 rounded cursor-pointer relative mb-2 font-black text-5xl\">
</h1><form _=\"on field_change(field_id, value) formValueChanged(field_id, value)\">
<div id=\"
@ -170,12 +170,12 @@ Multi select
\" name=\"
\" placeholder=\"
\" type=\"text\" autocomplete=\"off\" _=\"
\">
\" class=\"border-gray-300 dark:border-gray-600 rounded-full bg-sky-50\">
<textarea id=\"
\" name=\"
\" class=\"flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100 rounded-lg px-4 py-2 text-base resize-y block\" name=\"98e021e4-68e0-4273-8576-de89b4459e62\" placeholder=\"
\" class=\"flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100 px-4 py-2 text-base resize-y block rounded-xl bg-sky-50\" placeholder=\"
\" autocomplete=\"off\" style=\"--tw-ring-color: #3B82F6;\" _=\"
\"></textarea>
\" rows=\"3\"></textarea>
</div>
<div class=\"py-3\"></div>
</form></div>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB