diff --git a/app/helpers/merged/merged_helper.rb b/app/helpers/merged/merged_helper.rb index 7341854..6716e5e 100644 --- a/app/helpers/merged/merged_helper.rb +++ b/app/helpers/merged/merged_helper.rb @@ -44,11 +44,8 @@ module Merged def blue_button( text, url) button( text , url , "bg-cyan-200" ) end - def yellow_button( text, url) - button( text , url , "bg-yellow-200" ) - end def red_button( text, url) - button( text , url , "bg-red-200" ) + button( text , url , "bg-red-300" ) end def green_button( text, url) button( text , url , "bg-green-200" ) @@ -98,7 +95,7 @@ module Merged end def button_classes - "mr-3 inline-block rounded-lg px-4 py-3 text-md font-medium border border-gray-400" + "mr-3 inline-block rounded-lg px-3 py-2 text-md font-medium border border-gray-500" end # section should be hash with at least 'template' key def find_template(section) diff --git a/app/helpers/merged/sections_helper.rb b/app/helpers/merged/sections_helper.rb index 00ec564..a823823 100644 --- a/app/helpers/merged/sections_helper.rb +++ b/app/helpers/merged/sections_helper.rb @@ -2,13 +2,6 @@ module Merged module SectionsHelper include ViewHelper #for previews - def section_form(options) - url = section_url( @section.id) - form_tag( url , {method: :patch}) do - yield - end - end - #image tag for the preview, passing options through def section_preview(section , options) image_tag("merged/section_preview/#{section.template}" , options) diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index 2637311..9715c40 100644 --- a/app/views/merged/cards/index.haml +++ b/app/views/merged/cards/index.haml @@ -9,23 +9,22 @@ = render( template , section: @section) - @section.cards.each_with_index do |card , index| - .flex.gap-8.px-20.py-6.mb-2{class: (card.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "card_#{card.id}"} - .basis-80 + .flex.gap-10.px-20.pt-4.pb-2.mb-2.border.border-2.bg-neutral-50.border-slate-400{ id: "card_#{card.id}"} + .basis-60 %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header} .flex.flex-wrap = blue_button( "Up" , merged.card_move_path(card.id , dir: :up) ) = blue_button( "Down" , merged.card_move_path(card.id , dir: :down) ) - = form_tag( merged.card_path(card.id) , {method: :delete } ) do - =submit_button( "Delete" , true) .mt-6 - = yellow_button("Change Image" , merged.images_path(card_id: card.id) ) .basis-full.mt-3 Updated at: = distance_of_time_in_words_to_now(card.updated_at) .basis-full.mb-3 Updated by: = card.updated_by - = red_button("Remove image", merged.card_set_image_path( card.id , image: "") ) + .basis-full.mb-3 + = form_tag( merged.card_path(card.id) , {method: :delete } ) do + =submit_button( "Delete Card" , true) .basis-80 = link_to(merged.images_path(card_id: card.id)) do @@ -34,29 +33,29 @@ .flex.align-center.justify-between.mb-4 .text-lg.font-bold.mt-2.mx-2 = card.image.size.to_s + "k" - %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium + %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium = card.image.aspect_ratio - = image_for( card ) + = image_for( card , "mb-4") + = green_button("Change Image" , merged.images_path(card_id: card.id) ) + = red_button("Remove image", merged.card_set_image_path( card.id , image: "") ) -else - %h3.mt-4.text-lg.font-bold No image + %h3.text-lg.font-bold No image .basis-72.grow - %h3.mt-4.text-lg.font-bold Fields - = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mt-8 mb-0 max-w space-y-4" } ) do + = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mb-0 max-w space-y-4" } ) do %label.block .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 .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" ) - =submit_button( "Update") + =submit_button( "Update Texts") .basis-72.grow - .mt-4.text-lg.font-bold Options - = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mt-8 mb-0 max-w space-y-4" }) do + = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mb-0 max-w space-y-4" }) do - card.option_definitions.each do |option| .grid.grid-cols-3 =render "merged/sections/option_form_#{option.type}" , section: card , option: option -if card.option_definitions.empty? %p No options -else - = submit_button("Update") + = submit_button("Update Options") diff --git a/app/views/merged/images/index.haml b/app/views/merged/images/index.haml index 846e7b0..8e1d099 100644 --- a/app/views/merged/images/index.haml +++ b/app/views/merged/images/index.haml @@ -2,7 +2,7 @@ .text-xl.font-bold.text-gray-900 = text_for_index - = link_to( "New Image" , merged.new_image_path(new_link_params) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100") + = link_to( "New Image" , merged.new_image_path(new_link_params) , class: button_classes + " bg-green-200") - if Rails.env.development? = javascript_include_tag "merged/vue.js" @@ -34,7 +34,7 @@ .flex.align-center.justify-between.mb-4 .text-lg.font-bold.mt-2.mx-2 {{image.name}} - %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium + %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium {{image.aspect_ratio}} %a.w-full.object-contain.h-72{":href" => "image.link" } %img{ ":src": "image.url" , ":alt": "image.name" } diff --git a/app/views/merged/pages/show.haml b/app/views/merged/pages/show.haml index 5274c57..ae0da99 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") + .mt-4= submit_button("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") + .mt-4= submit_button("Update Options") diff --git a/app/views/merged/sections/index.haml b/app/views/merged/sections/index.haml index c29852e..858fb23 100644 --- a/app/views/merged/sections/index.haml +++ b/app/views/merged/sections/index.haml @@ -4,15 +4,15 @@ = link_to @page.name , merged.page_path(@page) .text-xl.text-gray-900 =link_to "View live" , "/#{@page.name}" , target: @page.name - = link_to( "New Section" , merged.new_page_section_path(@page.id) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100") + = link_to( "New Section" , merged.new_page_section_path(@page.id) , class: button_classes + " bg-cyan-200") -@page.sections.each do |section | - .flex.gap-10.mt-2{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"} + .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.mt-4.text-lg.font-bold Section #{section.index} : #{section.header} + %h3.text-lg.font-bold Section #{section.index} : #{section.header} .flex.flex-wrap - = yellow_button("Edit" , merged.section_path(section.id) ) - = green_button( "Copy" , merged.new_page_section_path(@page.id, template: section.template) ) + = green_button("Edit" , merged.section_path(section.id) ) + = blue_button( "Copy" , merged.new_page_section_path(@page.id, template: section.template) ) .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"} @@ -40,34 +40,35 @@ =submit_button( "Delete" , true) .basis-72 - %h3.mt-4.text-lg.font-bold Style - = link_to(merged.section_select_template_path(section.id)) do - %p= section.template_style.header - = section_preview(section , class: "object-contain") + .flow.flow-cols + %h3.text-lg.font-bold.border-bottom-2 Style + = link_to(merged.section_select_template_path(section.id)) do + %p= section.template_style.header + = section_preview(section , class: "object-contain") .basis-52.grow - %h3.mt-4.text-lg.font-bold Header + %h3.my-4.text-lg.font-bold Header %p= section.header %h3.mt-4.text-lg.font-bold Text %p= section.text[0..100] + " ..." if section.text .basis-72 - if section.has_cards? - %h3.mt-4.text-lg.font-bold #{section.cards.length} Cards + %h3.text-lg.font-bold #{section.cards.length} Cards =link_to merged.section_cards_path(section.id) do =card_preview(section , class: "object-contain") - else = link_to(merged.images_path(section_id: section.id)) do -if section.image - %h3.mt-4.text-lg.font-bold Image #{section.image.name} + %h3.text-lg.font-bold Image #{section.image.name} .flex.align-center.justify-between.mb-4 .text-lg.font-bold.mt-2.mx-2 = section.image.size.to_s + "k" - %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium + %strong.inline-block.rounded.bg-gray-200.px-3.py-1.text-md.font-medium = section.image.aspect_ratio - = image_for( section , "h-40") + = image_for( section , "h-40 mb-1") -else - %h3.mt-4.text-lg.font-bold No Image + %h3.mt-y.text-lg.font-bold No Image .basis-96 - %h3.mt-4.text-lg.font-bold Options + %h3.text-lg.font-bold Options .grid.grid-cols-2.gap-3.mx-10 - section.options.each do|name , value| -unless value.blank? @@ -76,7 +77,7 @@ .grid.grid-cols-2.gap-2.m-8 .relative.block %p - = green_button( "New Section" , merged.new_page_section_path(@page.id) ) + = blue_button( "New Section" , merged.new_page_section_path(@page.id) ) .relative.block.delete_page %p = form_tag( merged.page_path(@page.id) , {method: :delete } ) do diff --git a/app/views/merged/sections/show.haml b/app/views/merged/sections/show.haml index 9207a31..886beaf 100644 --- a/app/views/merged/sections/show.haml +++ b/app/views/merged/sections/show.haml @@ -1,16 +1,16 @@ .mx-20.flex.h-16.items-center.gap-16 = render "sections_pagination" , section: @section - = link_to( "New Section" , merged.new_page_section_path(@section.page.id) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100") + = link_to( "New Section" , merged.new_page_section_path(@section.page.id) , class: button_classes + " bg-cyan-100") - template = find_template(@section) = render( template , section: @section) -.flex.gap-8.my-10.flex-wrap - .basis-80.ml-20 - %h3.mt-4.text-lg.font-bold= @section.template_style.header +.flex.gap-8.my-10.flex-wrap.mx-20 + .basis-80 + %h3.text-lg.font-bold= @section.template_style.header = section_preview(@section , class: "w-full object-contain my-4") - = yellow_button( "Change Style" , merged.section_select_template_path(@section.id)) - = green_button( "New Section" , merged.new_page_section_path(@section.page.id , template: @section.template) ) + = 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) ) .basis-full.mt-3 Updated at: = distance_of_time_in_words_to_now(@section.updated_at) @@ -21,28 +21,28 @@ .basis-80.image = link_to(merged.images_path(section_id: @section.id)) do -if @section.image - %h3.mt-4.text-lg.font-bold Image #{@section.image.name} + %h3.text-lg.font-bold Image #{@section.image.name} .flex.align-center.justify-between.mb-4 .text-lg.font-bold.mt-2.mx-2 = @section.image.size.to_s + "k" - %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium + %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium = @section.image.aspect_ratio = image_for( @section ) -else - %h3.mt-4.text-lg.font-bold No Image + %h3.text-lg.font-bold No Image .flex - .mt-3= yellow_button("Change Image", merged.images_path(section_id: @section.id)) + .mt-3= green_button("Change Image", merged.images_path(section_id: @section.id)) .mt-3= red_button( "Remove image", merged.section_set_image_path( @section.id , image: "")) if( @section.image ) .basis-80.grow.content_update - = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do + = form_tag( merged.section_path( @section.id) , method: :patch , class: "mx-auto mb-2 max-w space-y-4") do %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: rows(@section) ,class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm") - .mt-4= submit_button("Update") + .mt-4= submit_button("Update Texts") - if( @section.has_cards? ) .basis-full.h-0 @@ -50,24 +50,23 @@ .mx-3.text-lg.font-bold Card Style #{@section.card_template} =card_preview(@section , class: "my-3") %p.py-3 - =yellow_button("Change Card Style", merged.section_select_card_template_path(@section.id)) + =green_button("Change Card Style", merged.section_select_card_template_path(@section.id)) .basis-96.grow - %h3.mt-4.text-lg.font-bold #{@section.cards.length} Cards + %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 - = yellow_button( "View and Edit Cards" , merged.section_cards_path(@section.id)) - = green_button( "New Card" , merged.new_section_card_path(@section.id) ) + = green_button( "View and Edit Cards" , merged.section_cards_path(@section.id)) + = blue_button( "New Card" , merged.new_section_card_path(@section.id) ) - .basis-80.grow.mr-20 - %h3.mt-4.text-lg.font-bold Options - = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do + .basis-80.grow + = form_tag( merged.section_path( @section.id) , method: :patch , class: "mx-auto mb-0 max-w space-y-4") do - @section.option_definitions.each do |option| .grid.grid-cols-3 =render "option_form_#{option.type}" , section: @section , option: option -if @section.option_definitions.empty? %p No options -else - .mt-4= submit_button("Update") + .mt-4= submit_button("Update Options") diff --git a/lib/merged/engine.rb b/lib/merged/engine.rb index eec7e45..c40491a 100644 --- a/lib/merged/engine.rb +++ b/lib/merged/engine.rb @@ -9,7 +9,8 @@ module Merged class Engine < ::Rails::Engine isolate_namespace Merged initializer "merged.assets.precompile" do |app| - app.config.assets.precompile += %w( merged/merged.css merged/vue.js merged/vue.min.js merged/merged_logo) + app.config.assets.precompile += %w( merged/merged.css merged/vue.js merged/vue.min.js + merged/home merged/merged_logo) add_image_assets(app.config , "section_preview") add_image_assets(app.config , "card_preview") end