www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Fix mobile issue with quotationCarousel

This commit is contained in:
e26chiu 2022-12-11 21:14:01 -05:00
parent 83058dd429
commit 50d97c74ff
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/QuotationCarousel.tsx
View File

@ -6,7 +6,7 @@ import styles from "./QuotationCarousel.module.css";
interface QuotationCarouselProps { interface QuotationCarouselProps {
data: string[]; data: string[];
/** Width of the entire carousel including the buttons, in px. */ /** Width of the entire carousel including the buttons, in px. */
width: number; width?: number;
/** Minimum height of the carousel, in px. */ /** Minimum height of the carousel, in px. */
height?: number; height?: number;
/** Diameter of the background circles, in px. Set to 0 for no circles. */ /** Diameter of the background circles, in px. Set to 0 for no circles. */
@ -24,12 +24,13 @@ interface CarouselButtonProps {
export function QuotationCarousel(props: QuotationCarouselProps) { export function QuotationCarousel(props: QuotationCarouselProps) {
const { const {
data, data,
width = 600,
height = 100, height = 100,
circleDiameter = 120, circleDiameter = 120,
minWidth = 600, minWidth = 600,
className, className,
} = props; } = props;
const width = props.width < minWidth ? minWidth : props.width; const actualWidth = width < minWidth ? minWidth : width;
const [activeIdx, setActiveIdx] = useState(0); const [activeIdx, setActiveIdx] = useState(0);
function showNextCard() { function showNextCard() {
@ -45,7 +46,10 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
className={ className={
className ? `${className} ${styles.carousel}` : styles.carousel className ? `${className} ${styles.carousel}` : styles.carousel
} }
style={{ width: `${width / 16}rem`, minHeight: `${height / 16}rem` }} style={{
width: `${actualWidth / 16}rem`,
minHeight: `${height / 16}rem`,
}}
> >
<Circle className={styles.circle} diameter={circleDiameter} /> <Circle className={styles.circle} diameter={circleDiameter} />
<Circle <Circle