picture cache for forms

This commit is contained in:
2023-01-22 20:40:28 +02:00
parent 0a9b32f06b
commit e4364fc677
7 changed files with 16 additions and 83 deletions

View File

@ -7,7 +7,12 @@
= f.input :start_date
= f.input :end_date
= f.input :profile_id , as: :hidden
= f.input :picture , as: :file
.flex.h-16.mt-2
= image_tag(@event.picture_url , class: "align-middle mr-2") if @event.picture?
= f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
label: (@event.picture.blank? ? "Add picture" : "Change picture")
= f.hidden_field :picture_cache
.flex.justify-between
%button.mt-6.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
= f.submit 'Save'

View File

@ -1,23 +0,0 @@
= simple_form_for @member do |f|
= f.error_notification
.grid.grid-cols-2.m-20.gap-10
.field
= f.label :name
= f.text_field :name
.field
= f.label :public
= f.check_box :public
.field
= f.label :picture
= f.file_field :picture
-if @member.picture
%div.overflow-hidden
.my-5 Currently
= image_tag @member.picture, class: "object-contain h-40"
.field
= f.label :Bio
= f.rich_text_area :bio
.flex.justify-center.actions
= f.submit 'Save'

View File

@ -1,41 +0,0 @@
= javascript_include_tag "merged/vue.min.js"
= javascript_include_tag "marked.min.js"
.flex.justify-center.m-20
.flex.flex-col
%h1.text-4xl Editing profile
= simple_form_for @member , builder: SimpleForm::Tailwind::FormBuilder do |f|
= f.error_notification
.grid.grid-cols-4.mx-20
.info.mr-8
= f.input :name
= f.input :public , label: "Public: (Click box below)"
= f.input :picture , as: :file
.flex.justify-center.actions.m-10
= f.button :button, "Update", class: button_classes + " bg-cyan-200"
= link_to member_path(@member) do
%button.ml-10{type: :submit, class: button_classes}
Back
.field.flex.flex-col.pr-2.border-r-8.border-slate-600
= f.text_area :bio ,rows: 18 , "v-model" => "markdown" , class: "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
%div.h-90
-if @member.picture_url
%div.overflow-hidden.ml-2.mr-8
= image_tag @member.picture_url, class: "object-contain w-full"
-else
No Picture
.preview.prose
%b.text-2xl Preview
%div{"v-html" => "compiledMarkdown"}
:ruby2js
class Mark < Vue
options el: '.grid'
def initialize
@markdown = "#{@member.bio.to_s.html_safe}"
end
def compiledMarkdown
marked.parse(@markdown)
end
end

View File

@ -4,7 +4,11 @@
= f.input :name
= f.input :bio
= f.input :kind, :as => :hidden
= f.input :picture , as: :file , label: (@profile.picture.blank? ? "Add picture" : "Change picture (optional)")
.flex.h-16.mt-2
= image_tag(@profile.picture_url , class: "align-middle mr-2") if @profile.picture?
= f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
label: (@profile.picture.blank? ? "Add picture" : "Change picture")
= f.hidden_field :picture_cache
.flex.justify-between.mt-4
%button.bg-cyan-200{class: button_classes}