make style responsive

relates #117
GSG-G8 · Jun 14, 2020 · f4a1a0c · f4a1a0c
1 parent 0c5ac3b
commit f4a1a0c
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 64 deletions.
diff --git a/client/src/app/style.css b/client/src/app/style.css
@@ -2,7 +2,6 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  transition: 0.3s;
 }
 
 :root {
@@ -25,7 +24,6 @@ html {
 
 body {
   font-family: var(--main-font);
-  overflow: hidden;
 }
 
 .App {
@@ -42,7 +40,7 @@ li {
 
 .pagination {
   position: absolute;
-  bottom: 4%;
+  bottom: 1%;
   left: 50%;
   transform: translate(-50%, -5%);
 }

diff --git a/client/src/components/AdminContainer/style.css b/client/src/components/AdminContainer/style.css
@@ -136,6 +136,11 @@
   .admin-side {
     justify-content: space-between;
     align-items: center;
+    height: 55px;
+  }
+
+  .admin-content .ant-list-items {
+    margin-top: 5px;
   }
 
   .admin-menu, .admin-side-btn {
@@ -182,6 +187,10 @@
   .admin-container-side {
     top: 67px;
   }
+  .admin-content .pagination {
+    position: initial;
+    transform: translate(0);
+  }
 }
 
 @media screen and (min-width: 762px) and (max-width: 1104px) {
@@ -269,17 +278,3 @@
     width: 156px;
   }
 }
-
-/* @media screen and (max-width: 900px) {
-  .admin-container {
-    display: block;
-  }
-  
-.admin-side {
-  width: 100%;
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  height: auto;
-}
-} */
diff --git a/client/src/components/OverviewComponent/style.css b/client/src/components/OverviewComponent/style.css
@@ -95,7 +95,10 @@
     } 
 
     .overview-container .right-part {
-        background-color: var(--main-white);
+        background-color: var(--main-color);
+        width: 65%!important;
+        border-radius: 0 0 259px 0;
+        box-shadow: 1px 1px 12px #3A5A6E;
     }
 
     .overview-container {
@@ -127,6 +130,10 @@
     .overview-container .container-content .ant-btn {
         margin-top: 14px;
     }
+    /* .overview-container .left-part {
+        width: 50%;
+        background-color: var(--main-color);
+    } */
 }
 
 @media screen and (max-width: 768px) {

diff --git a/client/src/components/UserContainer/style.css b/client/src/components/UserContainer/style.css
@@ -324,7 +324,7 @@
 
   .right-nav-list {
     font-size: 0.9em;
-    top: 11%;
+    top: 50%;
     right: 10px;
   }
 

diff --git a/client/src/containers/CohortsAlumniPage/styles.css b/client/src/containers/CohortsAlumniPage/styles.css
@@ -31,7 +31,7 @@
 }
 
 .child-container {
-    margin-top: 135px;
+    padding-top: 135px;
     margin-right: 60px;
 
 }

diff --git a/client/src/containers/ContactUsPage/index.js b/client/src/containers/ContactUsPage/index.js
@@ -24,9 +24,9 @@ const ContactUS = () => {
         <div className="img-container">
           <img src={contactPhoto} alt="contact" />
         </div>
-        <div className="content-container">
+        <div className="contact-page-container">
           <div className="content-parent">
-            <div className="child-container">
+            <div className="contact-child-container">
               <h4>FOLLOW US</h4>
               <p>Gaza Sky Geeks</p>
               <div className="icons-container">
@@ -61,7 +61,7 @@ const ContactUS = () => {
                 </a>
               </div>
             </div>
-            <div className="child-container">
+            <div className="contact-child-container">
               <h4>CONTACT US</h4>
               <p>Phone: +970 8282 6331</p>
               <p>
@@ -72,7 +72,7 @@ const ContactUS = () => {
                 </a>
               </p>
             </div>
-            <div className="child-container">
+            <div className="contact-child-container">
               <h4>Sections of the site</h4>
               <div className="section-container-1">
                 <Link to={ROUTES.HOME_PAGE}>

diff --git a/client/src/containers/ContactUsPage/style.css b/client/src/containers/ContactUsPage/style.css
@@ -1,7 +1,7 @@
 .contact-container {
-  display: flex;
-  width: 100vw;
-  height: 100vh;
+    display: flex;
+    width: 100vw;
+    height: 100vh;
 }
 
 .img-container {
@@ -10,89 +10,89 @@
 }
 
 .img-container img {
-  height: 110vh;
-  width: 32rem;
+    height: 100vh;
+    width: 32rem;
 }
 
-.contact-container .content-container {
+.contact-container .contact-page-container {
     width: 50%;
-    margin-top: 120px;
+    padding-top: 120px;
     text-align: left;
     margin-left: 5rem;
 }
 
-.contact-container .content-container h4 {
+.contact-container .contact-page-container h4 {
     font-weight: bold;
     color: var(--main-color);
 }
 
-.child-container .icons-container {
+.contact-child-container .icons-container {
     display: flex;
     justify-content: space-between;
     width: 18%;
 }
 
-.child-container .icons-container :hover {
+.contact-child-container .icons-container :hover {
     color: var(--main-color);
 }
 
-.child-container .icons-container svg {
+.contact-child-container .icons-container svg {
     color: var(--content-blue-green);
 }
 
-.content-container .child-container {
+.contact-page-container .contact-child-container {
     margin-top: 3rem;
 }
 
-.content-container .child-container p {
+.contact-page-container .contact-child-container p {
     color: var(--content-blue-green);
 }
 
-.child-container .section-container-1 {
+.contact-child-container .section-container-1 {
     display: flex;
     justify-content: space-between;
     width: 130px;
     color: var(--content-blue-green) ;
 }
 
-.child-container .section-container-1  p:hover {
+.contact-child-container .section-container-1  p:hover {
     color: var(--main-color);
 }
 
-.child-container .section-container-2 {
+.contact-child-container .section-container-2 {
     display: flex;
     justify-content: space-between;
     width: 184px;
 }
 
-.child-container .section-container-2  p:hover {
+.contact-child-container .section-container-2  p:hover {
     color: var(--main-color);
 }
 
-.child-container .text:hover {
+.contact-child-container .text:hover {
     color: var(--main-color);
 }
 
-.content-container .rights {
+.contact-page-container .rights {
     position: absolute;
     bottom: 1.66rem;
     width: 50%;
 }
 
-.content-container .end-line {
+.contact-page-container .end-line {
     border-bottom: 1px dashed var(--main-color);
     width: 80%;
 }
 
-.content-container .copy-right {
+.contact-page-container .copy-right {
     font-weight: bold;
     color: var(--content-blue-green) ;
     font-size: 12px;
     margin-top: 20px;
 }
 
 @media screen and (min-width: 769px) and (max-width: 1024px) {
-    .child-container .icons-container {
+    .contact-child-container .icons-container {
         width: 24%;
     }
 }
@@ -112,38 +112,42 @@
         top: 0px;
         z-index: -1;
     }
+
 }
 
 @media screen and (max-width: 768px) {
     .contact-container {
         display: block;
     }
 
-    .contact-container .content-container {
+    .contact-container .contact-page-container {
         width: 89%;
-        margin-top: 20px;
+        padding-top: 10px;
     }
 
-    .contact-container .content-container .content-parent {
+    .contact-container .contact-page-container .content-parent {
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
         width: 100%;
     }
 
-    .contact-container .content-container .content-parent .child-container {
+    .contact-container .contact-page-container .content-parent .contact-child-container {
         width: 200px;
     }
 
-    .child-container .icons-container {
+    .contact-child-container .icons-container {
         width: 56%;
     }
 
     .contact-container .img-container {
-        width: 100%;
         height: 39vh;
+        background-color: var(--main-color);
+        width: 65%!important;
+        border-radius: 0 0 259px 0;
+        box-shadow: 1px 1px 12px #3A5A6E;
+        text-align: left;
         padding-left: 5rem;
-        background-color: var(--main-white);
     }
 
     .contact-container .img-container img {
@@ -152,15 +156,15 @@
         margin-top: 10rem;
     }
 
-    .content-container .rights {
+    .contact-page-container.rights {
         position: absolute;
         bottom: 25px;
         width: 100%;
     }
 }
 
 @media screen and (min-width: 488px) and (max-width: 677px) {
-    .contact-container .content-container .content-parent {
+    .contact-container .contact-page-container .content-parent {
         width: 92%;
     }
 }
@@ -185,27 +189,27 @@
         height: 86%;
     }
 
-    .contact-container .content-container {
+    .contact-container .contact-page-container {
         margin-top: 10px;
     }
 
-    .content-container .child-container {
+    .contact-page-container .contact-child-container {
         margin-top: 20px;
     }
 }
 
 @media screen and (max-width: 360px) {
-    .content-container .child-container {
+    .contact-page-container .contact-child-container {
         font-size: 12px;
     }
 
-    .content-container .rights {
+    .contact-page-container .rights {
         position: absolute;
         bottom: 1px;
         width: 100%;
     }
 
-    .content-container .copy-right {
+    .contact-page-container .copy-right {
         font-weight: bold;
         color: var(--content-blue-green);
         font-size: 10px;

diff --git a/client/src/containers/SearchPage/index.js b/client/src/containers/SearchPage/index.js
@@ -591,7 +591,6 @@ class SearchPage extends Component {
                             >
                               {project.name}
                             </Link>
-                            <h3 className="cohort-name">{project.name} </h3>
                             <h4>{project.project_type}</h4>
                           </div>
                           <div className="cohort-link small-font">

diff --git a/client/src/containers/SearchPage/style.css b/client/src/containers/SearchPage/style.css
@@ -1,5 +1,5 @@
 .search-page {
-  margin: 120px 8% 0;
+  padding: 120px 8% 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
@@ -214,7 +214,7 @@
 
 @media (max-width: 1200px) {
   .search-page {
-    margin: 120px 4% 0;
+    padding: 120px 4% 0;
   }
   .cohort {
     font-size: 13px;
@@ -273,7 +273,7 @@
 
 @media (max-width: 576px) {
   .search-page {
-    margin: 120px 10% 0;
+    padding: 120px 10% 0;
   }
   .display-cohort {
     width: 100%;