From b4f6e6b894de90b5437fd2d6ce8928869def9340 Mon Sep 17 00:00:00 2001 From: Torsten Date: Wed, 14 Dec 2022 17:17:16 +0200 Subject: [PATCH] fixed last card, flash and options --- app/controllers/merged/sections_controller.rb | 2 +- app/helpers/merged/view_helper.rb | 2 +- app/views/layouts/_merged_messages.haml | 9 ++- app/views/merged/pages/index.haml | 8 +- app/views/merged/sections/show.haml | 16 ++-- app/views/merged/styles/index.haml | 74 +++++++++++-------- .../merged/view/cards/_card_normal_round.haml | 23 ++---- .../view/cards/_card_normal_square.haml | 4 +- config/merged/card_styles.yml | 4 + 9 files changed, 76 insertions(+), 66 deletions(-) diff --git a/app/controllers/merged/sections_controller.rb b/app/controllers/merged/sections_controller.rb index 8c771a4..2bd017b 100644 --- a/app/controllers/merged/sections_controller.rb +++ b/app/controllers/merged/sections_controller.rb @@ -53,7 +53,7 @@ module Merged def set_card_template card_template = params[:card_template] raise "no card template given" if card_template.blank? - @section.content["card_template"] = card_template + @section.card_template = card_template @section.save redirect_to section_url(@section.id) end diff --git a/app/helpers/merged/view_helper.rb b/app/helpers/merged/view_helper.rb index aca723e..6847b3c 100644 --- a/app/helpers/merged/view_helper.rb +++ b/app/helpers/merged/view_helper.rb @@ -17,7 +17,7 @@ module Merged end # works for with sections and cards that respond to .image - def image_for(element , classes) + def image_for(element , classes = "") return "" if element.image.blank? image_tag("#{Image.image_root}/#{element.image}" , class: classes) end diff --git a/app/views/layouts/_merged_messages.haml b/app/views/layouts/_merged_messages.haml index 316c6ed..daffa21 100644 --- a/app/views/layouts/_merged_messages.haml +++ b/app/views/layouts/_merged_messages.haml @@ -1,11 +1,12 @@ -#flash - -if flash.alert +-if flash.alert + #flash .m-20.rounded.border-l-4.border-red-500.bg-red-50.p-4{:role => "alert"} %strong.block.font-medium.text-red-700 Oops %p.mt-2.text-sm.text-red-700 =flash.alert - -if flash.notice +-if flash.notice + #flash .m-20.rounded-xl.border.border-gray-100.p-4.shadow-xl{:role => "alert"} .flex.items-start.gap-4 %span.text-green-600 @@ -21,7 +22,7 @@ const notification = document.querySelector('#flash') if (notification) { setInterval(function() { - notification.classList.add('collapse'); + notification.classList.add('hidden'); }, 5000); } } diff --git a/app/views/merged/pages/index.haml b/app/views/merged/pages/index.haml index 869697e..ed1271d 100644 --- a/app/views/merged/pages/index.haml +++ b/app/views/merged/pages/index.haml @@ -15,10 +15,10 @@ Sections %th.whitespace-nowrap.px-4.py-2.text-left.font-medium.text-gray-900 .flex.items-center.gap-2 - Bytes + Updated %th.whitespace-nowrap.px-4.py-2.text-left.font-medium.text-gray-900 .flex.items-center.gap-2 - Updated + Edited by %th.whitespace-nowrap.px-4.py-2.text-left.font-medium.text-gray-900 .flex.items-center.gap-2 Actions @@ -29,10 +29,10 @@ = link_to merged_page.name , page_sections_path(merged_page.id) %td.whitespace-nowrap.px-4.py-2.text-gray-700 = merged_page.sections.length - %td.whitespace-nowrap.px-4.py-2.text-gray-700 - = merged_page.size %td.whitespace-nowrap.px-4.py-2.text-gray-700 = distance_of_time_in_words_to_now(merged_page.updated_at) + %td.whitespace-nowrap.px-4.py-2.text-gray-700 + ME %td.whitespace-nowrap.px-4.py-2 %strong.rounded.bg-green-100.px-3.text-xs.font-medium.text-green-700{:class => "py-1.5"} = link_to 'Sections', page_sections_path(merged_page.id) diff --git a/app/views/merged/sections/show.haml b/app/views/merged/sections/show.haml index 7acba79..fbc244a 100644 --- a/app/views/merged/sections/show.haml +++ b/app/views/merged/sections/show.haml @@ -6,10 +6,10 @@ - template = find_template(@section) = render( template , section: @section) -.flex.gap-2.m-8.flex-wrap +.flex.gap-4.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") + = section_preview(@section , class: "w-full object-contain my-4") = yellow_button( "Change Template" , section_select_template_url(@section.id)) = green_button( "New Section" , new_page_section_url(@section.page.id , template: @section.template) ) @@ -18,7 +18,7 @@ -if( @section.image.blank? ) %p No image -else - = image_tag( "cms/" + @section.image , class: "p-3") + = image_tag( "cms/" + @section.image , class: "my-3") = yellow_button("Change Image", section_select_image_url(@section.id)) = red_button( "Remove image", section_set_image_path( @section.id , image: "")) @@ -30,14 +30,14 @@ %label.block %h4.mt-4.text-lg.font-bold Text = 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") + .mt-4= submit_button("Update") - if( @section.has_cards? ) .basis-full.h-0 .basis-96 - %h3.mt-4.text-lg.font-bold Card Template #{@section.card_template} - =card_preview(@section , class: "p-3") - %p.p-3 + .mx-3.text-lg.font-bold Card Template #{@section.card_template} + =card_preview(@section , class: "my-3") + %p.py-3 =yellow_button("Change Card Template", section_select_card_template_url(@section.id)) .basis-96.grow @@ -57,4 +57,4 @@ -if @section.option_definitions.empty? %p No options -else - = submit_button("Update") + .mt-4= submit_button("Update") diff --git a/app/views/merged/styles/index.haml b/app/views/merged/styles/index.haml index 5281f85..fe019c1 100644 --- a/app/views/merged/styles/index.haml +++ b/app/views/merged/styles/index.haml @@ -1,53 +1,67 @@ - content_for( :merged_menu ) do - .text-xl.font-bold.text-gray-900 + .text-xl.font-bold Section styles = render "layouts/merged_header" .grid.grid-cols-3.gap-4.m-8 -@section_styles.each do | style| - %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm - =image_tag(style.section_preview , class: "h-56 w-full object-contain lg:h-72") - %p.mt-2.text-sm.text-gray-500 - =style.template - %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm + .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm .p-6 - %h3.text-lg.font-medium.text-gray-900 + %h3.text-lg.font-medium =style.header - %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3 + %p.mt-2.text-sm.leading-relaxed.line-clamp-3 = style.text - %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm - .p-6 - %h3.text-lg.font-medium.text-gray-900 - Option - %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3 - Following options: none (wip) - %h3.text-lg.font-medium.text-gray-900 + %p.mt-2.text-sm + Shorthand: + =style.template + %h3.text-lg.font-medium.mt-4 Cards - %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3 + %p.mt-2.text-sm.leading-relaxed.line-clamp-3 -if(style.has_cards?) Section may include cards. See card styles below -else Section may not include cards + .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm + .p-6 + .w-full.object-contain.h-72 + =image_tag(style.section_preview ) -.px-4.py-8.mx-auto.text-center - %h1.text-4xl.font-bold - Card styles + .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm + .p-6 + %h3.text-lg.font-medium + Options + %p.mt-2.text-sm.leading-relaxed.line-clamp-3 + -style.options_definitions.each do | style | + %label.block + .text-lg.font-bold=style.name + =style.description + +.flex.bg-cyan-100 + .px-4.py-8.mx-auto.text-center + %h1.text-4xl.font-bold + Card styles .grid.grid-cols-3.gap-4.m-8 -@cards_styles.each do |style| - %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm - =image_tag(style.card_preview , class: "h-56 w-full object-contain lg:h-72") - %p.mt-2.text-sm.text-gray-500 - =style.template %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm .p-6 - %h3.text-lg.font-medium.text-gray-900 + %h3.text-lg.font-medium =style.header - %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3 + %p.mt-2.text-sm.leading-relaxed.line-clamp-3 = style.text - %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm + %p.mt-2.text-sm + Shorthand: + =style.template + .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm .p-6 - %h3.text-lg.font-medium.text-gray-900 - Option - %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3 - Following options: none (wip) + .w-full.object-contain.h-72 + =image_tag(style.card_preview ) + .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm + .p-6 + %h3.text-lg.font-medium + Options + %p.mt-2.text-sm.leading-relaxed.line-clamp-3 + -style.options_definitions.each do | style | + %label.block + .text-lg.font-bold=style.name + =style.description diff --git a/app/views/merged/view/cards/_card_normal_round.haml b/app/views/merged/view/cards/_card_normal_round.haml index 845ae6f..f211217 100644 --- a/app/views/merged/view/cards/_card_normal_round.haml +++ b/app/views/merged/view/cards/_card_normal_round.haml @@ -1,16 +1,7 @@ -%article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm - %img.h-56.w-full.object-cover{:alt => "Office", :src => "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"}/ - .p-4.sm:p-6 - %a{:href => "#"} - %h3.text-lg.font-medium.text-gray-900 - Lorem ipsum dolor sit amet consectetur adipisicing elit. - %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae - dolores, possimus pariatur animi temporibus nesciunt praesentium dolore - sed nulla ipsum eveniet corporis quidem, mollitia itaque minus soluta, - voluptates neque explicabo tempora nisi culpa eius atque dignissimos. - Molestias explicabo corporis voluptatem? - %a.group.mt-4.inline-flex.items-center.gap-1.text-sm.font-medium.text-blue-600{:href => "#"} - Find out more - %span.block.transition{"aria-hidden" => "true", :class => "group-hover:translate-x-0.5"} - → +.fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10 + = image_for( card , class: "object-fill") + %h3.p-5.text-2xl.bg-gray-100.text-black.font-bold{ align_option(card)}= card.header + %div.h-full{background_option(card)} + .p-5{options(card , :align , :color)} + %p.m-2.text-sm.leading-relaxed.line-clamp-3 + = markdown(card) diff --git a/app/views/merged/view/cards/_card_normal_square.haml b/app/views/merged/view/cards/_card_normal_square.haml index 4745a2a..25a7183 100644 --- a/app/views/merged/view/cards/_card_normal_square.haml +++ b/app/views/merged/view/cards/_card_normal_square.haml @@ -1,6 +1,6 @@ -%div.m-10{background_option(card)} +.m-10{background_option(card)} = image_for( card , "h-96 w-full object-cover") - %div.m-6{options(card , :align , :color)} + .m-6{options(card , :align , :color)} %h3.p-4.text-2xl.font-bold= card.header -if card.has_option?("subheader") %h4.p-4.text-xl= card.option("subheader") diff --git a/config/merged/card_styles.yml b/config/merged/card_styles.yml index 0d4a99d..6d276ac 100644 --- a/config/merged/card_styles.yml +++ b/config/merged/card_styles.yml @@ -39,6 +39,10 @@ fields: - header - text + options: + - background + - color + - align - template: form_field header: A single field in a form text: The header is the Name of the field, the description