fixed last card, flash and options

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

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

app/views/layouts/_merged_messages.haml

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

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)

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}
+      .mx-3.text-lg.font-bold Card Template #{@section.card_template}
-      =card_preview(@section , class: "p-3")
+      =card_preview(@section , class: "my-3")
-      %p.p-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")

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
+    .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
       .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
-      .p-6
+          Shorthand:
-        %h3.text-lg.font-medium.text-gray-900
+          =style.template
-          Option
+        %h3.text-lg.font-medium.mt-4
-        %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
           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
+        .w-full.object-contain.h-72
-          Option
+          =image_tag(style.card_preview )
-        %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+    .overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
-          Following options: none (wip)
+      .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

app/views/merged/view/cards/_card_normal_round.haml

@@ -1,16 +1,7 @@
-%article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+.fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
-  %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"}/
+  = image_for( card ,  class: "object-fill")
-  .p-4.sm:p-6
+  %h3.p-5.text-2xl.bg-gray-100.text-black.font-bold{ align_option(card)}= card.header
-    %a{:href => "#"}
+  %div.h-full{background_option(card)}
-      %h3.text-lg.font-medium.text-gray-900
+    .p-5{options(card , :align , :color)}
-        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      %p.m-2.text-sm.leading-relaxed.line-clamp-3
-    %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+        = markdown(card)
-      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"}
-        →

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

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