neviyn/ObservationDatabase
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Added some fancy animations.

Browse Source
This commit is contained in:
neviyn 2018-10-11 10:50:32 +01:00
parent f4754f94cb
commit 5d5ce1074a
2 changed files with 112 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
frontend/src/views/DatabaseUnavailable.vue
View File

@ -2,12 +2,12 @@
<b-container>
<b-row class="my-3">
<b-col>
<v-icon label="Database Error" scale="5">
<v-icon name="database" style="color: black"></v-icon>
<v-icon name="ban" scale="2" style="color: red"></v-icon>
</v-icon>
<v-icon name="desktop" style="color: black" scale="5"></v-icon>
<v-icon class="mx-5 heartbeat" name="unlink" style="color: black" scale="4"></v-icon>
<v-icon name="database" style="color: black" scale="5"></v-icon>
</b-col>
</b-row>
<br/>
<b-row class="my-3">
<b-col>
<h1>Database Unavailable</h1>
@ -24,11 +24,88 @@
<script>
import "vue-awesome/icons/database";
import "vue-awesome/icons/ban";
import "vue-awesome/icons/unlink";
import "vue-awesome/icons/desktop";
export default {
name: "DatabaseUnavailable"
};
</script>
<style scoped>
.heartbeat {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
/* ----------------------------------------------
* Generated by Animista on 2018-10-11
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
</style>

40
frontend/src/views/Home.vue
View File

@ -2,32 +2,52 @@
<b-container>
<b-row>
<b-col>
<h1>Training Observations Database</h1>
<h1 class="tracking-in-expand-fwd">Training Observations Database</h1>
</b-col>
</b-row>
<b-row class="my-3">
<b-col>
<b-button size="lg" to="/new" variant="primary">Start a new observation</b-button>
<b-row class="my-3" align-h="center">
<b-col lg="6" sm="12">
<b-button class="scale-in-center" size="lg" to="/new" variant="primary" block><v-icon name="file-alt"/> Start a new observation</b-button>
</b-col>
</b-row>
<b-row class="my-3">
<b-col>
<b-button size="lg" to="/observations">Read past observations</b-button>
<b-row class="my-3" align-h="center">
<b-col lg="6" sm="12">
<b-button class="scale-in-center" size="lg" to="/observations" block><v-icon name="th-list"/> Read past observations</b-button>
</b-col>
</b-row>
<b-row class="my-3">
<b-col>
<b-button size="lg" to="/stats">View daily observation statistics</b-button>
<b-row class="my-3" align-h="center">
<b-col lg="6" sm="12">
<b-button class="scale-in-center" size="lg" to="/stats" block><v-icon name="chart-line"/> View daily observation statistics</b-button>
</b-col>
</b-row>
</b-container>
</template>
<script>
import "vue-awesome/icons/file-alt";
import "vue-awesome/icons/th-list";
import "vue-awesome/icons/chart-line";
export default {
name: "Home"
};
</script>
<!--suppress CssUnusedSymbol -->
<style scoped>
.fa-icon {
width: auto;
height: 1em; /* or any other relative font sizes */
/* You would have to include the following two lines to make this work in Safari */
max-width: 100%;
max-height: 100%;
}
.scale-in-center{-webkit-animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both}
.tracking-in-expand-fwd{-webkit-animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both}
/* ----------------------------------------------
* Generated by Animista on 2018-10-11
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
@-webkit-keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
</style>