stay in application layout. include submenu in all pages

app/assets/stylesheets/merged/merged.css

@@ -943,6 +943,14 @@ select {
   flex: 1 1 0%;
 }
 
+.grow-0 {
+  flex-grow: 0;
+}
+
+.basis-52 {
+  flex-basis: 13rem;
+}
+
 .origin-\[0\] {
   transform-origin: 0;
 }
@@ -984,10 +992,6 @@ select {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1032,6 +1036,10 @@ select {
   gap: 0.5rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -1044,6 +1052,10 @@ select {
   gap: 0.25rem;
 }
 
+.gap-10 {
+  gap: 2.5rem;
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));

app/controllers/merged/application_controller.rb

@@ -1,4 +1,4 @@
 module Merged
-  class ApplicationController < ActionController::Base
+  class ApplicationController < ApplicationController
   end
 end

app/controllers/merged/merged_controller.rb

@@ -1,6 +1,6 @@
 module Merged
   class MergedController < ApplicationController
-    layout 'merged_layout'
+#    layout 'merged_layout'
 
   end
 end

app/views/layouts/_merged_header.haml

@@ -0,0 +1,19 @@
+.flex.h-16.items-center.gap-16
+  %a.ml-20{:href => "/merged/pages"}
+    %span.sr-only Home
+    =image_tag("merged/merged_logo" , class: "h-10")
+
+  %ul.flex.items-center.gap-6.text-lg
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => pages_path}
+        Pages
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => images_path}
+        Images
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => styles_index_path}
+        Styles
+    %li
+      %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => changes_index_path}
+        Changes
+  = yield :merged_menu

app/views/layouts/merged_layout.haml

@@ -9,47 +9,6 @@
     = stylesheet_link_tag "merged/merged"
     = javascript_importmap_tags
   %body
-    %header.bg-white{"aria-label" => "Site Header"}
+    = render "layouts/merged_header"
-      .mx-auto.max-w-screen-xl.px-4.sm:px-6.lg:px-8
-        .flex.h-16.items-center.justify-between
-          .flex-1.md:flex.md:items-center.md:gap-12
-            %a.block.text-teal-600{:href => "/"}
-              %span.sr-only Home
-              %svg.h-10{:space => "preserve", :style => "fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2", :viewbox => "0 0 64 64", :xmlns => "http://www.w3.org/2000/svg"}
-                %path{:d => "M55.579 31.579a2 2 0 0 1 .208 2.583l-1.284 1.781a1.996 1.996 0 0 1-3.036.245A462554.14 462554.14 0 0 1 32 16.722L12.533 36.188a1.996 1.996 0 0 1-3.036-.245l-1.284-1.781a2 2 0 0 1 .208-2.583L32 8l23.579 23.579z", :style => "fill:none;stroke:#222a33;stroke-width:2px"}
-                %path{:d => "M13.977 34.745 32 16.722l18.023 18.023v20.002a2.25 2.25 0 0 1-.66 1.593 2.25 2.25 0 0 1-1.593.66H16.23a2.25 2.25 0 0 1-1.593-.66 2.25 2.25 0 0 1-.66-1.593V34.745zM20.736 19.264l-7.885 7.885V15.322h7.885v3.942z", :style => "fill:none;stroke:#222a33;stroke-width:2px"}
-                %path{:d => "M37 44.5a1.503 1.503 0 0 0-1.5-1.5h-7a1.503 1.503 0 0 0-1.5 1.5V57h10V44.5z", :style => "fill:none;stroke:#222a33;stroke-width:2px"}
-          .flex-1.md:flex.md:items-center.md:gap-12
-            %a.block.text-teal-600{:href => "/merged/pages"}
-              %span.sr-only Home
-              =image_tag("merged/merged_logo" , class: "h-10")
-
-          .md:flex.md:items-center.md:gap-12
-            %nav.hidden.md:block{"aria-label" => "Site Nav"}
-              %ul.flex.items-center.gap-6.text-sm
-                %li
-                  %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => pages_path}
-                    Pages
-                %li
-                  %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => images_path}
-                    Images
-                %li
-                  %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => styles_index_path}
-                    Styles
-                %li
-                  %a.text-gray-500.transition{:class => "hover:text-gray-500/75", :href => changes_index_path}
-                    Changes
-            .flex.items-center.gap-4
-              .sm:flex.sm:gap-4
-                %a.rounded-md.bg-teal-600.px-5.text-sm.font-medium.text-white.shadow{:class => "py-2.5", :href => "/"}
-                  Login
-                .hidden.sm:flex
-                  %a.rounded-md.bg-gray-100.px-5.text-sm.font-medium.text-teal-600{:class => "py-2.5", :href => "/"}
-                    Register
-              .block.md:hidden
-                %button.rounded.bg-gray-100.p-2.text-gray-600.transition{:class => "hover:text-gray-600/75"}
-                  %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

app/views/merged/cards/index.haml

@@ -1,16 +1,14 @@
-- template = find_template(@section)
+- content_for( :merged_menu ) do
-= render( template , section: @section)
+  .text-xl.font-bold.text-gray-900
-
-.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.id), class: "underline"}
-  .flex.items-center.justify-center.flex-1
+  .text-xl.text-gray-900
-    %h3.text-xl.font-bold.tracking-tight.text-gray-900
       Cards for
       = link_to "Section #{@section.index}", section_url( @section.id) , class: "underline"
 
+= render "layouts/merged_header"
+
+- template = find_template(@section)
+= render( template , section: @section)
 
 .grid.grid-cols-4.gap-2.m-8
   - @section.cards.each_with_index do |card , index|

app/views/merged/cards/select_image.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .grid.grid-cols-6.gap-2.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Add new image or select (click)

app/views/merged/changes/index.haml

@@ -1,12 +1,12 @@
-.flex.flex-col.bg-white
+- content_for( :merged_menu ) do
-  .flex.items-center.justify-center.flex-1
+  .text-xl.font-bold.text-gray-900
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
     Changes
-      %p.mt-4.text-gray-500
+  .text-xl.text-gray-900
     Branch
     = @git.current_branch
 
+= render "layouts/merged_header"
+
 .grid.grid-cols-4.gap-2.m-8
   .relative.block.border.border-gray-100
     Changed Files

app/views/merged/images/index.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .grid.grid-cols-6.gap-4.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Add new image

app/views/merged/pages/index.haml

@@ -1,3 +1,4 @@
+= render "layouts/merged_header"
 .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

app/views/merged/sections/index.html.haml

@@ -1,16 +1,15 @@
-.flex.flex-col.bg-white
+- content_for( :merged_menu ) do
-  .flex.items-center.justify-center.flex-1
+  .text-xl.font-bold.text-gray-900
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
     Page
     = @page.name
-  .flex.items-center.justify-center.flex-1
+  .text-xl.text-gray-900
-    %h3.text-xl.font-bold.tracking-tight.text-gray-900
     =link_to "View live" , "/#{@page.name}" , target: @page.name
 
+= render "layouts/merged_header"
+
 -@page.sections.each do |section |
-  .grid.grid-cols-5.gap-2.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
+  .flex.gap-10.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
-    .relative.block.border.border-gray-100.p-4
+    .basis-52
       %h3.mt-4.text-lg.font-bold Section #{section.index} : #{section.header}
       = blue_button( "Up" , section_move_url(section.id , dir: :up) )
       = blue_button( "Down" , section_move_url(section.id , dir: :down) )
@@ -18,21 +17,21 @@
       = green_button( "Copy" , new_page_section_url(@page.id, template: section.template) )
       = form_tag( section_url(section.id) , {method: :delete  } ) do
         =submit_button( "Delete" , true)
-    .relative.block.border.border-gray-100.p-4
+    .basis-52.grow-0
       %h3.mt-4.text-lg.font-bold Template
       = link_to(section_select_template_url(section.id)) do
         %p= section.template
-        = section_preview(section , class: "w-full object-contain")
+        = section_preview(section , class: "object-contain")
-    .relative.block.border.border-gray-100.p-4
+    .basis-52
       %h3.mt-4.text-lg.font-bold Header
       %p= section.header
       %h3.mt-4.text-lg.font-bold Text
       %p= section.text[0..100] + " ..." if section.text
-    .relative.block.border.border-gray-100.p-4
+    .basis-52
       - if section.has_cards?
         %h3.mt-4.text-lg.font-bold #{section.cards.length} Cards
         =link_to section_cards_url(section.id) do
-          =card_preview(section , class: "w-full object-contain")
+          =card_preview(section , class: "object-contain")
       - else
         = link_to(section_select_image_url(section.id)) do
           %h3.mt-4.text-lg.font-bold Image
@@ -40,7 +39,7 @@
             = image_tag( "cms/" + section.image , class: "h-40")
           -else
             %p No image
-    .relative.block.border.border-gray-100.p-4
+    .basis-52
       %h3.mt-4.text-lg.font-bold Options
       - section.options.each do|name , value|
         %p

app/views/merged/sections/new.html.haml

@@ -1,3 +1,12 @@
+- content_for( :merged_menu ) do
+  .text-xl.font-bold.text-gray-900
+    Changes
+  .text-xl.text-gray-900
+    Branch
+    = @git.current_branch
+
+= render "layouts/merged_header"
+
 %h1 New merged_section
 
 = render 'form'

app/views/merged/sections/select_card_template.haml

@@ -1,3 +1,8 @@
+- content_for( :merged_menu ) do
+  .text-xl.text-gray-900
+    Select Card Template for Section #{section.index}
+
+= render "layouts/merged_header"
 .grid.grid-cols-4.gap-2.m-8
   - @cards.each do |style|
     .relative.block.border.border-gray-100

app/views/merged/sections/select_image.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .grid.grid-cols-6.gap-2.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Add new image or select (click)

app/views/merged/sections/select_template.haml

@@ -1,13 +1,11 @@
-.flex.flex-col.bg-white
+- content_for( :merged_menu ) do
-  .flex.items-center.justify-center.flex-1
+  .text-xl.font-bold.text-gray-900
-    .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.id), class: "underline"}
-  .flex.items-center.justify-center.flex-1
+  .text-xl.text-gray-900
-    .max-w-xl.px-4.py-8.mx-auto.text-center
-      %h1.text-3xl.font-bold.tracking-tight.text-gray-900
     Select Template for Section #{@section.index}
 
+= render "layouts/merged_header"
+
 .grid.grid-cols-4.gap-2.m-8
   - @sections.each do |style|
     .relative.block.border.border-gray-100

app/views/merged/sections/show.html.haml

@@ -1,18 +1,18 @@
-- template = find_template(@section)
+- content_for( :merged_menu ) do
-= render( template , section: @section)
+  .text-xl.font-bold.text-gray-900
-
-.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.id), class: "underline"}
-  .flex.items-center.justify-center.flex-1
+  .text-xl.text-gray-900
-    %h3.text-xl.font-bold.tracking-tight.text-gray-900
     Section #{@section.index} / #{@section.page.sections.length}
     - if @section.previous_section
       =link_to "(prev)" , section_url(@section.previous_section.id)
     - if @section.next_section
       =link_to "(next)" , section_url(@section.next_section.id)
+
+= render "layouts/merged_header"
+
+- template = find_template(@section)
+= render( template , section: @section)
+
 .grid.grid-cols-3.gap-2.m-8
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Template  #{@section.template}

app/views/merged/styles/index.haml

@@ -1,3 +1,5 @@
+= render "layouts/merged_header"
+
 .px-4.py-8.mx-auto.text-center
   %h1.text-4xl.font-bold
     Section styles

spec/features/merged/images_spec.rb

@@ -4,7 +4,7 @@ RSpec.feature "Images", type: :feature do
   describe "GET /images" do
     it "returns http success" do
       visit "/merged/images"
-      expect(page).to have_title("Merged")
+      expect(page).to have_title("Dummy")
       expect(page).to have_text("Pages")
     end
   end

spec/features/merged/page_spec.rb

@@ -4,7 +4,7 @@ RSpec.feature "Pages", type: :feature do
   describe "GET /pages" do
     it "returns http success" do
       visit "/merged/pages"
-      expect(page).to have_title("Merged")
+      expect(page).to have_title("Dummy")
       expect(page).to have_text("Pages")
     end
   end

spec/features/merged/style_spec.rb

@@ -4,8 +4,8 @@ RSpec.feature "Styles", type: :feature do
   describe "GET /styles" do
     it "returns http success" do
       visit "/merged/styles/index"
-      expect(page).to have_title("Merged")
+      expect(page).to have_title("Dummy")
-      expect(page).to have_text("Pages")
+      expect(page).to have_text("Styles")
     end
   end
 end