Merge pull request #98 from mavdotso/collection-descriptions

feat: Full collection descriptions modal
permaweb · Jul 1, 2024 · 742445a · 742445a
2 parents 5ad167c + 15a172a
commit 742445a
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/src/helpers/language.ts b/src/helpers/language.ts
@@ -14,6 +14,7 @@ export const language = {
 		assetQuantityInfo: `Slide for asset quantity`,
 		balances: `Balances`,
 		bio: `Bio`,
+		description: `Description`,
 		blockHeight: `Block Height`,
 		buy: `Buy`,
 		cancel: `Cancel`,
@@ -136,6 +137,7 @@ export const language = {
 		useLightDisplay: `Use light display`,
 		viewAllCollections: `View all collections`,
 		viewFullBio: `View full bio`,
+		viewFullDescription: `View full description`,
 		viewOnArweave: `View on Arweave`,
 		viewProfile: `View profile`,
 	},

diff --git a/src/views/Collection/index.tsx b/src/views/Collection/index.tsx
@@ -5,6 +5,7 @@ import { getCollectionById } from 'api';
 
 import { CurrencyLine } from 'components/atoms/CurrencyLine';
 import { Loader } from 'components/atoms/Loader';
+import { Modal } from 'components/molecules/Modal';
 import { OwnerLine } from 'components/molecules/OwnerLine';
 import { AssetsTable } from 'components/organisms/AssetsTable';
 import { DEFAULTS, PAGINATORS, URLS } from 'helpers/config';
@@ -15,6 +16,8 @@ import { useLanguageProvider } from 'providers/LanguageProvider';
 
 import * as S from './styles';
 
+const MAX_DESCRIPTION_LENGTH = 50;
+
 export default function Collection() {
 	const { id } = useParams();
 	const navigate = useNavigate();
@@ -25,6 +28,7 @@ export default function Collection() {
 	const [collection, setCollection] = React.useState<CollectionDetailType | null>(null);
 	const [collectionLoading, setCollectionLoading] = React.useState<boolean>(false);
 	const [collectionErrorResponse, setCollectionErrorResponse] = React.useState<string | null>(null);
+	const [showFullDescription, setShowFullDescription] = React.useState<boolean>(false);
 
 	React.useEffect(() => {
 		(async function () {
@@ -108,7 +112,14 @@ export default function Collection() {
 								</S.InfoCreator>
 								{collection.description && (
 									<S.InfoDescription>
-										<p>{collection.description}</p>
+										<S.DescriptionText>
+											{collection.description.length > MAX_DESCRIPTION_LENGTH
+												? collection.description.substring(0, MAX_DESCRIPTION_LENGTH) + '...'
+												: collection.description}
+										</S.DescriptionText>
+										{collection.description.length > MAX_DESCRIPTION_LENGTH && (
+											<button onClick={() => setShowFullDescription(true)}>{language.viewFullDescription}</button>
+										)}
 									</S.InfoDescription>
 								)}
 							</S.InfoFooter>
@@ -119,6 +130,13 @@ export default function Collection() {
 							<AssetsTable ids={collection.assetIds} type={'grid'} pageCount={PAGINATORS.collection.assets} />
 						)}
 					</S.AssetsWrapper>
+					{showFullDescription && collection.description && (
+						<Modal header={language.description} handleClose={() => setShowFullDescription(false)}>
+							<div className={'modal-wrapper'}>
+								<p>{collection.description}</p>
+							</div>
+						</Modal>
+					)}
 				</>
 			);
 		} else {

diff --git a/src/views/Collection/styles.ts b/src/views/Collection/styles.ts
@@ -178,21 +178,32 @@ export const InfoCreator = styled.div`
 `;
 
 export const InfoDescription = styled.div`
-	width: fit-content;
+	width: 100%;
 	max-width: 460px;
-	p {
-		font-size: ${(props) => props.theme.typography.size.base};
-		font-family: ${(props) => props.theme.typography.family.primary};
-		font-weight: ${(props) => props.theme.typography.weight.bold};
+	position: relative;
+
+	button {
 		color: ${(props) => props.theme.colors.font.light1};
-		line-height: 1.65;
-		max-width: 100%;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
+		font-size: ${(props) => props.theme.typography.size.small};
+		font-weight: ${(props) => props.theme.typography.weight.bold};
+		&:hover {
+			color: ${(props) => props.theme.colors.font.light2};
+		}
 	}
 `;
 
+export const DescriptionText = styled.p`
+	font-size: ${(props) => props.theme.typography.size.base};
+	font-family: ${(props) => props.theme.typography.family.primary};
+	font-weight: ${(props) => props.theme.typography.weight.bold};
+	color: ${(props) => props.theme.colors.font.light1};
+	line-height: 1.65;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;
+
 export const AssetsWrapper = styled.div`
 	margin: 60px 0 0 0;
 `;
diff --git a/src/views/Profile/ProfileHeader/ProfileHeader.tsx b/src/views/Profile/ProfileHeader/ProfileHeader.tsx
@@ -169,9 +169,7 @@ export default function ProfileHeader(props: IProps) {
 			{showBio && props.profile && props.profile.bio && (
 				<Modal header={language.bio} handleClose={() => setShowBio(false)}>
 					<div className={'modal-wrapper'}>
-						<S.HeaderInfoBio>
-							<p>{props.profile.bio}</p>
-						</S.HeaderInfoBio>
+						<p>{props.profile.bio}</p>
 					</div>
 				</Modal>
 			)}