From 2e15220846fab1c3e94ce8788e4ca7f975f53103 Mon Sep 17 00:00:00 2001 From: MohammedAlghazali Date: Fri, 12 Jun 2020 22:07:25 +0300 Subject: [PATCH] make style for search page relates #160 --- client/package-lock.json | 8 + client/package.json | 1 + client/src/containers/SearchPage/index.js | 178 +++++++++++----- client/src/containers/SearchPage/style.css | 235 ++++++++++++++++----- 4 files changed, 317 insertions(+), 105 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 892659f7..16c618bb 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -11797,6 +11797,14 @@ "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz", "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==" }, + "react-icons": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz", + "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==", + "requires": { + "camelcase": "^5.0.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/client/package.json b/client/package.json index f8fc9ace..e72af59c 100644 --- a/client/package.json +++ b/client/package.json @@ -27,6 +27,7 @@ "react-datepicker": "^2.16.0", "react-dom": "^16.13.1", "react-ga": "^2.7.0", + "react-icons": "^3.10.0", "react-items-carousel": "^2.8.0", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", diff --git a/client/src/containers/SearchPage/index.js b/client/src/containers/SearchPage/index.js index 339b261f..d92c1067 100644 --- a/client/src/containers/SearchPage/index.js +++ b/client/src/containers/SearchPage/index.js @@ -1,8 +1,12 @@ import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; import { Select, Pagination, Empty, notification } from 'antd'; +import { FaGraduationCap } from 'react-icons/fa'; +import { AiFillMail } from 'react-icons/ai'; import './style.css'; import UserContainer from '../../components/UserContainer'; import logo from '../../assets/images/logo.png'; +import leftSvg from '../../assets/images/Group 2423.svg'; const axios = require('axios'); @@ -196,6 +200,7 @@ class SearchPage extends Component { displayStudent: fillterdStudent, showCohorts: false, ...filterStudentPagination, + studentProjectData: [], }); } }; @@ -457,7 +462,11 @@ class SearchPage extends Component { -
+
{total !== 0 ? ( <> {!showProjectSection // 1- show Student Section @@ -466,81 +475,137 @@ class SearchPage extends Component { listCohorts.map((cohort) => (
- {cohort.name} + {cohort.name}

- Cohort Name: {cohort.name}{' '} + Cohort Name:{' '} + + {cohort.name} +

{cohort.description}

- - Github Page - +
+ + Github Page + +
)) : // B- show students in student section listStudents.map((student) => ( -
-
+
+
{student.name}
-
-

{student.name}

+
+

+ + {student.name} + +

+
+   +

+ + {this.getCohortNameFromId( + student, + allCohortData + )} + +

+
+
+  

{student.email}

+
+ {studentProjectData.length ? ( +
+

Projects:

+ {displayStudent.length === 1 && + studentProjectData.map((project, index) => ( +

+ {`${index + 1}-${project.project_type}`}{' '} + Project:   + + {project.name} + +

+ ))} +
+ ) : null} +
+ - {studentProjectData.length ? ( - <> - {displayStudent.length === 1 && - studentProjectData.map((project) => ( -
- {project.project_type} Project:{' '} - {project.name} -
- ))} - - ) : null} -

- Cohort Name - {this.getCohortNameFromId(student, allCohortData)} -

-

{student.email}

- - Github Page -
)) : // 2- show Project Section listProjects.map((project) => ( -
-
+
+
{project.name}
-
-

{project.name}

+
+ + {project.name} + +

{project.name}

+

{project.project_type}

+
+ -
{project.project_type}
- - Website Page - - - Github Page -
))} @@ -563,6 +628,7 @@ class SearchPage extends Component { )}
+ background
); diff --git a/client/src/containers/SearchPage/style.css b/client/src/containers/SearchPage/style.css index ca458e45..e8ffaf9e 100644 --- a/client/src/containers/SearchPage/style.css +++ b/client/src/containers/SearchPage/style.css @@ -1,15 +1,16 @@ .search-page { + margin: 120px 8% 0; display: flex; - margin-top: 120px; - margin-left: 150px; + flex-wrap: wrap; + justify-content: space-around; } .search-form { - width: 300px; border: 1px solid #707070; box-shadow: var(--card-shadow); border-radius: 0px 0px 5px 5px; text-align: left; + width: 25%; height: 400px; } @@ -43,51 +44,67 @@ } .display-cohort { - margin-left: 45px; - width: 720px; + width: 65%; } .cohort { display: flex; height: 120px; - box-shadow: 0px 0px 17px #AFAFAF29; + box-shadow: 0px 0px 17px #afafaf29; margin-bottom: 15px; align-items: center; border-radius: 5px; border-right: 6px solid var(--main-color); - padding-right: 30px; } .cohort-img img { - width: 75px; + max-width: 100%; border-radius: 50%; + max-height: 100%; } .cohort-img { - padding: 22px 30px; - flex: 0.5; + display: flex; + align-items: center; + justify-content: center; + padding: 10px 20px; + width: 20%; + height: 100%; } .cohort-name { font-weight: bold; } +.cohort-name a { + color: var(--main-color); +} + .cohort-details { padding: 22px 0; - flex: 1.5; + width: 50%; } -.cohort a { - width: 220px; - margin-left: 25px; - padding: 11px 0; +.cohort-link { + width: 30%; +} + +.cohort .cohort-link a { + width: 80%; + display: inline-block; + padding: 9px; background-color: var(--main-color); - color: white; - box-shadow: 0px 3px 6px #AFAFAF29; + color: var(--main-white); + box-shadow: 0px 3px 6px #afafaf29; border-radius: 5px; } -.show, .hide { +.cohort .small-font a { + margin: 6px 0; +} + +.show, +.hide { padding: 0 30px; height: 50%; } @@ -102,64 +119,70 @@ color: #d9d9d9; } -.student { +.student-details .student-name a { + color: var(--content-blue-green); + font-weight: bold; +} + +.student-details .student-cohort-name, +.student-details .student-email { display: flex; - height: 120px; - box-shadow: 0px 0px 17px #AFAFAF29; - margin-bottom: 15px; align-items: center; - border-radius: 5px; - border-right: 6px solid var(--main-color); - padding-right: 30px; } -.student a { - width: 220px; - margin-left: 25px; - padding: 11px 0; - background-color: #E8505B; - color: white; - box-shadow: 0px 3px 6px #AFAFAF29; - border-radius: 5px; +.student-details .student-projects { + padding: 10px 0 0 17px; } -.student-img img { - width: 75px; - border-radius: 50%; +.student-details .student-projects h3 { + margin: 0; } -.student-img { - padding: 22px 30px; - flex: 0.5; +.student-details .student-projects h4 { + padding-left: 10px; +} + +.one-student { + height: auto; +} +.student-details .student-cohort-name svg { + color: var(--main-color); +} + +.student-details .student-cohort-name a { + color: var(--pagination-color); +} + +.student-details .student-email svg { + color: var(--main-color); } .student-details { - padding: 22px 0; - flex: 1.5; + text-align: left; } -.student-name { - font-weight: bold; +.student-details h4 { + margin-bottom: 0; } .project { display: flex; height: 120px; - box-shadow: 0px 0px 17px #AFAFAF29; + box-shadow: 0px 0px 17px #afafaf29; margin-bottom: 15px; align-items: center; border-radius: 5px; - border-right: 6px solid #E8505B; + border-right: 6px solid var(--main-color); padding-right: 30px; } -.project a { +.project .project-link { width: 220px; margin-left: 25px; padding: 11px 0; - background-color: #E8505B; - color: white; - box-shadow: 0px 3px 6px #AFAFAF29; + background-color: var(--main-color); + color: var(--main-white); + box-shadow: 0px 3px 6px #afafaf29; border-radius: 5px; } @@ -181,3 +204,117 @@ .project-name { font-weight: bold; } + +.search-svg { + position: absolute; + left: 2%; + bottom: 2%; + height: 20%; +} + +@media (max-width: 1200px) { + .search-page { + margin: 120px 4% 0; + } + .cohort { + font-size: 13px; + } +} + +@media (max-width: 992px) { + .display-cohort { + width: 58%; + } + .search-form { + width: 32%; + } + .cohort { + font-size: 13px; + } + .cohort .small-font { + font-size: 12px; + } +} + +@media (max-width: 768px) { + .display-cohort { + width: 100%; + } + .search-form { + display: flex; + flex-wrap: wrap; + width: 100%; + height: 205px; + margin-bottom: 30px; + } + .search-form .show { + width: 50%; + height: 100%; + border-right: 0; + border-top: 6px solid var(--main-color); + } + .search-form .hide { + width: 50%; + height: 100%; + } + .search-form .ant-select:last-child { + margin-bottom: 20px; + } +} + +@media (max-width: 576px) { + .search-page { + margin: 120px 10% 0; + } + .display-cohort { + width: 100%; + } + .search-form { + width: 100%; + height: auto; + margin-bottom: 30px; + } + .search-form .show { + width: 100%; + height: auto; + border-top: 0; + border-right: 6px solid var(--main-color); + } + .search-form .hide { + width: 100%; + height: auto; + } + .search-form .ant-select:last-child { + margin-bottom: 20px; + } + .one-student { + flex-wrap: wrap; + padding: 20px 30px; + } + + .one-student .cohort-img, + .one-student .student-details, + .one-student .cohort-link { + width: 100%; + } + + .one-student .student-details { + margin: 0 auto; + width: 80%; + } + + .search-svg { + display: none; + } + .student-details .student-email h4 { + font-size: 9px; + } + + .cohort .cohort-link { + font-size: 8px; + } + + .search-project .cohort-img { + width: 30%; + } +}