breeze_cms 1.0.1 → 1.0.3

data/app/views/breeze/pages/show.haml

@@ -1,83 +1,73 @@
 - @page.sections.each do |section|
   = render_section( section )
 
-.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+.grid.grid-cols-4.mx-20.md:mx-12.gap-8.mt-8
   .text-xl.font-bold.text-gray-900
     = @page.type.capitalize
     = ":"
-  .text-xl.font-bold.text-gray-900
     =@page.name
-  %strong.rounded.bg-green-100.px-4.py-2.text-lg.font-medium.text-green-700{:class => "py-1.5"}
-    = link_to 'Section details', breeze.page_sections_path(@page.id)
+    -unless @page.redirects.blank?
+      .mt-4
+        Page redirects from
+        = @page.redirects
+  %div
+    %button.button.change
+      = link_to 'Section details', breeze.page_sections_path(@page.id)
 
   = form_tag( breeze.section_new_path(@page.id), method: :post ) do
-    %button.button.change.mr-3{type: :submit} New Section
+    %button.button.action{type: :submit} New Section
 
   .text-xl
     Edited
     = distance_of_time_in_words_to_now(@page.updated_at)
     ago
-.flex.gap-4.justify-center.m-20
-  .grid.grid-cols-5
-    .text.font-bold Section
-    .text.font-bold Cards
-    .text.font-bold Translations
-    .text.font-bold Updated
-    .text.font-bold Actions
-    - @page.sections.each do |section |
-      .span
-        =link_to( breeze.section_path(section.id)) do
-          #{section.index} : #{section.header}
-      .text
-        =link_to breeze.section_cards_path(section.id) do
-          #{section.cards.length} Cards
-      .text
-        = link_to breeze.translation_path(@page.id) do
-          %button.button.action
-            =section.missing_translations
-            missing
-      .text
-        = updated_by(section)
-      .flex
-        = form_tag( breeze.section_new_path(@page.id), method: :post ) do
-          %button.button.change.mr-3{type: :submit} New
-        = link_to breeze.section_path(section.id) do
-          %button.button.action Edit
-        .p-2
-          =link_to(breeze.section_move_path(section.id , dir: :down)) do
-            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
-              %path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
-        .p-2
-          =link_to(breeze.section_move_path(section.id , dir: :up)) do
-            %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
-              %path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
 
-  .flex.flex-col
-    .basis-80
-      = form_tag( breeze.page_path(@page.id) , {method: :patch  , class: "mx-auto mt-8 mb-0 max-w space-y-4" } ) do
-        %label.block
-          %h4.text-lg.font-bold Name
-          = text_field_tag( :name , @page.name, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-        %button.button.change.mt-4{type: :submit} Update name
+  = form_tag( breeze.page_path(@page.id) , {method: :patch  , class: "mx-auto mt-8 mb-0 max-w space-y-4" } ) do
+    %h4.text-lg.font-bold Name
+    = text_field_tag( :name , @page.name, class: "w-full rounded-lg border-gray-200 p-4 text-sm shadow-sm")
+    %button.button.change.mt-4{type: :submit} Update name
 
-      -unless @page.redirects.blank?
-        .mt-4
-          Page redirects from
-          = @page.redirects
+  - @page.option_definitions.each do |option|
+    = form_tag( breeze.page_path(@page.id) , {method: :patch  , class: "mx-auto mt-8 mb-0 max-w space-y-4" } ) do
+      =render "/breeze/sections/option_form_#{option.type}" , section: @page , option: option
+      %button.button.change.mt-4{type: :submit} Update #{option.name.camelcase}
 
-      .relative.block.delete_page.mt-8
-        = form_tag( breeze.page_path(@page.id) , {method: :delete  } ) do
-          %button.button.remove{type: :submit} Delete Page
+  = form_tag( breeze.page_path(@page.id) , {method: :delete  } ) do
+    %button.button.mt-40.ml-10.remove{type: :submit} Delete Page
 
-    .basis-80.grow.options
-      %h3.mt-4.text-lg.font-bold Options
-      = form_tag( breeze.page_path(@page.id) , {method: :patch  , class: "mx-auto mt-8 mb-0 max-w space-y-4" } ) do
-        - @page.option_definitions.each do |option|
-          =render "/breeze/sections/option_form_#{option.type}" , section: @page , option: option
-        -if @page.option_definitions.empty?
-          %p No options
-        -else
-          %button.button.change.mt-4{type: :submit} Update Options
+.grid.grid-cols-5.gap-8.m-20
+  .text.font-bold Section
+  .text.font-bold Actions
+  .text.font-bold Translations
+  .text.font-bold Cards
+  .text.font-bold Updated
+  - @page.sections.each do |section |
+    .span
+      =link_to( breeze.section_path(section.id)) do
+        #{section.index} : #{section.header}
+    .flex
+      = form_tag( breeze.section_new_path(@page.id), method: :post ) do
+        %button.button.change.mr-3{type: :submit} New
+      = link_to breeze.section_path(section.id) do
+        %button.button.action Edit
+      .p-2
+        =link_to(breeze.section_move_path(section.id , dir: :down)) do
+          %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+            %path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+      .p-2
+        =link_to(breeze.section_move_path(section.id , dir: :up)) do
+          %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+            %path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+    .text
+      = link_to breeze.translation_path(@page.id) do
+        %button.button.action
+          =section.missing_translations
+          missing
+    .text
+      =link_to breeze.section_cards_path(section.id) do
+        #{section.cards.length} Cards
+    .text
+      = updated_by(section)
 
 :javascript
   var sections = #{ render( partial: "sections" , formats: :json).html_safe }

data/app/views/breeze/view/_form_section.haml

@@ -5,7 +5,7 @@
       .mt-4.text-lg.pt-10{ prose_classes }
         = markdown(section,current_lang)
   .flex.items-center.justify-start.m-10.md:m-20
-    .mx-auto.w-full.max-w-4xl{class: "max-w-[50%]"}
+    .mx-auto.w-full.max-w-4xl{class: "max-w-[90%]"}
       = form_tag( main_app.post_form_path , {class: "mt-10" }) do
         - challenge = rand(8)
         = hidden_field_tag :section_id , section.id

data/app/views/breeze/view/_section_faq.haml

@@ -0,0 +1,29 @@
+%section.m-6.md:m-12.lg:m-20{ options(section , :background , :text_color), id: section.type_id}
+  .flex.justify-center
+    .px-4.py-4.md:py-10.lg:py-16{ options(section , :text_align)}
+      %h1.section_header.text-2xl.font-bold.tracking-tight.sm:text-4xl
+        = section.header_text(current_lang)
+      - unless section.text.blank?
+        .section_text.text-lg.pt-10{ prose_classes }
+          = markdown(section , current_lang)
+  - template = "breeze/view/cards/" + section.card_template
+  .max-w-3xl.mx-auto.mt-8.space-y-4.md:mt-16
+    - section.cards.each_with_index do |card, index|
+      = render( template , card: card , index: index + 1)
+
+:javascript
+  // JavaScript to toggle the answers and rotate the arrows
+  document.querySelectorAll('[id^="question"]').forEach(function(button, index) {
+      button.addEventListener('click', function() {
+          var answer = document.getElementById('answer' + (index + 1));
+          var arrow = document.getElementById('arrow' + (index + 1));
+
+          if (answer.style.display === 'none' || answer.style.display === '') {
+              answer.style.display = 'block';
+              arrow.style.transform = 'rotate(0deg)';
+          } else {
+              answer.style.display = 'none';
+              arrow.style.transform = 'rotate(-180deg)';
+          }
+      });
+  });

data/app/views/breeze/view/_section_full_image.haml

@@ -7,4 +7,4 @@
             = section.header_text(current_lang)
           .section_text.sm:mt-4.text-2xl{ prose_classes }
             = markdown(section,current_lang)
-          =view_button(section , "my-2")
+          =view_button(section , "my-4")

data/app/views/breeze/view/_section_full_up.haml

@@ -5,4 +5,4 @@
         = section.header_text(current_lang)
       .section_text.mt-4.text-lg.pt-10{ prose_classes }
         = markdown(section,current_lang)
-      =view_button(section , "my-2")
+      =view_button(section , "my-4")

data/app/views/breeze/view/_section_half_image.haml

@@ -7,4 +7,4 @@
         = section.header_text(current_lang)
       .section_text.mt-8{ prose_classes }
         = markdown(section,current_lang)
-      =view_button(section , "my-2")
+      =view_button(section , "my-4")

data/app/views/breeze/view/_section_half_slider.haml

@@ -0,0 +1,67 @@
+%section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2{id: section.type_id}
+  %div{ order_option(section)}
+    .swiper{ class: "swiper-#{section.id}"}
+      .swiper-wrapper
+        - template = "breeze/view/cards/" + section.card_template
+        - section.cards.each do |card|
+          .swiper-slide{ column_option(section)}
+            = render( template , card: card)
+
+      .swiper-pagination
+      .swiper-button-prev
+      .swiper-button-next
+
+  .p-8.md:p-12.lg:px-16.lg:py-24{ background_option(section)}
+    .mx-auto.max-w-xl{options(section , :text_align , :text_color)}
+      %h2.section_header.text-2xl.font-bold.md:text-4xl
+        = section.header_text(current_lang)
+      .section_text.mt-8{ prose_classes }
+        = markdown(section,current_lang)
+      =view_button(section , "my-4")
+
+%script{:src => "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"}
+
+:javascript
+  var breaks = #{slider_columns_option(section).to_json};
+  document.addEventListener("DOMContentLoaded", function(event) {
+
+    function initSwiper(){
+      const swiper = new Swiper(".swiper-#{section.id}", {
+        loop: true,
+        speed: 1500,
+        breakpoints: breaks ,
+        autoplay: true,
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      });
+    }
+
+    // Intersection Observer to detect when the element is in view
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                initSwiper(); // Initialize Swiper when the element is in view
+                observer.unobserve(entry.target); // Stop observing after initialization
+            }
+        });
+    });
+
+    // Start observing the Swiper container
+    const swiperContainer = document.querySelector(".swiper-#{section.id}");
+    observer.observe(swiperContainer);
+
+  });
+
+  var head = document.getElementsByTagName("head")[0];
+  cssLink = document.createElement("link");
+  cssLink.href = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
+  cssLink.rel="stylesheet";
+  cssLink.id="dynamic-css";
+  cssLink.media="screen";
+  cssLink.type="text/css";
+  head.appendChild(cssLink);

data/app/views/breeze/view/_section_large_image.haml

@@ -7,4 +7,4 @@
         %h2.section_header.text-4xl.font-bold.text-center.mb-4.lg:mb-8= section.header_text(current_lang)
         .section_text.mt-3{ prose_classes }
           = markdown(section,current_lang)
-        =view_button(section , "my-2")
+        =view_button(section , "my-4")

data/app/views/breeze/view/_section_slider.haml

@@ -6,8 +6,8 @@
           = section.header_text(current_lang)
         .section_text.mt-4.text-lg.pt-10{ prose_classes }
           = markdown(section,current_lang)
-        =view_button(section , "my-2")
-  .swiper
+        =view_button(section , "my-4")
+  .swiper{ class: "swiper-#{section.id}"}
     .swiper-wrapper
       - template = "breeze/view/cards/" + section.card_template
       - section.cards.each do |card|
@@ -23,19 +23,38 @@
 :javascript
   var breaks = #{slider_columns_option(section).to_json};
   document.addEventListener("DOMContentLoaded", function(event) {
-    const swiper = new Swiper('.swiper', {
-      loop: true,
-      speed: 1500,
-      breakpoints: breaks ,
-      autoplay: true,
-      pagination: {
-        el: '.swiper-pagination',
-      },
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
+
+    function initSwiper(){
+      const swiper = new Swiper(".swiper-#{section.id}", {
+        loop: true,
+        speed: 1500,
+        breakpoints: breaks ,
+        autoplay: true,
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      });
+    }
+
+
+    // Intersection Observer to detect when the element is in view
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                initSwiper(); // Initialize Swiper when the element is in view
+                observer.unobserve(entry.target); // Stop observing after initialization
+            }
+        });
     });
+
+    // Start observing the Swiper container
+    const swiperContainer = document.querySelector(".swiper-#{section.id}");
+    observer.observe(swiperContainer);
+
   });
 
   var head = document.getElementsByTagName("head")[0];

data/app/views/breeze/view/_section_small_image.haml

@@ -5,4 +5,4 @@
     %h2.section_header.text-4xl.font-bold.text-left.mb-4.lg:mb-8{text_align_option(section)}= section.header_text(current_lang)
     .section_text.mt-3{ prose_classes }
       = markdown(section,current_lang)
-    =view_button(section , "my-2")
+    =view_button(section , "my-4")

data/app/views/breeze/view/cards/_card_normal_round.haml

@@ -3,6 +3,6 @@
   %h3.card_header.p-5.text-2xl.bg-gray-100.text-black.font-bold{ text_align_option(card)}= card.header_text(current_lang)
   %div.h-full{background_option(card)}
     .p-5{options(card , :text_align , :text_color)}
-      .card_text.m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+      .card_text.m-2.text-sm.leading-relaxed{ prose_classes }
         = markdown(card,current_lang)
       =view_button(card , "my-2")

data/app/views/breeze/view/cards/_faq_item.haml

@@ -0,0 +1,9 @@
+.transition-all.duration-200.bg-white.border.border-gray-200.shadow-lg.cursor-pointer.hover:bg-gray-50{options(card, :text_color)}
+  %button.flex.items-center.justify-between.w-full.px-4.py-5.sm:p-6{"data-state" => "closed",
+      :type => "button" , id: "question#{index}" }
+    %span.flex.text-lg.font-semibold.text-black= card.header_text(current_lang)
+    %svg.w-6.h-6.text-gray-400{fill: :none, stroke: :currentColor, id: "arrow#{index}", 
+          :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+      %path{:d => "M19 9l-7 7-7-7", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+  .px-4.pb-5.sm:px-6.sm:pb-6{style: "display:none" , id: "answer#{index}"}
+    %p= markdown(card,current_lang)

data/app/views/breeze/view/page.haml

@@ -1,2 +1,4 @@
+- content_for(:title , @title)
+- content_for(:description , @description)
 - @page.sections.each do |section|
   = render_section( section )

data/config/breeze/card_styles.yml

@@ -1,4 +1,35 @@
 ---
+- :template: card_normal_round
+  :header: Standard card with rounded look
+  :text: Otherwise quite similar to standard. But there is gap under the image.
+        Images can be wide or square, for 2 column 800 wide,
+        3 column 600 , 4 column 400
+
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color
+    - text_align
+    - button_link
+    - button_text
+- :template: card_normal_square
+  :header: Standard card with square image
+  :text: Image, header, text, normal stuff. No margin between image and text.
+        Text alignment option. Also option to turn upside down with order.
+        Images can be wide or square, for 2 column 800 wide,
+        3 column 600 , 4 column 400
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color
+    - text_align
+    - order
+    - button_link
+    - button_text
 - :template: card_full_image
   :header: Full background
   :text: Text in box on top of the imag. Adjustable background
@@ -36,22 +67,6 @@
     - text_color
     - order
     - text_align
-- :template: card_normal_square
-  :header: Standard card with square image
-  :text: Image, header, text, normal stuff. No margin between image and text.
-        Text alignment option. Also option to turn upside down with order.
-        Images can be wide or square, for 2 column 800 wide,
-        3 column 600 , 4 column 400
-  :fields:
-    - header
-    - text
-  :options:
-    - background
-    - text_color
-    - text_align
-    - order
-    - button_link
-    - button_text
 - :template: card_wide_square
   :header: Sideway card with square image
   :text: Much like standard square card, just turned sideways.
@@ -98,21 +113,6 @@
     - text_align
     - button_link
     - button_text
-- :template: card_normal_round
-  :header: Standard card with rounded look
-  :text: Otherwise quite similar to standard. But there is gap under the image.
-        Images can be wide or square, for 2 column 800 wide,
-        3 column 600 , 4 column 400
-
-  :fields:
-    - header
-    - text
-  :options:
-    - background
-    - text_color
-    - text_align
-    - button_link
-    - button_text
 - :template: form_field
   :header: A single field in a form
   :text: The header is the Name of the field, the description
@@ -123,3 +123,13 @@
   :options:
     - compulsory
     - form_type
+- :template: faq_item
+  :header: A question answer in an faq section
+  :text: The header is the qustion, the description
+        is the answer. (No image)
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color

data/config/breeze/option_definitions.yml

@@ -88,8 +88,8 @@
   :values: left center right
   :default: center
   :id: 17
-- :name: meta
-  :description: Meta tag for page
+- :name: title
+  :description: Title for page
   :values:
   :default:
   :id: 18
@@ -127,3 +127,15 @@
   :values: h-8 h-16 h-24 h-32 h-40 h-48 h-64 h-96
   :default: h-24
   :id: 24
+- :name: description
+  :description: Meta description for page
+  :values:
+  :default:
+  :id: 25
+- :name: main_image
+  :description: Image that should be shown in posts (fb)
+      Should be the number of a breeze picture,
+      ie what is in the url eg 381 for /breeze/images/381  
+  :values:
+  :default:
+  :id: 26

data/config/breeze/page_styles.yml

@@ -1,9 +1,12 @@
 ---
 - :type: page
   :description: A general page, may contain anykind of section.
-        No restrictions of any kind. No options either.
+        No restrictions of any kind. Title goes to the page title and
+        description to meta.
   :options:
-    - meta
+    - title
+    - description
+    - main_image
 - :type: blog
   :description: An news or similar article.
   :section_template: blog_header

data/config/breeze/section_styles.yml

@@ -30,6 +30,26 @@
     - item_align
     - button_link
     - button_text
+- :template: section_half_slider
+  :header: Half text, half slider with optional header with text
+  :text: Header. text button on the right (constant) slider left.
+      Slider slides any (number) of cards.
+      Columns means how many slides are visible on desktop.
+      Optional header text on top of the slider (like the section with header/text)
+  :cards: true
+  :fields:
+    - header
+    - text
+  :options:
+    - slider_columns
+    - order
+    - background
+    - text_color
+    - margin
+    - text_align
+    - item_align
+    - button_link
+    - button_text
 - :template: section_feature
   :header: Feature section with 2 column,
   :text: A split header with two column layout on the right.
@@ -193,3 +213,33 @@
     - text_columns
     - background
     - text_color
+- :template: section_faq
+  :header: Faq section with Cards as questions
+  :text: A header with text and collapsable faq layout.
+        Only works proper with faq_item card style
+  :cards: true
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color
+    - text_align
+- :template: section_slider
+  :header: Slider with optional header with text
+  :text: Slider slides any (number) of cards. Columns means how many
+    slides are visible on desktop.
+    Optional header text on top of the slider (like the section with header/text)
+  :cards: true
+  :fields:
+    - header
+    - text
+  :options:
+    - slider_columns
+    - background
+    - text_color
+    - margin
+    - text_align
+    - item_align
+    - button_link
+    - button_text