From d10361f13d10aea6bd3ee7a277330c24c3b2472e Mon Sep 17 00:00:00 2001 From: Torsten Date: Mon, 5 Dec 2022 10:57:34 +0200 Subject: [PATCH] add proper flash messages --- app/helpers/merged/merged_helper.rb | 4 ++- app/views/layouts/_merged_messages.haml | 28 +++++++++++++++++++ app/views/layouts/merged_layout.haml | 1 + app/views/merged/cards/index.haml | 2 -- app/views/merged/sections/index.html.haml | 25 ++++++++++------- .../merged/sections/select_template.haml | 6 ++-- app/views/merged/sections/show.html.haml | 2 -- 7 files changed, 51 insertions(+), 17 deletions(-) create mode 100644 app/views/layouts/_merged_messages.haml diff --git a/app/helpers/merged/merged_helper.rb b/app/helpers/merged/merged_helper.rb index c7557a5..57ca1ca 100644 --- a/app/helpers/merged/merged_helper.rb +++ b/app/helpers/merged/merged_helper.rb @@ -13,7 +13,9 @@ module Merged button( text , url , "bg-green-500" ) end def submit_button(text , danger = false ) - clazz = danger ? "bg-blue-500 " : "bg-blue-500 " + button_classes + clazz = "bg-blue-500 " #full names, no tricks for tailwind + clazz = "bg-red-500 " if danger + clazz += button_classes content_tag(:button , class: clazz , type: :submit) do text end diff --git a/app/views/layouts/_merged_messages.haml b/app/views/layouts/_merged_messages.haml new file mode 100644 index 0000000..feb1283 --- /dev/null +++ b/app/views/layouts/_merged_messages.haml @@ -0,0 +1,28 @@ +#flash + -if flash.alert + .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 + .rounded-xl.border.border-gray-100.p-4.shadow-xl{:role => "alert"} + .flex.items-start.gap-4 + %span.text-green-600 + %svg.h-6.w-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"} + %path{:d => "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z", "stroke-linecap" => "round", "stroke-linejoin" => "round"} + .flex-1 + %strong.block.font-medium.text-gray-900 Ok + %p.mt-1.text-sm.text-gray-700 + = flash.notice + +:javascript + function hideNotice() { + const notification = document.querySelector('#flash') + if (notification) { + setInterval(function() { + notification.classList.add('collapse'); + }, 5000); + } + } + hideNotice(); diff --git a/app/views/layouts/merged_layout.haml b/app/views/layouts/merged_layout.haml index 03a8858..96207a2 100644 --- a/app/views/layouts/merged_layout.haml +++ b/app/views/layouts/merged_layout.haml @@ -46,4 +46,5 @@ %svg.h-5.w-5{:fill => "none", :stroke => "currentColor", "stroke-width" => "2", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"} %path{:d => "M4 6h16M4 12h16M4 18h16", "stroke-linecap" => "round", "stroke-linejoin" => "round"} + = render "layouts/merged_messages" = yield diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index a0080d8..5860823 100644 --- a/app/views/merged/cards/index.haml +++ b/app/views/merged/cards/index.haml @@ -1,5 +1,3 @@ -%p#notice= notice - - template = find_template(@section) = render( template , section: @section) diff --git a/app/views/merged/sections/index.html.haml b/app/views/merged/sections/index.html.haml index 609e5a8..7cd35a5 100644 --- a/app/views/merged/sections/index.html.haml +++ b/app/views/merged/sections/index.html.haml @@ -1,4 +1,3 @@ -%p#notice= notice .flex.flex-col.bg-white .flex.items-center.justify-center.flex-1 .max-w-xl.px-4.py-8.mx-auto.text-center @@ -17,8 +16,9 @@ = red_button( "Delete" , section_remove_path(section.id) ) .relative.block.border.border-gray-100.p-4 %h3.mt-4.text-lg.font-bold Template - %p= section.template - = section_preview(section , class: "w-full object-contain") + = link_to(section_select_template_url(section.id)) do + %p= section.template + = section_preview(section , class: "w-full object-contain") .relative.block.border.border-gray-100.p-4 %h3.mt-4.text-lg.font-bold Header %p= section.header @@ -30,16 +30,21 @@ =link_to section_cards_url(section.id) do =card_preview(section , class: "w-full object-contain") - else - %h3.mt-4.text-lg.font-bold Image - -if section.image - = image_tag "cms/" + section.image - -else - %p No image + = link_to(section_select_image_url(section.id)) do + %h3.mt-4.text-lg.font-bold Image + -if section.image + = image_tag "cms/" + section.image + -else + %p No image .relative.block.border.border-gray-100.p-4 %h3.mt-4.text-lg.font-bold Options - section.options.each do|name , value| %p = name = value -%p - = green_button( "New Section" , new_page_section_url(@page.name) ) +.relative.block.border.border-gray-100 + %p + = green_button( "New Section" , new_page_section_url(@page.name) ) + %p + = form_tag( page_url(@page.name) , {method: :delete } ) do + =submit_button( "Delete" , true) diff --git a/app/views/merged/sections/select_template.haml b/app/views/merged/sections/select_template.haml index 07c07ff..2fac17b 100644 --- a/app/views/merged/sections/select_template.haml +++ b/app/views/merged/sections/select_template.haml @@ -1,6 +1,8 @@ -%p#notice= notice - .flex.flex-col.bg-white + .flex.items-center.justify-center.flex-1 + .max-w-xl.px-4.py-8.mx-auto.text-center + %h1.text-3xl.font-bold.tracking-tight.text-gray-900 + Page #{link_to @section.page.name, page_sections_url(@section.page.name), class: "underline"} .flex.items-center.justify-center.flex-1 .max-w-xl.px-4.py-8.mx-auto.text-center %h1.text-3xl.font-bold.tracking-tight.text-gray-900 diff --git a/app/views/merged/sections/show.html.haml b/app/views/merged/sections/show.html.haml index 110597a..836a8d9 100644 --- a/app/views/merged/sections/show.html.haml +++ b/app/views/merged/sections/show.html.haml @@ -1,5 +1,3 @@ -%p#notice= notice - - template = find_template(@section) = render( template , section: @section)