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

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

4
src/assets/app.scss
View File

@ -321,7 +321,7 @@ h2 {
.item {
display: block;
text-decoration: none;
padding: 13px 15px 10px 15px;
padding: 10px 15px 10px 15px;
border-radius: 10px;
transition: all ease-in-out 0.15s;
@ -413,4 +413,4 @@ h2 {
// Localization
@import "localization.scss";
@import "localization.scss";

23
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>
@ -183,6 +183,9 @@ export default {
}
.hp-bar-big {
display: flex;
justify-content: flex-end;
.beat {
display: inline-block;
background-color: $primary;

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" />
{{ item.name }}
<span class="ms-1">{{ item.name }}</span>
</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">
<div v-show="$root.userHeartbeatBar === 'normal'" :key="$root.userHeartbeatBar" class="col-6 col-md-4 small-padding">
<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>
@ -62,7 +62,7 @@ export default {
data() {
return {
searchText: "",
}
};
},
computed: {
sortedMonitorList() {
@ -91,17 +91,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;
@ -115,7 +115,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>