fixed last card, flash and options

This commit is contained in:
Torsten 2022-12-14 17:17:16 +02:00
parent 523c5c97a0
commit b4f6e6b894
9 changed files with 76 additions and 66 deletions

View File

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

View File

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

View File

@ -1,11 +1,12 @@
#flash
-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
#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);
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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