fix draging-info margin - resize draging icon - resize hatching modal…

… (remove unneeded space)
HabitRPG · Jan 8, 2018 · e0e846c · e0e846c
1 parent 126d90f
commit e0e846c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/website/client/components/inventory/items/index.vue b/website/client/components/inventory/items/index.vue
@@ -176,6 +176,7 @@
 
     .potion-icon {
       margin: 0 auto 8px;
+      transform: scale(1.5);
     }
 
     .popover {
@@ -186,6 +187,7 @@
     .popover-content {
       color: white;
       margin: 15px;
+      text-align: center;
     }
   }
 </style>
@@ -473,12 +475,12 @@ export default {
     mouseMoved ($event) {
       if (this.potionClickMode) {
         // dragging potioninfo is 180px wide (90 would be centered)
-        this.$refs.clickPotionInfo.style.left = `${$event.x - 70}px`;
-        this.$refs.clickPotionInfo.style.top = `${$event.y}px`;
+        this.$refs.clickPotionInfo.style.left = `${$event.x - 60}px`;
+        this.$refs.clickPotionInfo.style.top = `${$event.y + 10}px`;
       } else if (this.eggClickMode) {
          // dragging eggInfo is 180px wide (90 would be centered)
-        this.$refs.clickEggInfo.style.left = `${$event.x - 70}px`;
-        this.$refs.clickEggInfo.style.top = `${$event.y}px`;
+        this.$refs.clickEggInfo.style.left = `${$event.x - 60}px`;
+        this.$refs.clickEggInfo.style.top = `${$event.y + 10}px`;
       } else {
         lastMouseMoveEvent = $event;
       }

diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
@@ -377,11 +377,13 @@
   #hatching-modal {
     @include centeredModal();
 
+    .modal-dialog {
+      width: 310px;
+    }
+
     .content {
       text-align: center;
-
       margin: 9px;
-      width: 300px;
     }
 
     .title {
@@ -445,7 +447,8 @@
     }
 
     .food-icon {
-      margin: 0 auto;
+      margin: 0 auto 8px;
+      transform: scale(1.5);
     }
 
     .popover {
@@ -455,6 +458,8 @@
 
     .popover-content {
       color: white;
+      margin: 15px;
+      text-align: center;
     }
   }