From c3c753f5b3eb86d67aeaac3068a41603084abb86 Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Fri, 5 Feb 2021 22:07:25 +0100
Subject: [PATCH] added night order tooltips (closes #104)

---
 src/components/modals/NightOrderModal.vue | 26 +++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index 27f0a7e..b083d21 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/src/components/modals/NightOrderModal.vue
@@ -45,6 +45,9 @@
                 require('../../assets/icons/' + role.id + '.png')})`
             }"
           ></span>
+          <span class="reminder" v-if="role.firstNightReminder">
+            {{ role.firstNightReminder }}
+          </span>
         </li>
       </ul>
       <ul class="other">
@@ -76,6 +79,9 @@
               >
             </template>
           </span>
+          <span class="reminder" v-if="role.otherNightReminder">
+            {{ role.otherNightReminder }}
+          </span>
         </li>
       </ul>
     </div>
@@ -267,6 +273,26 @@ ul {
         }
       }
     }
+    .reminder {
+      position: fixed;
+      padding: 5px 10px;
+      left: 50%;
+      bottom: 10%;
+      width: 500px;
+      z-index: 25;
+      background: rgba(0, 0, 0, 0.75);
+      border-radius: 10px;
+      border: 3px solid black;
+      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
+      text-align: left;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 200ms ease-in-out;
+      margin-left: -250px;
+    }
+    &:hover .reminder {
+      opacity: 1;
+    }
   }
   &.legend {
     font-weight: bold;