github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

style changes

pull/1097/head
smit95tpatel 2022-02-09 13:17:41 +05:30
parent ed27881697
commit b36d16779f
1 changed files with 102 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/components/Dashboard/ServiceTreeView.vue
View File

@ -1,13 +1,16 @@
<template> <template>
<div> <div>
<div class="row">
<div class="col-sm-6">
<form> <form>
<div class="form-row"> <div class="form-row">
<div class="form-group col-sm-3 mb-md-0"> <div class="form-group col-sm-6 mb-md-0">
<FlatPickr <FlatPickr
id="start" id="dateTime"
ref="dateTimeRef"
v-model="dateTime" v-model="dateTime"
type="text" type="text"
name="start" name="dateTime"
class="form-control form-control-plaintext" class="form-control form-control-plaintext"
:config="{ :config="{
altFormat: 'J M, Y, h:iK', altFormat: 'J M, Y, h:iK',
@ -21,10 +24,10 @@
</div> </div>
<div class="form-group col-sm-3 mb-md-0"> <div class="form-group col-sm-6 mb-md-0">
<div role="group"> <div role="group">
<button <button
type="button" type="submit"
class="btn btn-primary mr-1" class="btn btn-primary mr-1"
:disabled="dateTime === '' || isLoading" :disabled="dateTime === '' || isLoading"
@click.prevent="handleFilterSearch" @click.prevent="handleFilterSearch"
@ -42,12 +45,43 @@
</div> </div>
</div> </div>
</form> </form>
</div>
<div class="col-sm-6">
<ul class="d-flex justify-content-end align-items-center">
<li class="d-flex">
<div class="mr-1 text-shade-success">
<FontAwesomeIcon
icon="circle"
class="border border-secondary rounded-circle"
/>
</div>
<div>Up</div>
</li>
<li class="d-flex ml-3">
<div class="mr-1 text-shade-warning">
<FontAwesomeIcon
icon="circle"
class="border border-secondary rounded-circle"
/>
</div>
<div>Degraded</div>
</li>
<li class="d-flex ml-3">
<div class="mr-1 text-shade-danger">
<FontAwesomeIcon
icon="circle"
class="border border-secondary rounded-circle"
/>
</div>
<div>Down</div>
</li>
</ul>
</div>
</div>
<div class="mt-3"> <div class="mt-3">
<h4>Heading</h4> <div v-if="isLoading">
<div
v-if="isLoading"
>
<div class="col-12 text-center"> <div class="col-12 text-center">
<FontAwesomeIcon <FontAwesomeIcon
icon="circle-notch" icon="circle-notch"
@ -176,6 +210,10 @@ export default {
this.isLoading = false; this.isLoading = false;
}, },
handleFilterSearch: function () { handleFilterSearch: function () {
// Remove focus and close date time picker on enter click.
this.$refs.dateTimeRef.$el.nextSibling.blur();
this.$refs.dateTimeRef.fp.close();
this.getServiceStatus(this.dateTime); this.getServiceStatus(this.dateTime);
}, },
handleClearFilter: function () { handleClearFilter: function () {
@ -185,7 +223,27 @@ export default {
}; };
</script> </script>
<style> <style scoped>
ul, li {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.text-shade-danger {
color: #f7cecc;
border: red
}
.text-shade-warning {
color: #FFE6CC;
}
.text-shade-success {
color: #D6E7D4;
}
.parent-list-group li { .parent-list-group li {
position: relative; position: relative;
} }