diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css index d3b5c89..b7704ab 100644 --- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css +++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css @@ -1,7 +1,7 @@ .wrapper { display: flex; background-color: #333333; - height: 30vh + height: 27vh } .wrapper > * { @@ -18,6 +18,30 @@ font-family: monospace; } +.paper-left_vaccine_head{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.paper-left_vaccine_head h3{ + text-transform: uppercase; + font-weight: bold; + color: white; + font-family: "Fira Code Medium", "monospace"; +} + +.paper-left_vaccine_head p{ + text-transform: uppercase; + font-weight: bold; + color: black; + font-family: monospace; + background-color: #009E60; + padding: 10px; + border-radius: 7px; + text-align: center; +} + .paper-left .paper-left_content{ display: flex; justify-content: space-between; @@ -92,12 +116,54 @@ font-size: 20px; } +.paper-right_age{ + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; +} + +.paper-right_age .age_text h3{ + color: aquamarine; + font-family: monospace; + font-size: 20px; +} + +.paper-right_age .age_content p{ + margin-bottom: 5px; + font-size: 20px; +} + +.paper-right_age .age_content{ + background-color: rgb(222,49,99); + height: 25px; + width: 75px; + padding: 5px; + border-radius: 3px; + color: white; + display: flex; + justify-content: center; + align-items: center; +} + +.paper-right_slots h3{ + text-align: center; + font-weight: 700; + color: #BB86FC; + margin: 5px; +} + +.paper-right_slots p{ + color: whitesmoke; + font-size: 17px; + text-align: center; +} /*Media Queries*/ @media screen and (max-width: 500px) { .wrapper { - height: 50vh; + height: 70vh; flex-direction: column; } @@ -105,6 +171,22 @@ width: 90%; } + .paper-left_vaccine_head{ + flex-direction: column; + } + + .paper-left_vaccine_head h3{ + font-size: 15px; + margin-bottom: 10px; + } + + .paper-left_vaccine_head p{ + padding: 5px; + font-size: 15px; + border-radius: 7px; + text-align: center; + } + .paper-left p { width: 100%; } @@ -132,7 +214,8 @@ margin-top: 5px; margin-right: 3px; color: aquamarine; - font-size: 12px; + font-weight: bold; + font-size: 11px; } .paper-right_Badges .healing_icon{ @@ -148,4 +231,39 @@ .paper-right_Badges p span{ font-size: 15px; } + + .paper-right_age{ + margin-top: 3px; + } + + .paper-right_age .age_text h3{ + font-size: 13px; + } + + .paper-right_age .age_content{ + background-color: rgb(222,49,99); + height: 15px; + width: 65px; + padding: 3px; + border-radius: 3px; + color: white; + } + + .paper-right_age .age_content p{ + margin-bottom: 1px; + font-size: 13px; + } + + .paper-right_slots h3{ + text-align: center; + font-weight: 700; + color: #BB86FC; + margin: 3px; + } + + .paper-right_slots p{ + color: whitesmoke; + font-size: 15px; + text-align: center; + } } \ No newline at end of file diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js index 45a0dc1..0b4325f 100644 --- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js +++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js @@ -25,6 +25,11 @@ const VaccineDataSingle = (vaccine)=> {
{vaccine.vaccine}
+{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}
@@ -53,8 +58,25 @@ const VaccineDataSingle = (vaccine)=> {Date:{vaccine.date}
{vaccine.min_age_limit} years
+{vaccine.fee_type}
+{vaccine.slots.join(",")}