Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 152fbc24 authored by Plumtree3D's avatar Plumtree3D
Browse files

feat: read more button on testimonies

parent 4be4b084
No related branches found
No related tags found
1 merge request!32Resolve "mettre à jour les témoignages"
Pipeline #33401 passed
......@@ -2,6 +2,6 @@ import React from 'react';
export default function Button({href}) {
return (
<a className='button button--primary' rel="noreferrer" target='_blank' href={href}> Je veux en savoir plus ! </a>
<a className='button large button--primary' rel="noreferrer" target='_blank' href={href}> Je veux en savoir plus ! </a>
);
}
......@@ -3,7 +3,7 @@ import Link from "@docusaurus/Link";
const Button = () => (
<div className="button-frame">
<Link className="button button--primary" to="#join"> Je rejoins les Compagnons du DevOps </Link>
<Link className="button large button--primary" to="#join"> Je rejoins les Compagnons du DevOps </Link>
</div>
)
......
import React from 'react';
import { useState } from 'react';
import styles from './styles.module.css'
import useBaseUrl from "@docusaurus/useBaseUrl";
export default function HomepageList(props) {
const [showMore, setShowMore] = useState(false);
const maxLength = 350
return (
<div className={styles.wholeCard +" avatar avatar--vertical"}>
<a href={props.url} className={styles.avatarSegment + " text--center margin-bottom--md"} target="_blank" rel="noreferrer">
......@@ -17,8 +21,14 @@ export default function HomepageList(props) {
<div className="avatar__intro card padding--md padding-top--xl">
<h3 className="avatar__name"> {props.title} </h3>
<p className="avatar__subtitle" style={{ whiteSpace: 'pre-wrap' }}>
{props.text}
{props.text.length > maxLength ?
showMore ? props.text : `${props.text.substring(0, maxLength)}...`
:
props.text
}
</p>
{props.text.length > maxLength && <button className="button button--sm button--primary" onClick={() => setShowMore(!showMore)}>{showMore ? "Voir moins" : "Voir plus" }</button>}
</div>
</div>
)
......
......@@ -29,12 +29,15 @@ strong, b {
font-family: var(--ifm-font-family-bold);
}
.button--primary {
.large {
font-size: large;
padding: 10px 30px;
}
.button--primary {
background-color: var(--ifm-button-primary-color);
color: var(--text-contrast);
margin: auto;
padding: 10px 30px;
cursor: pointer;
border: 0;
outline: 0;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment