Fix responsive problem with quotationCarousels
This commit is contained in:
parent
2ace77f0ff
commit
cb834c156b
|
@ -6,12 +6,14 @@ import styles from "./QuotationCarousel.module.css";
|
|||
interface QuotationCarouselProps {
|
||||
data: string[];
|
||||
/** Width of the entire carousel including the buttons, in px. */
|
||||
width?: number;
|
||||
width: number;
|
||||
/** Minimum height of the carousel, in px. */
|
||||
height?: number;
|
||||
/** Diameter of the background circles, in px. Set to 0 for no circles. */
|
||||
circleDiameter?: number;
|
||||
className?: string;
|
||||
/** Minimum width of the graph. */
|
||||
minWidth?: number;
|
||||
}
|
||||
|
||||
interface CarouselButtonProps {
|
||||
|
@ -22,12 +24,12 @@ interface CarouselButtonProps {
|
|||
export function QuotationCarousel(props: QuotationCarouselProps) {
|
||||
const {
|
||||
data,
|
||||
width = 600,
|
||||
height = 100,
|
||||
circleDiameter = 120,
|
||||
minWidth = 600,
|
||||
className,
|
||||
} = props;
|
||||
|
||||
const width = props.width < minWidth ? minWidth : props.width;
|
||||
const [activeIdx, setActiveIdx] = useState(0);
|
||||
|
||||
function showNextCard() {
|
||||
|
|
|
@ -91,7 +91,11 @@ export default function Demographics() {
|
|||
heading="How many committed relationships have you been in during university?"
|
||||
bodyText="Our respondents most commonly have been in either 0 or 1 committed relationship during their undergrad. On the other end, 5 is the most number of committed relationships indicated."
|
||||
>
|
||||
<BarGraphVertical data={I3} {...barGraphProps(isMobile, pageWidth)} />
|
||||
<BarGraphVertical
|
||||
data={I3}
|
||||
{...barGraphProps(isMobile, pageWidth)}
|
||||
lowerLabelDy="0"
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
|
@ -100,7 +104,11 @@ export default function Demographics() {
|
|||
align="left"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={I4} {...barGraphProps(isMobile, pageWidth)} />
|
||||
<BarGraphVertical
|
||||
data={I4}
|
||||
{...barGraphProps(isMobile, pageWidth)}
|
||||
lowerLabelDy="0"
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
|
@ -160,7 +168,7 @@ export default function Demographics() {
|
|||
data={I8i}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 220 } }}
|
||||
margin={{ ...barGraphMargin, ...{ left: 100 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
@ -170,7 +178,7 @@ export default function Demographics() {
|
|||
data={I9}
|
||||
circleDiameter={0}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={400}
|
||||
height={isMobile ? 600 : 500}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
@ -184,7 +192,7 @@ export default function Demographics() {
|
|||
data={I10}
|
||||
circleDiameter={0}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={400}
|
||||
height={600}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
|
Loading…
Reference in New Issue