xrazis
/
ichnaea
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Add DashboardHome.vue tiles and illustration

main
Haris Razis 4 years ago
parent
37b120d2bd
commit
addfa5759c
2 changed files with 50 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      web/src/assets/undraw_finish_line_katerina_limpitsouni_xy20.svg
  2. 74
      web/src/views/DashboardHome.vue

1
web/src/assets/undraw_finish_line_katerina_limpitsouni_xy20.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

74
web/src/views/DashboardHome.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<h1 class="title is-2">/home</h1> <h1 class="title is-2">/home</h1>
<div class="tile"> <div class="tile mb-5">
<article class="tile is-child notification has-background-primary-dark has-text-white"> <article class="tile is-child box">
<nav class="level"> <nav class="level">
<div class="level-left"> <div class="level-left">
<div class="level-item "> <div class="level-item ">
@ -17,34 +17,58 @@
</div> </div>
</div> </div>
</nav> </nav>
<nav class="level"> </article>
<div class="level-item has-text-centered"> </div>
<div> <div class="tile is-ancestor">
<p class="heading">Your Athletes</p> <div class="tile is-vertical is-8">
<p class="title">3,456</p> <div class="tile">
</div> <div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">System status</p>
<p class="subtitle">All systems operational</p>
</article>
<article class="tile is-child box">
<p class="title">...tiles</p>
<p class="subtitle">Bottom tile</p>
</article>
</div> </div>
<div class="level-item has-text-centered"> <div class="tile is-parent">
<div> <article class="tile is-child box">
<p class="heading">Live Athletes</p> <figure class="image is-4by3">
<p class="title">123</p> <img src="../assets/undraw_finish_line_katerina_limpitsouni_xy20.svg">
</div> </figure>
</article>
</div> </div>
<div class="level-item has-text-centered"> </div>
<div> <div class="tile is-parent">
<p class="heading">Server</p> <article class="tile is-child box">
<p class="title" v-if="this.$store.getters.currentStatus">Connected</p> <p class="title">Wide tile</p>
<p class="title" v-else>Disconnected</p> <p class="subtitle">Aligned with the right tile</p>
<div class="content">
<!-- Content -->
</div> </div>
</div> </article>
<div class="level-item has-text-centered"> </div>
<div> </div>
<p class="heading">Likes</p> <div class="tile is-parent">
<p class="title">789</p> <article class="tile is-child box">
<div class="content">
<p class="title">Tall tile</p>
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut culpa, deserunt
distinctio illo ipsa itaque laborum magnam minima minus molestiae nisi odio provident quas repellendus,
similique velit veniam voluptatem?</p>
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut culpa, deserunt
distinctio illo ipsa itaque laborum magnam minima minus molestiae nisi odio provident quas repellendus,
similique velit veniam voluptatem?</p>
<p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut culpa, deserunt
distinctio illo ipsa itaque laborum magnam minima minus molestiae nisi odio provident quas repellendus,
similique velit veniam voluptatem?</p>
<div class="content">
<!-- Content -->
</div> </div>
</div> </div>
</nav> </article>
</article> </div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save