From 2685963fd0bb5d8bf30a23bf176790a52df299d4 Mon Sep 17 00:00:00 2001 From: Torsten Date: Tue, 13 Dec 2022 23:58:52 +0200 Subject: [PATCH] flexed sections show and pagination style nav --- app/views/merged/cards/index.haml | 10 ++--- .../merged/sections/_sections_pagination.haml | 23 ++++++++++ .../merged/sections/select_card_template.haml | 12 +++--- .../merged/sections/select_template.haml | 8 ++-- app/views/merged/sections/show.haml | 43 ++++++++----------- 5 files changed, 56 insertions(+), 40 deletions(-) create mode 100644 app/views/merged/sections/_sections_pagination.haml diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index cdbc6e0..6cec572 100644 --- a/app/views/merged/cards/index.haml +++ b/app/views/merged/cards/index.haml @@ -1,9 +1,9 @@ - content_for( :merged_menu ) do - .text-xl.font-bold.text-gray-900 - Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"} + = render "merged/sections/sections_pagination" , section: @section .text-xl.text-gray-900 - Cards for - = link_to "Section #{@section.index}", section_url( @section.id) , class: "underline" + Cards for Section #{@section.index} - + = link_to @section.header , section_url( @section.id) , class: "underline" + = link_to( "New Card" , new_section_card_url(@section.id) , class: "p-2 border border-gray-200 font-bold rounded-lg hover:bg-sky-100") = render "layouts/merged_header" @@ -51,5 +51,3 @@ %p No options -else = submit_button("Update") -%p - = green_button( "New Card" , new_section_card_url(@section.id) ) diff --git a/app/views/merged/sections/_sections_pagination.haml b/app/views/merged/sections/_sections_pagination.haml new file mode 100644 index 0000000..f073bd5 --- /dev/null +++ b/app/views/merged/sections/_sections_pagination.haml @@ -0,0 +1,23 @@ +.text-xl.font-bold.text-gray-900 + Page #{link_to section.page.name, page_sections_url(section.page.id), class: "underline"} +.inline-flex.items-center.justify-center.gap-3 + .text-xl.font-bold.text-gray-900 + Section #{section.header} + - if section.previous_section + =link_to section_url(section.previous_section.id) , class: "inline-flex h-8 w-8 items-center justify-center rounded border border-gray-100 hover:bg-sky-100" do + %span.sr-only Next Section + %svg.h-3.w-3{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"} + %path{"clip-rule" => "evenodd", :d => "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "fill-rule" => "evenodd"} + - else + .inline-flex.h-8.w-8.items-center.justify-center.rounded.border.border-gray-100 + %p.text-xs + = section.index + %span{:class => "mx-0.25"} / + = section.page.sections.length + - if section.next_section + =link_to section_url(section.next_section.id), class: "inline-flex h-8 w-8 items-center justify-center rounded border border-gray-100 hover:bg-sky-100" do + %span.sr-only Next Section + %svg.h-3.w-3{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"} + %path{"clip-rule" => "evenodd", :d => "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "fill-rule" => "evenodd"} + - else + .inline-flex.h-8.w-8.items-center.justify-center.rounded.border.border-gray-100 diff --git a/app/views/merged/sections/select_card_template.haml b/app/views/merged/sections/select_card_template.haml index f83382f..9161e7a 100644 --- a/app/views/merged/sections/select_card_template.haml +++ b/app/views/merged/sections/select_card_template.haml @@ -1,11 +1,13 @@ - content_for( :merged_menu ) do + .text-xl.font-bold.text-gray-900 + Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"} .text-xl.text-gray-900 - Select Card Template for Section #{section.index} + Select Card Template for Section #{@section.index} - #{@section.header} = render "layouts/merged_header" -.grid.grid-cols-4.gap-2.m-8 +.grid.grid-cols-4.gap-6.m-8 - @cards.each do |style| - .relative.block.border.border-gray-100 + .border.border-gray-300.rounded-lg.p-2 = link_to( section_set_card_template_path( card_template: style.template )) do - =image_tag(style.card_preview , class: "h-56 w-full object-contain lg:h-72") - = style.header + .font-bold.text-lg.text-center.pb-4= style.header + =image_tag(style.card_preview , class: "w-full object-contain") diff --git a/app/views/merged/sections/select_template.haml b/app/views/merged/sections/select_template.haml index 4a28650..56e9293 100644 --- a/app/views/merged/sections/select_template.haml +++ b/app/views/merged/sections/select_template.haml @@ -6,9 +6,9 @@ = render "layouts/merged_header" -.grid.grid-cols-4.gap-2.m-8 +.grid.grid-cols-4.gap-6.m-8 - @sections.each do |style| - .relative.block.border.border-gray-100 + .border.border-gray-300.rounded-lg.p-2 = link_to( section_set_template_path( template: style.template )) do - =image_tag(style.section_preview , class: "h-56 w-full object-contain lg:h-72") - = style.header + .font-bold.text-lg.text-center.pb-4= style.header + =image_tag(style.section_preview , class: "w-full object-contain") diff --git a/app/views/merged/sections/show.haml b/app/views/merged/sections/show.haml index f3103e7..7acba79 100644 --- a/app/views/merged/sections/show.haml +++ b/app/views/merged/sections/show.haml @@ -1,26 +1,28 @@ - content_for( :merged_menu ) do - .text-xl.font-bold.text-gray-900 - Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"} - .text-xl.text-gray-900 - Section #{@section.index} / #{@section.page.sections.length} : #{@section.header} - - if @section.previous_section - =link_to "(prev)" , section_url(@section.previous_section.id) - - if @section.next_section - =link_to "(next)" , section_url(@section.next_section.id) + = render "sections_pagination" , section: @section = render "layouts/merged_header" - template = find_template(@section) = render( template , section: @section) -.grid.grid-cols-3.gap-2.m-8 - .relative.block.border.border-gray-100 +.flex.gap-2.m-8.flex-wrap + .basis-96 %h3.mt-4.text-lg.font-bold Template #{@section.template} = section_preview(@section , class: "w-full object-contain p-3") = yellow_button( "Change Template" , section_select_template_url(@section.id)) = green_button( "New Section" , new_page_section_url(@section.page.id , template: @section.template) ) - .relative.block.border.border-gray-100 + .basis-96 + %h3.mt-4.text-lg.font-bold Image + -if( @section.image.blank? ) + %p No image + -else + = image_tag( "cms/" + @section.image , class: "p-3") + = yellow_button("Change Image", section_select_image_url(@section.id)) + = red_button( "Remove image", section_set_image_path( @section.id , image: "")) + + .basis-80.grow = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do %label.block %h4.text-lg.font-bold Header @@ -30,24 +32,15 @@ = text_area_tag( :text , @section.text, rows: 5 ,class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm") = submit_button("Update") - .relative.block.border.border-gray-100 - %h3.mt-4.text-lg.font-bold Image - -if( @section.image.blank? ) - %p No image - -else - = image_tag( "cms/" + @section.image , class: "p-3") - = yellow_button("Change Image", section_select_image_url(@section.id)) - = red_button( "Remove image", section_set_image_path( @section.id , image: "")) - -.grid.grid-cols-3.gap-2.m-8 - if( @section.has_cards? ) - .relative.block.border.border-gray-100 + .basis-full.h-0 + .basis-96 %h3.mt-4.text-lg.font-bold Card Template #{@section.card_template} - =card_preview(@section , class: "w-full object-contain") + =card_preview(@section , class: "p-3") %p.p-3 =yellow_button("Change Card Template", section_select_card_template_url(@section.id)) - .relative.block.border.border-gray-100 + .basis-96.grow %h3.mt-4.text-lg.font-bold #{@section.cards.length} Cards -@section.cards.each do |card| .mt-4.text-md.font-bold= card.header @@ -56,7 +49,7 @@ = yellow_button( "View and Edit Cards" , section_cards_url(@section.id)) = green_button( "New Card" , new_section_card_url(@section.id) ) - .relative.block.border.border-gray-100 + .basis-80.grow %h3.mt-4.text-lg.font-bold Options = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do - @section.option_definitions.each do |option|