completed

hemant-45 · Apr 15, 2022 · f0bcc12 · f0bcc12
1 parent b2f4e13
commit f0bcc12
Show file tree

Hide file tree

Showing 10 changed files with 264 additions and 101 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,6 +5,7 @@
   --gray: #788097;
   --purple: linear-gradient(180deg, #BB67FF 0%, #C484F3 100%);
   --pink: #FF919D;
+  --glass: rgba(255, 255, 255, 0.54);
   --boxShadow: 0px 19px 60px rgb(0 0 0 / 8%);
   --smboxShadow: -79px 51px 60px rgba(0, 0, 0, 0.08);
   --activeItem: #f799a354;
@@ -30,9 +31,22 @@
   display: grid;
   height: 97%;
   width: 97%;
-  background: rgba(255, 255, 255, 0.54);
+  background: var(--glass);
   border-radius: 2rem;
   gap: 16px;
   grid-template-columns: 11rem auto 20rem;
   overflow: hidden;
 }
+
+@media screen and (max-width: 1200px) {
+  .AppGlass{
+    grid-template-columns: 10% 50% auto;
+    overflow-y: scroll;
+  } 
+}
+
+@media screen and (max-width: 768px) {
+  .AppGlass{
+    grid-template-columns: 1fr;
+  } 
+}
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
@@ -1,69 +1,65 @@
 .CompactCard {
-    display: flex;
-    flex: 1;
-    height: 7rem !important;
-    border-radius: 0.7rem;
-    color: white;
-    padding: 1rem;
-    position: relative;
-    cursor: pointer;
-  }
-  .CompactCard:hover{
-    box-shadow: none!important;
-  }
-
-  /* radial bar */
-  .radialBar {
-    flex: 1 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    gap: 1rem;
-  }
-  .CircularProgressbar {
-    width: 4rem !important;
-    overflow: visible;
-  }
-  .CircularProgressbar-path {
-    stroke: white !important;
-    stroke-width: 12px!important;
-    filter: drop-shadow(2px 4px 6px white);
-  }
-  .CircularProgressbar-trail {
-    display: none;
-  }
-  .CircularProgressbar-text {
-    fill: white !important;
-  }
-
-  .radialBar > span {
-    font-size: 17px;
-    font-weight: bold;
-  }
-
-  /* sideDetail*/
-  .detail {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: space-between;
-  }
-
-  .detail > span:nth-child(2) {
-    font-size: 22px;
-    font-weight: bold;
-  }
-  .detail > span:nth-child(3) {
-    font-size: 12px;
-  }
-
+  display: flex;
+  flex: 1;
+  height: 7rem !important;
+  border-radius: 0.7rem;
+  color: white;
+  padding: 1rem;
+  position: relative;
+  cursor: pointer;
+}
+.CompactCard:hover {
+  box-shadow: none !important;
+}
 
+/* radial bar */
+.radialBar {
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+.CircularProgressbar {
+  width: 4rem !important;
+  overflow: visible;
+}
+.CircularProgressbar-path {
+  stroke: white !important;
+  stroke-width: 12px !important;
+  filter: drop-shadow(2px 4px 6px white);
+}
+.CircularProgressbar-trail {
+  display: none;
+}
+.CircularProgressbar-text {
+  fill: white !important;
+}
 
+.radialBar > span {
+  font-size: 17px;
+  font-weight: bold;
+}
 
+/* sideDetail*/
+.detail {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+}
 
-  /* ExpandedCard */
-.ExpandedCard{
+.detail > span:nth-child(2) {
+  font-size: 22px;
+  font-weight: bold;
+}
+.detail > span:nth-child(3) {
+  font-size: 12px;
+}
+
+/* ExpandedCard */
+.ExpandedCard {
   position: absolute;
   width: 60%;
   height: 70vh;
@@ -76,22 +72,34 @@
   justify-content: space-around;
   padding: 1rem;
 }
-.ExpandedCard>span:nth-of-type(1)
-{
+.ExpandedCard > span:nth-of-type(1) {
   color: white;
   font-size: 26px;
   font-weight: bold;
   text-shadow: 0px 0px 15px white;
 }
-.ExpandedCard>span:nth-of-type(2)
-{
+.ExpandedCard > span:nth-of-type(2) {
   color: rgb(236, 236, 236);
   font-size: 15px;
 }
 
-
-
-.chartContainer{
+.chartContainer {
   width: 70%;
 }
 
+@media screen and (max-width: 1200px) {
+  .ExpandedCard {
+    top: 2rem;
+    height: 45vh;
+    left: 6rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .ExpandedCard {
+    top: 8rem;
+    height: 50%;
+    left: 25px;
+    width: 80%;
+  }
+}
diff --git a/src/components/Cards/Cards.css b/src/components/Cards/Cards.css
@@ -3,5 +3,21 @@
   gap: 10px;
 }
 .parentContainer{
-    flex: 1;
+  width: 100%;
+}
+
+@media screen and (max-width: 1200px) {
+  .Cards{
+    flex-direction: column;
+  }
+  .parentContainer{
+    height: 9rem;
+  }
+}
+
+@media screen and (max-width: 768px)
+{
+  .Cards{
+    width: 90%;
+  }
 }
diff --git a/src/components/MainDash/MainDash.css b/src/components/MainDash/MainDash.css
@@ -3,4 +3,18 @@
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
-}
+}
+
+@media screen and (max-width: 1200px) {
+    .MainDash{
+        justify-content:flex-start;
+        margin-top: 2rem;
+    }
+}
+
+@media screen and (max-width: 768px)
+{
+    .MainDash{
+        align-items: center;
+    }
+}
diff --git a/src/components/RigtSide/RightSide.css b/src/components/RigtSide/RightSide.css
@@ -5,3 +5,24 @@
     width: 95%;
     justify-content: space-evenly;
 }
+
+
+@media screen and (max-width: 1200px) {
+    .RightSide{
+        justify-content: flex-start;
+        margin-top: 3rem;
+    }
+}
+
+@media screen and (max-width: 768px)
+{
+    .RightSide{
+        width: 100%;
+        margin-top: 0;
+    }
+    .RightSide>div{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css
@@ -3,8 +3,13 @@
   flex-direction: column;
   position: relative;
   padding-top: 4rem;
+  transition: all 300ms ease;
 }
 /* logo */
+.bars{
+  display: none;
+}
+
 .logo {
   display: flex;
   height: 5rem;
@@ -24,6 +29,7 @@
   height: 3rem;
 }
 
+
 /* menu */
 .menu {
   margin-top: 4rem;
@@ -64,3 +70,49 @@
   background: var(--pink);
   margin-right: calc(1rem - 8px);
 }
+
+
+/* Tablets */
+@media screen and (max-width: 1200px) {
+  .menuItem>span{
+    display: none;
+  }
+  .logo{
+    display: none;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .sidebar{
+    position: fixed;
+    z-index: 9;
+    background: #ffe0e0;
+    width: 55%;
+    padding-right: 1rem;
+    height: 100%;
+  }
+  .menuItem>span{
+    display: block;
+  }
+  .logo{
+    display: flex;
+  }
+  .menu .menuItem:last-child {
+    position: relative;
+    margin-top: 6rem;
+  }
+  .bars{
+    display: flex;
+    position: fixed;
+    top: 2rem;
+    left:60%;
+    background:#ffe0e0;
+    padding:10px;
+    border-radius: 10px;
+    z-index: 9;
+  }
+  .close{
+    left: -60%;
+  }
+}
+