diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/NovyDukazForm.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/NovyDukazForm.scala index eba327c..5019bf4 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/NovyDukazForm.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/NovyDukazForm.scala @@ -1,160 +1,166 @@ package cz.e_bs.cmi.mdr.pdb.app.pages.detail.components import com.raquo.laminar.api.L.{*, given} +import cz.e_bs.cmi.mdr.pdb.app.components.CustomAttrs object NovyDukazForm: def apply(): HtmlElement = - span("Hello World!") -/* - form( - cls := "space-y-8 divide-y divide-gray-200", - div( - cls := "space-y-8 divide-y divide-gray-200 sm:space-y-5", + div( + cls := "bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6", + form( + cls := "space-y-8 divide-y divide-gray-200", div( + cls := "space-y-8 divide-y divide-gray-200 sm:space-y-5", div( - h3( - cls := "text-lg leading-6 font-medium text-gray-900", - """Profile""" - ), - p( - cls := "mt-1 max-w-2xl text-sm text-gray-500", - """This information will be displayed publicly so be careful what you share.""" - ) - ), - div( - cls := "mt-6 sm:mt-5 space-y-6 sm:space-y-5", div( - cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5", - label( - forId := "username", - cls := "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2", - """Username""" + h3( + cls := "text-lg leading-6 font-medium text-gray-900", + """Profile""" ), - div( - cls := "mt-1 sm:mt-0 sm:col-span-2", - div( - cls := "max-w-lg flex rounded-md shadow-sm", - span( - cls := "inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm", - """workcation.com/""" - ), - input( - tpe := "text", - name := "username", - id := "username", - autocomplete := "username", - cls := "flex-1 block w-full focus:ring-indigo-500 focus:border-indigo-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" - ) - ) + p( + cls := "mt-1 max-w-2xl text-sm text-gray-500", + """This information will be displayed publicly so be careful what you share.""" ) ), div( - cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5", - label( - forId := "about", - cls := "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2", - """About""" - ), + cls := "mt-6 sm:mt-5 space-y-6 sm:space-y-5", div( - cls := "mt-1 sm:mt-0 sm:col-span-2", - textarea( - id := "about", - name := "about", - rows := "3", - cls := "max-w-lg shadow-sm block w-full focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md" + cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5", + label( + forId := "username", + cls := "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2", + """Username""" ), - p( - cls := "mt-2 text-sm text-gray-500", - """Write a few sentences about yourself.""" - ) - ) - ), - div( - cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:border-t sm:border-gray-200 sm:pt-5", - label( - forId := "photo", - cls := "block text-sm font-medium text-gray-700", - """Photo""" - ), - div( - cls := "mt-1 sm:mt-0 sm:col-span-2", div( - cls := "flex items-center", - span( - cls := "h-12 w-12 rounded-full overflow-hidden bg-gray-100", - svg( - cls := "h-full w-full text-gray-300", - fill := "currentColor", - viewBox := "0 0 24 24", - path( - d := "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" - ) + cls := "mt-1 sm:mt-0 sm:col-span-2", + div( + cls := "max-w-lg flex rounded-md shadow-sm", + span( + cls := "inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm", + """workcation.com/""" + ), + input( + tpe := "text", + name := "username", + idAttr := "username", + autoComplete := "username", + cls := "flex-1 block w-full focus:ring-indigo-500 focus:border-indigo-500 min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300" ) - ), - button( - tpe := "button", - cls := "ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", - """Change""" ) ) - ) - ), - div( - cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5", - label( - forId := "cover-photo", - cls := "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2", - """Cover photo""" ), div( - cls := "mt-1 sm:mt-0 sm:col-span-2", + cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5", + label( + forId := "about", + cls := "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2", + """About""" + ), div( - cls := "max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md", + cls := "mt-1 sm:mt-0 sm:col-span-2", + textArea( + idAttr := "about", + name := "about", + rows := 3, + cls := "max-w-lg shadow-sm block w-full focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border border-gray-300 rounded-md" + ), + p( + cls := "mt-2 text-sm text-gray-500", + """Write a few sentences about yourself.""" + ) + ) + ), + div( + cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:border-t sm:border-gray-200 sm:pt-5", + label( + forId := "photo", + cls := "block text-sm font-medium text-gray-700", + """Photo""" + ), + div( + cls := "mt-1 sm:mt-0 sm:col-span-2", div( - cls := "space-y-1 text-center", - svg( - cls := "mx-auto h-12 w-12 text-gray-400", - stroke := "currentColor", - fill := "none", - viewBox := "0 0 48 48", - aria.hidden := true, - path( - d := "M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02", - strokeWidth := "2", - strokeLineCap := "round", - strokeLineJoin := "round" - ) + cls := "flex items-center", + span( + cls := "h-12 w-12 rounded-full overflow-hidden bg-gray-100", { + import svg._ + svg( + cls := "h-full w-full text-gray-300", + fill := "currentColor", + viewBox := "0 0 24 24", + path( + d := "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" + ) + ) + } ), + button( + tpe := "button", + cls := "ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", + """Change""" + ) + ) + ) + ), + div( + cls := "sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5", + label( + forId := "cover-photo", + cls := "block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2", + """Cover photo""" + ), + div( + cls := "mt-1 sm:mt-0 sm:col-span-2", + div( + cls := "max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md", div( - cls := "flex text-sm text-gray-600", - label( - forId := "file-upload", - cls := "relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500", - span( - """Upload a file""" + cls := "space-y-1 text-center", { + import svg.* + svg( + cls := "mx-auto h-12 w-12 text-gray-400", + stroke := "currentColor", + fill := "none", + viewBox := "0 0 48 48", + CustomAttrs.svg.ariaHidden := true, + path( + d := "M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02", + strokeWidth := "2", + strokeLineCap := "round", + strokeLineJoin := "round" + ) + ) + }, + div( + cls := "flex text-sm text-gray-600", + label( + forId := "file-upload", + cls := "relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500", + span( + """Upload a file""" + ), + input( + idAttr := "file-upload", + name := "file-upload", + tpe := "file", + cls := "sr-only" + ) ), - input( - id := "file-upload", - name := "file-upload", - tpe := "file", - cls := "sr-only" + p( + cls := "pl-1", + """or drag and drop""" ) ), p( - cls := "pl-1", - """or drag and drop""" + cls := "text-xs text-gray-500", + """PNG, JPG, GIF up to 10MB""" ) - ), - p( - cls := "text-xs text-gray-500", - """PNG, JPG, GIF up to 10MB""" ) ) ) ) ) ) - ), + /* div( cls := "pt-8 space-y-6 sm:pt-10 sm:space-y-5", div( @@ -181,7 +187,7 @@ input( tpe := "text", name := "first-name", - id := "first-name", + idAttr := "first-name", autocomplete := "given-name", cls := "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" ) @@ -199,7 +205,7 @@ input( tpe := "text", name := "last-name", - id := "last-name", + idAttr := "last-name", autocomplete := "family-name", cls := "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" ) @@ -215,7 +221,7 @@ div( cls := "mt-1 sm:mt-0 sm:col-span-2", input( - id := "email", + idAttr := "email", name := "email", tpe := "email", autocomplete := "email", @@ -233,7 +239,7 @@ div( cls := "mt-1 sm:mt-0 sm:col-span-2", select( - id := "country", + idAttr := "country", name := "country", autocomplete := "country-name", cls := "max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md", @@ -261,7 +267,7 @@ input( tpe := "text", name := "street-address", - id := "street-address", + idAttr := "street-address", autocomplete := "street-address", cls := "block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" ) @@ -279,7 +285,7 @@ input( tpe := "text", name := "city", - id := "city", + idAttr := "city", autocomplete := "address-level2", cls := "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" ) @@ -297,7 +303,7 @@ input( tpe := "text", name := "region", - id := "region", + idAttr := "region", autocomplete := "address-level1", cls := "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" ) @@ -315,7 +321,7 @@ input( tpe := "text", name := "postal-code", - id := "postal-code", + idAttr := "postal-code", autocomplete := "postal-code", cls := "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" ) @@ -347,7 +353,7 @@ div( div( cls := "text-base font-medium text-gray-900 sm:text-sm sm:text-gray-700", - id := "label-email", + idAttr := "label-email", """By Email""" ) ), @@ -360,7 +366,7 @@ div( cls := "flex items-center h-5", input( - id := "comments", + idAttr := "comments", name := "comments", tpe := "checkbox", cls := "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" @@ -385,7 +391,7 @@ div( cls := "flex items-center h-5", input( - id := "candidates", + idAttr := "candidates", name := "candidates", tpe := "checkbox", cls := "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" @@ -411,7 +417,7 @@ div( cls := "flex items-center h-5", input( - id := "offers", + idAttr := "offers", name := "offers", tpe := "checkbox", cls := "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" @@ -446,7 +452,7 @@ div( div( cls := "text-base font-medium text-gray-900 sm:text-sm sm:text-gray-700", - id := "label-notifications", + idAttr := "label-notifications", """Push Notifications""" ) ), @@ -463,7 +469,7 @@ div( cls := "flex items-center", input( - id := "push-everything", + idAttr := "push-everything", name := "push-notifications", tpe := "radio", cls := "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" @@ -477,7 +483,7 @@ div( cls := "flex items-center", input( - id := "push-email", + idAttr := "push-email", name := "push-notifications", tpe := "radio", cls := "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" @@ -491,7 +497,7 @@ div( cls := "flex items-center", input( - id := "push-nothing", + idAttr := "push-nothing", name := "push-notifications", tpe := "radio", cls := "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" @@ -509,23 +515,24 @@ ) ) ) - ) - ), - div( - cls := "pt-5", + ) + */ + ), div( - cls := "flex justify-end", - button( - tpe := "button", - cls := "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", - """Cancel""" - ), - button( - tpe := "submit", - cls := "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", - """Save""" + cls := "pt-5", + div( + cls := "flex justify-end", + button( + tpe := "button", + cls := "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", + """Cancel""" + ), + button( + tpe := "submit", + cls := "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", + """Save""" + ) ) ) ) ) - */