From 84fef50e161913dc16eb98a67f43f7353c6c6b67 Mon Sep 17 00:00:00 2001 From: Torsten Date: Sat, 21 Jan 2023 19:11:21 +0200 Subject: [PATCH] move submit button from code to tailwind --- app/assets/stylesheets/merged.tailwind.css | 17 ++++++++++++ app/assets/stylesheets/merged/merged.css | 31 ++++++++++++++++++++++ app/helpers/merged/merged_helper.rb | 8 ------ app/views/merged/cards/index.haml | 8 +++--- app/views/merged/changes/index.haml | 4 +-- app/views/merged/images/new.haml | 2 +- app/views/merged/images/show.haml | 2 +- app/views/merged/pages/show.haml | 4 +-- app/views/merged/sections/index.haml | 4 +-- app/views/merged/sections/show.haml | 25 ++++++++++------- 10 files changed, 76 insertions(+), 29 deletions(-) diff --git a/app/assets/stylesheets/merged.tailwind.css b/app/assets/stylesheets/merged.tailwind.css index 3d36633..c44b13e 100644 --- a/app/assets/stylesheets/merged.tailwind.css +++ b/app/assets/stylesheets/merged.tailwind.css @@ -1,2 +1,19 @@ @import "./tailwind_base.css"; @import "./merged/tailwind_styles.css"; + + + +@layer components { + .button { + @apply mr-3 inline-block rounded-lg px-3 py-2 text-base font-medium border border-gray-500; + } + .change { + @apply bg-cyan-200; + } + .remove { + @apply bg-red-200; + } + .action { + @apply bg-green-200; + } +} diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css index 67765ff..cd567e8 100644 --- a/app/assets/stylesheets/merged/merged.css +++ b/app/assets/stylesheets/merged/merged.css @@ -1282,6 +1282,37 @@ select { margin-bottom: 0; } +.button { + margin-right: 0.75rem; + display: inline-block; + border-radius: 0.5rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity)); + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 500; +} + +.change { + --tw-bg-opacity: 1; + background-color: rgb(165 243 252 / var(--tw-bg-opacity)); +} + +.remove { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} + +.action { + --tw-bg-opacity: 1; + background-color: rgb(187 247 208 / var(--tw-bg-opacity)); +} + .sr-only { position: absolute; width: 1px; diff --git a/app/helpers/merged/merged_helper.rb b/app/helpers/merged/merged_helper.rb index 3ad9596..d3d3950 100644 --- a/app/helpers/merged/merged_helper.rb +++ b/app/helpers/merged/merged_helper.rb @@ -23,14 +23,6 @@ module Merged def green_button( text, url) button( text , url , "bg-green-200" ) end - def submit_button(text , danger = false ) - clazz = "bg-cyan-200 " #full names, no tricks for tailwind - clazz = "bg-red-300 " if danger - clazz += button_classes - content_tag(:button , class: clazz , type: :submit) do - text - end - end def button(text , url , color) link_to(url) do content_tag(:button , class: color + " " + button_classes ) do diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index 0502db4..ec04258 100644 --- a/app/views/merged/cards/index.haml +++ b/app/views/merged/cards/index.haml @@ -30,11 +30,11 @@ = card.updated_by .basis-full.mb-3 = form_for( card , {method: :delete } ) do - =submit_button( "Delete Card" , true) + %button.button.remove.mt-4{type: :submit} Delete Card = simple_form_for( card , method: :patch ) do |f| = f.input :section_id , label: "move to section" , include_blank: false , collection: card_section_select - =submit_button( "Move") + %button.button.change.mt-4{type: :submit} Move .basis-80 = link_to(merged.images_path(card_id: card.id)) do @@ -58,7 +58,7 @@ = simple_form_for( card , method: :patch) do |f| = f.input :header = f.input :text , as: :text , input_html: {rows: rows(card)} - .mt-4= submit_button("Update Texts") + %button.button.change.mt-4{type: :submit} Update Texts .basis-72.grow = form_for( card , {method: :patch }) do @@ -68,4 +68,4 @@ -if card.option_definitions.empty? %p No options -else - = submit_button("Update Options") + %button.button.change{type: :submit} Update Options diff --git a/app/views/merged/changes/index.haml b/app/views/merged/changes/index.haml index 5615716..d1c5e2d 100644 --- a/app/views/merged/changes/index.haml +++ b/app/views/merged/changes/index.haml @@ -37,10 +37,10 @@ %label.block %h4.text-lg.font-bold Message (short summary of changes) = text_field_tag( :message , "", class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm") - =submit_button( "Commit") + %button.button.change{type: :submit} Commit Changes .max-w-xl.px-4.py-8.mx-auto.text-center.reset_changes = form_tag( merged.changes_reset_path() , {method: :post } ) do %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl Reset changes - =submit_button( "Reset" ,true) + %button.button.remove{type: :submit} Reset diff --git a/app/views/merged/images/new.haml b/app/views/merged/images/new.haml index 5b008ca..f6c00fc 100644 --- a/app/views/merged/images/new.haml +++ b/app/views/merged/images/new.haml @@ -9,4 +9,4 @@ %p.my-4 Tags describe the size or format = hidden_for_select_image = file_field_tag 'image_file' , class: "mb-8 w-full px-2 text-xl bg-clip-padding border border-solid border-gray-300 rounded" - = submit_button 'Submit' + %button.button.change{type: :submit} Submit diff --git a/app/views/merged/images/show.haml b/app/views/merged/images/show.haml index acea974..6c43ff1 100644 --- a/app/views/merged/images/show.haml +++ b/app/views/merged/images/show.haml @@ -60,4 +60,4 @@ %p.align-center Not used, you may delete %p = form_tag( merged.image_path(@image.id) , {method: :delete } ) do - =submit_button( "Delete" , true) + %button.button.remove{type: :submit} Delete diff --git a/app/views/merged/pages/show.haml b/app/views/merged/pages/show.haml index ae0da99..76eeb6a 100644 --- a/app/views/merged/pages/show.haml +++ b/app/views/merged/pages/show.haml @@ -21,7 +21,7 @@ %label.block %h4.text-lg.font-bold Name = text_field_tag( :name , @page.name, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm") - .mt-4= submit_button("Update name") + %button.button.change.mt-4{type: :submit} Update name -unless @page.redirects.blank? .mt-4 Page redirects from @@ -35,4 +35,4 @@ -if @page.option_definitions.empty? %p No options -else - .mt-4= submit_button("Update Options") + %button.button.change.mt-4{type: :submit} Update Options diff --git a/app/views/merged/sections/index.haml b/app/views/merged/sections/index.haml index d5a4833..33b3a73 100644 --- a/app/views/merged/sections/index.haml +++ b/app/views/merged/sections/index.haml @@ -37,7 +37,7 @@ = card.updated_by .basis-full.mb-3 = form_tag( merged.section_path(section.id) , {method: :delete } ) do - =submit_button( "Delete" , true) + %button.button.remove{type: :submit} Delete .basis-72 .flow.flow-cols @@ -81,4 +81,4 @@ .relative.block.delete_page %p = form_tag( merged.page_path(@page.id) , {method: :delete } ) do - =submit_button( "Delete Page" , true) + %button.button.remove{type: :submit} Delete Page diff --git a/app/views/merged/sections/show.haml b/app/views/merged/sections/show.haml index 32513c4..51379bd 100644 --- a/app/views/merged/sections/show.haml +++ b/app/views/merged/sections/show.haml @@ -1,6 +1,7 @@ .mx-20.flex.h-16.items-center.gap-16.w-full = render "sections_pagination" , section: @section - = link_to( "New Section" , merged.new_page_section_path(@section.page.id) , class: button_classes + " bg-cyan-100") + = link_to( merged.new_page_section_path(@section.page.id) ) do + .button.change New Section = render_section( @section ) @@ -8,8 +9,10 @@ .basis-80 %h3.text-lg.font-bold= @section.template_style.header = section_preview(@section , class: "w-full object-contain my-4") - = green_button( "Change Style" , merged.section_select_template_path(@section.id)) - = blue_button( "New Section" , merged.new_page_section_path(@section.page.id , template: @section.template) ) + = link_to merged.section_select_template_path(@section.id) do + .button.action Change Style + = link_to merged.new_page_section_path(@section.page.id , template: @section.template) do + .button.change New Section .basis-full.mt-3 Updated at: = distance_of_time_in_words_to_now(@section.updated_at) @@ -19,7 +22,7 @@ = simple_form_for( @section , method: :patch ) do |f| = f.input :page_id , label: "move to page" , include_blank: false , collection: Merged::Page.all.collect{|p| [p.name , p.id]} - =submit_button( "Move") + %button.button.change{type: :submit} Move .basis-80.image = link_to(merged.images_path(section_id: @section.id)) do @@ -34,9 +37,13 @@ -else %h3.text-lg.font-bold No Image .flex - .mt-3= green_button("Change Image", merged.images_path(section_id: @section.id)) - .mt-3= blue_button("Edit Image" , merged.image_path(@section.image.id) ) if( @section.image ) - .mt-3= red_button( "Remove image", merged.section_set_image_path( @section.id , image: "")) if( @section.image ) + =link_to merged.images_path(section_id: @section.id) do + .button.action.mt-4 Change Image + - if( @section.image ) + =link_to merged.image_path(@section.image.id) do + .button.change.mt-4 Edit Image + =link_to merged.section_set_image_path( @section.id , image: "") do + .button.remove.mt-4 Remove image .basis-80.grow.content_update %label.block @@ -44,7 +51,7 @@ = simple_form_for( @section , method: :patch) do |f| = f.input :header = f.input :text , as: :text , input_html: {rows: rows(@section)} - .mt-4= submit_button("Update Texts") + %button.button.change.mt-4{type: :submit} Update Texts - if( @section.has_cards? ) .basis-full.h-0 @@ -71,4 +78,4 @@ -if @section.option_definitions.empty? %p No options -else - .mt-4= submit_button("Update Options") + %button.button.change.mt-4{type: :submit} Update Options