171 lines
4.7 KiB
Plaintext
171 lines
4.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Terminator</title>
|
|
<link rel="manifest" crossorigin="use-credentials" href="/manifest.json" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<%= csrf_meta_tags %>
|
|
<%= csp_meta_tag %>
|
|
<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
|
|
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
|
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
|
|
|
|
<%= javascript_importmap_tags %>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
body.calendar {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
body.calendar main {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.w-full, .min-w-full, div[data-controller="main-calendar"] {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#main-calendar {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
.flex.justify-between.items-center {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 1000;
|
|
background: rgba(255,255,255,0.8);
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* ToastUI Calendar Event Styling */
|
|
.toastui-calendar-events {
|
|
margin-right: 8px;
|
|
text-wrap: auto;
|
|
}
|
|
|
|
.toastui-calendar-event-time {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
min-width: 50px !important;
|
|
}
|
|
|
|
.toastui-calendar-event-time:hover {
|
|
z-index: 1000 !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px !important;
|
|
}
|
|
|
|
.toastui-calendar-event-time-content {
|
|
padding: 2px 4px !important;
|
|
text-wrap: auto;
|
|
word-wrap: break-word;
|
|
line-height: 1.1 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toastui-calendar-template-time {
|
|
font-size: 10px !important;
|
|
line-height: 1.1 !important;
|
|
}
|
|
|
|
.toastui-calendar-template-time strong {
|
|
font-size: 10px !important;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.toastui-calendar-template-time span {
|
|
font-size: 9px !important;
|
|
line-height: 1.0 !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
}
|
|
|
|
/* Hover tooltip effect */
|
|
.toastui-calendar-event-time:hover::after {
|
|
content: "Click to edit reservation";
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
z-index: 2000;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
animation: tooltipFadeIn 0.3s ease forwards;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.toastui-calendar-event-time:hover::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: calc(100% - 6px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: 6px solid transparent;
|
|
border-top-color: rgba(0, 0, 0, 0.9);
|
|
z-index: 2000;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
animation: tooltipFadeIn 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes tooltipFadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Improve visibility for small events */
|
|
.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time strong,
|
|
.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time strong {
|
|
display: none; /* Hide time for very small events */
|
|
}
|
|
|
|
.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time span,
|
|
.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time span {
|
|
font-size: 8px !important;
|
|
line-height: 1.0 !important;
|
|
}
|
|
|
|
/* Better text contrast */
|
|
.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] {
|
|
color: white !important;
|
|
}
|
|
|
|
.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] .toastui-calendar-template-time {
|
|
color: white !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="calendar">
|
|
<main>
|
|
<%= yield %>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
want
|