mudhorn/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-11 08:04:17 -08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Bert Verhelst 2021-10-01 12:49:49 +02:00
parent 2aaed66b38
commit 3d6c8b7f05
4 changed files with 35 additions and 32 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 { .item {
display: block; display: block;
text-decoration: none; text-decoration: none;
padding: 13px 15px 10px 15px; padding: 10px 15px 10px 15px;
border-radius: 10px; border-radius: 10px;
transition: all ease-in-out 0.15s; transition: all ease-in-out 0.15s;

23
src/components/HeartbeatBar.vue
View file

@ -38,7 +38,7 @@ export default {
beatMargin: 4, beatMargin: 4,
move: false, move: false,
maxBeat: -1, maxBeat: -1,
} };
}, },
computed: { computed: {
@ -69,12 +69,12 @@ export default {
if (start < 0) { if (start < 0) {
// Add empty placeholder // Add empty placeholder
for (let i = start; i < 0; i++) { for (let i = start; i < 0; i++) {
placeholders.push(0) placeholders.push(0);
} }
start = 0; start = 0;
} }
return placeholders.concat(this.beatList.slice(start)) return placeholders.concat(this.beatList.slice(start));
}, },
wrapStyle() { wrapStyle() {
@ -84,7 +84,7 @@ export default {
return { return {
padding: `${topBottom}px ${leftRight}px`, padding: `${topBottom}px ${leftRight}px`,
width: "100%", width: "100%",
} };
}, },
barStyle() { barStyle() {
@ -94,12 +94,12 @@ export default {
return { return {
transition: "all ease-in-out 0.25s", transition: "all ease-in-out 0.25s",
transform: `translateX(${width}px)`, transform: `translateX(${width}px)`,
} };
} }
return { return {
transform: "translateX(0)", transform: "translateX(0)",
} };
}, },
@ -109,7 +109,7 @@ export default {
height: this.beatHeight + "px", height: this.beatHeight + "px",
margin: this.beatMargin + "px", margin: this.beatMargin + "px",
"--hover-scale": this.hoverScale, "--hover-scale": this.hoverScale,
} };
}, },
}, },
@ -120,7 +120,7 @@ export default {
setTimeout(() => { setTimeout(() => {
this.move = false; this.move = false;
}, 300) }, 300);
}, },
deep: true, deep: true,
}, },
@ -162,7 +162,7 @@ export default {
methods: { methods: {
resize() { resize() {
if (this.$refs.wrap) { 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}`; return `${this.$root.datetime(beat.time)} - ${beat.msg}`;
} }
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -183,6 +183,9 @@ export default {
} }
.hp-bar-big { .hp-bar-big {
display: flex;
justify-content: flex-end;
.beat { .beat {
display: inline-block; display: inline-block;
background-color: $primary; background-color: $primary;

24
src/components/MonitorList.vue
View file

@ -3,10 +3,10 @@
<div class="list-header"> <div class="list-header">
<div class="placeholder"></div> <div class="placeholder"></div>
<div class="search-wrapper"> <div class="search-wrapper">
<a v-if="searchText == ''" class="search-icon"> <a v-if="!searchText" class="search-icon">
<font-awesome-icon icon="search" /> <font-awesome-icon icon="search" />
</a> </a>
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText"> <a v-if="searchText" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" /> <font-awesome-icon icon="times" />
</a> </a>
<input v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')" /> <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 }"> <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="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"> <div class="info">
<Uptime :monitor="item" type="24" :pill="true" /> <Uptime :monitor="item" type="24" :pill="true" />
{{ item.name }} <span class="ms-1">{{ item.name }}</span>
</div> </div>
<div class="tags"> <div class="tags">
<Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" /> <Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />
</div> </div>
</div> </div>
<div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4"> <div v-show="$root.userHeartbeatBar === 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4 small-padding">
<HeartbeatBar size="small" :monitor-id="item.id" /> <HeartbeatBar size="small" :monitor-id="item.id" />
</div> </div>
</div> </div>
<div v-if="$root.userHeartbeatBar == 'bottom'" class="row"> <div v-if="$root.userHeartbeatBar === 'bottom'" class="row">
<div class="col-12"> <div class="col-12">
<HeartbeatBar size="small" :monitor-id="item.id" /> <HeartbeatBar size="small" :monitor-id="item.id" />
</div> </div>
@ -62,7 +62,7 @@ export default {
data() { data() {
return { return {
searchText: "", searchText: "",
} };
}, },
computed: { computed: {
sortedMonitorList() { sortedMonitorList() {
@ -91,17 +91,17 @@ export default {
} }
return m1.name.localeCompare(m2.name); return m1.name.localeCompare(m2.name);
}) });
// Simple filter by search text // Simple filter by search text
// finds monitor name, tag name or tag value // finds monitor name, tag name or tag value
if (this.searchText != "") { if (this.searchText) {
const loweredSearchText = this.searchText.toLowerCase(); const loweredSearchText = this.searchText.toLowerCase();
result = result.filter(monitor => { result = result.filter(monitor => {
return monitor.name.toLowerCase().includes(loweredSearchText) return monitor.name.toLowerCase().includes(loweredSearchText)
|| monitor.tags.find(tag => tag.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; return result;
@ -115,7 +115,7 @@ export default {
this.searchText = ""; this.searchText = "";
} }
}, },
} };
</script> </script>
<style lang="scss" scoped> <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 Math.round(this.$root.uptimeList[key] * 10000) / 100 + "%";
} }
return this.$t("notAvailableShort") return this.$t("notAvailableShort");
}, },
color() { color() {
if (this.lastHeartBeat.status === 0) { if (this.lastHeartBeat.status === 0) {
return "danger" return "danger";
} }
if (this.lastHeartBeat.status === 1) { if (this.lastHeartBeat.status === 1) {
return "primary" return "primary";
} }
if (this.lastHeartBeat.status === 2) { if (this.lastHeartBeat.status === 2) {
return "warning" return "warning";
} }
return "secondary" return "secondary";
}, },
lastHeartBeat() { lastHeartBeat() {
if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) { 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 { return {
status: -1, status: -1,
} };
}, },
className() { className() {
@ -59,7 +59,7 @@ export default {
return ""; return "";
}, },
}, },
} };
</script> </script>
<style> <style>