diff --git a/resources/js/components/ScheduleComponent.vue b/resources/js/components/ScheduleComponent.vue index 472cc32..071492d 100644 --- a/resources/js/components/ScheduleComponent.vue +++ b/resources/js/components/ScheduleComponent.vue @@ -689,15 +689,6 @@ table.schedules_table { .cellsizer { height: 50px; - &:hover { - height: 150px; - position: absolute; - width: 200%; - left: -50%; - top: -50%; - z-index: 20; - border: 1px solid; - } text-overflow: ellipsis; overflow: hidden; b { @@ -713,6 +704,16 @@ table.schedules_table { &:hover .btn { opacity: 1; } + &:hover .cellsizer{ + height: 150px; + padding-left: 2rem; + position: absolute; + width: 200%; + left: -50%; + top: -50%; + z-index: 20; + border: 1px solid; + } $buttonBgColor: #4d4d4d; // Reset button Style to nice one @@ -753,14 +754,13 @@ table.schedules_table { .btn { position: absolute; top: 0.1rem; - right: 0.1rem; + left: 0.1rem; padding: 0; width: 1.8rem; height: 1.8rem; margin: 0; background-color: $buttonBgColor; opacity: 0; - transition: 200ms opacity; &.hide { opacity: 0 !important; } @@ -772,16 +772,17 @@ table.schedules_table { color: darken($color: #fff, $amount: 5); } &:nth-last-child(2) { + top: 2.1rem; right: inherit; left: 0.1rem; } &:nth-last-child(3) { right: inherit; - top: 2.1rem; + top: 4.1rem; left: 0.1rem; } &:nth-last-child(1) { - top: 2.1rem; + top: calc(150px - 2rem); right: 0.1rem; } }