12 Added notes and colours to customers

This commit is contained in:
2025-07-23 15:35:19 +02:00
parent 84d43f0dac
commit 541b181c87
17 changed files with 362 additions and 20 deletions

View File

@@ -11,7 +11,6 @@
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<style>
html, body {
@@ -51,6 +50,114 @@
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>
@@ -60,4 +167,4 @@
</main>
</body>
</html>
want
want