button helper

app/helpers/merged/application_helper.rb

@@ -1,4 +0,0 @@
-module Merged
-  module ApplicationHelper
-  end
-end

app/helpers/merged/merged_helper.rb

@@ -0,0 +1,26 @@
+module Merged
+  module MergedHelper
+    def blue_button( text, url)
+      button( text , url , "bg-blue-500" )
+    end
+    def yellow_button( text, url)
+      button( text , url , "bg-yellow-500" )
+    end
+    def red_button( text, url)
+      button( text , url , "bg-red-500" )
+    end
+    def green_button( text, url)
+      button( text , url , "bg-green-500" )
+    end
+
+
+    def button(text , url , color)
+      claz = color + " ml-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white"
+      link_to(url) do
+        content_tag(:button , class: claz ) do
+          text
+        end
+      end
+    end
+  end
+end

app/views/merged/cards/index.haml

@@ -7,31 +7,26 @@
   .flex.items-center.justify-center.flex-1
     .max-w-xl.px-4.py-8.mx-auto.text-center
       %h1.text-3xl.font-bold.tracking-tight.text-gray-900
-        Page #{link_to @section.page.name, page_sections_url(@section.page.name)}
+        Page #{link_to @section.page.name, page_sections_url(@section.page.name), class: "underline"}
   .flex.items-center.justify-center.flex-1
     %h3.text-xl.font-bold.tracking-tight.text-gray-900
       Cards for
-      = link_to "Section #{@section.index + 1}", section_url( @section.id)
+      = link_to "Section #{@section.index + 1}", section_url( @section.id) , class: "underline"
 
 .grid.grid-cols-4.gap-2.m-8
   - @section.cards.each_with_index do |card , index|
     .relative.block.border.border-gray-100
       .p-4
         %h3.mt-4.text-lg.font-bold Card #{index + 1}
-        %button.mt-4.rounded-lg.bg-yellow-500.p-4
+        = yellow_button( "Up" , card_move_url(card.id , dir: :up) )
-          =link_to( "Up" , card_move_url(card.id , dir: :up) )
+        = yellow_button( "Down" , card_move_url(card.id , dir: :down) )
-        %button.mt-4.rounded-lg.bg-yellow-500.p-4
+        = green_button( "New" , "/index" )
-          =link_to( "Down" , card_move_url(card.id , dir: :down) )
+        = red_button("Delete" , "/index")
-        %button.mt-4.rounded-lg.bg-cyan-400.p-4
-          =link_to "New" , "/index"
-        %button.mt-4.rounded-lg.bg-red-400.p-4
-          =link_to "Delete" , "/index"
       .p-4
         %h3.mt-4.text-lg.font-bold Image
-        %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+        = blue_button("Change Image" , card_select_image_url(card.id) )
-          =link_to "Change Image" , card_select_image_url(card.id)
+        = red_button("Remove image", card_set_image_path( card.id  , image: "") )
-        %button.ml-3.inline-block.rounded-lg.bg-red-500.px-5.py-3.text-md.font-medium.text-white
+
-          = link_to( "Remove image" , card_set_image_path( card.id  , image: ""))
 
     .relative.block.border.border-gray-100
       %h3.mt-4.text-lg.font-bold Image
@@ -41,10 +36,12 @@
         = image_tag( "cms/" + card.image , class: "p-3")
     .relative.block.border.border-gray-100
       = form_tag( card_url(card.id) , {method: :patch  } ) do
-        %h3.mt-4.text-lg.font-bold Header
+        %label.block
-        = text_field_tag( :header , card.content["header"], class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+          %h4.text-lg.font-bold Header
-        %h3.mt-4.text-lg.font-bold Text
+          = text_field_tag( :header , card.header, class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-        = text_area_tag( :text , card.content["text"], class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+        %label.block
+          %h4.mt-4.text-lg.font-bold Text
+          = text_area_tag( :text , card.text, rows: 5 , class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm" )
         %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white{:type => "submit"}
           Update
 

app/views/merged/sections/index.html.haml

@@ -10,16 +10,11 @@
   .grid.grid-cols-5.gap-2.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' }
     .relative.block.border.border-gray-100.p-4
       %h3.mt-4.text-lg.font-bold Section #{section.index + 1}
-      %button.mt-4.rounded-lg.bg-yellow-500.p-4
+      = yellow_button( "Up" , section_move_url(section.id , dir: :up) )
-        =link_to( "Up" , section_move_url(section.id , dir: :up) )
+      = yellow_button( "Down" , section_move_url(section.id , dir: :down) )
-      %button.mt-4.rounded-lg.bg-yellow-500.p-4
+      = blue_button("Edit" , section_path(section.id) )
-        =link_to( "Down" , section_move_url(section.id , dir: :down) )
+      = green_button( "New" , "/index" )
-      %button.mt-4.rounded-lg.bg-blue-400.p-4
+      = red_button(  "Delete" , "/index" )
-        =link_to "Edit" , section_path(section.id)
-      %button.mt-4.rounded-lg.bg-cyan-400.p-4
-        =link_to "New" , "/index"
-      %button.mt-4.rounded-lg.bg-red-400.p-4
-        =link_to "Delete" , "/index"
     .relative.block.border.border-gray-100.p-4
       %h3.mt-4.text-lg.font-bold Template
       %p= section.template

app/views/merged/sections/show.html.haml

@@ -7,7 +7,7 @@
   .flex.items-center.justify-center.flex-1
     .max-w-xl.px-4.py-8.mx-auto.text-center
       %h1.text-3xl.font-bold.tracking-tight.text-gray-900
-        Page #{link_to @section.page.name, page_sections_url(@section.page.name)}
+        Page #{link_to @section.page.name, page_sections_url(@section.page.name), class: "underline"}
   .flex.items-center.justify-center.flex-1
     %h3.text-xl.font-bold.tracking-tight.text-gray-900
       Section #{@section.id}
@@ -16,15 +16,16 @@
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Template  #{@section.template}
     = section_preview(@section , class: "w-full object-contain p-3")
-    %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+    = blue_button( "Change Template" , section_select_template_url(@section.id))
-      =link_to "Change Template" , section_select_template_url(@section.id)
 
   .relative.block.border.border-gray-100
     = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
-      %h3.mt-4.text-lg.font-bold Header
+      %label.block
+        %h4.text-lg.font-bold Header
         = text_field_tag( :header , @section.header, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-      %h3.mt-4.text-lg.font-bold Text
+      %label.block
-      = text_area_tag( :text , @section.text, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+        %h4.mt-4.text-lg.font-bold Text
+        = text_area_tag( :text , @section.text, rows: 5 ,class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
       %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white{:type => "submit"}
         Update
 
@@ -34,11 +35,8 @@
       %p No image
     -else
       = image_tag( "cms/" + @section.image , class: "p-3")
-    %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+    = yellow_button("Change Image", section_select_image_url(@section.id))
-      =link_to "Change Image" , section_select_image_url(@section.id)
+    = red_button( "Remove image", section_set_image_path( @section.id  , image: ""))
-    %button.ml-3.inline-block.rounded-lg.bg-red-500.px-5.py-3.text-md.font-medium.text-white
-      = link_to( "Remove image" , section_set_image_path( @section.id  , image: ""))
-
 
 .grid.grid-cols-3.gap-2.m-8
   - if( @section.cards? )
@@ -46,16 +44,15 @@
       %h3.mt-4.text-lg.font-bold Card Template #{@section.card_template}
       =card_preview(@section , class: "w-full object-contain")
       %p.p-3
-        %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+        =yellow_button("Change Card Template", section_select_card_template_url(@section.id))
-          =link_to "Change Card Template" , section_select_card_template_url(@section.id)
+
     .relative.block.border.border-gray-100
       %h3.mt-4.text-lg.font-bold #{@section.cards.length} Cards
       -@section.cards.each do |card|
         .mt-4.text-md.font-bold= card.header
         .text-sm "#{card.text[0..70]} ....."
       %p.p-3
-        %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
+        = blue_button( "View and Edit Cards" , section_cards_url(@section.id))
-          =link_to "View and Edit Cards" , section_cards_url(@section.id)
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Options
     To be done