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 {
height: 35vh;
height: 490px;
}
.chartmarker {
@ -80,7 +80,8 @@ HTML,BODY {
}
.online_list .badge {
margin-top: 0.2rem;
font-size: 8pt;
padding: 5px 7px;
}
.navbar {
@ -234,7 +235,7 @@ HTML,BODY {
.chart-container {
position: relative;
height: 18.6vh;
height: 240px;
width: 100%;
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">
<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"/>
</a>
@ -32,57 +32,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>