From 5f38e9eca228a8da24cc3a82b998eb9ea9875f80 Mon Sep 17 00:00:00 2001 From: Vladyslav-H <97888612+Vladyslav-H@users.noreply.github.com> Date: Fri, 30 Jun 2023 04:25:08 +0300 Subject: [PATCH] add show more text button for card description --- package-lock.json | 55 ++++++++++++++++++++ package.json | 1 + src/components/TaskCard/TaskCard.jsx | 14 ++++- src/components/TaskCard/TaskCard.module.scss | 26 ++++++--- 4 files changed, 88 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8363de4..c4a8642 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "react-responsive": "^9.0.2", "react-router-dom": "^6.13.0", "react-scripts": "5.0.1", + "react-show-more-text": "^1.6.2", "redux-persist": "^6.0.0", "sass": "^1.63.4", "shortid": "^2.2.16", @@ -1919,6 +1920,23 @@ "@babel/core": "^7.0.0" } }, + "node_modules/@babel/polyfill": { + "version": "7.12.1", + "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz", + "integrity": "sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==", + "deprecated": "🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.", + "dependencies": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.4" + } + }, + "node_modules/@babel/polyfill/node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", + "hasInstallScript": true + }, "node_modules/@babel/preset-env": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.5.tgz", @@ -13104,6 +13122,18 @@ } } }, + "node_modules/react-show-more-text": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/react-show-more-text/-/react-show-more-text-1.6.2.tgz", + "integrity": "sha512-Z6tRcnEosHvo07vZw36LxCjqYq4ghgaDI273b5XcayJ1PYbT56OKbaQlPqH7W9LGF5rhUVIhEDBPURuG5eO/Uw==", + "dependencies": { + "@babel/polyfill": "^7.12.1", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "16 - 18.x" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -17259,6 +17289,22 @@ "@babel/helper-plugin-utils": "^7.22.5" } }, + "@babel/polyfill": { + "version": "7.12.1", + "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz", + "integrity": "sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==", + "requires": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.4" + }, + "dependencies": { + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" + } + } + }, "@babel/preset-env": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.5.tgz", @@ -25218,6 +25264,15 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-show-more-text": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/react-show-more-text/-/react-show-more-text-1.6.2.tgz", + "integrity": "sha512-Z6tRcnEosHvo07vZw36LxCjqYq4ghgaDI273b5XcayJ1PYbT56OKbaQlPqH7W9LGF5rhUVIhEDBPURuG5eO/Uw==", + "requires": { + "@babel/polyfill": "^7.12.1", + "prop-types": "^15.7.2" + } + }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index fcff44f..341a86f 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react-responsive": "^9.0.2", "react-router-dom": "^6.13.0", "react-scripts": "5.0.1", + "react-show-more-text": "^1.6.2", "redux-persist": "^6.0.0", "sass": "^1.63.4", "shortid": "^2.2.16", diff --git a/src/components/TaskCard/TaskCard.jsx b/src/components/TaskCard/TaskCard.jsx index 3849b47..a332ec3 100644 --- a/src/components/TaskCard/TaskCard.jsx +++ b/src/components/TaskCard/TaskCard.jsx @@ -3,6 +3,7 @@ import { useSelector, useDispatch } from 'react-redux'; import clsx from 'clsx'; import shortid from 'shortid'; import PropTypes from 'prop-types'; +import ShowMoreText from 'react-show-more-text'; import sprite from '../../assets/icons/sprite.svg'; import { removeCard, updateCard } from 'redux/Cards/cardsOperations'; @@ -74,7 +75,18 @@ export const TaskCard = ({ >

{title}

-

{description}

+ + + {description} +
diff --git a/src/components/TaskCard/TaskCard.module.scss b/src/components/TaskCard/TaskCard.module.scss index ca05ca8..af51a64 100644 --- a/src/components/TaskCard/TaskCard.module.scss +++ b/src/components/TaskCard/TaskCard.module.scss @@ -6,7 +6,7 @@ padding: 14px 21px; width: 335px; margin-right: 8px; - height: 154px; + height: max-content; background-color: $white-text-color; border-radius: 8px; overflow: hidden; @@ -62,17 +62,29 @@ line-height: 1.33; color: $icon-main-color; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - &.dark { color: $icon-secondary-color; } } +.showMoreAnchor { + font-weight: 500; + color: $priority-high-color; + cursor: pointer; + + transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); + + &.colorful { + color: $accent-bright-color; + } + + &:hover { + font-weight: 700; + transform: scale(1.04); + text-decoration: underline; + } +} + .controlPanel { padding-top: 14px;