Skip to content

Commit

Permalink
Added Animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarojbelbase
sarojbelbase committed Jul 1, 2020
1 parent becf101 commit f44f51c
Show file tree
Hide file tree
Showing 11 changed files with 520 additions and 453 deletions.
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "covidnepal",
"description": "yet another look at covid-19 cases in nepal",
"author": "sidbelbase",
"version": "1.1.4",
"version": "1.1.5",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
Expand All @@ -18,7 +18,8 @@
"vue": "^2.6.11",
"vue-choropleth": "^0.3.1",
"vue-infinite-loading": "^2.4.5",
"vue-router": "^3.2.0"
"vue-router": "^3.2.0",
"vue-sequential-entrance": "^1.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
Expand Down
3 changes: 3 additions & 0 deletions src/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@ body {
ion-icon {
color: #c0c0c0;
}
ion-icon.larger {
font-size: 36px !important;
}
ion-icon.large {
font-size: 24px !important;
}
Expand Down
80 changes: 41 additions & 39 deletions src/components/districts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,52 +12,54 @@
<div class="spinner-border text-danger my-5" role="status"></div>
</div>
<div class="col-sm-6 col-md-4" v-for="(district, index) in districts" :key="index" v-else>
<div class="card neu my-3 mx-1">
<div class="card-body text-left">
<h4 class="card-title covid-text text-center mb-4">{{ district.name }}</h4>
<div class="clearfix mb-2">
<h4 class="small font-weight-bold covid-text text-uppercase">
<span class="float-left">CONFIRMED CASES</span>
<span class="float-right">{{ district.cases | padding }}</span>
</h4>
</div>
<sequential-entrance fromBottom>
<div class="card neu my-3 mx-1">
<div class="card-body text-left">
<h4 class="card-title covid-text text-center mb-4">{{ district.name }}</h4>
<div class="clearfix mb-2">
<h4 class="small font-weight-bold covid-text text-uppercase">
<span class="float-left">CONFIRMED CASES</span>
<span class="float-right">{{ district.cases | padding }}</span>
</h4>
</div>

<div class="progress probar mb-3">
<div
class="progress-bar bar-warning"
:style=" percentTest(district.cases, district.cases)"
></div>
</div>
<div class="progress probar mb-3">
<div
class="progress-bar bar-warning"
:style=" percentTest(district.cases, district.cases)"
></div>
</div>

<div class="clearfix mb-2">
<h4 class="small font-weight-bold covid-text text-uppercase">
<span class="float-left">RECOVERED CASES</span>
<span class="float-right">{{ district.recovered | padding }}</span>
</h4>
</div>
<div class="clearfix mb-2">
<h4 class="small font-weight-bold covid-text text-uppercase">
<span class="float-left">RECOVERED CASES</span>
<span class="float-right">{{ district.recovered | padding }}</span>
</h4>
</div>

<div class="progress probar mb-3">
<div
class="progress-bar bar-success"
:style=" percentTest(district.recovered, district.cases)"
></div>
</div>
<div class="progress probar mb-3">
<div
class="progress-bar bar-success"
:style=" percentTest(district.recovered, district.cases)"
></div>
</div>

<div class="clearfix mb-2">
<h4 class="small font-weight-bold covid-text text-uppercase">
<span class="float-left">DEATH CASES</span>
<span class="float-right">{{ district.deaths | padding }}</span>
</h4>
</div>
<div class="clearfix mb-2">
<h4 class="small font-weight-bold covid-text text-uppercase">
<span class="float-left">DEATH CASES</span>
<span class="float-right">{{ district.deaths | padding }}</span>
</h4>
</div>

<div class="progress probar mb-3">
<div
class="progress-bar bar-danger"
:style=" percentTest(district.deaths, district.cases)"
></div>
<div class="progress probar mb-3">
<div
class="progress-bar bar-danger"
:style=" percentTest(district.deaths, district.cases)"
></div>
</div>
</div>
</div>
</div>
</sequential-entrance>
</div>
</div>
</div>
Expand Down
206 changes: 110 additions & 96 deletions src/components/global.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,68 +16,76 @@
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xl-3 mb-4">
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-warning mb-1">
<h4 class="font-weight-bold">Confirmed</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.cases | padding }}</h3>
<sequential-entrance fromLeft>
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-warning mb-1">
<h4 class="font-weight-bold">Confirmed</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.cases | padding }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</sequential-entrance>
</div>
<div class="col-md-6 col-sm-6 col-xl-3 mb-4">
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-success">
<h4 class="font-weight-bold">Recovered</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.recovered | padding }}</h3>
<sequential-entrance fromLeft>
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-success">
<h4 class="font-weight-bold">Recovered</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.recovered | padding }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</sequential-entrance>
</div>
<div class="col-md-6 col-sm-6 col-xl-3 mb-4">
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-danger">
<h4 class="font-weight-bold">Deceased</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.deaths | padding }}</h3>
<sequential-entrance>
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-danger">
<h4 class="font-weight-bold">Deceased</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.deaths | padding }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</sequential-entrance>
</div>
<div class="col-md-6 col-sm-6 col-xl-3 mb-4">
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-info">
<h4 class="font-weight-bold">Active</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.active | padding }}</h3>
<sequential-entrance>
<div class="card py-2 neu">
<div class="card-body">
<div class="row align-items-center">
<div class="col">
<div class="text-uppercase text-info">
<h4 class="font-weight-bold">Active</h4>
</div>
<div class="text-muted">
<h3 class="font-weight-bold">{{ global.active | padding }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</sequential-entrance>
</div>
</div>

Expand All @@ -88,39 +96,41 @@
<h3 class="covid-text">{{ global.updated | dayify }}</h3>
</div>
</div>
<div class="card mb-4 p-3 neu">
<div class="card-body">
<ul class="list-group list-group-flush covid-text">
<li class="list-group-item neuify looks border-warning mb-2">
<div class="row text-left">
<div class="col mr-2">
<h5 class="m-1">
<strong>{{global.todayCases | padding }} new postive cases</strong>
</h5>
<sequential-entrance fromLeft>
<div class="card mb-4 p-3 neu">
<div class="card-body">
<ul class="list-group list-group-flush covid-text">
<li class="list-group-item neuify looks border-warning mb-2">
<div class="row text-left">
<div class="col mr-2">
<h5 class="m-1">
<strong>{{global.todayCases | padding }} new postive cases</strong>
</h5>
</div>
</div>
</div>
</li>
<li class="list-group-item neuify looks border-success mb-2">
<div class="row text-left">
<div class="col mr-2">
<h5 class="m-1">
<strong>{{global.todayRecovered | padding }} new recovered cases</strong>
</h5>
</li>
<li class="list-group-item neuify looks border-success mb-2">
<div class="row text-left">
<div class="col mr-2">
<h5 class="m-1">
<strong>{{global.todayRecovered | padding }} new recovered cases</strong>
</h5>
</div>
</div>
</div>
</li>
<li class="list-group-item neuify looks border-danger mb-1">
<div class="row text-left">
<div class="col mr-2">
<h5 class="m-1">
<strong>{{global.todayDeaths | padding }} new death cases</strong>
</h5>
</li>
<li class="list-group-item neuify looks border-danger mb-1">
<div class="row text-left">
<div class="col mr-2">
<h5 class="m-1">
<strong>{{global.todayDeaths | padding }} new death cases</strong>
</h5>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</sequential-entrance>
</div>

<div class="col-lg-6">
Expand All @@ -129,42 +139,46 @@
<h3 class="covid-text mb-0">Details</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h5 m-2">TOTAL POPULATION</p>
<p class="font-weight-bold text-muted h5 m-1">{{ global.population | padding }}</p>
<sequential-entrance>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h5 m-2">TOTAL POPULATION</p>
<p
class="font-weight-bold text-muted h5 m-1"
>{{ global.population | padding }}</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h5 m-2">TOTAL TESTS</p>
<p class="font-weight-bold text-muted h5 m-1">{{ global.tests | padding }}</p>
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h5 m-2">TOTAL TESTS</p>
<p class="font-weight-bold text-muted h5 m-1">{{ global.tests | padding }}</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h6 m-2">TOTAL AFFECTED COUNTRIES</p>
<p
class="font-weight-bold text-muted h5 m-2"
>{{ global.affectedCountries | padding }}</p>
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h6 m-2">TOTAL AFFECTED COUNTRIES</p>
<p
class="font-weight-bold text-muted h5 m-2"
>{{ global.affectedCountries | padding }}</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h5 m-2">TOTAL CRITICAL</p>
<p class="font-weight-bold text-muted h5 m-1">{{ global.critical | padding }}</p>
<div class="col-lg-6 col-sm-6 mb-4">
<div class="card covid-text neu">
<div class="card-body">
<p class="font-weight-bold h5 m-2">TOTAL CRITICAL</p>
<p class="font-weight-bold text-muted h5 m-1">{{ global.critical | padding }}</p>
</div>
</div>
</div>
</div>
</div>
</sequential-entrance>
</div>
</div>
</div>
Expand Down
Loading

1 comment on commit f44f51c

@vercel
Copy link

@vercel vercel bot commented on f44f51c Jul 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.