story editor polish

Gemfile.lock

@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/HubFeenixMakers/merged
-  revision: ee228d48f4a20dc89a7c09ea9354b4b2c899271b
+  revision: a452bd5d8daf83387172fe635ba3ccbb4bdd9ace
   specs:
     merged (0.1.0)
       active_hash

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

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

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

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]

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

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
+  .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
-      = f.input :public , label: "Public: (Click box below)"
-      = f.input :picture , as: :file , label: (@member.picture.blank? ? "Add picture" : "Change picture")
+          .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
-    .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

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