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

ye

pull/429/head
hunterlong 2020-03-10 04:26:36 -07:00
parent de6cf2407f
commit e7ece19e70
2 changed files with 5 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/assets/scss/base.scss
View File

@ -6,7 +6,7 @@ HTML,BODY {
} }
.index-chart { .index-chart {
height: 35vh; height: 490px;
} }
.chartmarker { .chartmarker {
@ -80,7 +80,8 @@ HTML,BODY {
} }
.online_list .badge { .online_list .badge {
margin-top: 0.2rem; font-size: 8pt;
padding: 5px 7px;
} }
.navbar { .navbar {
@ -234,7 +235,7 @@ HTML,BODY {
.chart-container { .chart-container {
position: relative; position: relative;
height: 18.6vh; height: 240px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }

55
frontend/src/components/Index/Group.vue
View File

@ -5,7 +5,7 @@
<a v-for="(service, index) in $store.getters.servicesInGroup(group.id)" v-bind:key="index" class="service_li list-group-item list-group-item-action"> <a v-for="(service, index) in $store.getters.servicesInGroup(group.id)" v-bind:key="index" class="service_li list-group-item list-group-item-action">
<router-link class="no-decoration" :to="serviceLink(service)">{{service.name}}</router-link> <router-link class="no-decoration" :to="serviceLink(service)">{{service.name}}</router-link>
<span class="badge bg-success float-right pulse-glow">{{service.online ? "ONLINE" : "OFFLINE"}}</span> <span class="badge bg-success float-right">{{service.online ? "ONLINE" : "OFFLINE"}}</span>
<GroupServiceFailures :service="service"/> <GroupServiceFailures :service="service"/>
</a> </a>
@ -32,57 +32,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
@keyframes pulse_animation {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.02); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
.pulse {
animation-name: pulse_animation;
animation-duration: 1500ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes glow-grow {
0% {
opacity: 0;
transform: scale(1);
}
80% {
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.pulse-glow {
animation-name: glow-grown;
animation-duration: 100ms;
transform-origin: 70% 30%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.pulse-glow:before,
.pulse-glow:after {
position: absolute;
content: "";
height: 0.4rem;
width: 1.7rem;
top: 1.3rem;
right: 2.15rem;
border-radius: 0;
box-shadow: 0 0 6px #47d337;
animation: glow-grow 2s ease-out infinite;
}
</style> </style>