From 9d125ace1687f21e7b53d7cce9ec0007585e8053 Mon Sep 17 00:00:00 2001 From: Torsten Date: Fri, 2 Dec 2022 15:04:53 +0200 Subject: [PATCH] button helper --- app/helpers/merged/application_helper.rb | 4 --- app/helpers/merged/merged_helper.rb | 26 ++++++++++++++++++ app/views/merged/cards/index.haml | 33 +++++++++++------------ app/views/merged/sections/index.html.haml | 15 ++++------- app/views/merged/sections/show.html.haml | 29 +++++++++----------- 5 files changed, 59 insertions(+), 48 deletions(-) delete mode 100644 app/helpers/merged/application_helper.rb create mode 100644 app/helpers/merged/merged_helper.rb diff --git a/app/helpers/merged/application_helper.rb b/app/helpers/merged/application_helper.rb deleted file mode 100644 index b86deb3..0000000 --- a/app/helpers/merged/application_helper.rb +++ /dev/null @@ -1,4 +0,0 @@ -module Merged - module ApplicationHelper - end -end diff --git a/app/helpers/merged/merged_helper.rb b/app/helpers/merged/merged_helper.rb new file mode 100644 index 0000000..80f7f1e --- /dev/null +++ b/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 diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index 8387e9d..a4c709c 100644 --- a/app/views/merged/cards/index.haml +++ b/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 - =link_to( "Up" , card_move_url(card.id , dir: :up) ) - %button.mt-4.rounded-lg.bg-yellow-500.p-4 - =link_to( "Down" , card_move_url(card.id , dir: :down) ) - %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" + = yellow_button( "Up" , card_move_url(card.id , dir: :up) ) + = yellow_button( "Down" , card_move_url(card.id , dir: :down) ) + = green_button( "New" , "/index" ) + = red_button("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 - =link_to "Change Image" , card_select_image_url(card.id) - %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: "")) + = blue_button("Change Image" , card_select_image_url(card.id) ) + = red_button("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 - = text_field_tag( :header , card.content["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 - = 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.text-lg.font-bold Header + = text_field_tag( :header , card.header, class: "block 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 diff --git a/app/views/merged/sections/index.html.haml b/app/views/merged/sections/index.html.haml index 98980ec..e2334c7 100644 --- a/app/views/merged/sections/index.html.haml +++ b/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 - =link_to( "Up" , section_move_url(section.id , dir: :up) ) - %button.mt-4.rounded-lg.bg-yellow-500.p-4 - =link_to( "Down" , section_move_url(section.id , dir: :down) ) - %button.mt-4.rounded-lg.bg-blue-400.p-4 - =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" + = yellow_button( "Up" , section_move_url(section.id , dir: :up) ) + = yellow_button( "Down" , section_move_url(section.id , dir: :down) ) + = blue_button("Edit" , section_path(section.id) ) + = green_button( "New" , "/index" ) + = red_button( "Delete" , "/index" ) .relative.block.border.border-gray-100.p-4 %h3.mt-4.text-lg.font-bold Template %p= section.template diff --git a/app/views/merged/sections/show.html.haml b/app/views/merged/sections/show.html.haml index 4ccac7c..a83dcb3 100644 --- a/app/views/merged/sections/show.html.haml +++ b/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 - =link_to "Change Template" , section_select_template_url(@section.id) + = blue_button( "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 - = 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 - = text_area_tag( :text , @section.text, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm") + %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") + %label.block + %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 - =link_to "Change Image" , section_select_image_url(@section.id) - %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: "")) - + = yellow_button("Change Image", section_select_image_url(@section.id)) + = red_button( "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 - =link_to "Change Card Template" , section_select_card_template_url(@section.id) + =yellow_button("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 - =link_to "View and Edit Cards" , section_cards_url(@section.id) + = blue_button( "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