FeenixMakers/merged
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

button and margin consitency

Browse Source
This commit is contained in:
Torsten 2023-01-10 21:06:11 +02:00
parent d4eb2568dc
commit c9afd4f3bc
8 changed files with 59 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/helpers/merged/merged_helper.rb
View File

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

7
app/helpers/merged/sections_helper.rb
View File

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

29
app/views/merged/cards/index.haml
View File

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

4
app/views/merged/images/index.haml
View File

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

4
app/views/merged/pages/show.haml
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")
.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")

29
app/views/merged/sections/index.haml
View File

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

39
app/views/merged/sections/show.haml
View File

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

3
lib/merged/engine.rb
View File

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