self-hosted/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-12 10:13:46 +02:00
Code Issues Actions 5 Releases Activity

Revert "fix(heartbeat-bar): cleanup css styling and minor syntax issues"

Browse Source 
This reverts commit 3d6c8b7f
This commit is contained in:
LouisLam 2021-10-07 21:47:11 +08:00
parent cdf81a36d3
commit 9f1e7b0a88
4 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/app.scss
View File

@ -321,7 +321,7 @@ h2 {
.item {
display: block;
text-decoration: none;
padding: 14px 15px;
padding: 13px 15px 10px 15px;
border-radius: 10px;
transition: all ease-in-out 0.15s;

20
src/components/HeartbeatBar.vue
View File

@ -38,7 +38,7 @@ export default {
beatMargin: 4,
move: false,
maxBeat: -1,
};
}
},
computed: {
@ -69,12 +69,12 @@ export default {
if (start < 0) {
// Add empty placeholder
for (let i = start; i < 0; i++) {
placeholders.push(0);
placeholders.push(0)
}
start = 0;
}
return placeholders.concat(this.beatList.slice(start));
return placeholders.concat(this.beatList.slice(start))
},
wrapStyle() {
@ -84,7 +84,7 @@ export default {
return {
padding: `${topBottom}px ${leftRight}px`,
width: "100%",
};
}
},
barStyle() {
@ -94,12 +94,12 @@ export default {
return {
transition: "all ease-in-out 0.25s",
transform: `translateX(${width}px)`,
};
}
}
return {
transform: "translateX(0)",
};
}
},
@ -109,7 +109,7 @@ export default {
height: this.beatHeight + "px",
margin: this.beatMargin + "px",
"--hover-scale": this.hoverScale,
};
}
},
},
@ -120,7 +120,7 @@ export default {
setTimeout(() => {
this.move = false;
}, 300);
}, 300)
},
deep: true,
},
@ -162,7 +162,7 @@ export default {
methods: {
resize() {
if (this.$refs.wrap) {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2))
}
},
@ -170,7 +170,7 @@ export default {
return `${this.$root.datetime(beat.time)} - ${beat.msg}`;
}
},
};
}
</script>
<style lang="scss" scoped>

24
src/components/MonitorList.vue
View File

@ -3,10 +3,10 @@
<div class="list-header">
<div class="placeholder"></div>
<div class="search-wrapper">
<a v-if="!searchText" class="search-icon">
<a v-if="searchText == ''" class="search-icon">
<font-awesome-icon icon="search" />
</a>
<a v-if="searchText" class="search-icon" @click="clearSearchText">
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" />
</a>
<input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" />
@ -19,21 +19,21 @@
<router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
<div class="row">
<div class="col-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar === 'bottom' || $root.userHeartbeatBar === 'none' }">
<div class="col-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
<div class="info">
<Uptime :monitor="item" type="24" :pill="true" />
<span class="ms-1">{{ item.name }}</span>
{{ item.name }}
</div>
<div class="tags">
<Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
</div>
</div>
<div v-show="$root.userHeartbeatBar === 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4 small-padding">
<div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4">
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
</div>
<div v-if="$root.userHeartbeatBar === 'bottom'" class="row">
<div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
<div class="col-12">
<HeartbeatBar size="small" :monitor-id="item.id" />
</div>
@ -63,7 +63,7 @@ export default {
data() {
return {
searchText: "",
};
}
},
computed: {
sortedMonitorList() {
@ -92,17 +92,17 @@ export default {
}
return m1.name.localeCompare(m2.name);
});
})
// Simple filter by search text
// finds monitor name, tag name or tag value
if (this.searchText) {
if (this.searchText != "") {
const loweredSearchText = this.searchText.toLowerCase();
result = result.filter(monitor => {
return monitor.name.toLowerCase().includes(loweredSearchText)
|| monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
|| tag.value?.toLowerCase().includes(loweredSearchText));
});
|| tag.value?.toLowerCase().includes(loweredSearchText))
})
}
return result;
@ -116,7 +116,7 @@ export default {
this.searchText = "";
}
},
};
}
</script>
<style lang="scss" scoped>

16
src/components/Uptime.vue
View File

@ -22,33 +22,33 @@ export default {
return Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
}
return this.$t("notAvailableShort");
return this.$t("notAvailableShort")
},
color() {
if (this.lastHeartBeat.status === 0) {
return "danger";
return "danger"
}
if (this.lastHeartBeat.status === 1) {
return "primary";
return "primary"
}
if (this.lastHeartBeat.status === 2) {
return "warning";
return "warning"
}
return "secondary";
return "secondary"
},
lastHeartBeat() {
if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
return this.$root.lastHeartbeatList[this.monitor.id];
return this.$root.lastHeartbeatList[this.monitor.id]
}
return {
status: -1,
};
}
},
className() {
@ -59,7 +59,7 @@ export default {
return "";
},
},
};
}
</script>
<style>