diff --git a/package.json b/package.json index 58c092c..e34ff3e 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "react-dom": "^16.12.0", "react-redux": "^7.2.3", "react-select": "^1.3.0", + "react-responsive": "^9.0.0-beta.5", "redux": "^4.0.5", "redux-actions": "^2.6.5", "redux-logger": "^3.0.6", diff --git a/src/assets/icons/close-gray.svg b/src/assets/icons/close-gray.svg new file mode 100644 index 0000000..d773daa --- /dev/null +++ b/src/assets/icons/close-gray.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/social/icon_email.svg b/src/assets/images/social/icon_email.svg index 7a8b2e7..1281306 100644 --- a/src/assets/images/social/icon_email.svg +++ b/src/assets/images/social/icon_email.svg @@ -1,5 +1,5 @@ - icon email + email diff --git a/src/assets/images/social/icon_facebook.svg b/src/assets/images/social/icon_facebook.svg index 4fb1b6e..fd89ed4 100644 --- a/src/assets/images/social/icon_facebook.svg +++ b/src/assets/images/social/icon_facebook.svg @@ -2,7 +2,7 @@ - icon facebook + facebook diff --git a/src/assets/images/social/icon_plus.svg b/src/assets/images/social/icon_plus.svg index deca5c7..7567503 100644 --- a/src/assets/images/social/icon_plus.svg +++ b/src/assets/images/social/icon_plus.svg @@ -1,7 +1,7 @@ - icon + + + Created with Sketch. diff --git a/src/assets/images/social/icon_print.svg b/src/assets/images/social/icon_print.svg index aa0b1e8..34411c4 100644 --- a/src/assets/images/social/icon_print.svg +++ b/src/assets/images/social/icon_print.svg @@ -1,7 +1,7 @@ - icon print + print Created with Sketch. diff --git a/src/assets/images/social/icon_twitter.svg b/src/assets/images/social/icon_twitter.svg index 55b1e7b..0342b99 100644 --- a/src/assets/images/social/icon_twitter.svg +++ b/src/assets/images/social/icon_twitter.svg @@ -1,7 +1,7 @@ - icon twitter + twitter Created with Sketch. diff --git a/src/components/DateRangePicker/DateInput/styles.scss b/src/components/DateRangePicker/DateInput/styles.scss index 0f01a28..4ac3434 100644 --- a/src/components/DateRangePicker/DateInput/styles.scss +++ b/src/components/DateRangePicker/DateInput/styles.scss @@ -18,7 +18,6 @@ } .date-range-input { - width: 230px; margin-top: -12px; font-size: $font-size-sm; diff --git a/src/components/DateRangePicker/index.jsx b/src/components/DateRangePicker/index.jsx index 96b0d27..a970a13 100644 --- a/src/components/DateRangePicker/index.jsx +++ b/src/components/DateRangePicker/index.jsx @@ -551,15 +551,11 @@ function DateRangePicker(props) { return isBeforeDay(preview.endDate, range.startDate); }; - const className = ` - ${focusedRange[1] === 1 && styles.endDate} - ${" "} - ${range.startDate && range.endDate && styles.isRange} - ${" "} - ${isInvalidPreview() && styles.isInvalidPreview} - ${" "} - ${(errors.startDate || errors.endDate) && styles.isErrorInput} - `; + const className = `${(focusedRange[1] === 1 && styles.endDate) || ""} ${ + (range.startDate && range.endDate && styles.isRange) || "" + } ${(isInvalidPreview() && styles.isInvalidPreview) || ""} ${ + ((errors.startDate || errors.endDate) && styles.isErrorInput) || "" + }`; return (
diff --git a/src/components/DateRangePicker/style.scss b/src/components/DateRangePicker/style.scss index c0bd6f1..2e8467a 100644 --- a/src/components/DateRangePicker/style.scss +++ b/src/components/DateRangePicker/style.scss @@ -57,24 +57,25 @@ $darkGreen: #0AB88A;; @include phone { .rdrDateRangePickerWrapper { position: relative !important; - width: 100vw !important; + width: 100% !important; flex-direction: column-reverse; align-items: center; justify-content: flex-end; padding: 0 20px; + border-radius: 0 !important; .rdrDefinedRangesWrapper { - width: 100vw; - padding-bottom: 10px; - .rdrStaticRanges { display: inline-flex; flex-direction: row; justify-content: space-around; + flex-wrap: wrap; margin-top: 10px !important; - border-bottom: 1px solid $tc-gray-20; - width: 100vw; - padding-bottom: 10px; + width: calc(100% - 40px); + + .rdrStaticRange { + width: 50%; + } .rdrStaticRangeLabel { font-size: 14px; @@ -83,10 +84,6 @@ $darkGreen: #0AB88A;; > button:hover .rdrStaticRangeLabel { background-color: $green; } - - & > *:last-child { - display: none; - } } } @@ -137,14 +134,14 @@ $darkGreen: #0AB88A;; .rdrDateRangePickerWrapper { z-index: 15; position: relative; - background: $tc-white; + // background: $tc-white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; overflow: hidden; width: 455px; .rdrDefinedRangesWrapper { - width: unset; + width: 100%; border: none; .rdrStaticRanges { @@ -164,6 +161,10 @@ $darkGreen: #0AB88A;; background-color: $green; } } + + .rdrInputRanges { + display: none; + } } } @@ -373,7 +374,6 @@ $darkGreen: #0AB88A;; } .dateInputWrapper { - display: inline-flex; position: relative; text-align: left; } @@ -395,26 +395,32 @@ $darkGreen: #0AB88A;; z-index: 10; @include phone { - width: 100vw; + width: 100%; position: fixed; top: 0; left: 0; - right: 0; + right: 20px; bottom: 0; z-index: 15; - padding: 65px 0 0; + padding: 187px 0 0; border: 0; border-radius: 0; - } + background: rgba(#2A2A2A, 0.6); - .calendar-footer { - width: 100%; + @include down(320px) { + padding: 40px 0 0; + } - @include phone { - padding: 0 20px; + .calendar-footer { + margin: 0 20px; + padding: 20px 0; } } + .calendar-footer { + background: $tc-white; + } + .calendar-button { @include roboto-bold; @@ -439,20 +445,18 @@ $darkGreen: #0AB88A;; } } -.endDate { +@include tablet { .calendar-container, .calendar-inner-container { - left: 0; + right: 0; } :global { .rdrDateRangePickerWrapper { - @include tablet { - .calendar-container, - .calendar-inner-container { - right: auto; - left: 62px; - } + .calendar-container, + .calendar-inner-container { + right: 62px; + left: auto; } } } diff --git a/src/components/DropdownTerms/index.jsx b/src/components/DropdownTerms/index.jsx index b605974..a93798b 100644 --- a/src/components/DropdownTerms/index.jsx +++ b/src/components/DropdownTerms/index.jsx @@ -4,7 +4,7 @@ import React, { useState, useRef, useEffect } from "react"; import PT from "prop-types"; import _ from "lodash"; -import { Creatable } from "react-select"; +import Select from "react-select"; import iconDown from "assets/icons/dropdown-arrow.png"; import config from "../../../config"; import "./styles.scss"; @@ -100,7 +100,7 @@ function DropdownTerms({ }`} >
- setFocused(true)} onClose={() => setFocused(false)} autosize={false} diff --git a/src/components/Editor/MarkdownEditor/style.scss b/src/components/Editor/MarkdownEditor/style.scss index 63b91b0..6f3e02c 100644 --- a/src/components/Editor/MarkdownEditor/style.scss +++ b/src/components/Editor/MarkdownEditor/style.scss @@ -18,6 +18,7 @@ display: block; font-family: "Roboto Mono", monospace; padding: 15px 20px; + white-space: pre-wrap; &:global.inline { background: $tc-gray-10; diff --git a/src/components/Pagination/index.jsx b/src/components/Pagination/index.jsx index ee625ef..503899f 100644 --- a/src/components/Pagination/index.jsx +++ b/src/components/Pagination/index.jsx @@ -105,14 +105,14 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => { onChange={onChangePageSize} size="xs" /> + per page
- {loadingChallenges ? ( - _.times(3, () => ) - ) : challenges.length ? ( - - {challenges.map((challenge, index) => ( -
- { - const filterChange = { - tags: [tag], - page: 1, - }; - updateFilter(filterChange); - }} - onClickTrack={(track) => { - const filterChange = { - tracks: [track], - page: 1, - }; - updateFilter(filterChange); - }} - isLoggedIn={isLoggedIn} - /> -
- ))} -
- { - const filterChange = { - page: utils.pagination.pageIndexToPage(event.pageIndex), - perPage: event.pageSize, - }; - updateFilter(filterChange); - }} - /> -
- - ) : ( - - )} + {loadingChallenges && _.times(3, () => )} + {!loadingChallenges && + (challenges.length ? ( + + {challenges.map((challenge, index) => ( +
+ { + const filterChange = { + tags: [tag], + page: 1, + }; + updateFilter(filterChange); + }} + onClickTrack={(track) => { + const filterChange = { + tracks: [track], + page: 1, + }; + updateFilter(filterChange); + }} + isLoggedIn={isLoggedIn} + /> +
+ ))} + + ) : ( + + ))} + +
+ { + const filterChange = { + page: utils.pagination.pageIndexToPage(event.pageIndex), + perPage: event.pageSize, + }; + updateFilter(filterChange); + }} + /> +
+ ); }; diff --git a/src/containers/Challenges/Listing/styles.scss b/src/containers/Challenges/Listing/styles.scss index 331471b..57f6fa8 100644 --- a/src/containers/Challenges/Listing/styles.scss +++ b/src/containers/Challenges/Listing/styles.scss @@ -11,7 +11,46 @@ .header-container { display: flex; - align-items: top; + align-items: flex-start; + + @include down($mfe-screen-xs) { + flex-wrap: wrap; + + .separator { + display: none; + } + + .input-group { + width: 100%; + max-width: none; + flex: auto; + margin: 0 0 20px 0; + } + + .sort-by { + max-width: 241px; + } + + .sort-by, + .from-to { + flex: 1 1 auto; + margin: 0 22px 0 0; + + @include down(375px - 1px) { + max-width: calc(100% - 92px); + } + } + + .filter-button { + display: block; + margin: 0 0 0 auto; + + button { + height: 40px; + border-radius: 20px; + } + } + } } .input-group { @@ -19,13 +58,8 @@ display: inline-block; margin-right: 16px; margin-bottom: 17px; - width: 38%; - min-width: 380px; - - @include xs-to-md { - width: 62%; - min-width: 230px; - } + flex: auto; + max-width: 380px; .search-icon { position: absolute; @@ -39,6 +73,19 @@ height: 40px; } + .clear-icon { + position: absolute; + bottom: 0; + right: 0; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: 46px; + height: 40px; + cursor: pointer; + } + input { margin-top: 0 !important; padding-left: 46px !important; @@ -60,7 +107,8 @@ } .from-to { - display: inline-block; + width: 50%; + max-width: 241px; } .sort-by, @@ -72,6 +120,14 @@ } } +.filter-button { + display: none; +} + .pagination { padding: 17px 0 15px; + + @include down($mfe-screen-xs) { + padding: 20px; + } } diff --git a/src/containers/Challenges/index.jsx b/src/containers/Challenges/index.jsx index 73833b7..3e9e9fe 100644 --- a/src/containers/Challenges/index.jsx +++ b/src/containers/Challenges/index.jsx @@ -12,7 +12,12 @@ import * as constants from "../../constants"; import { Banner } from "@topcoder/micro-frontends-earn-app"; import * as utils from "../../utils"; +import { useMediaQuery } from "react-responsive"; +import { useCssVariable } from "../../utils/hooks/useCssVariable"; +import IconArrow from "../../assets/icons/arrow.svg"; + import "./styles.scss"; +import { useClickOutside } from "../../utils/hooks/useClickOutside"; const Challenges = ({ challenges, @@ -74,20 +79,55 @@ const Challenges = ({ recommended && recommendedChallenges.length === 0; + const screenXs = useCssVariable("--mfe-screen-xs", (value) => + parseInt(value) + ); + const isScreenXs = useMediaQuery({ maxWidth: screenXs }); + + const [menuExpanded, setMenuExpanded] = useState(false); + const menuRef = useClickOutside(menuExpanded, (event) => { + setMenuExpanded(false); + }); + + const mobileMenu = ( +