move submit button from code to tailwind

This commit is contained in:
Torsten 2023-01-21 19:11:21 +02:00
parent af58e885d7
commit 84fef50e16
10 changed files with 76 additions and 29 deletions

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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