From fe268291949f3a640fe446fae81470dbc8f00e41 Mon Sep 17 00:00:00 2001 From: Torsten Date: Tue, 13 Dec 2022 19:16:11 +0200 Subject: [PATCH] stay in application layout. include submenu in all pages --- app/assets/stylesheets/merged/merged.css | 20 +++++++-- .../merged/application_controller.rb | 2 +- app/controllers/merged/merged_controller.rb | 2 +- app/views/layouts/_merged_header.haml | 19 ++++++++ app/views/layouts/merged_layout.haml | 43 +------------------ app/views/merged/cards/index.haml | 18 ++++---- app/views/merged/cards/select_image.haml | 2 + app/views/merged/changes/index.haml | 16 +++---- app/views/merged/images/index.haml | 2 + app/views/merged/pages/index.haml | 1 + app/views/merged/sections/index.html.haml | 33 +++++++------- app/views/merged/sections/new.html.haml | 9 ++++ .../merged/sections/select_card_template.haml | 5 +++ app/views/merged/sections/select_image.haml | 2 + .../merged/sections/select_template.haml | 16 +++---- app/views/merged/sections/show.html.haml | 24 +++++------ app/views/merged/styles/index.haml | 2 + spec/features/merged/images_spec.rb | 2 +- spec/features/merged/page_spec.rb | 2 +- spec/features/merged/style_spec.rb | 4 +- 20 files changed, 116 insertions(+), 108 deletions(-) create mode 100644 app/views/layouts/_merged_header.haml diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css index 8fe9cbc..72d89f1 100644 --- a/app/assets/stylesheets/merged/merged.css +++ b/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))); diff --git a/app/controllers/merged/application_controller.rb b/app/controllers/merged/application_controller.rb index acd5cac..3169ce6 100644 --- a/app/controllers/merged/application_controller.rb +++ b/app/controllers/merged/application_controller.rb @@ -1,4 +1,4 @@ module Merged - class ApplicationController < ActionController::Base + class ApplicationController < ApplicationController end end diff --git a/app/controllers/merged/merged_controller.rb b/app/controllers/merged/merged_controller.rb index d08a422..af6e0d1 100644 --- a/app/controllers/merged/merged_controller.rb +++ b/app/controllers/merged/merged_controller.rb @@ -1,6 +1,6 @@ module Merged class MergedController < ApplicationController - layout 'merged_layout' +# layout 'merged_layout' end end diff --git a/app/views/layouts/_merged_header.haml b/app/views/layouts/_merged_header.haml new file mode 100644 index 0000000..03a330e --- /dev/null +++ b/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 diff --git a/app/views/layouts/merged_layout.haml b/app/views/layouts/merged_layout.haml index 8850ab0..f71dc9d 100644 --- a/app/views/layouts/merged_layout.haml +++ b/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"} - .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_header" = render "layouts/merged_messages" = yield diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index c16ee2e..64c0838 100644 --- a/app/views/merged/cards/index.haml +++ b/app/views/merged/cards/index.haml @@ -1,16 +1,14 @@ -- template = find_template(@section) -= render( template , section: @section) - -.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 - %h3.text-xl.font-bold.tracking-tight.text-gray-900 +- content_for( :merged_menu ) do + .text-xl.font-bold.text-gray-900 + Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"} + .text-xl.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| diff --git a/app/views/merged/cards/select_image.haml b/app/views/merged/cards/select_image.haml index 9976c9b..b9508b2 100644 --- a/app/views/merged/cards/select_image.haml +++ b/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) diff --git a/app/views/merged/changes/index.haml b/app/views/merged/changes/index.haml index 75fad91..9e21872 100644 --- a/app/views/merged/changes/index.haml +++ b/app/views/merged/changes/index.haml @@ -1,11 +1,11 @@ -.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-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl - Changes - %p.mt-4.text-gray-500 - Branch - = @git.current_branch +- 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" .grid.grid-cols-4.gap-2.m-8 .relative.block.border.border-gray-100 diff --git a/app/views/merged/images/index.haml b/app/views/merged/images/index.haml index cda789d..4ee70f3 100644 --- a/app/views/merged/images/index.haml +++ b/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 diff --git a/app/views/merged/pages/index.haml b/app/views/merged/pages/index.haml index 3dfb8cb..26db2ef 100644 --- a/app/views/merged/pages/index.haml +++ b/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 diff --git a/app/views/merged/sections/index.html.haml b/app/views/merged/sections/index.html.haml index e2cbeea..c36a9c7 100644 --- a/app/views/merged/sections/index.html.haml +++ b/app/views/merged/sections/index.html.haml @@ -1,16 +1,15 @@ -.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-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl - Page - = @page.name - .flex.items-center.justify-center.flex-1 - %h3.text-xl.font-bold.tracking-tight.text-gray-900 - =link_to "View live" , "/#{@page.name}" , target: @page.name +- content_for( :merged_menu ) do + .text-xl.font-bold.text-gray-900 + Page + = @page.name + .text-xl.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}"} - .relative.block.border.border-gray-100.p-4 + .flex.gap-10.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"} + .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") - .relative.block.border.border-gray-100.p-4 + = section_preview(section , class: "object-contain") + .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 diff --git a/app/views/merged/sections/new.html.haml b/app/views/merged/sections/new.html.haml index 92ce9f7..d4c46b2 100644 --- a/app/views/merged/sections/new.html.haml +++ b/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' diff --git a/app/views/merged/sections/select_card_template.haml b/app/views/merged/sections/select_card_template.haml index a8f8f01..f83382f 100644 --- a/app/views/merged/sections/select_card_template.haml +++ b/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 diff --git a/app/views/merged/sections/select_image.haml b/app/views/merged/sections/select_image.haml index 5a92a64..5eb6ada 100644 --- a/app/views/merged/sections/select_image.haml +++ b/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) diff --git a/app/views/merged/sections/select_template.haml b/app/views/merged/sections/select_template.haml index 1d87ab3..533bb23 100644 --- a/app/views/merged/sections/select_template.haml +++ b/app/views/merged/sections/select_template.haml @@ -1,12 +1,10 @@ -.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 - .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} +- content_for( :merged_menu ) do + .text-xl.font-bold.text-gray-900 + Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"} + .text-xl.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| diff --git a/app/views/merged/sections/show.html.haml b/app/views/merged/sections/show.html.haml index c0f6407..264fc10 100644 --- a/app/views/merged/sections/show.html.haml +++ b/app/views/merged/sections/show.html.haml @@ -1,18 +1,18 @@ +- content_for( :merged_menu ) do + .text-xl.font-bold.text-gray-900 + Page #{link_to @section.page.name, page_sections_url(@section.page.id), class: "underline"} + .text-xl.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) -.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 - %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) .grid.grid-cols-3.gap-2.m-8 .relative.block.border.border-gray-100 %h3.mt-4.text-lg.font-bold Template #{@section.template} diff --git a/app/views/merged/styles/index.haml b/app/views/merged/styles/index.haml index bca6181..1ba3528 100644 --- a/app/views/merged/styles/index.haml +++ b/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 diff --git a/spec/features/merged/images_spec.rb b/spec/features/merged/images_spec.rb index 49d47db..8de918d 100644 --- a/spec/features/merged/images_spec.rb +++ b/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 diff --git a/spec/features/merged/page_spec.rb b/spec/features/merged/page_spec.rb index f571767..1aa08a7 100644 --- a/spec/features/merged/page_spec.rb +++ b/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 diff --git a/spec/features/merged/style_spec.rb b/spec/features/merged/style_spec.rb index aeb6166..0a2d517 100644 --- a/spec/features/merged/style_spec.rb +++ b/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_text("Pages") + expect(page).to have_title("Dummy") + expect(page).to have_text("Styles") end end end