app/views/lookbook/pages/show.html.erb in lookbook-2.0.0.beta.7 vs app/views/lookbook/pages/show.html.erb in lookbook-2.0.0.beta.8
- old
+ new
@@ -1,89 +1,96 @@
<main
class="h-[calc(100vh_-_40px)]"
x-data="{}"
@navigation:complete.window="$refs.scroller.scrollTop = 0">
<div class="h-full bg-lookbook-page-bg relative">
- <% unless @error %>
+ <div class="overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
+ <div class="h-full flex flex-col">
+ <% if @page.header? %>
+ <header id="page-header"
+ class="px-4 md:px-10 mb-8 pt-8 md:pt-10 lg:pt-12 pb-6 lg:pb-8 lg:mb-9 bg-lookbook-page-header-bg border-b border-lookbook-page-header-border relative">
+ <div class="w-full max-w-screen-lg mx-auto">
+ <%= lookbook_render :prose, size: :md, markdown: false, class: "bg-transparent max-w-none flex-none" do %>
+ <h1 class="text-lookbook-page-header-text"><%= @page.title %></h1>
+ <% end %>
+ </div>
+ <% unless @error %>
+ <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
+ <div class="bg-transparent opacity-90 absolute inset-0 w-full h-full z-0"></div>
+ <div class="relative z-10 flex items-center scale-75 -mt-1 -mr-1.5 md:scale-100 md:mt-0 md:-mr-[2px]">
- <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
- <div class="bg-lookbook-page-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
- <div class="relative z-10 flex items-center">
+ <% if @previous_page %>
+ <%= lookbook_render :icon_button,
+ size: :lg,
+ icon: :chevron_left,
+ tooltip: "Previous page",
+ href: lookbook_page_path(@previous_page.lookup_path),
+ class: "pr-0.5 bg-transparent" %>
+ <% else %>
+ <%= lookbook_render :icon_button,
+ size: :lg,
+ icon: :chevron_left,
+ disabled: true,
+ class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+ <% end %>
- <% if @previous_page %>
- <%= lookbook_render :icon_button,
- size: :lg,
- icon: :chevron_left,
- tooltip: "Previous page",
- href: lookbook_page_path(@previous_page.lookup_path),
- class: "pr-0.5 bg-transparent" %>
- <% else %>
- <%= lookbook_render :icon_button,
- size: :lg,
- icon: :chevron_left,
- disabled: true,
- class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
- <% end %>
-
- <% if @next_page %>
- <%= lookbook_render :icon_button,
- size: :lg,
- icon: :chevron_right,
- tooltip: "Next page",
- href: lookbook_page_path(@next_page.lookup_path),
- class: "pl-0.5 bg-transparent" %>
- <% else %>
- <%= lookbook_render :icon_button,
- size: :lg,
- icon: :chevron_right,
- disabled: true,
- class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
- <% end %>
- </div>
- </div>
- <% end %>
-
- <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
- <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
- <% if @page.header? %>
- <header id="page-header" class="mb-7 pb-6 lg:mb-9 lg:pb-8 border-b border-lookbook-divider">
- <%= lookbook_render :prose, size: :md, markdown: false, class: "max-w-none flex-none" do %>
- <h1><%= @page.title %></h1>
+ <% if @next_page %>
+ <%= lookbook_render :icon_button,
+ size: :lg,
+ icon: :chevron_right,
+ tooltip: "Next page",
+ href: lookbook_page_path(@next_page.lookup_path),
+ class: "pl-0.5 bg-transparent" %>
+ <% else %>
+ <%= lookbook_render :icon_button,
+ size: :lg,
+ icon: :chevron_right,
+ disabled: true,
+ class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+ <% end %>
+ </div>
+ </div>
<% end %>
</header>
<% end %>
- <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none min-h-[50vh]" do %>
- <%= @page_content %>
- <% end %>
+ <div class="px-4 md:px-10 min-h-[calc(100vh_-_400px)]">
+ <div class="w-full max-w-screen-lg mx-auto">
+ <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
+ <%= @page_content %>
+ <% end %>
- <% if @page.sections.any? %>
- <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
- <% @page.sections.each do |section| %>
- <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
- <%= page_controller.render_page(section) %>
+ <% if @page.sections.any? %>
+ <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6 lg:mt-8" do |page_tabs| %>
+ <% @page.sections.each do |section| %>
+ <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
+ <%= page_controller.render_page(section) %>
+ <% end %>
+ <% end %>
<% end %>
<% end %>
- <% end %>
- <% end %>
+ </div>
+ </div>
<% if @page.footer? && @pages.many? %>
- <footer id="page-footer" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+ <footer id="page-footer" class="mt-12 lg:mt-16 px-4 md:px-10">
+ <div class=" border-t border-gray-300 w-full max-w-screen-lg mx-auto pt-8 pb-10 flex items-center justify-between ">
<% if @previous_page %>
<a href="<%= lookbook_page_path @previous_page.lookup_path %>"
- class="flex items-center flex-none">
+ class="flex items-center flex-none max-w-[40%] overflow-hidden">
<%= icon :arrow_left, size: 4, class: "hover:text-indigo-800" %>
- <span class="ml-2 underline"><%= @previous_page.title %></span>
+ <span class="ml-2 underline truncate"><%= @previous_page.title %></span>
</a>
<% end %>
<% if @next_page %>
<a href="<%= lookbook_page_path @next_page.lookup_path %>"
- class="flex items-center flex-none ml-auto">
- <span class="mr-2 underline"><%= @next_page.title %></span>
+ class="flex items-center flex-none ml-auto max-w-[40%] overflow-hidden">
+ <span class="mr-2 underline truncate"><%= @next_page.title %></span>
<%= icon :arrow_right, size: 4, class: "hover:text-indigo-800" %>
</a>
<% end %>
+ </div>
</footer>
<% end %>
</div>
</div>
</div>
\ No newline at end of file