breeze_cms 0.9.5

data/app/views/breeze/cards/index.haml

@@ -0,0 +1,84 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  = render "breeze/sections/sections_pagination" , section: @section
+  .text-3xl.font-bold.text-gray-900
+    = @section.cards.length
+    Cards
+  = form_tag( breeze.card_new_path(@section.id) , method: :post ) do
+    %button.button.change.mr-3{type: :submit} New Card
+  .font-bold.text-xl Style
+  .text-xl #{@section.card_template}
+  = form_tag( breeze.section_select_card_template_path(@section.id), method: :post ) do
+    %button.button.action.mr-3{type: :submit} Change Card Style
+
+.xl:mx-auto{class: "max-w-[1920px]"}
+  = render_section( @section )
+
+- @section.cards.each_with_index do |card , index|
+  .flex.gap-10.px-20.pt-4.pb-2.mb-2.border.border-2.bg-neutral-50.border-slate-400{ id: "card_#{card.id}"}
+    .basis-60
+      %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
+      .flex.flex-wrap
+        .p-2
+          =link_to(breeze.card_move_path(card.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.card_move_path(card.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"}
+
+      .mt-6
+        .basis-full.mt-3
+          Updated at:
+          = distance_of_time_in_words_to_now(card.updated_at)
+        .basis-full.mb-3
+          Updated by:
+          = updated_by(card)
+        .basis-full.mb-3
+          = form_for( card , {method: :delete  } ) do
+            %button.button.remove.mt-4{type: :submit} Delete Card
+      .flex.justify-between.mt-4
+        = simple_form_for(  card ,  method: :patch ) do |f|
+          = f.input :section_id , label: "move to section (on this page)" ,
+                    include_blank: false ,
+                    collection: card_section_select(card)
+          %button.button.change{type: :submit} Move
+
+    .basis-80
+      -if card.image
+        = link_to(breeze.images_path(card_id: card.id)) do
+          %h3.mt-4.text-lg.font-bold Image #{card.image.name}
+          .flex.align-center.justify-between.mb-4
+            .text-lg.font-bold.mt-2.mx-2
+              = card.image.size.to_s + "k"
+            %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
+              = card.image.aspect_ratio
+          = image_for( card , "mb-4")
+        .flex.gap-3
+          = link_to breeze.images_path(card_id: card.id) do
+            %button.button.action Change Image
+          = link_to breeze.image_path(card.image.id)  do
+            %button.button.change Edit Image
+          = link_to breeze.card_set_image_path( card.id  , image: "") do
+            %button.button.remove Remove image
+      -else
+        %h3.mt-4.text-lg.font-bold No image
+        = link_to(breeze.images_path(card_id: card.id)) do
+          %button.button.my-3.change Add Image
+    .basis-72.grow
+      %label.block
+        %h4.text-lg.font-bold Texts
+      = simple_form_for( card , method: :patch) do |f|
+        = f.input :header
+        = f.input :text , as: :text , input_html: {rows: rows(card)}
+        %button.button.change.mt-4{type: :submit} Update Texts
+
+    .basis-72.grow
+      = form_for( card , {method: :patch }) do
+        - card.option_definitions.each do |option|
+          .grid.grid-cols-3
+            =render "breeze/sections/option_form_#{option.type}" , section: card , option: option
+        -if card.option_definitions.empty?
+          %p No options
+        -else
+          %button.button.change.mt-3{type: :submit} Update Options

data/app/views/breeze/changes/index.haml

@@ -0,0 +1,52 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold.text-gray-900
+    Changes
+  .text-xl.text-gray-900
+    Branch
+    = branch
+-if flash.notice
+  .m-20.rounded-xl.border.border-gray-100.p-4.shadow-xl
+    .flex-1
+      %strong.block.font-medium.text-gray-900 Ok
+      %p.mt-1.text-sm.text-gray-700
+        = markdown flash.notice
+
+.overflow-hidden.overflow-x-auto.rounded-lg.border.border-gray-200.m-20
+  %table.min-w-full.divide-y.divide-gray-200.text-sm
+    %thead.bg-gray-100
+      %tr
+        %th.whitespace-nowrap.px-4.py-2.text-left.font-medium.text-gray-900
+          .flex.items-center.gap-2
+            Change
+        -[:Page , :Section , :Card , :Image].each do |element|
+          %th.whitespace-nowrap.px-4.py-2.text-left.font-medium.text-gray-900
+            .flex.items-center.gap-2
+              =element
+    %tbody.divide-y.divide-gray-200
+      -[:add , :edit , :delete].each do |type|
+        %tr
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            = type.to_s.capitalize
+          -[:Page , :Section , :Card , :Image].each do |element|
+            %td.px-4.py-2.text-gray-700
+              - changeset(type , element).each do |name|
+                =name.last
+                %br
+
+.grid.grid-cols-3.bg-white
+  .items-center.justify-center.col-span-2
+    .max-w-xl.px-4.py-8.mx-auto.text-center.commit_changes
+      = form_tag( breeze.changes_commit_path() , {method: :post  } ) do
+        %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
+          Commit changes
+        %p.mt-4.text-gray-500
+          %label.block
+            %h4.text-lg.font-bold Message (short summary of changes)
+            = text_field_tag( :message , "", class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+        %button.button.change.mt-3{type: :submit} Commit Changes
+
+  .max-w-xl.px-4.py-8.mx-auto.text-center.reset_changes
+    = form_tag( breeze.changes_reset_path() , {method: :post  } ) do
+      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
+        Reset changes
+      %button.button.remove.mt-2{type: :submit} Reset

data/app/views/breeze/form/_editor.haml

@@ -0,0 +1,33 @@
+.editor.mt-4
+  You can use
+  =link_to "markdown" , "https://www.markdown-cheatsheet.com/" , class: :underline, target: :blank
+  for styling, use Preview tab to view rendered output. Remember to save!
+  -if object.errors and object.errors[field] and ! object.errors[field].blank?
+    .text-red-700= "#{field.to_s.capitalize} #{object.errors[field].join( ' ')}"
+  %ul.flex.text-center.mt-4.font-bold
+    %li.p-2.flex-1.border-t.border-l.border-r.rounded-lg.border-gray-200{"v-bind:class" => "{'bg-gray-50 border-b font-normal': tab == 2}"}
+      %a.text-sm{"@click" => "tab = 1"}
+        Write text
+    %li.p-2.flex-1.border-t.border-l.border-r.rounded-lg.border-gray-200{"v-bind:class" => "{'bg-gray-50 border-b font-normal': tab == 1}"}
+      %a.p-4.text-sm{"@click" => "tab = 2"}
+        Preview
+
+  .my-3{"v-bind:class" => "{hidden: tab == 2}"}
+    %textarea.w-full{ rows: rows(object.send(field)) ,
+              name: "#{object.class.name.downcase}[#{field}]",
+              id: "#{object.class.name.downcase}_#{field}" ,
+               "v-model": "markdown" }
+
+  .my-3.prose{"v-html" => "compiledMarkdown" , "v-bind:class" => "{hidden: tab == 1}"}
+
+:ruby2js
+  class MarkdownEditor < Vue
+    options el: '.editor'
+    def initialize
+      @tab = 1
+      @markdown = "#{CGI::escapeHTML(sanitize object.send(field).to_s)}"
+    end
+    def compiledMarkdown
+      marked.parse(@markdown)
+    end
+  end

data/app/views/breeze/form/form.haml

@@ -0,0 +1,8 @@
+.flex.flex-col.m-20
+  .flex.items-center.justify-center.flex-1
+  - @errors.each do |name , message|
+    .m-5.rounded.border-l-4.border-green-500.bg-red-50.p-4
+      %strong.font-medium.text-red-700= name.capitalize
+      .mt-2.text-sm.text-red-700= message
+
+= render_section @section

data/app/views/breeze/images/_editor.haml

@@ -0,0 +1,144 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+
+%section.image
+  .flex.justify-between.mx-20
+    .flex.justify-between
+      %div.justify-self-start.ml-20.mr-10
+        %b Scale {{scaled_x}} x {{scaled_y}}
+        %br/
+        %input{":min": 20 , ":max": 100 , ":step": 0.1 , :type => "range",
+                "v-bind:value": "scale" , "v-on:input" => "handle_scale($event)"}/
+
+      = form_tag( breeze.image_scale_path(image_id: image.id) ) do
+        %input{ hidden: true ,  id: :scale_id , name: :scale , "v-bind:value": "scale" }
+        %button.my-3.button.change Scale  {{scale}} %
+
+    %div.mt-2
+      %b.pr-2 Ratio
+      %br/
+      %em    {{ratio}} : 1
+
+    = form_tag( breeze.image_crop_path(image_id: image.id) ) do
+      %input{ hidden: true ,  id: :width_id , name: :size_x , "v-bind:value": "size_x" }
+      %input{ hidden: true ,  id: :height_id , name: :size_y , "v-bind:value": "size_y" }
+      %input{ hidden: true ,  id: :off_x_id , name: :off_x , "v-bind:value": "off_x" }
+      %input{ hidden: true ,  id: :off_y_id , name: :off_y , "v-bind:value": "off_y" }
+      %button.my-3.button.change Crop
+
+    %div.mt-2.ml-32
+      %b.pr-2 Fix ratio to
+      %select{ "@change": "set_ratio"}
+        %option{value: "0" } Any Ratio
+        %option{value: "#{@image.ratio}" }  Initial #{@image.ratio.round(2)} : 1
+        %option{"v-bind:value": "ratio" }  Current {{ratio}} : 1
+        -[[4,1],[3,1],[21,9] ,[2,1] ,[16,9] ,[3,2] ,[4,3] ,[1,1] ,[3,4], [2,3],[1,2] ].each do |a|
+          %option{value: "#{a.first/a.last.to_f}" }  #{a.first} : #{a.last}
+
+  .flex.justify-between.mb-5
+    %div.ml-20
+      %b Y Offset {{off_y}}
+      %br/
+      %input.horizontal{":min": 0 , ":max": "#{image.height}", ":step": 1 , :type => "range",
+              "v-bind:value": "off_y" , "v-on:input" => "handle_off_y($event)"}
+    %div
+      %b X Offset {{off_x}}
+      %br/
+      %input{":min": 0 , ":max": "#{image.width}", ":step": 1 , :type => "range",
+              "v-bind:value": "off_x" , "v-on:input" => "handle_off_x($event)"}
+    %div
+      %b X Size {{size_x.toFixed(0)}}
+      %br/
+      %input{":min": 0 , ":max": "#{image.width}", ":step": 1 , :type => "range",
+              "v-bind:value": "size_x" , "v-on:input" => "handle_size_x($event)"}
+    %div.mr-20
+      %b Y Size {{size_y.toFixed(0)}}
+      %br
+      %input.horizontal{":min": 0 , ":max": "#{image.height}", ":step": 1 , :type => "range",
+              "v-bind:value": "size_y" , "v-on:input" => "handle_size_y($event)"}
+
+  .flex.justify-center
+    .image-container.overflow-hidden.relative{ "v-bind:style": "{height: scaled_y + 'px' , width: scaled_x + 'px'} " }
+      = image_tag(image.asset_name , class: "")
+      .absolute.bg-transparent.border-4.border-black{ "v-bind:style": "{height: size_y + 'px' , width: size_x + 'px' , top: off_y + 'px', left: off_x + 'px' }" }
+
+:ruby2js
+  class Images < Vue
+    options el: '.image'
+    def initialize
+      @image_data = #{@image_data.to_json.html_safe}
+      @off_x = 0
+      @off_y = 0
+      @scale = 100
+      @size_x = @image_data[:width]
+      @size_y = @image_data[:height]
+      @fixed_ratio = 0
+    end
+    def set_ratio(event)
+      @fixed_ratio = event.target.value.to_f
+      return if( @fixed_ratio < 0.1)
+      if( @fixed_ratio > ratio )
+        fix_y(@size_x)
+      else
+        fix_x(@size_y)
+      end
+    end
+    def fix_x(new_y)
+      new_x = (new_y * @fixed_ratio)
+      return false if( @off_x + new_x > @image_data[:width])
+      @size_x = new_x
+      return true
+    end
+    def fix_y(new_x)
+      new_y = (new_x / @fixed_ratio)
+      return false if( @off_y + new_y > @image_data[:height])
+      @size_y = new_y
+      return true
+    end
+
+    def set_size_x( new_x )
+      return if(  @off_x + new_x > @image_data[:width])
+      if (@fixed_ratio >= 0.1 )
+        return unless fix_y(new_x)
+      end
+      @size_x = new_x
+    end
+
+    def set_size_y(new_y)
+      return if(  @off_y + new_y > @image_data[:height])
+      if (@fixed_ratio >= 0.1 )
+        return unless fix_x(new_y)
+      end
+      @size_y = new_y
+    end
+
+    def handle_size_x(event)
+      set_size_x(event.target.value.to_f)
+    end
+    def handle_size_y(event)
+      set_size_y( event.target.value.to_f )
+    end
+    def handle_off_y(event)
+      new_off = event.target.value.to_f
+      if(  new_off + @size_y <= @image_data[:height])
+        @off_y = new_off
+      end
+    end
+    def handle_off_x(event)
+      new_off = event.target.value.to_f
+      if( new_off + @size_x <= @image_data[:width])
+        @off_x = new_off
+      end
+    end
+    def handle_scale(event)
+      @scale = event.target.value.to_f
+    end
+    def ratio
+      ((@size_x / @size_y)*100).to_i / 100
+    end
+    def scaled_x
+      (@image_data[:width] * @scale / 100).to_i
+    end
+    def scaled_y
+      (@image_data[:height] * @scale / 100).to_i
+    end
+  end

data/app/views/breeze/images/index.haml

@@ -0,0 +1,83 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16.justify-between
+  .flex.gap-20
+    .text-xl.font-bold.text-gray-900
+      = text_for_index
+
+    = link_to(breeze.new_image_path(new_link_params) ) do
+      .button.action New Image
+  = link_to(breeze.images_path(unused: true) ) do
+    .button.action Show unused Images
+
+.images
+  .flex.justify-center.gap-4
+
+    %label.block
+      .mt-1.text-lg.font-bold Search:
+    %input.border.rounded{:category => "query", placeholder:"by name", "v-model" => "search_name" }
+    %input.border.rounded{:category => "query", placeholder:"by tag", "v-model" => "search_tag" }
+
+    - ["name" , "created" , "size" , "ratio"].each do |ruby_sort_key|
+      .rounded{":class" => "{'border': sort_by == '#{ruby_sort_key}'}"}
+        .mx-4.text-lg.font-bold= ruby_sort_key.capitalize
+      %a{ "@click" => "sort_by = '#{ruby_sort_key}';sort_dir = 1" , href: "#" ,
+          ":class" => "{'bg-cyan-100': sort_dir == 1 && sort_by == '#{ruby_sort_key}'}"}
+        %svg.w-6.h-6.mt-1{: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"}
+      %a{ "@click" => "sort_by = '#{ruby_sort_key}';sort_dir = -1" , href: "#" ,
+          ":class" => "{'bg-cyan-100': sort_dir == -1 && sort_by == '#{ruby_sort_key}'}"}
+        %svg.w-6.h-6.mt-1{: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"}
+
+  .grid.grid-cols-2.lg:grid-cols-4.xl:grid-cols-6.gap-4.m-8
+    .flex.flex-col.border.border-gray-100.rounded.image_box{"v-for": "image in filter_and_sort"}
+      .flex.align-center.justify-between.mb-4
+        .text-lg.font-bold.mt-2.mx-2
+          {{image.name}}
+        %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
+          {{image.aspect_ratio}}
+      %a.w-full.object-contain.h-72{":href" => "image.link" }
+        %img{ ":src": "image.url" , ":alt": "image.name" }
+      .flex.justify-between.mb-8
+        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
+          {{image.size}}k
+        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
+          {{image.updated_at}}
+        %strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium
+          {{image.tags}}
+
+.hidden.list
+  -@images.each do |image|
+    = image_tag(image.asset_name , alt: image.name )
+
+:ruby2js
+  class Images < Vue
+    options el: '.images'
+    def initialize
+      @image_data = #{@image_data.to_json.html_safe}
+      @search_name = ""
+      @search_tag = ""
+      @sort_by = "created"
+      @sort_dir = -1 # 1 up
+    end
+    def filter_and_sort
+      dat = @image_data
+      if(@search_name.length > 0)
+        dat = dat.filter do |item|
+          return item["name"].toLowerCase().indexOf(@search_name) > -1
+        end
+      end
+      if(@search_tag.length > 0)
+        dat = dat.filter do |item|
+          return (item.tags.toLowerCase().indexOf(@search_tag) > -1)
+        end
+      end
+      dat = dat.slice().sort do |a, b| #a, b image data hashes
+        aa = a[@sort_by]
+        bb = b[@sort_by]
+        return (aa === bb ? 0 : (aa > bb ? 1 : -1) ) * @sort_dir
+      end
+      dat
+    end
+  end

data/app/views/breeze/images/new.haml

@@ -0,0 +1,12 @@
+.grid.grid-cols-3.gap-4.m-8{":class" => "{'hidden': !show_new }"}
+  %div
+  = form_tag(breeze.images_path, multipart: true) do
+    .flex.flex-col.border.border-gray-100.rounded.p-4
+      %h3.my-4.text-xl.font-bold= text_for_new
+      = text_field_tag 'filename' ,nil, placeholder: "Optional name", class: "rounded mt-4"
+      %p.my-4 Name will be taken from uploaded file if not given
+      = text_field_tag 'tags' ,nil, placeholder: "Optional tags", class: "rounded mt-4"
+      %p.my-4 Tags describe the size or format
+      = hidden_for_select_image
+      = file_field_tag 'image_file' , class: "mb-8 w-full px-2 text-xl bg-clip-padding border border-solid border-gray-300  rounded"
+      %button.button.change{type: :submit} Submit

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

@@ -0,0 +1,60 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold.text-gray-900
+    Image: #{@image.name}
+
+  = form_tag( breeze.image_copy_path(@image.id)  , method: :post) do
+    %button.mx-40.button.change Copy
+
+.flex.m-20
+  .left.flex.gap-2.mt-3
+    %p
+      .mr-2.font-bold Type
+      = @image.type
+    %p
+      .font-bold Size
+      = "#{@image.size}k"
+    %p
+      .font-bold Ratio
+      = @image.ratio.round(2)
+      = @image.aspect_ratio
+  = form_tag( breeze.image_path , class: "ml-20 flex" , method: :patch) do
+    .font-bold.mt-3.mx-4 Name:
+    = text_field_tag( "name" , @image.name, class: "rounded border-gray-200 text-sm shadow-sm")
+    .font-bold.mt-3.mx-4 Tags:
+    = text_field_tag( "tags" , @image.tags, class: "rounded border-gray-200 text-sm shadow-sm")
+    %button.mx-4.button.change Update
+
+
+
+=render "editor" , image: @image
+.flex.gap-10.m-20
+  -if @used
+    .grid.grid-cols-2.gap-10
+      .grid.grid-cols-3.gap-10
+        %p.col-span-3.font-bold
+          Sections using the image
+        -@sections.each do |section|
+          %p
+            = link_to section.header , breeze.section_path(section)
+          %p
+            %em on Page
+          %p
+            = link_to section.page.name , breeze.page_sections_path(section.page)
+      .grid.grid-cols-3.gap-10
+        %p.col-span-3.font-bold
+          Cards using the image
+        -@cards.each do |card|
+          %p
+            = link_to card.header , breeze.section_cards_path(card.section)
+          %p
+            %em on Page
+          %p
+            = link_to card.section.page.name , breeze.page_sections_path(card.section.page)
+
+  -else
+    %p.align-center Not used, you may delete
+    %p
+      = form_tag( breeze.image_path(@image.id) , {method: :delete  } ) do
+        %button.button.remove{type: :submit} Delete

data/app/views/breeze/pages/_sections.rabl

@@ -0,0 +1,4 @@
+collection @page.sections
+node(false) do |section|
+  partial('breeze/sections/section', :object => section )
+end

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

@@ -0,0 +1,49 @@
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .text-xl.font-bold.text-gray-900
+    = link_to( "All" , breeze.pages_path(type: '') , class: "p-2 px-4 border border-gray-200 font-bold rounded-lg hover:bg-sky-100 #{params[:type].blank? ? 'bg-blue-200':''}")
+  - @page_styles.each do |style|
+    = link_to( "Only #{style.type.capitalize}s" , breeze.pages_path(type: style.type) , class: "p-2 px-4 border border-gray-200 font-bold rounded-lg hover:bg-sky-100 #{(params[:type] == style.type) ? 'bg-blue-200':''}")
+
+.overflow-hidden.overflow-x-auto.rounded-lg.border.border-gray-200.mx-6.md:mx-12.mx-20.my-10
+  %table.min-w-full.divide-y.divide-gray-200.text-sm
+    %thead.bg-gray-100
+      %tr
+        -["Index", "Name","Sections" ,"Translations" ,"Edited by" ,
+          "Updated", "Sections by","Actions"].each do |header|
+          %th.whitespace-nowrap.px-4.py-2.text-left.font-medium.text-gray-900
+            .flex.items-center.gap-2
+              = header
+    %tbody.divide-y.divide-gray-200
+      - @pages.each do |page|
+        %tr{id: page.name}
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            = link_to page.id , breeze.page_path(page.id)
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            = link_to page.name , breeze.page_path(page.id)
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            = page.sections.length
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            = link_to page.missing_translations , breeze.translation_path(page.id)
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            =page.updated_by
+            - s = page.sections_update
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            =distance_of_time_in_words_to_now(s&.updated_at) if s
+          %td.whitespace-nowrap.px-4.py-2.text-gray-700
+            =s.updated_by if s
+          %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', breeze.page_sections_path(page.id)
+            %strong.ml-2.rounded.bg-amber-100.px-3.text-xs.font-medium.text-amber-700{:class => "py-1.5"}
+              = link_to 'Edit', breeze.page_path(page.id)
+            %strong.ml-2.rounded.bg-blue-100.px-3.text-xs.font-medium.text-amber-700{:class => "py-1.5"}
+              =link_to "View live" , "/#{page.name}" , target: page.name
+
+.flex.mx-6.md:mx-12.mx-20.new_page
+  = form_tag( breeze.pages_path , {method: :post  } ) do
+    %label.block
+      %h4.text-lg.font-bold Name
+      = text_field_tag( :name , params[:name], class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
+    .flex.gap-3.mt-3.justify-between
+      - @page_styles.each do |page|
+        %button.button.change{name: :type , value: page.type}= "New #{page.type.capitalize}"

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

@@ -0,0 +1,85 @@
+- @page.sections.each do |section|
+  = render_section( section )
+
+.mx-6.md:mx-12.mx-20.flex.h-16.items-center.gap-16
+  .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)
+
+  = form_tag( breeze.section_new_path(@page.id), method: :post ) do
+    %button.button.change.mr-3{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
+
+      -unless @page.redirects.blank?
+        .mt-4
+          Page redirects from
+          = @page.redirects
+
+      .relative.block.delete_page.mt-8
+        = form_tag( breeze.page_path(@page.id) , {method: :delete  } ) do
+          %button.button.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
+
+:javascript
+  var sections = #{ render( partial: "sections" , formats: :json).html_safe }
+
+= render partial: 'breeze/sections/overlay'

data/app/views/breeze/sections/_option_form_date.haml

@@ -0,0 +1,4 @@
+%label.block
+  .mt-4.text-lg.font-bold
+    = option.name.camelcase
+.col-span-2= select_date section.option(option.name) , :prefix => "options[#{option.name}]"

data/app/views/breeze/sections/_option_form_select.haml

@@ -0,0 +1,4 @@
+%label.block
+  .mt-4.text-lg.font-bold
+    = option.name.camelcase
+.col-span-2= select_tag( "options[#{option.name}]" , options_for_select(option.values, section.option(option.name)), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")

data/app/views/breeze/sections/_option_form_text.haml

@@ -0,0 +1,4 @@
+%label.block
+  .mt-4.text-lg.font-bold
+    = option.name.camelcase
+.col-span-2= text_field_tag( "options[#{option.name}]" , section.option(option.name), class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")