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

Fix responsive problem with quotationCarousels

This commit is contained in:
e26chiu 2022-12-11 20:46:11 -05:00
parent 2ace77f0ff
commit cb834c156b
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/QuotationCarousel.tsx
View File

@ -6,12 +6,14 @@ 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. */
circleDiameter?: number; circleDiameter?: number;
className?: string; className?: string;
/** Minimum width of the graph. */
minWidth?: number;
} }
interface CarouselButtonProps { interface CarouselButtonProps {
@ -22,12 +24,12 @@ 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,
className, className,
} = props; } = props;
const width = props.width < minWidth ? minWidth : props.width;
const [activeIdx, setActiveIdx] = useState(0); const [activeIdx, setActiveIdx] = useState(0);
function showNextCard() { function showNextCard() {

18
pages/intimacy-and-drugs.tsx
View File

@ -91,7 +91,11 @@ export default function Demographics() {
heading="How many committed relationships have you been in during university?" 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." 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>
<ComponentWrapper <ComponentWrapper
@ -100,7 +104,11 @@ export default function Demographics() {
align="left" align="left"
noBackground noBackground
> >
<BarGraphVertical data={I4} {...barGraphProps(isMobile, pageWidth)} /> <BarGraphVertical
data={I4}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper> </ComponentWrapper>
<ComponentWrapper <ComponentWrapper
@ -160,7 +168,7 @@ export default function Demographics() {
data={I8i} data={I8i}
width={barGraphWidth(isMobile, pageWidth)} width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight} height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 220 } }} margin={{ ...barGraphMargin, ...{ left: 100 } }}
/> />
</ComponentWrapper> </ComponentWrapper>
@ -170,7 +178,7 @@ export default function Demographics() {
data={I9} data={I9}
circleDiameter={0} circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)} width={barGraphWidth(isMobile, pageWidth)}
height={400} height={isMobile ? 600 : 500}
/> />
</div> </div>
</ComponentWrapper> </ComponentWrapper>
@ -184,7 +192,7 @@ export default function Demographics() {
data={I10} data={I10}
circleDiameter={0} circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)} width={barGraphWidth(isMobile, pageWidth)}
height={400} height={600}
/> />
</div> </div>
</ComponentWrapper> </ComponentWrapper>