From 9fc5a3329f7db09733c40c27726fb3b05e903c6f Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Wed, 18 May 2022 20:16:50 +0800
Subject: [PATCH] Revert #1208, due to the break animation
---
src/assets/app.scss | 2 +-
src/components/HeartbeatBar.vue | 47 +++---------------------------
src/components/PublicGroupList.vue | 8 ++---
3 files changed, 9 insertions(+), 48 deletions(-)
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 8eaff499..c3f2fa79 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -367,7 +367,7 @@ textarea.form-control {
.item {
display: block;
text-decoration: none;
- padding: 15px;
+ padding: 13px 15px 10px 15px;
border-radius: 10px;
transition: all ease-in-out 0.15s;
diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 10b1f761..ce888a98 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -1,6 +1,6 @@
<template>
<div ref="wrap" class="wrap" :style="wrapStyle">
- <div class="hp-bar-big d-flex" :style="barStyle">
+ <div class="hp-bar-big" :style="barStyle">
<div
v-for="(beat, index) in shortBeatList"
:key="index"
@@ -8,11 +8,7 @@
:class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
:style="beatStyle"
:title="getBeatTitle(beat)"
- @mouseenter="toggleActivateSibling"
- @mouseleave="toggleActivateSibling"
- >
- <div class="beat-inner" />
- </div>
+ />
</div>
</div>
</template>
@@ -174,28 +170,6 @@ export default {
return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : "");
},
- // Toggling the activeSibling class on hover over the current hover item
- toggleActivateSibling(e) {
- // Variable definition
- const element = e.target;
- const previous = element.previousSibling;
- const next = element.nextSibling;
-
- // Return if the hovered element has empty class
- if (element.classList.contains("empty")) {
- return;
- }
-
- // Check if Previous Sibling is heartbar element and doesn't have the empty class
- if (previous.children && !previous.classList.contains("empty")) {
- previous.classList.toggle("active-sibling");
- }
-
- // Check if Next Sibling is heartbar element and doesn't have the empty class
- if (next.children && !next.classList.contains("empty")) {
- next.classList.toggle("active-sibling");
- }
- }
},
};
</script>
@@ -211,10 +185,9 @@ export default {
.hp-bar-big {
.beat {
+ display: inline-block;
background-color: $primary;
border-radius: $border-radius;
- display: inline-block;
- transition: all ease 0.6s;
&.empty {
background-color: aliceblue;
@@ -228,23 +201,11 @@ export default {
background-color: $warning;
}
- .beat-inner {
- border-radius: $border-radius;
- display: inline-block;
- height: 100%;
- width: 5px;
- }
-
&:not(.empty):hover {
- transition: all ease 0.15s;
+ transition: all ease-in-out 0.15s;
opacity: 0.8;
transform: scale(var(--hover-scale));
}
-
- &.active-sibling {
- transform: scale(1.15);
- transition: all ease 0.15s;
- }
}
}
diff --git a/src/components/PublicGroupList.vue b/src/components/PublicGroupList.vue
index 4d0ada5c..98c0b7ff 100644
--- a/src/components/PublicGroupList.vue
+++ b/src/components/PublicGroupList.vue
@@ -33,19 +33,19 @@
<template #item="monitor">
<div class="item">
<div class="row">
- <div class="col-9 col-md-8 small-padding d-flex align-items-center flex-wrap">
- <div class="info d-flex align-items-center gap-3 w-100">
+ <div class="col-9 col-md-8 small-padding">
+ <div class="info">
<font-awesome-icon v-if="editMode" icon="arrows-alt-v" class="action drag me-3" />
<font-awesome-icon v-if="editMode" icon="times" class="action remove me-3" @click="removeMonitor(group.index, monitor.index)" />
<Uptime :monitor="monitor.element" type="24" :pill="true" />
{{ monitor.element.name }}
</div>
- <div v-if="showTags && monitor.element.tags.length > 0" class="tags">
+ <div v-if="showTag" class="tags">
<Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
- <div :key="$root.userHeartbeatBar" class="col-3 col-md-4 d-flex align-items-center">
+ <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
<HeartbeatBar size="small" :monitor-id="monitor.element.id" />
</div>
</div>