Added tooltip box

app/views/customer_appointments/_calendar_event.html.erb

@@ -1,35 +1,69 @@
-<%= tag.div class: [
+<%
-      'calendar-appointment',
+day_hours  = 8.0
-      'tooltip'
+day_height = 120
-    ] do %>
+
+hours  = appointment.estimated_hours.to_f
+height = [(hours / day_hours * day_height).round, 26].max
+%>
+
+<%= tag.div class: ['appointment-block', 'tooltip'],
+            style: "height: #{height}px;" do %>
+
+  <div class="appointment-card">
+
+    <div class="appointment-header">
 
       <% if appointment.user %>
         <%= avatar(
               appointment.user,
               size: 20,
-            class: 'appointment-avatar'
+              class: "appointment-avatar"
             ) %>
       <% end %>
 
-  <span >
+      <div class="appointment-title">
-    <%= link_to appointment.subject,
+        <%= link_to(
-        customer_appointment_path(appointment) %>
+              appointment.subject,
+              customer_appointment_path(appointment),
+              class: "appointment-link"
+            ) %>
+      </div>
+
+    </div>
+
+    <% if appointment.customer %>
+      <div class="appointment-customer">
+        <%= appointment.customer.name %>
+      </div>
+    <% end %>
+
+    <% if appointment.vehicle %>
+      <div class="appointment-vehicle">
+        <%= appointment.vehicle.name %>
+      </div>
+    <% end %>
+
+    <div class="appointment-footer">
+
+      <span class="appointment-hours">
+        <%= number_with_precision(hours, precision: 1) %> hrs
       </span>
 
+      <% if appointment.user %>
+        <span class="appointment-tech">
+          <%= appointment.user.firstname %>
+        </span>
+      <% end %>
+
+    </div>
+
+  </div>
+
   <span class="tip">
-    <strong><%= appointment.subject %></strong><br>
+    <%= render(
-
+          partial: "customer_appointments/tooltip",
-    Customer:
+          locals: { appointment: appointment }
-    <%= appointment.customer&.name %><br>
+        ) %>
-
-    Vehicle:
-    <%= appointment.vehicle&.name %><br>
-
-    Technician:
-    <%= appointment.user&.name %><br>
-
-    Hours:
-    <%= appointment.estimated_hours %>
   </span>
 
 <% end %>

app/views/customer_appointments/_tooltip.html.erb

@@ -0,0 +1,86 @@
+<h3>
+  <%= link_to appointment.subject,
+              customer_appointment_path(appointment) %>
+</h3>
+
+<p class="subtitle">
+  <strong><%= appointment.status %></strong>
+</p>
+
+<table class="attributes">
+
+  <% if appointment.customer %>
+    <tr>
+      <th><%= l(:label_customer) rescue "Customer" %></th>
+      <td><%= link_to appointment.customer %></td>
+    </tr>
+  <% end %>
+
+  <% if appointment.vehicle %>
+    <tr>
+      <th>Vehicle</th>
+      <td><%= link_to appointment.vehicle %></td>
+    </tr>
+  <% end %>
+
+  <% if appointment.user %>
+    <tr>
+      <th>Technician</th>
+      <td>
+        <%= avatar(appointment.user, size: 16) %>
+        <%= appointment.user.name %>
+      </td>
+    </tr>
+  <% end %>
+
+  <% if appointment.project %>
+    <tr>
+      <th><%= l(:label_project) %></th>
+      <td><%= link_to_project appointment.project %></td>
+    </tr>
+  <% end %>
+
+  <% if appointment.estimate %>
+    <tr>
+      <th>Estimate</th>
+      <td>
+        <%= link_to "##{appointment.estimate.id}",
+                    appointment.estimate %>
+      </td>
+    </tr>
+  <% end %>
+
+  <tr>
+    <th>Start</th>
+    <td><%= format_date(appointment.start_date) %></td>
+  </tr>
+
+  <tr>
+    <th>Finish</th>
+    <td><%= format_date(appointment.end_date || appointment.start_date) %></td>
+  </tr>
+
+  <tr>
+    <th>Estimated Time</th>
+    <td><%= number_with_precision(appointment.estimated_hours, precision: 1) %> hrs</td>
+  </tr>
+
+</table>
+
+<% if appointment.description.present? %>
+
+  <hr>
+
+  <div class="description">
+    <%= textilizable(appointment.description) rescue simple_format(h(appointment.description)) %>
+  </div>
+
+<% end %>
+
+<hr>
+
+<p class="buttons">
+  <%= link_to "Open Appointment",
+              customer_appointment_path(appointment),
+              class: "icon icon-edit" %>
+</p>

app/views/customer_appointments/show.html.erb

@@ -9,7 +9,7 @@
 
 <tr>
 <th><%= t(:vehicle) %></th>
-<td><%= link_to@appointment&.vehicle %></td>
+<td><%= link_to @appointment&.vehicle unless @appointment&.vehicle.nil? %></td>
 </tr>
 
 <tr>

assets/stylesheets/customer_appoitments.css

@@ -1,20 +1,164 @@
-.customer-appointment {
+.appointment-block {
-    background: #4caf50;
+    margin:2px;
-    color: white;
+    padding:4px;
+
+    border-left:5px solid #3c78d8;
+    background:#edf4ff;
     border-radius:4px;
-    padding: 2px 4px;
+
-    margin-bottom: 2px;
+    overflow: visible;
+
+    position: relative;
+
+    font-size:11px;
+    transition:.15s;
 }
 
-.customer-appointment a {
+/* Customer appointment tooltip */
-    color: white;
+.appointment-block .tip {
+    width: 420px;
+    max-width: 420px;
+
+    min-height: 250px;
+
+    padding: 12px;
+
+    white-space: normal;
+    overflow: visible;
+
+    z-index: 10000;
+}
+
+.appointment-block .tip table.attributes {
+    width: 100%;
+    table-layout: fixed;
+}
+
+.appointment-block .tip th {
+    width: 120px;
+    white-space: nowrap;
+    vertical-align: top;
+    text-align: left;
+}
+
+.appointment-block .tip td {
+    white-space: normal;
+    word-break: break-word;
+}
+
+/* .appointment-block .tip th {
+    width: 90px;
+    font-weight: bold;
+}
+
+.appointment-block .tip td {
+    width: auto;
+} */
+
+.appointment-block .tip h3 {
+    margin: 0 0 8px;
+    font-size: 22px;
+}
+
+.appointment-block .tip .subtitle {
+    margin-bottom: 12px;
+}
+
+.appointment-block:hover{
+
+    transform:scale(1.02);
+
+    box-shadow:0 2px 6px rgba(0,0,0,.25);
+
+    z-index:100;
+
+    position:relative;
+}
+
+.appointment-link{
+
+    color:inherit;
+
     text-decoration:none;
+
+    display:block;
+
+    height:100%;
 }
 
-.customer-appointment.starting {
+.appointment-header{
-    border-left: 3px solid #1b5e20;
+
+    display:flex;
+
+    align-items:center;
+
+    gap:6px;
+
+    font-weight:bold;
 }
 
-.customer-appointment.ending {
+.appointment-avatar{
-    border-right: 3px solid #1b5e20;
+
+    flex-shrink:0;
+}
+
+.appointment-title{
+
+    overflow:hidden;
+
+    text-overflow:ellipsis;
+
+    white-space:nowrap;
+}
+
+.appointment-customer{
+
+    margin-top:3px;
+
+    color:#555;
+
+    font-size:10px;
+}
+
+.appointment-footer{
+
+    margin-top:6px;
+
+    display:flex;
+
+    justify-content:space-between;
+
+    font-size:10px;
+
+    font-weight:bold;
+}
+
+.appointment-block.scheduled{
+    border-left-color:#1f77d0;
+}
+
+.appointment-block.in-progress{
+    border-left-color:#e68a00;
+    background:#fff4df;
+}
+
+.appointment-block.completed{
+    border-left-color:#2d8a34;
+    background:#edf9ee;
+}
+
+.tip table.attributes {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.tip table.attributes th {
+    text-align: left;
+    padding-right: 10px;
+    white-space: nowrap;
+    font-weight: bold;
+}
+
+.tip table.attributes td {
+    padding: 2px 0;
 }