From f6bac888007b17848a075f1d9e497b9d17f2eeb6 Mon Sep 17 00:00:00 2001 From: Torsten Date: Sun, 22 Jan 2023 20:29:10 +0200 Subject: [PATCH] story editor polish --- Gemfile.lock | 2 +- app/controllers/members_controller.rb | 3 +- app/models/member.rb | 3 ++ app/models/story.rb | 4 +- app/uploaders/picture_uploader.rb | 10 ++--- app/views/members/_form.html.haml | 3 -- app/views/members/edit.html.haml | 57 ++++++++++----------------- app/views/stories/_form.haml | 11 ++++-- 8 files changed, 40 insertions(+), 53 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index c45fe09..b59516a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,6 +1,6 @@ GIT remote: https://github.com/HubFeenixMakers/merged - revision: ee228d48f4a20dc89a7c09ea9354b4b2c899271b + revision: a452bd5d8daf83387172fe635ba3ccbb4bdd9ace specs: merged (0.1.0) active_hash diff --git a/app/controllers/members_controller.rb b/app/controllers/members_controller.rb index 04b1266..51926d9 100644 --- a/app/controllers/members_controller.rb +++ b/app/controllers/members_controller.rb @@ -48,6 +48,7 @@ class MembersController < ApplicationController # Only allow a list of trusted parameters through. def member_params - params.require(:member).permit(:name, :public, :bio , :picture, :arrived ,:left) + params.require(:member).permit(:name, :public, :bio , :picture, + :picture_cache , :arrived ,:left) end end diff --git a/app/models/member.rb b/app/models/member.rb index 11298f7..4c73a86 100644 --- a/app/models/member.rb +++ b/app/models/member.rb @@ -7,6 +7,9 @@ class Member < ApplicationRecord mount_uploader :picture, PictureUploader has_many :stories + validates :bio, length: { maximum: 1000 } + validates :name , length: { minimum: 3 } + def admin self.email == "torsten@villataika.fi" end diff --git a/app/models/story.rb b/app/models/story.rb index 1f6685e..e55ab4b 100644 --- a/app/models/story.rb +++ b/app/models/story.rb @@ -3,8 +3,8 @@ class Story < ApplicationRecord mount_uploader :picture, PictureUploader - validates :text, length: { maximum: 1000 } - validates :header , length: { minimum: 5 } + validates :text, length: { minimum: 5 , maximum: 1000 } + validates :header , length: { minimum: 5 , maximum: 400} def name header diff --git a/app/uploaders/picture_uploader.rb b/app/uploaders/picture_uploader.rb index fbe8e09..42856bd 100644 --- a/app/uploaders/picture_uploader.rb +++ b/app/uploaders/picture_uploader.rb @@ -14,12 +14,10 @@ class PictureUploader < CarrierWave::Uploader::Base end # Provide a default URL as a default if there hasn't been a file uploaded: - # def default_url(*args) - # # For Rails 3.1+ asset pipeline compatibility: - # # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_')) - # - # "/images/fallback/" + [version_name, "default.png"].compact.join('_') - # end + def default_url(*args) + # For Rails 3.1+ asset pipeline compatibility: + ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_')) + end # Process files as they are uploaded: # process scale: [200, 300] diff --git a/app/views/members/_form.html.haml b/app/views/members/_form.html.haml index fe415a0..1f97f5b 100644 --- a/app/views/members/_form.html.haml +++ b/app/views/members/_form.html.haml @@ -11,9 +11,6 @@ .field = f.label :name = f.text_field :name - .field - = f.label :public - = f.check_box :public .field = f.label :picture = f.file_field :picture diff --git a/app/views/members/edit.html.haml b/app/views/members/edit.html.haml index 4e24bc4..86961f0 100644 --- a/app/views/members/edit.html.haml +++ b/app/views/members/edit.html.haml @@ -3,42 +3,27 @@ .flex.justify-center.m-20 .flex.flex-col - %h1.text-4xl Editing profile + %h1.text-4xl Edit your profile = simple_form_for @member do |f| - = f.error_notification - .grid.grid-cols-4.mx-20 - .info.mr-8 - = f.input :name - .grid.grid-cols-2.gap-10 - = f.input :arrived - = f.input :left - = f.input :public , label: "Public: (Click box below)" - = f.input :picture , as: :file , label: (@member.picture.blank? ? "Add picture" : "Change picture") - .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 + .flex.justify-center + .column{class: "w-11/12 md:w-10/12 lg:w-8/12 xl:w-6/12"} + .grid.grid-cols-1.md:grid-cols-2.mx-20.gap-10 + = render "merged/form/editor" , object: @member , field: :bio, form: f + .info.mr-8 + .text-red-700= f.error_notification + = f.input :name + .grid.grid-cols-2.gap-10 + = f.input :arrived + = f.input :left + .flex.h-16.mt-2 + = image_tag(@member.picture_url , class: "align-middle mr-2") if @member.picture? + = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"}, + label: (@member.picture.blank? ? "Add picture" : "Change picture") + = f.hidden_field :picture_cache + .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 diff --git a/app/views/stories/_form.haml b/app/views/stories/_form.haml index 789559c..d3c2ec9 100644 --- a/app/views/stories/_form.haml +++ b/app/views/stories/_form.haml @@ -1,17 +1,20 @@ %div Story layout changes with the amount of text. - For short lext a wide picture is best. Otherwise square, and for + For short text a wide picture is best. Otherwise square, and for longer text a high picture also works. = simple_form_for @story do |f| = f.error_notification - - = f.input :picture , as: :file , label: (@story.picture.blank? ? "Add picture" : "Change picture") + .flex.h-16.mt-2 + = image_tag(@story.picture_url , class: "align-middle mr-2") if @story.picture? + = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"}, + label: (@story.picture.blank? ? "Add picture" : "Change picture") + = f.hidden_field :picture_cache = f.input :header = render "merged/form/editor" , object: @story , field: :text, form: f = f.input :happened , wrapper_class: "flex mt-4 align-center" .flex.justify-between.mt-6 %button.bg-cyan-200.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400 = f.submit 'Save' - = link_to @story do + = link_to member_path(current_member) do %button.ml-20.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400 Back