From 1e63f65511863353dc61f458fa3f76bb9c1c257a Mon Sep 17 00:00:00 2001 From: lauty95 Date: Thu, 4 Nov 2021 12:06:22 -0300 Subject: [PATCH 1/6] css | add Filter styles --- scientia/src/components/Cart/Cart.js | 1 - scientia/src/components/Details/Details.js | 216 ++--- scientia/src/components/Home/Home.css | 24 +- scientia/src/components/Home/Home.js | 9 +- scientia/src/components/Payment/payment.jsx | 261 +++--- .../src/components/Payment/tarjeta.module.css | 18 + scientia/src/components/Search/Filtro.jsx | 30 + scientia/src/components/Search/SearchBar.css | 69 +- scientia/src/components/Search/SearchBar.js | 846 +++++++++--------- 9 files changed, 762 insertions(+), 712 deletions(-) create mode 100644 scientia/src/components/Search/Filtro.jsx diff --git a/scientia/src/components/Cart/Cart.js b/scientia/src/components/Cart/Cart.js index e6e30df3..d17c443c 100644 --- a/scientia/src/components/Cart/Cart.js +++ b/scientia/src/components/Cart/Cart.js @@ -240,7 +240,6 @@ const handleClickVariantWrongRemovedGift = () => { return (
-

Shopping Cart

diff --git a/scientia/src/components/Details/Details.js b/scientia/src/components/Details/Details.js index 12f51fd6..b7b721e0 100644 --- a/scientia/src/components/Details/Details.js +++ b/scientia/src/components/Details/Details.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import { connect } from 'react-redux' import Card from '@mui/material/Card'; -import {addCart, getCoursesReviewsById,addCartLogged} from '../../actions/actions' +import { addCart, getCoursesReviewsById, addCartLogged } from '../../actions/actions' import CardHeader from '@mui/material/CardHeader'; import CardMedia from '@mui/material/CardMedia'; import CardContent from '@mui/material/CardContent'; @@ -68,14 +68,14 @@ function Details({ React.useEffect(() => { getCoursesReviewsById(id); - + }, []); const hadlePlayerDemo = () => { setOpen(true); }; - + const handleExpandClick = () => { setExpanded(!expanded); @@ -118,122 +118,122 @@ function Details({ - //extraer el videoID para la DEMO: - if(urlVideo.urlVideo && urlVideo.urlVideo.toLowerCase().includes('youtube')){ - var videoID = urlVideo.length === 0 ? "" : urlVideo.urlVideo.match(/(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/user\/\S+|\/ytscreeningroom\?v=))([\w\-]{10,12})\b/)[1] - } else { - var videoID = '' - } + //extraer el videoID para la DEMO: + if (urlVideo.urlVideo && urlVideo.urlVideo.toLowerCase().includes('youtube')) { + var videoID = urlVideo.length === 0 ? "" : urlVideo.urlVideo.match(/(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=|\/user\/\S+|\/ytscreeningroom\?v=))([\w\-]{10,12})\b/)[1] + } else { + var videoID = '' + } return (
-
-

Details

-
-
- - - - validarCart(id)} /> - - - } - title={name && name.toUpperCase()} - subheader={`Price: $${price - (percentageDiscount / 100) * price}`} - /> - - +
+

Details

+
+
+ + + + validarCart(id)} /> + + + } + title={name && name.toUpperCase()} + subheader={`Price: $${price - (percentageDiscount / 100) * price}`} + /> + + +
+ + setOpen(false)} + /> +
+ + CATEGORY:{" "} + {categories?.toUpperCase() || "No Categoty Defined"} + +

+ + LEVEL: {level?.toUpperCase() || "No Level Defined"} + +

+ + LANGUAGE: {" "} + {language?.toUpperCase() || "No Language Defined "} + +

+ + DATE: + {date ? date.slice(0, 10) : "NO DATE"} + +

+ +

+ + DESCRIPTION: + {description ? description : "NO INFO"} +

+

+ {solds > 100 ? ( // only for testing (solds > 100) + disc + ) : null} + {solds > 20 && solds < 100 ? ( // only for testing (solds > 20 && solds < 100) + disc + ) : null} + {numbersOfDiscounts > 0 ? ( + disc + ) : null} + +

+ +

- - setOpen(false)} - />
- - CATEGORY:{" "} - {categories?.toUpperCase() || "No Categoty Defined"} -

- - LEVEL: {level?.toUpperCase() || "No Level Defined"} - -

- - LANGUAGE: {" "} - {language?.toUpperCase() || "No Language Defined "} - -

- - DATE: - {date ? date : "NO DATE"} - -

- -

- - DESCRIPTION: - {description ? description : "NO INFO"} -

-

- {solds > 100 ? ( // only for testing (solds > 100) - disc - ) : null} - {solds > 20 && solds < 100 ? ( // only for testing (solds > 20 && solds < 100) - disc - ) : null} - {numbersOfDiscounts > 0 ? ( - disc - ) : null} - -

- -

-
- -
-

- - -

REVIEWS

- - - - - - - -
+ + +

REVIEWS

+ + + + + + + +
); } function mapStateToProps(state) { - return { - details: state.rootReducer.courseDetails, - cart : state.rootReducer.cart, - login: state.rootReducer.login, - userInfo: state.rootReducer.userInfo, - urlVideo: state.rootReducer.coursesReviews - } + return { + details: state.rootReducer.courseDetails, + cart: state.rootReducer.cart, + login: state.rootReducer.login, + userInfo: state.rootReducer.userInfo, + urlVideo: state.rootReducer.coursesReviews + } } -export default connect(mapStateToProps, {addCart,getCoursesReviewsById,addCartLogged})(Details) \ No newline at end of file +export default connect(mapStateToProps, { addCart, getCoursesReviewsById, addCartLogged })(Details) \ No newline at end of file diff --git a/scientia/src/components/Home/Home.css b/scientia/src/components/Home/Home.css index 2db0badf..becf44d5 100644 --- a/scientia/src/components/Home/Home.css +++ b/scientia/src/components/Home/Home.css @@ -6,19 +6,37 @@ .title-home-div { display: flex; align-items: center; - background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(52,58,64,1) 100%); + background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%); color: aliceblue; height: 120px; margin-bottom: 40px; } .title-home-div h1 { - padding-left: 25%; + padding-left: 20%; font-size: 50px; color: #fff; } - .mensaje { z-index: 100 !important; +} + +.boton-filtrado { + display: none; +} + +.barra-filtrado { + display: block; +} + +@media (max-width: 600px) { + .boton-filtrado { + display: flex; +justify-content: center; + } + + .barra-filtrado { + display: none; + } } \ No newline at end of file diff --git a/scientia/src/components/Home/Home.js b/scientia/src/components/Home/Home.js index 762b1397..84fc9034 100644 --- a/scientia/src/components/Home/Home.js +++ b/scientia/src/components/Home/Home.js @@ -1,5 +1,5 @@ - import React, { useEffect } from "react"; +import Filtro from "../Search/Filtro"; import SearchBar from "../Search/SearchBar"; import CourseList from "../../CourseList/CourseList"; import { getAllCourses, getGenresCourses, getUsers, getUserInfo, getCart, saludo } from '../../actions/actions' @@ -44,8 +44,13 @@ export function Home({ user, getUserInfo, getAllCourses, getGenresCourses, getCa

Home

+
+ +
- +
+ +
diff --git a/scientia/src/components/Payment/payment.jsx b/scientia/src/components/Payment/payment.jsx index b073b937..5daf9e4d 100644 --- a/scientia/src/components/Payment/payment.jsx +++ b/scientia/src/components/Payment/payment.jsx @@ -64,7 +64,7 @@ function MercadoPagoForm(props) { } const resultPayment = useMercadoPago(props.cartToPay, props.user.email, props.gift); - + const handleInputChange = (e) => { setState({ ...state, @@ -90,136 +90,141 @@ function MercadoPagoForm(props) { }; return ( -
- + <> +
+

Shopping Cart

+
+
+ -
-
- -
-
- - - -
-
- - -
-
- - -
-
- -
-
- -
-
- -
- {showMsg ? - resultPayment ? -

{msg}

+ +
+ +
+
+ + + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+ {showMsg ? + resultPayment ? +

{msg}

+ : + errorPago() : - errorPago() - : - <> + <> + } +
+ { + + + Procesando el pago + + {mensajeModel()} + + { + (msg !== '') && + } + + } - - { - - - Procesando el pago - - {mensajeModel()} - - { - (msg !== '') && - } - - - } - { - redir && - } -
+ { + redir && + } +
+ ); } diff --git a/scientia/src/components/Payment/tarjeta.module.css b/scientia/src/components/Payment/tarjeta.module.css index 0e19eddb..00598513 100644 --- a/scientia/src/components/Payment/tarjeta.module.css +++ b/scientia/src/components/Payment/tarjeta.module.css @@ -23,6 +23,7 @@ outline: none; font-weight: 300; } + .button { width: 100%; padding: 10px; @@ -35,16 +36,33 @@ text-transform: uppercase; letter-spacing: 5px; } + .progress-bar { width: 100%; padding: 5px; } +.titlePayDiv { + display: flex; + align-items: center; + background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%); + color: aliceblue; + height: 120px; + margin-bottom: 40px; +} + +.titlePayDiv h1 { + padding-left: 25%; + font-size: 50px; + color: #fff; +} + @media screen and (min-width: 767px) { .container { width: 40%; margin: auto; } + .formControl { display: flex; } diff --git a/scientia/src/components/Search/Filtro.jsx b/scientia/src/components/Search/Filtro.jsx new file mode 100644 index 00000000..339f3994 --- /dev/null +++ b/scientia/src/components/Search/Filtro.jsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react' +import SearchBar from './SearchBar'; +import { Button, Offcanvas } from 'react-bootstrap' + +function Filtro() { + + const [show, setShow] = useState(false); + + const handleClose = () => setShow(false); + const handleShow = () => setShow(true); + + return ( + <> + + + + + Filters + + + + + + + ) +} + +export default Filtro \ No newline at end of file diff --git a/scientia/src/components/Search/SearchBar.css b/scientia/src/components/Search/SearchBar.css index a2e41d52..d6a4d5fa 100644 --- a/scientia/src/components/Search/SearchBar.css +++ b/scientia/src/components/Search/SearchBar.css @@ -1,57 +1,30 @@ .wrapper { margin-top: 10px; + margin-left: 25px; width: 290px; float: left; } - .wrapper .search { - border: 1px solid grey; - border-radius: 20px; - height: 40px; - width: 300px; - margin-bottom: 20px; - padding: 2px 23px 2px 30px; - outline: 0; - background-color: #f5f5f5; - border: 1.5px solid #585c5b; - } - - .wrapper .search:hover { - border: 1.5px solid #960064; - background-color: white; - } - - .wrapper .search-icon { - border: 1px solid #960064; - border-radius: 5px; - height: 30px; - margin-bottom: 20px; - margin-left: 35px; - padding: 2px; - outline: 0; - background-color: #f5f5f5; - width: 90px; - } +.wrapper .search { + border-radius: 5px; + height: 40px; + width: 300px; + margin-bottom: 20px; + padding: 2px 23px 2px 30px; + outline: 0; + border: 1.5px solid #585c5b; +} - .wrapper .search-icon:hover { - border: 1.5px solid #960064; - background-color: whitesmoke; - } +.wrapper .search:hover { + border: 1.5px solid black; +} - .wrapper .clearFilter-button-div { - display: flex; - justify-content: center; - align-items: center; - } +.wrapper .search-icon { + margin-left: 35px; +} - .wrapper .clearFilter-button { - border: 1px solid #960064; - border-radius: 5px; - height: 40px; - margin-bottom: 20px; - margin-left: 5px; - padding: 2px; - outline: 0; - background-color: #f5f5f5; - width: 140px; - } +.wrapper .clearFilter-button-div { + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/scientia/src/components/Search/SearchBar.js b/scientia/src/components/Search/SearchBar.js index 59d8cae3..40cc847c 100644 --- a/scientia/src/components/Search/SearchBar.js +++ b/scientia/src/components/Search/SearchBar.js @@ -1,5 +1,4 @@ - -import {React, useState, useEffect} from 'react' +import { React, useState, useEffect } from 'react' import { connect } from 'react-redux' import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -15,10 +14,11 @@ import Radio from '@mui/material/Radio'; import Rating from '@mui/material/Rating'; import { searchByName, getAllCourses, getFilteredCourses, orderBy } from '../../actions/actions' import './SearchBar.css' +import { Button } from 'reactstrap'; + +function SearchBar({ coursesByGenre, allCourses, searchByName, getAllCourses, getFilteredCourses, orderBy }) { -function SearchBar({coursesByGenre,allCourses, searchByName, getAllCourses, getFilteredCourses, orderBy}) { - const [checked, setChecked] = useState({ level1: false, @@ -37,31 +37,31 @@ function SearchBar({coursesByGenre,allCourses, searchByName, getAllCourses, getF ranking5: false, category: "all" }); - - + + const handleChangeCheck = (event) => { - setChecked({...checked, [event.target.name]: event.target.checked}); + setChecked({ ...checked, [event.target.name]: event.target.checked }); }; const handleChangeCategory = (event) => { - setChecked({...checked, ["category"]: event.target.name}); + setChecked({ ...checked, ["category"]: event.target.name }); }; - + useEffect(() => { getFilteredCourses(checked) }, [checked]) const [expanded, setExpanded] = useState(false); - + const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded ? panel : false); }; - + const [input, setInput] = useState({ - buscar: '' - }) + buscar: '' + }) const [show, setShow] = useState(false) const handleClose = () => setShow(false) @@ -77,7 +77,7 @@ function SearchBar({coursesByGenre,allCourses, searchByName, getAllCourses, getF const handleSelect2 = (e) => { orderBy(e.target.value) -} + } const handleOnClick = () => { if (input.buscar.length < 3) { @@ -90,7 +90,8 @@ function SearchBar({coursesByGenre,allCourses, searchByName, getAllCourses, getF } const handleCleanFilters = () => { - setChecked( {level1: false, + setChecked({ + level1: false, level2: false, level3: false, price1: false, @@ -104,439 +105,440 @@ function SearchBar({coursesByGenre,allCourses, searchByName, getAllCourses, getF ranking3: false, ranking4: false, ranking5: false, - category: "all"} ) + category: "all" + }) } - return ( -
- - - -

-

-

FILTER BY:

-

+ return ( +
+ + + +

+

+

FILTER BY:

+

-
- + + } + aria-controls="panel1bh-content" + id="panel1bh-header" > - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - CATEGORIES - - - - - - } - /> - {coursesByGenre && - coursesByGenre.map((g) => ( - } - /> - ))} - - - - - + CATEGORIES + + + + + + } + /> + {coursesByGenre && + coursesByGenre.map((g) => ( + } + /> + ))} + + + + + + } + aria-controls="panel1bh-content" + id="panel1bh-header" > - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - LEVEL - - - - - - - } - label="BEGINNER" - value="beginner" - /> - - } - label="MIDDLE" - value="middle" - /> - - } - label="EXPERT" - value="expert" - /> - - - - - + LEVEL + + + + + + + } + label="BEGINNER" + value="beginner" + /> + + } + label="MIDDLE" + value="middle" + /> + + } + label="EXPERT" + value="expert" + /> + + + + + + } + aria-controls="panel2bh-content" + id="panel2bh-header" > - } - aria-controls="panel2bh-content" - id="panel2bh-header" - > - - PRICE - - - - - - - } - label="FREE" - value="free" - /> - - } - label="OFFERS" - value="offers" - /> - - } - label="PAID" - value="paid" - /> - - - - - + PRICE + + + + + + + } + label="FREE" + value="free" + /> + + } + label="OFFERS" + value="offers" + /> + + } + label="PAID" + value="paid" + /> + + + + + + } + aria-controls="panel3bh-content" + id="panel3bh-header" > - } - aria-controls="panel3bh-content" - id="panel3bh-header" - > - - LANGUAJE - - - - - - - } - label="SPANISH" - value="spanish" - /> - - } - label="ENGLISH" - value="english" - /> - - } - label="OTHERS" - value="others" - /> - - - - - + LANGUAJE + + + + + + + } + label="SPANISH" + value="spanish" + /> + + } + label="ENGLISH" + value="english" + /> + + } + label="OTHERS" + value="others" + /> + + + + + + } + aria-controls="panel4bh-content" + id="panel1bh-header" > - } - aria-controls="panel4bh-content" - id="panel1bh-header" - > - - RANKING - - - - - - + RANKING + + + + + + - } - label={} - /> - + } + label={} + /> + - } - label={} - /> - - } - label={} - /> - - } - label={} - /> - - } - label={} - /> - - - - -

-

COURSES FOUNDED: ({allCourses && allCourses.length > 0 ? allCourses.length : 0})

+ name="ranking2" + onChange={handleChangeCheck} + value={2} + /> + } + label={} + /> + + } + label={} + /> + + } + label={} + /> + + } + label={} + /> + + + + +

+

COURSES FOUNDED: ({allCourses && allCourses.length > 0 ? allCourses.length : 0})

-

-
- +

+
+
-

+

SORT BY:



- {/* + } + aria-controls="panel1bh-content" + id="panel1bh-header" > - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - DATE - - - - - - } - /> - } - /> - - - - */} - + DATE + + + + + + } + /> + } + /> + + + + */} + + } + aria-controls="panel1bh-content" + id="panel1bh-header" > - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - RATING - - - - - - } - /> - } - /> - - - - - + RATING + + + + + + } + /> + } + /> + + + + + + } + aria-controls="panel1bh-content" + id="panel1bh-header" > - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - ALPHABETIC - - - - - - } - /> - } - /> - - - - - + ALPHABETIC + + + + + + } + /> + } + /> + + + + + + } + aria-controls="panel1bh-content" + id="panel1bh-header" > - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - PRICE - - - - - - } - /> - } - /> - - - - - + PRICE + + + + + + } + /> + } + /> + + + + + + } + aria-controls="panel1bh-content" + id="panel1bh-header" > - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - SOLDS - - - - - - } - /> - } - /> - - - - -
+ + SOLDS + + + + + + } + /> + } + /> + + + +
- - ); +
+ + ); } const mapStateToProps = (state) => { return { - coursesByGenre: state.rootReducer.coursesByGenre, - allCourses: state.rootReducer.allCourses + coursesByGenre: state.rootReducer.coursesByGenre, + allCourses: state.rootReducer.allCourses } } -export default connect(mapStateToProps, { searchByName, getAllCourses,getFilteredCourses, orderBy })(SearchBar) \ No newline at end of file +export default connect(mapStateToProps, { searchByName, getAllCourses, getFilteredCourses, orderBy })(SearchBar) \ No newline at end of file From 6d0c23a828a4e5265288dceab590a55157b2b15f Mon Sep 17 00:00:00 2001 From: lauty95 Date: Thu, 4 Nov 2021 12:34:18 -0300 Subject: [PATCH 2/6] reparando esta #/#$ --- scientia/src/CourseList/CourseList.css | 15 +- scientia/src/CourseList/CourseList.js | 128 +++---- .../src/components/CourseCard/CourseCard.css | 343 ++++++++++-------- .../src/components/Pagination/Pagination.css | 16 +- 4 files changed, 280 insertions(+), 222 deletions(-) diff --git a/scientia/src/CourseList/CourseList.css b/scientia/src/CourseList/CourseList.css index 627e4a6e..7dc0bb1c 100644 --- a/scientia/src/CourseList/CourseList.css +++ b/scientia/src/CourseList/CourseList.css @@ -1,7 +1,20 @@ -.div-wrapper-course-list{ +.div-wrapper-course-list { margin-left: 20px; } .not-found-course img { width: 1000px; +} + +@media (max-width: 600px) { + + .div-container-course-list { + padding: 0; + margin: 0; + } + + .div-wrapper-course-list { + margin-left: 20px; + } + } \ No newline at end of file diff --git a/scientia/src/CourseList/CourseList.js b/scientia/src/CourseList/CourseList.js index d9060cbf..bc6f723b 100644 --- a/scientia/src/CourseList/CourseList.js +++ b/scientia/src/CourseList/CourseList.js @@ -1,11 +1,11 @@ -import React, {useState, useEffect} from 'react' +import React, { useState, useEffect } from 'react' import { connect } from 'react-redux' import CourseCard from '../components/CourseCard/CourseCard' import './CourseList.css' import Pagination from '../components/Pagination/Pagination' import noEncontrado from '../../src/assets/ahahah.gif' -function CourseList({ courses}) { +function CourseList({ courses }) { const [currentPage, setCurrentPage] = useState(1) @@ -18,14 +18,14 @@ function CourseList({ courses}) { var currentCards; //"cards" que se deben mostrar en la pantalla // en caso de que al buscar un curso en particular no encuentra ninguno - if(typeof courses === 'string'){ - currentCards = courses - }else { - currentCards = courses.slice(indexOfFirstCard, indexOfLastCard) //uso los indices para "fraccionar que cursos muestro" + if (typeof courses === 'string') { + currentCards = courses + } else { + currentCards = courses.slice(indexOfFirstCard, indexOfLastCard) //uso los indices para "fraccionar que cursos muestro" } const paginate = (pageNumber) => { - setCurrentPage(pageNumber) + setCurrentPage(pageNumber) } if (courses.length === 1) { @@ -33,73 +33,73 @@ function CourseList({ courses}) { arrCourse.push(courses) } -// React.useEffect(() => { - -// }, []) -if(typeof courses !== "undefined" && courses.length >= 1) { - var coursesTopSeller = courses.map((c) => c.solds).sort((a,b) => b - a).slice(0, 10) - var coursesBestSeller = courses.map((c) => c.solds).sort((a,b) => b - a).slice(11, 30) - var coursesGoodSeller = courses.map((c) => c.solds).sort((a,b) => b - a).slice(31, 60) - // var mostSolds = courses.sort((a,b) => a - b) - // console.log(mostSolds) - - // courses.filter((c) => ) -} + // React.useEffect(() => { + + // }, []) + if (typeof courses !== "undefined" && courses.length >= 1) { + var coursesTopSeller = courses.map((c) => c.solds).sort((a, b) => b - a).slice(0, 10) + var coursesBestSeller = courses.map((c) => c.solds).sort((a, b) => b - a).slice(11, 30) + var coursesGoodSeller = courses.map((c) => c.solds).sort((a, b) => b - a).slice(31, 60) + // var mostSolds = courses.sort((a,b) => a - b) + // console.log(mostSolds) + + // courses.filter((c) => ) + } return (
-
+
- { typeof currentCards === "string" || currentCards.length === 0? ( -
- -
- ) : - - typeof currentCards !== "undefined" && currentCards.length >= 1 ? ( - currentCards.map((course) => ( - + +
+ ) : + + typeof currentCards !== "undefined" && currentCards.length >= 1 ? ( + currentCards.map((course) => ( + + )) + ) + + : ( +
+

Cargando...

+
+ )} +
+ - )) - ) - - : ( -
-

Cargando...

- )} -
- -
) } const mapStateToProps = (state) => { - return { - courses: state.rootReducer.allCourses, - } + return { + courses: state.rootReducer.allCourses, + } } export default connect(mapStateToProps, null)(CourseList) diff --git a/scientia/src/components/CourseCard/CourseCard.css b/scientia/src/components/CourseCard/CourseCard.css index 9f08e3d4..66eafef8 100644 --- a/scientia/src/components/CourseCard/CourseCard.css +++ b/scientia/src/components/CourseCard/CourseCard.css @@ -1,12 +1,10 @@ .container-course { - - display: inline-flex; - border: 1px solid rgb(161, 154, 154); - margin: 10px; - padding: 10px; - width: 1500px; - height: 350px; - + display: inline-flex; + border: 1px solid rgb(161, 154, 154); + margin: 10px; + padding: 10px; + width: 1500px; + height: 350px; } .discount { @@ -16,185 +14,222 @@ } .detaiils-card-container { - width: 500px; - margin-right: 20px; - margin-left: 20px; - padding-top: 40px; + width: 500px; + margin-right: 20px; + margin-left: 20px; + padding-top: 40px; } .description-container { - padding-top: 40px; - width: fit-content; + padding-top: 40px; + width: fit-content; } .left-container { - width: fit-content; + width: fit-content; } .course-div-card { - width: fit-content; + width: fit-content; } .course-div-card img { - margin: 10px; - width: 350px; - height: 250px; + margin: 10px; + width: 350px; + height: 250px; } .button-container { - padding: 8px; - padding-top: 20px; - + padding: 8px; + padding-top: 20px; + } .info-cat-div { - display: flex; - + display: flex; + } .link { - width: 80px; - height: 30px; - margin-right: 5px; + width: 80px; + height: 30px; + margin-right: 5px; } .title-course { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .detaiils-card-container .confirm-button2 { - - appearance: none; - background-color: #a185e2; - border: 1px solid rgba(27, 31, 35, .15); - border-radius: 6px; - box-shadow: rgba(27, 31, 35, .1) 0 1px 0; - box-sizing: border-box; - color: rgb(14, 13, 13); - cursor: pointer; - display: inline-block; - font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - font-size: 14px; - font-weight: 600; - line-height: 20px; - padding: 6px 16px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: middle; - white-space: nowrap; - margin-right: 30px; - } - - .detaiils-card-container .confirm-button2:hover { - background-color: #6e57a3; - color: aliceblue; - } - - - .detaiils-card-container .cart-button2 { - - appearance: none; - background-color: #0ed11e; - border: 1px solid rgba(27, 31, 35, .15); - border-radius: 6px; - box-shadow: rgba(27, 31, 35, .1) 0 1px 0; - box-sizing: border-box; - color: rgb(14, 13, 13); - cursor: pointer; - display: inline-block; - font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - font-size: 14px; - font-weight: 600; - line-height: 20px; - padding: 6px 16px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: middle; - white-space: nowrap; - margin-right: 30px; - } - - .detaiils-card-container .cart-button2:hover { - background-color: #16811f; - color: aliceblue; - } + appearance: none; + background-color: #a185e2; + border: 1px solid rgba(27, 31, 35, .15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, .1) 0 1px 0; + box-sizing: border-box; + color: rgb(14, 13, 13); + cursor: pointer; + display: inline-block; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 16px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; + margin-right: 30px; +} - .detaiils-card-container .cart-button-play { - - appearance: none; - background-color: #d1250e; - border: 1px solid rgba(27, 31, 35, .15); - border-radius: 6px; - box-shadow: rgba(27, 31, 35, .1) 0 1px 0; - box-sizing: border-box; - color: rgb(14, 13, 13); - cursor: pointer; - display: inline-block; - font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - font-size: 14px; - font-weight: 600; - line-height: 20px; - padding: 6px 16px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: middle; - white-space: nowrap; - margin-right: 30px; - width: 105px; - } +.detaiils-card-container .confirm-button2:hover { + background-color: #6e57a3; + color: aliceblue; +} + + +.detaiils-card-container .cart-button2 { + + appearance: none; + background-color: #0ed11e; + border: 1px solid rgba(27, 31, 35, .15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, .1) 0 1px 0; + box-sizing: border-box; + color: rgb(14, 13, 13); + cursor: pointer; + display: inline-block; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 16px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; + margin-right: 30px; +} - - .detaiils-card-container .cart-button-play:hover { - background-color: #f32106; - color: aliceblue; + +.detaiils-card-container .cart-button2:hover { + background-color: #16811f; + color: aliceblue; +} + +.detaiils-card-container .cart-button-play { + + appearance: none; + background-color: #d1250e; + border: 1px solid rgba(27, 31, 35, .15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, .1) 0 1px 0; + box-sizing: border-box; + color: rgb(14, 13, 13); + cursor: pointer; + display: inline-block; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 16px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; + margin-right: 30px; + width: 105px; +} + + +.detaiils-card-container .cart-button-play:hover { + background-color: #f32106; + color: aliceblue; +} + +.detaiils-card-container .cart-button-add { + + appearance: none; + background-color: #eaee08; + border: 1px solid rgba(27, 31, 35, .15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, .1) 0 1px 0; + box-sizing: border-box; + color: rgb(14, 13, 13); + cursor: pointer; + display: inline-block; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 6px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; + margin-right: 30px; + width: 105px; +} + + +.detaiils-card-container .cart-button-add:hover { + background-color: #dbdf0f; + ; + color: aliceblue; +} + +@media (max-width: 600px) { + + .div-container-course-list { + width: 300px; + } + .container-course { + display: flex; + flex-direction: column; + width: 290px; + height: auto; + margin: 5px; + padding: 0; + padding-top: 10px; } - .detaiils-card-container .cart-button-add { - - appearance: none; - background-color: #eaee08; - border: 1px solid rgba(27, 31, 35, .15); - border-radius: 6px; - box-shadow: rgba(27, 31, 35, .1) 0 1px 0; - box-sizing: border-box; - color: rgb(14, 13, 13); - cursor: pointer; - display: inline-block; - font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - font-size: 14px; - font-weight: 600; - line-height: 20px; - padding: 6px 6px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: middle; - white-space: nowrap; - margin-right: 30px; - width: 105px; + .detaiils-card-container { + width: auto; + margin: 0; + padding: 0; } - - .detaiils-card-container .cart-button-add:hover { - background-color: #dbdf0f;; - color: aliceblue; + .description-container { + padding-top: 20px; + margin-left: 15px; + margin-right: 15px; + margin-bottom: 15px; + height: 200px; + overflow-y: scroll; } + .course-div-card img { + margin: 10px; + width: 270px; + height: 180px; + } +} \ No newline at end of file diff --git a/scientia/src/components/Pagination/Pagination.css b/scientia/src/components/Pagination/Pagination.css index 003676d6..c09eabae 100644 --- a/scientia/src/components/Pagination/Pagination.css +++ b/scientia/src/components/Pagination/Pagination.css @@ -11,7 +11,7 @@ } .pag-div li { - list-style:none; + list-style: none; margin: 20px; width: 10px; } @@ -21,6 +21,16 @@ font-size: larger; width: 30px; height: 30px; - color:black - + color: black +} + +@media (max-width: 600px) { + .pag-div { + display: flex; + justify-content: flex-start; + margin-top: 20px; + width: 300px; + overflow-x: scroll; + + } } \ No newline at end of file From 0c36c14dc1bef1913168de0b279ee7ad82127b83 Mon Sep 17 00:00:00 2001 From: lauty95 Date: Thu, 4 Nov 2021 14:06:57 -0300 Subject: [PATCH 3/6] asd --- scientia/src/components/Cart/Cart.js | 368 ++++++++++++++------------- 1 file changed, 185 insertions(+), 183 deletions(-) diff --git a/scientia/src/components/Cart/Cart.js b/scientia/src/components/Cart/Cart.js index d17c443c..5488cb1e 100644 --- a/scientia/src/components/Cart/Cart.js +++ b/scientia/src/components/Cart/Cart.js @@ -27,47 +27,47 @@ import './Cart.css' export function Cart(props) { useEffect(() => { - window.addEventListener('mousemove', () => {}); + window.addEventListener('mousemove', () => { }); props.removeAllGift() return () => { - window.removeEventListener('mousemove', () => {}) + window.removeEventListener('mousemove', () => { }) } - }, []) - -const { enqueueSnackbar } = useSnackbar(); - -const handleClickVariantOk = () => { - enqueueSnackbar('YOUR GIFT ADDED CORRECTLY', { - anchorOrigin: { - vertical: 'bottom', - horizontal: 'left', - }, - TransitionComponent: Slide, - variant: 'success', - }) -} + }, []) -const handleClickVariantWrongEmail = () => { - enqueueSnackbar('INCORRECT EMAIL OR MISSED', { - anchorOrigin: { + const { enqueueSnackbar } = useSnackbar(); + + const handleClickVariantOk = () => { + enqueueSnackbar('YOUR GIFT ADDED CORRECTLY', { + anchorOrigin: { vertical: 'bottom', - horizontal: 'left', - }, - TransitionComponent: Slide, - variant: 'error', -}) -} + horizontal: 'left', + }, + TransitionComponent: Slide, + variant: 'success', + }) + } -const handleClickVariantWrongRemovedGift = () => { - enqueueSnackbar('ITEM REMOVED', { - anchorOrigin: { + const handleClickVariantWrongEmail = () => { + enqueueSnackbar('INCORRECT EMAIL OR MISSED', { + anchorOrigin: { vertical: 'bottom', - horizontal: 'left', - }, - TransitionComponent: Slide, - variant: 'warning', -}) -} + horizontal: 'left', + }, + TransitionComponent: Slide, + variant: 'error', + }) + } + + const handleClickVariantWrongRemovedGift = () => { + enqueueSnackbar('ITEM REMOVED', { + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left', + }, + TransitionComponent: Slide, + variant: 'warning', + }) + } const { cart, @@ -92,46 +92,48 @@ const handleClickVariantWrongRemovedGift = () => { courseId: 0, price: 0, orderId: 0, - emailGift: "" }); - + emailGift: "" + }); + const [show2, setShow2] = useState(false); const handleClose3 = () => { setShow2(false) }; - + const handleChange = (event) => { - if (login){ + if (login) { if (cart.length > 0) { - var [selectedCourse] = cart.filter((course)=> course.coursesId === parseInt(event.target.name)) + var [selectedCourse] = cart.filter((course) => course.coursesId === parseInt(event.target.name)) } - - setChecked({...checked, - gift: event.target.checked, - courseId: parseInt(event.target.name), - price: selectedCourse.price || 0, - orderId: selectedCourse.id || 0, - emailGift: "", - [event.target.name]:event.target.checked - }); - - if(checked[event.target.name]){ - handleClickVariantWrongRemovedGift() + + setChecked({ + ...checked, + gift: event.target.checked, + courseId: parseInt(event.target.name), + price: selectedCourse.price || 0, + orderId: selectedCourse.id || 0, + emailGift: "", + [event.target.name]: event.target.checked + }); + + if (checked[event.target.name]) { + handleClickVariantWrongRemovedGift() } - + if (!checked[event.target.name]) - setShow2(true) + setShow2(true) removeGift(parseInt(event.target.name)) } else { history.push("/login") } - + }; - const [state, setState] = React.useState({emailGift: ""}) + const [state, setState] = React.useState({ emailGift: "" }) function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; @@ -139,16 +141,16 @@ const handleClickVariantWrongRemovedGift = () => { } const handleClose2 = (email) => { - if(validateEmail(email)) { + if (validateEmail(email)) { addGift(checked) handleClickVariantOk('success') setShow2(false) } else { handleClickVariantWrongEmail('error') } - + }; - const handleChangeGift = (e) => setChecked({...checked,[e.target.name]: e.target.value}) + const handleChangeGift = (e) => setChecked({ ...checked, [e.target.name]: e.target.value }) const handleShow = () => setShow(true); const handleClose = () => setShow(false); @@ -175,7 +177,7 @@ const handleClickVariantWrongRemovedGift = () => { return `$ ${parseFloat(result.toFixed(2))}`; } - if(cart.length >= 1) { + if (cart.length >= 1) { Total() } @@ -225,8 +227,8 @@ const handleClickVariantWrongRemovedGift = () => { } const haddleRemoveItem = (id) => { - if(login){ - const data = {id: id, email: user.email} + if (login) { + const data = { id: id, email: user.email } removeGift(id) deleteCartLogged(data) handleClickVariantWrongRemovedGift('removed') @@ -239,140 +241,140 @@ const handleClickVariantWrongRemovedGift = () => { return (
-
-

Shopping Cart

-
-
-
-
+
+

Shopping Cart

-

{cart && cart.length > 0 ? cart.length : 0} Courses in Cart

- - - - - - - - - {/* */} - - - - {cart.length >= 1 ? ( - cart.map((course) => ( - - - - - + + + + )) + ) : ( +
+ )} +
CourseCourse NamePriceGift a CourseIDSub-TotalRemove
- - -
- addDetails(course.coursesId)} - className="link-div-cart" - > - {course.name && course.name.toUpperCase()} - -
- 		- {course.percentageDiscount !== null && course.percentageDiscount > 0 ? ( -
-

+
+
+
+

{cart && cart.length > 0 ? cart.length : 0} Courses in Cart

+ + + + + + + + + {/* */} + + + + {cart.length >= 1 ? ( + cart.map((course) => ( + + + + + + - - {/* + {/* */} - - - - - )) - ) : ( -
- )} -
CourseCourse NamePriceGift a CourseIDSub-TotalRemove
+ + +
+ addDetails(course.coursesId)} + className="link-div-cart" > - ${parseFloat(course.price !== null && course.price.toFixed(2))} - -

{course.percentageDiscount}% OFF

-

- $ - {parseFloat((course.price -((course.percentageDiscount / 100) * course.price)).toFixed(2) - )} -

+ {course.name && course.name.toUpperCase()} +
- ) : ( -
-

${parseFloat(course.price.toFixed(2))}

+
+ {course.percentageDiscount !== null && course.percentageDiscount > 0 ? ( +
+

+ ${parseFloat(course.price !== null && course.price.toFixed(2))} +

+

{course.percentageDiscount}% OFF

+

+ $ + {course.price !== null && parseFloat((course.price - ((course.percentageDiscount / 100) * course.price)).toFixed(2) + )} +

+
+ ) : ( +
+

${course.price !== null && parseFloat(course.price.toFixed(2))}

+
+ )} + 		+
+ +

GIFT

- )} - 		-
- -

GIFT

-
- 		+

{Total()}

 -
-

#{course.coursesId}

-
- 		- { +
- haddleRemoveItem(course.coursesId)} - style={{ cursor: "pointer", fontSize: 40 }} - /> +

#{course.coursesId}

- } -
-
- {gift && gift.length >= 1 ? ( - gift.map((g) => ( -
-

COURSE ID : (#{g.courseId}) - GIFT TO EMAIL : {g.emailGift}

-
- )) - ) : ( -

ANY COURSE HAS BEEN SELECTED FOR GIFT

- )} -
-

- SUB - TOTAL: $ {parseFloat(result.toFixed(2))} -

-

- TAXs (21%): $ {taxs} -

-

- TOTAL: $ {total} -

-
- +

+ { +
+ haddleRemoveItem(course.coursesId)} + style={{ cursor: "pointer", fontSize: 40 }} + /> +
+ } +
+
+ {gift && gift.length >= 1 ? ( + gift.map((g) => ( +
+

COURSE ID : (#{g.courseId}) - GIFT TO EMAIL : {g.emailGift}

+
+ )) + ) : ( +

ANY COURSE HAS BEEN SELECTED FOR GIFT

+ )} +
+

+ SUB - TOTAL: $ {parseFloat(result.toFixed(2))} +

+

+ TAXs (21%): $ {taxs} +

+

+ TOTAL: $ {total} +

+
+ +
+

+

-

-

-
From c18a0afd2c8e0586a91da2e234fca74aea9ef4fb Mon Sep 17 00:00:00 2001 From: lauty95 Date: Thu, 4 Nov 2021 14:46:31 -0300 Subject: [PATCH 4/6] home responsive --- scientia/src/components/CourseCard/CourseCard.js | 2 +- scientia/src/components/Home/Home.css | 5 +++++ scientia/src/components/Login/Login.jsx | 4 +++- scientia/src/components/Login/login.module.css | 2 ++ scientia/src/components/Search/Filtro.jsx | 11 ++++++----- scientia/src/components/Search/SearchBar.css | 11 +++++++++++ scientia/src/components/Search/SearchBar.js | 2 +- 7 files changed, 29 insertions(+), 8 deletions(-) diff --git a/scientia/src/components/CourseCard/CourseCard.js b/scientia/src/components/CourseCard/CourseCard.js index 44604090..553de7b2 100644 --- a/scientia/src/components/CourseCard/CourseCard.js +++ b/scientia/src/components/CourseCard/CourseCard.js @@ -153,7 +153,7 @@ const handleClickVariantWrong = () => { validarCart(id)} /> */}
-
{name && name.toUpperCase()}
+
COURSE OF {name && name.toUpperCase()}
diff --git a/scientia/src/components/Home/Home.css b/scientia/src/components/Home/Home.css index becf44d5..cc0cb813 100644 --- a/scientia/src/components/Home/Home.css +++ b/scientia/src/components/Home/Home.css @@ -39,4 +39,9 @@ justify-content: center; .barra-filtrado { display: none; } + + .title-home-div h1 { + padding-left: 5%; + } + } \ No newline at end of file diff --git a/scientia/src/components/Login/Login.jsx b/scientia/src/components/Login/Login.jsx index 765939c5..6c96ac5a 100644 --- a/scientia/src/components/Login/Login.jsx +++ b/scientia/src/components/Login/Login.jsx @@ -12,6 +12,7 @@ function Login(props) { const [state, setState] = useState({ email: '', password: '', remember: false }) const [redir, setRedir] = useState(false) + const [signUp, setSignUp] = useState(false) const { enqueueSnackbar } = useSnackbar(); @@ -78,10 +79,11 @@ function Login(props) {
- Register +
+ {signUp && } {redir && } ) diff --git a/scientia/src/components/Login/login.module.css b/scientia/src/components/Login/login.module.css index 3e3aa4a4..7aed379c 100644 --- a/scientia/src/components/Login/login.module.css +++ b/scientia/src/components/Login/login.module.css @@ -39,6 +39,8 @@ } .botones button { margin-bottom: 10px; + margin-left: auto; + margin-right: auto; } .titleLoginDiv h1 { padding: 0; diff --git a/scientia/src/components/Search/Filtro.jsx b/scientia/src/components/Search/Filtro.jsx index 339f3994..de3422d1 100644 --- a/scientia/src/components/Search/Filtro.jsx +++ b/scientia/src/components/Search/Filtro.jsx @@ -11,11 +11,12 @@ function Filtro() { return ( <> - - - +
+ +
+ Filters diff --git a/scientia/src/components/Search/SearchBar.css b/scientia/src/components/Search/SearchBar.css index d6a4d5fa..8fb634c0 100644 --- a/scientia/src/components/Search/SearchBar.css +++ b/scientia/src/components/Search/SearchBar.css @@ -27,4 +27,15 @@ display: flex; justify-content: center; align-items: center; +} + + +.botonFiltro { + margin-bottom: 20px; +} + +@media (max-width: 600px) { + .wrapper .search { + width: 250px; + } } \ No newline at end of file diff --git a/scientia/src/components/Search/SearchBar.js b/scientia/src/components/Search/SearchBar.js index 40cc847c..70d9c1f5 100644 --- a/scientia/src/components/Search/SearchBar.js +++ b/scientia/src/components/Search/SearchBar.js @@ -119,7 +119,7 @@ function SearchBar({ coursesByGenre, allCourses, searchByName, getAllCourses, ge value={input.buscar} autoComplete="off" > - -

diff --git a/scientia/src/components/SignUp/SignUp.css b/scientia/src/components/SignUp/SignUp.css index 731de402..3cb243a6 100644 --- a/scientia/src/components/SignUp/SignUp.css +++ b/scientia/src/components/SignUp/SignUp.css @@ -54,21 +54,27 @@ } .titleLoginDiv h1 { - padding-left: 25%; + padding-left: 20%; font-size: 50px; color: #fff; } @media (max-width: 600px) { - .form-row{ + .titleLoginDiv h1 { + padding-left: 5%; + } + + .form-row { display: flex; width: 100%; margin-bottom: 10px; flex-direction: column; } + .btn { width: 200px !important; } + h1 { text-align: center; } diff --git a/scientia/src/components/TrainningCard/TrainningCard.css b/scientia/src/components/TrainningCard/TrainningCard.css index 3267634c..1a47e03d 100644 --- a/scientia/src/components/TrainningCard/TrainningCard.css +++ b/scientia/src/components/TrainningCard/TrainningCard.css @@ -8,7 +8,7 @@ } .container-course2 .button-delete-div { - + display: flex; justify-content: flex-end; } @@ -62,7 +62,6 @@ } .container-course2 .confirm-button3 { - appearance: none; background-color: #2ea44f; border: 1px solid rgba(27, 31, 35, .15); @@ -72,7 +71,7 @@ color: #fff; cursor: pointer; display: inline-block; - font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; font-weight: 600; line-height: 20px; @@ -87,10 +86,23 @@ white-space: nowrap; margin-bottom: 20px; margin-top: 0px; +} - } - - .confirm-button3:focus { +.confirm-button3:focus { box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; outline: none; - } +} + +@media (max-width: 600px) { + .container-course2 { + margin: 20px; + padding: 20px; + width: 320px; + height: 500px; + } + + .course-div-card2 img { + width: 300px; + height: 200px; + } +} \ No newline at end of file diff --git a/scientia/src/components/myLearning/myLearning.css b/scientia/src/components/myLearning/myLearning.css index 200fb94a..bf1830d9 100644 --- a/scientia/src/components/myLearning/myLearning.css +++ b/scientia/src/components/myLearning/myLearning.css @@ -14,7 +14,6 @@ .inputdiv-cupon { width: 700px; - background: rgb(52, 58, 64); background: linear-gradient(0deg, rgba(52, 58, 64, 1) 0%, rgba(0, 0, 0, 1) 100%); border-radius: 4px; display: grid; @@ -22,7 +21,10 @@ padding: 10px 0 10px 145px; margin-left: auto; margin-right: auto; - ; +} + +.inputdiv-cupon input { + margin-right: 20px; } .save { @@ -42,7 +44,31 @@ } .title-learning-div h1 { - padding-left: 25%; + padding-left: 20%; font-size: 50px; color: #fff; +} + + +@media (max-width: 600px) { + .inputdiv-cupon { + width: 300px; + display: flex; + flex-direction: column; + padding-left: 10px; + padding-top: 10px; + padding-bottom: 10px; + padding-right: 10px; + } + .inputdiv-cupon input { + width: 100%; + border-radius: 5px; + height: 40px; + } + .save button { + width: 279px !important; + } + .title-learning-div h1 { + padding-left: 5%; + } } \ No newline at end of file diff --git a/scientia/src/components/myLearning/myLearning.js b/scientia/src/components/myLearning/myLearning.js index 449790a0..54ddcb10 100644 --- a/scientia/src/components/myLearning/myLearning.js +++ b/scientia/src/components/myLearning/myLearning.js @@ -53,7 +53,7 @@ function MyLearning({ courses, user, getUserInfo }) { />
- +
From c96a29dc0b4637945d06416121c6b7c3a18cf7a8 Mon Sep 17 00:00:00 2001 From: lauty95 Date: Thu, 4 Nov 2021 17:15:07 -0300 Subject: [PATCH 6/6] carousel list bug --- scientia/src/CourseList/CourseList.js | 40 ++++++--- scientia/src/components/Form/Form.css | 118 +++++++++++++------------- scientia/src/components/Home/Home.js | 9 +- 3 files changed, 88 insertions(+), 79 deletions(-) diff --git a/scientia/src/CourseList/CourseList.js b/scientia/src/CourseList/CourseList.js index 7d26f21b..cc2771b1 100644 --- a/scientia/src/CourseList/CourseList.js +++ b/scientia/src/CourseList/CourseList.js @@ -1,11 +1,11 @@ -import React, { useState, useEffect } from 'react' +import React, {useState, useEffect} from 'react' import { connect } from 'react-redux' import CourseCard from '../components/CourseCard/CourseCard' import './CourseList.css' import Pagination from '../components/Pagination/Pagination' import noEncontrado from '../../src/assets/ahahah.gif' -function CourseList({ courses }) { +function CourseList({ courses}) { const [currentPage, setCurrentPage] = useState(1) @@ -18,14 +18,14 @@ function CourseList({ courses }) { var currentCards; //"cards" que se deben mostrar en la pantalla // en caso de que al buscar un curso en particular no encuentra ninguno - if (typeof courses === 'string') { - currentCards = courses - } else { - currentCards = courses.slice(indexOfFirstCard, indexOfLastCard) //uso los indices para "fraccionar que cursos muestro" + if(typeof courses === 'string'){ + currentCards = courses + }else { + currentCards = courses.slice(indexOfFirstCard, indexOfLastCard) //uso los indices para "fraccionar que cursos muestro" } const paginate = (pageNumber) => { - setCurrentPage(pageNumber) + setCurrentPage(pageNumber) } if (courses.length === 1) { @@ -46,10 +46,9 @@ function CourseList({ courses }) { // // courses.filter((c) => ) // } - return (
-
+
{ typeof currentCards === "string" || currentCards.length === 0? (
@@ -78,14 +77,29 @@ function CourseList({ courses }) { // coursesBestSeller={coursesBestSeller} // coursesGoodSeller={coursesGoodSeller} /> + )) + ) + + : ( +
+

Cargando...

+ )} +
+ +
) } const mapStateToProps = (state) => { - return { - courses: state.rootReducer.allCourses, - } + return { + courses: state.rootReducer.allCourses, + } } -export default connect(mapStateToProps, null)(CourseList) +export default connect(mapStateToProps, null)(CourseList) \ No newline at end of file diff --git a/scientia/src/components/Form/Form.css b/scientia/src/components/Form/Form.css index 09871a5d..dc8be243 100644 --- a/scientia/src/components/Form/Form.css +++ b/scientia/src/components/Form/Form.css @@ -1,91 +1,91 @@ .form-div-container { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .form-div-container form { - display: flex; - flex-direction: column; - width: 500px; + display: flex; + flex-direction: column; + width: 500px; } .form-div-container input { - margin: 10px; + margin: 10px; } .title-form-div { display: flex; margin-bottom: 40px; align-items: center; - background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(52,58,64,1) 100%); + background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(52, 58, 64, 1) 100%); color: aliceblue; height: 120px; margin-top: 5px; } .title-form-div h1 { - padding-left: 20%; + padding-left: 20%; font-size: 50px; color: #fff; } .form-button { - - appearance: none; - background-color: #2ea44f; - border: 1px solid rgba(27, 31, 35, .15); - border-radius: 6px; - box-shadow: rgba(27, 31, 35, .1) 0 1px 0; - box-sizing: border-box; - color: #fff; - cursor: pointer; - display: inline-block; - font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - font-size: 14px; - font-weight: 600; - line-height: 20px; - padding: 6px 16px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: middle; - white-space: nowrap; - } - -.form -button:focus:not(:focus-visible):not(.focus-visible) { - box-shadow: none; - outline: none; - } - + appearance: none; + background-color: #2ea44f; + border: 1px solid rgba(27, 31, 35, .15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, .1) 0 1px 0; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 16px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; +} -.form -button:hover { - background-color: #2c974b; - } - -.form -button:focus { - box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; - outline: none; - } - +.form -button:focus:not(:focus-visible):not(.focus-visible) { + box-shadow: none; + outline: none; +} -.form -button:disabled { - background-color: #94d3a2; - border-color: rgba(27, 31, 35, .1); - color: rgba(255, 255, 255, .8); - cursor: default; - } - -.form -button:active { - background-color: #298e46; - box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset; - } +.form -button:hover { + background-color: #2c974b; +} + + +.form -button:focus { + box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; + outline: none; +} + + +.form -button:disabled { + background-color: #94d3a2; + border-color: rgba(27, 31, 35, .1); + color: rgba(255, 255, 255, .8); + cursor: default; +} + + +.form -button:active { + background-color: #298e46; + box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset; +} .selector { margin-bottom: 10px; diff --git a/scientia/src/components/Home/Home.js b/scientia/src/components/Home/Home.js index 84fc9034..762b1397 100644 --- a/scientia/src/components/Home/Home.js +++ b/scientia/src/components/Home/Home.js @@ -1,5 +1,5 @@ + import React, { useEffect } from "react"; -import Filtro from "../Search/Filtro"; import SearchBar from "../Search/SearchBar"; import CourseList from "../../CourseList/CourseList"; import { getAllCourses, getGenresCourses, getUsers, getUserInfo, getCart, saludo } from '../../actions/actions' @@ -44,13 +44,8 @@ export function Home({ user, getUserInfo, getAllCourses, getGenresCourses, getCa

Home

-
- -
-
- -
+