fix the tooltip positions (#1411)

stereum-dev · Aug 17, 2023 · 7f95450 · 7f95450
1 parent 9c3d241
commit 7f95450
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 36 deletions.
diff --git a/launcher/src/components/UI/the-control/SyncStatus.vue b/launcher/src/components/UI/the-control/SyncStatus.vue
@@ -459,14 +459,14 @@ export default {
 .executionIconCons {
   position: absolute;
   width: 54%;
-  left: 23%;
-  top: 31.5%;
+  left: 22.7%;
+  top: 24.6%;
 }
 .consensusIconCons {
   position: absolute;
   width: 54%;
-  left: 23%;
-  top: 31.5%;
+  left: 22.9%;
+  top: 24.6%;
 }
 .consensusPer {
   position: absolute;
@@ -484,7 +484,6 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 7%;
 }
 .syncStatusStatus {
   width: 100%;
@@ -498,34 +497,6 @@ export default {
   position: absolute;
   bottom: 0;
 }
-[data-tooltip] {
-  position: relative;
-  cursor: default;
-}
-[data-tooltip]::after {
-  position: absolute;
-  width: max-content;
-  left: -300%;
-  text-align: center;
-  content: attr(data-tooltip);
-  background: black;
-  border-radius: 5px;
-  font-size: 70%;
-  padding: 8% 20%;
-  border: 1px solid #929292;
-  text-transform: uppercase;
-  visibility: hidden;
-  opacity: 0;
-  transform: translateY(-320%);
-  transition: opacity 0.3s transform 0.2s;
-  font-weight: 600;
-}
-[data-tooltip]:hover::after {
-  opacity: 1;
-  visibility: visible;
-  transform: rotateY(50%);
-}
-
 .pageNumber {
   display: flex;
   justify-content: center;

diff --git a/launcher/src/components/UI/the-control/TooltipDialog.vue b/launcher/src/components/UI/the-control/TooltipDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="open" :class="['parent-dialog', animateClass]">
+  <div v-if="open" :class="['parent-dialog', animateClass, flag ? 'amsterdam' : 'syncstatus']">
     <div v-if="flag" class="wrapper">
       <div class="title">{{ epochType }}</div>
       <div class="top-epoch">
@@ -84,8 +84,7 @@ export default {
   border-radius: 10px;
   z-index: 100;
   position: fixed;
-  top: 15%;
-  left: 40%;
+
   height: 20%;
   width: 25%;
   border: 3px solid #929292;
@@ -96,6 +95,14 @@ export default {
   align-items: center;
   animation-duration: 0.5s;
 }
+.amsterdam {
+  top: 16%;
+  left: 48.8%;
+}
+.syncstatus {
+  top: 30%;
+  left: 48.8%;
+}
 .wrapper {
   width: 100%;
   height: 100%;