diff --git a/app/assets/stylesheets/merged.tailwind.css b/app/assets/stylesheets/merged.tailwind.css index c44b13e..8c7592a 100644 --- a/app/assets/stylesheets/merged.tailwind.css +++ b/app/assets/stylesheets/merged.tailwind.css @@ -5,7 +5,7 @@ @layer components { .button { - @apply mr-3 inline-block rounded-lg px-3 py-2 text-base font-medium border border-gray-500; + @apply inline-block rounded-lg px-3 py-2 text-base font-medium border border-gray-600 hover:border-2; } .change { @apply bg-cyan-200; diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css index cd567e8..6d28414 100644 --- a/app/assets/stylesheets/merged/merged.css +++ b/app/assets/stylesheets/merged/merged.css @@ -1283,12 +1283,11 @@ select { } .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)); + border-color: rgb(75 85 99 / var(--tw-border-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -1298,6 +1297,10 @@ select { font-weight: 500; } +.button:hover { + border-width: 2px; +} + .change { --tw-bg-opacity: 1; background-color: rgb(165 243 252 / var(--tw-bg-opacity)); @@ -1605,6 +1608,10 @@ select { margin-top: 5rem; } +.mr-4 { + margin-right: 1rem; +} + .block { display: block; } @@ -2075,21 +2082,6 @@ select { border-color: rgb(156 163 175 / var(--tw-border-opacity)); } -.bg-cyan-200 { - --tw-bg-opacity: 1; - background-color: rgb(165 243 252 / var(--tw-bg-opacity)); -} - -.bg-red-300 { - --tw-bg-opacity: 1; - background-color: rgb(252 165 165 / var(--tw-bg-opacity)); -} - -.bg-green-200 { - --tw-bg-opacity: 1; - background-color: rgb(187 247 208 / var(--tw-bg-opacity)); -} - .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -2214,10 +2206,20 @@ select { background-color: rgb(226 232 240 / var(--tw-bg-opacity)); } +.bg-cyan-200 { + --tw-bg-opacity: 1; + background-color: rgb(165 243 252 / var(--tw-bg-opacity)); +} + .bg-transparent { background-color: transparent; } +.bg-green-200 { + --tw-bg-opacity: 1; + background-color: rgb(187 247 208 / var(--tw-bg-opacity)); +} + .bg-blue-200 { --tw-bg-opacity: 1; background-color: rgb(191 219 254 / var(--tw-bg-opacity)); @@ -2694,14 +2696,6 @@ select { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.hover\:border-2:hover { - border-width: 2px; -} - -.hover\:border-4:hover { - border-width: 4px; -} - .hover\:bg-red-50:hover { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); diff --git a/app/helpers/merged/merged_helper.rb b/app/helpers/merged/merged_helper.rb index d3d3950..8dc74f1 100644 --- a/app/helpers/merged/merged_helper.rb +++ b/app/helpers/merged/merged_helper.rb @@ -14,22 +14,6 @@ module Merged name += "*" unless card.option("compulsory") == "no" name end - def blue_button( text, url) - button( text , url , "bg-cyan-200" ) - end - def red_button( text, url) - button( text , url , "bg-red-300" ) - end - def green_button( text, url) - button( text , url , "bg-green-200" ) - end - def button(text , url , color) - link_to(url) do - content_tag(:button , class: color + " " + button_classes ) do - text - end - end - end def last_change_digit last = ChangeSet.current.last diff --git a/app/helpers/merged/view_helper.rb b/app/helpers/merged/view_helper.rb index 47052bc..863a0a8 100644 --- a/app/helpers/merged/view_helper.rb +++ b/app/helpers/merged/view_helper.rb @@ -42,16 +42,13 @@ module Merged def view_button(element , extra_classes = "") return "" unless element.has_option?("button_link") - [""].join.html_safe end - def view_button_classes(element) - button_classes + " hover:border-4" - end end end diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index ec04258..17d9ea2 100644 --- a/app/views/merged/cards/index.haml +++ b/app/views/merged/cards/index.haml @@ -46,9 +46,11 @@ %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium = card.image.aspect_ratio = image_for( card , "mb-4") - = green_button("Change Image" , merged.images_path(card_id: card.id) ) - = blue_button("Edit Image" , merged.image_path(card.image.id) ) - = red_button("Remove image", merged.card_set_image_path( card.id , image: "") ) + = link_to Change Image" , merged.images_path(card_id: card.id) ) + = link_to merged.image_path(card.image.id) do + %button.button.change Edit Image + = link_to merged.card_set_image_path( card.id , image: "") + %button.button.remove Remove image -else %h3.mt-4.text-lg.font-bold No image %button.my-3.bg-cyan-200{class: button_classes} Add Image diff --git a/app/views/merged/pages/index.haml b/app/views/merged/pages/index.haml index 4315201..ff4a92d 100644 --- a/app/views/merged/pages/index.haml +++ b/app/views/merged/pages/index.haml @@ -42,5 +42,6 @@ %label.block %h4.text-lg.font-bold Name = text_field_tag( :name , params[:name], class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm") - - @page_styles.each do |page| - %button.mt-3.bg-cyan-200{class: button_classes , name: :type , value: page.type}= "New #{page.type.capitalize}" + .flex.gap-3.mt-3.justify-between + - @page_styles.each do |page| + %button.button.change{name: :type , value: page.type}= "New #{page.type.capitalize}" diff --git a/app/views/merged/sections/index.haml b/app/views/merged/sections/index.haml index 33b3a73..144834f 100644 --- a/app/views/merged/sections/index.haml +++ b/app/views/merged/sections/index.haml @@ -10,9 +10,11 @@ .flex.gap-10.mt-2.pt-4.pb-2.border-2.bg-neutral-50.border-slate-400{ id: "section_#{section.id}"} .basis-72.ml-20 %h3.text-lg.font-bold Section #{section.index} : #{section.header} - .flex.flex-wrap - = green_button("Edit" , merged.section_path(section.id) ) - = blue_button( "Copy" , merged.new_page_section_path(@page.id, template: section.template) ) + .flex.flex-wrap.gap-3 + = link_to merged.section_path(section.id) do + %button.button.action Edit + = link_to merged.new_page_section_path(@page.id, template: section.template) do + %button.button.change Copy .p-2 =link_to(merged.section_move_path(section.id , dir: :down)) do %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"} @@ -76,9 +78,8 @@ .font-xl= value .grid.grid-cols-2.gap-2.m-8 .relative.block - %p - = blue_button( "New Section" , merged.new_page_section_path(@page.id) ) + = link_to merged.new_page_section_path(@page.id) do + %button.button.change New Section .relative.block.delete_page - %p - = form_tag( merged.page_path(@page.id) , {method: :delete } ) do - %button.button.remove{type: :submit} Delete Page + = form_tag( merged.page_path(@page.id) , {method: :delete } ) do + %button.button.remove{type: :submit} Delete Page diff --git a/app/views/merged/sections/show.haml b/app/views/merged/sections/show.haml index 51379bd..eaa9865 100644 --- a/app/views/merged/sections/show.haml +++ b/app/views/merged/sections/show.haml @@ -10,7 +10,7 @@ %h3.text-lg.font-bold= @section.template_style.header = section_preview(@section , class: "w-full object-contain my-4") = link_to merged.section_select_template_path(@section.id) do - .button.action Change Style + .button.action.mr-3 Change Style = link_to merged.new_page_section_path(@section.page.id , template: @section.template) do .button.change New Section .basis-full.mt-3 @@ -22,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]} - %button.button.change{type: :submit} Move + %button.button.change.mt-3{type: :submit} Move .basis-80.image = link_to(merged.images_path(section_id: @section.id)) do @@ -38,10 +38,10 @@ %h3.text-lg.font-bold No Image .flex =link_to merged.images_path(section_id: @section.id) do - .button.action.mt-4 Change Image + .button.action.mt-4.mr-3 Change Image - if( @section.image ) =link_to merged.image_path(@section.image.id) do - .button.change.mt-4 Edit Image + .button.change.mt-4.mr-3 Edit Image =link_to merged.section_set_image_path( @section.id , image: "") do .button.remove.mt-4 Remove image @@ -59,16 +59,18 @@ .mx-3.text-lg.font-bold Card Style #{@section.card_template} =card_preview(@section , class: "my-3") %p.py-3 - =green_button("Change Card Style", merged.section_select_card_template_path(@section.id)) - + = link_to merged.section_select_card_template_path(@section.id) do + %button.button.action Change Card Style .basis-96.grow %h3.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 - = green_button( "View and Edit Cards" , merged.section_cards_path(@section.id)) - = blue_button( "New Card" , merged.new_section_card_path(@section.id) ) + .flex.mt-3.gap-3 + = link_to merged.section_cards_path(@section.id) do + %button.button.action View and Edit Cards + = link_to merged.new_section_card_path(@section.id) do + %button.button.change New Card .basis-80.grow = simple_form_for( @section , method: :patch , class: "mx-auto mb-0 max-w space-y-4") do