37 lines
1.9 KiB
Plaintext
37 lines
1.9 KiB
Plaintext
<!-- Separate the page into two distinct parts -->
|
|
<div class="reservation-page" data-controller="main-calendar" style="display: block; width: 100%; height: 100vh; overflow: hidden;">
|
|
<!-- Fixed height header -->
|
|
<header style="height: 80px; padding: 15px; background-color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; z-index: 100;">
|
|
<% if notice.present? %>
|
|
<p class="py-2 px-3 bg-green-50 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
|
|
<% end %>
|
|
|
|
<% content_for :title, "Reservations" %>
|
|
|
|
<div class="flex justify-between items-center-calendar">
|
|
<div class="flex items-center space-x-4">
|
|
<h1 class="font-bold text-4xl px-5">Reservations</h1>
|
|
<div class="flex items-center space-x-2 ml-6" data-main-calendar-target="navigation">
|
|
<button data-action="main-calendar#prev" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
« Prev
|
|
</button>
|
|
<button data-action="main-calendar#today" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
Today
|
|
</button>
|
|
<button data-action="main-calendar#next" class="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
Next »
|
|
</button>
|
|
<span data-main-calendar-target="dateDisplay" class="ml-3 font-medium"></span>
|
|
</div>
|
|
</div>
|
|
<%= link_to "New reservation", new_reservation_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium ml-auto" %>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Calendar container - with fixed top position and precise height calculation -->
|
|
<div class="calendar-container" style="height: calc(100vh - 80px); width: 100%; position: relative; top: 0; left: 0;">
|
|
<div style="height: 100%; width: 100%;">
|
|
<%= tag.div nil, data: {reservations: @reservations.to_json}, id: "main-calendar", style: "height: 100%; width: 100%;" %>
|
|
</div>
|
|
</div>
|
|
</div> |