Skip to content

Commit

Permalink
Merge pull request #12 from r-ush/r-ush-add-new-people-info
Browse files Browse the repository at this point in the history 
added new design for patient cards
  • Loading branch information
Raj Chandra authored Apr 1, 2020
2 parents 1c94be2 + becb175 commit 780a094
Show file tree
Hide file tree
Showing 19 changed files with 796 additions and 163 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
86 changes: 76 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@

<!-- import css -->
<link rel="stylesheet" href="./src/css/index.css">
<link rel="stylesheet" href="./src/css/timeline.css">
<link rel="stylesheet" href="./src/css/carousel.css">
<link rel='stylesheet' media='screen and (min-width: 0px) and (max-width: 576px)' href='./src/css/mobile.css' />
<!-- <link rel='stylesheet' media='screen and (min-width: 577px)' href='/stylesheets/css/large.css' /> -->

Expand Down Expand Up @@ -333,7 +335,7 @@
<div class="col-lg-5 item-bordered-odd mt-2">
<p>
Helpline Number Toll free:
<ul>
<ul class="pl-5">
<li><a href="tel:+1075">1075</a></li>
<li><a href="tel:+91-11-23978046">+91-11-23978046</a></li>
</ul>
Expand All @@ -342,7 +344,7 @@
<div class="col-lg-5 item-bordered-even mt-2">
<p>
Helpline Email ID :
<ul>
<ul class="pl-5">
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
Expand Down Expand Up @@ -391,7 +393,7 @@
<div class="col-lg-12 text-left">
<div class="col-lg-12 p-2">
<p>Citizens and organisations can go to the website pmindia.gov.in and donate to PM CARES Fund using following details:</p>
<ul>
<ul class="pl-5">
<li class="no-decore">Name of the Account: PM CARES</li>
<li class="no-decore">Account Number: 2121PM20202 </li>
<li class="no-decore">IFSC Code: SBIN0000691</li>
Expand All @@ -401,7 +403,7 @@
</ul>
<p>
Following modes of payments are available on the website pmindia.gov.in -
<ul>
<ul class="pl-5">
<li>Debit Cards and Credit Cards</li>
<li>Internet Banking</li>
<li>UPI (BHIM, PhonePe, Amazon Pay, Google Pay, PayTM, Mobikwik, etc.)</li>
Expand All @@ -423,14 +425,14 @@
</div>

<div class="row mb-1" style="width: 100%;">
<div class="col-lg-4 mt-2 col-md-4 col-sm-12" style="height: 500px;overflow-y: auto;">
<div class="col-lg-4 mt-2 col-md-4 col-sm-12 p-4" style="height: 500px;overflow-y: auto;">
<a class="twitter-timeline" href="https://twitter.com/PTI_News?ref_src=twsrc%5Etfw">Tweets by PTI_News</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="col-lg-4 mt-2 col-md-4 col-sm-12" style="height: 500px;overflow-y: auto;">
<div class="col-lg-4 mt-2 col-md-4 col-sm-12 p-4" style="height: 500px;overflow-y: auto;">
<a class="twitter-timeline" href="https://twitter.com/WFNhindi?ref_src=twsrc%5Etfw">Tweets by WFNhindi</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-lg-4 mt-2 col-md-4 col-sm-12" style="height: 500px;overflow-y: auto;">
<div class="col-lg-4 mt-2 col-md-4 col-sm-12 p-4" style="height: 500px;overflow-y: auto;">
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The PM-CARES Fund accepts micro-donations too. It will strengthen disaster management capacities and encourage research on protecting citizens. <br><br>Let us leave no stone unturned to make India healthier and more prosperous for our future generations. <a href="https://t.co/BVm7q19R52">pic.twitter.com/BVm7q19R52</a></p>&mdash; Narendra Modi (@narendramodi) <a href="https://twitter.com/narendramodi/status/1243861543185305603?ref_src=twsrc%5Etfw">March 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
Expand All @@ -442,13 +444,13 @@
<div class="article-container text-justify p-3">
<p>The COVID-19 virus affects different people in different ways. COVID-19 is a respiratory disease and most infected people will develop mild to moderate symptoms and recover without requiring special treatment. People who have underlying medical conditions and those over 60 years old have a higher risk of developing severe disease and death.</p>
<p>Common symptoms include:</p>
<ul>
<ul class="pl-5">
<li>fever</li>
<li>tiredness</li>
<li>dry cough</li>
</ul>
<p>Other symptoms include:</p>
<ul>
<ul class="pl-5">
<li>shortness of breath</li>
<li>aches and pains</li>
<li>sore throat</li>
Expand All @@ -462,7 +464,7 @@
<div class="bg-clouds header">Prevention</div>
<div class="article-container text-justify p-3">
<p>To prevent infection and to slow transmission of COVID-19, do the following:</p>
<ul>
<ul class="pl-5">
<li>Wash your hands regularly with soap and water, or clean them with alcohol-based hand rub.</li>
<li>Maintain at least 1 metre distance between you and people coughing or sneezing.</li>
<li>Avoid touching your face.</li>
Expand All @@ -477,6 +479,69 @@
<p class="text-center"><small> Source - <a href="https://www.who.int/health-topics/coronavirus#tab=tab_3" target="_blank">WHO</a></small></p>
</div>
</div>

<!-- patient info -->
<div class="col-lg-12 header bg-clouds" id=""><span class="">Last 20 Patients</div>
<div class="container">
<div class="card-carousel">

<!-- <div class="card" id="1">
<div class="place">
{city},{state}
</div>
<img src="./src/images/patient.svg" alt="" class="patient-img">
<div class="patientId">
{patientId}
</div>
<div class="age">
{age}
</div>
<div class="notes">
{notes}
</div>
<a href="" class="patient-source">Source</a>
</div>
<div class="card" id="2">
<div class="place">
{city},{state}
</div>
<img src="./src/images/patient.svg" alt="" class="patient-img">
<div class="patientId">
{patientId}
</div>
<div class="age">
{age}
</div>
<div class="notes">
{notes}
</div>
<a href="" class="patient-source">Source</a>
</div>
<div class="card" id="3">
<div class="place">
{city},{state}
</div>
<img src="./src/images/patient.svg" alt="" class="patient-img">
<div class="patientId">
{patientId}
</div>
<div class="age">
{age}
</div>
<div class="notes">
{notes}
</div>
<a href="" class="patient-source">Source</a>
</div> -->
</div>
<a href="#" class="visuallyhidden card-controller">Carousel controller</a>
</div>

<!-- Appeal -->
<!-- <div class="col-lg-12 header bg-clouds" id="st"><span class="translate-st"> </span></div>
<div class="col-lg-12 text-center no-padding">
Expand Down Expand Up @@ -521,6 +586,7 @@ <h1 class="translate-take-care-stay-safe">ध्यान रखें, सु

<script type="module" src="./src/js/index.js"></script>
<script type="module" src="./src/js/ui/translation/translate.js"></script>
<!-- <script src="./src/js/ui/components/patient_card.js"></script> -->
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
133 changes: 133 additions & 0 deletions src/css/carousel.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/* carousel */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.visuallyhidden {
position: absolute;
z-index: -1;
right: 0;
opacity: 0;
}

.container {
overflow: hidden;
padding: 20px;
margin-top: 2em;
display: flex;
justify-content: center;
}

.card-carousel {
--card-width: 80%;
--card-max-width: 280px;
--card-height: 350px;
--carousel-min-width: 600px;
z-index: 1;
position: relative;
margin: 0 auto;
width: 100%;
height: var(--card-height);
min-width: var(--carousel-min-width);
transition: filter .3s ease;
}

@media screen and (max-width: 640px) {
.card-carousel {
margin-left: calc((100vw - var(--carousel-min-width) - 40px) / 2)
}
}

.card-carousel.smooth-return {
transition: all .2s ease;
}

.card-carousel .card {
background: whitesmoke;
width: var(--card-width);
max-width: var(--card-max-width);
text-align: center;
padding: 1em;
min-width: 250px;
height: var(--card-height);
position: absolute;
margin: 0 auto;
color: rgba(0,0,0,.5);
transition: inherit;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
border-radius: 1em;
filter: brightness(.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.card.highlight {
filter: brightness(1)
}

.card{
padding: 2rem 1rem 2rem 1rem !important;
color:#121212;
}

.card-top-text{
margin:1rem 0 0 0 !important;
text-align: left;
}

#patient-img{
height:64px;
width: 64px;
margin: 0rem 0 1rem 0;
}

.card-bottom{
display: flex !important;
align-items: flex-start;
flex-direction: column;
}

.card-row{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}

.gender{
text-transform: capitalize;
}

.card-img-div{
display: flex;
flex-grow: 1;
}
.card-img{
height: 20px !important;
width: 20px !important;
}
.card-text-div{
display: flex;
flex-grow: 3;
padding: 0 0.5rem 0 1rem !important;

}

.notes{
display: flex;
flex-wrap: wrap;
text-align: left;
}


@media (max-width: 560px){
.card-carousel{
margin-left: 1rem !important ;
}
}
Loading

0 comments on commit 780a094

Please sign in to comment.