From 3db9dc11735c1cb53d801788b46e9c7fe79176f5 Mon Sep 17 00:00:00 2001 From: Nicholas264 <22565232+Nicholas264@users.noreply.github.com> Date: Sat, 12 Feb 2022 03:22:52 -0800 Subject: [PATCH] Add more styles --- src/public/components/Carousel.tsx | 8 +++++++ src/public/components/CarouselItem.tsx | 4 ++-- src/public/css/styles.css | 22 +++++++++++++++---- src/public/img/temp.png | Bin 0 -> 6342 bytes src/public/index.tsx | 28 +++++++++---------------- 5 files changed, 38 insertions(+), 24 deletions(-) create mode 100644 src/public/img/temp.png diff --git a/src/public/components/Carousel.tsx b/src/public/components/Carousel.tsx index 9f09e86..9283390 100644 --- a/src/public/components/Carousel.tsx +++ b/src/public/components/Carousel.tsx @@ -27,4 +27,12 @@ export default class Carousel extends Component {
>
; } + public componentDidMount(): void { + let elem = (this.state.innerRef as any).current as HTMLDivElement; + if (elem.scrollWidth < elem.parentElement.scrollWidth) { + elem.parentElement.querySelector(".carousel-next").setAttribute("style", "display: none;"); + } else { + elem.parentElement.querySelector(".carousel-next").setAttribute("style", ""); + } + } } \ No newline at end of file diff --git a/src/public/components/CarouselItem.tsx b/src/public/components/CarouselItem.tsx index 68b058e..d48cf0a 100644 --- a/src/public/components/CarouselItem.tsx +++ b/src/public/components/CarouselItem.tsx @@ -15,9 +15,9 @@ export default class CarouselItem extends Component + return {this.props.workshopName} - ; + ; } } diff --git a/src/public/css/styles.css b/src/public/css/styles.css index d2db629..b912acf 100644 --- a/src/public/css/styles.css +++ b/src/public/css/styles.css @@ -94,6 +94,10 @@ body { justify-content: space-between; column-gap: 2.5em; } +.row-group::after{ + content: ""; + width: 10em; +} .section-title { color: var(--med-blue); font-size: 2.4em; @@ -229,9 +233,19 @@ body { } /* Responsive queries go here */ -@media screen and (max-width: 760px) { - +@media screen and (max-width: 617px) { + .row-group { + justify-content: center; + } + .slideshow-image { + width: 18em; + } + .nav-link { + display: none; + } } -@media screen and (max-width: 430px) { - +@media screen and (min-width: 1645px) { + .row-group::after { + width: 25em; + } } \ No newline at end of file diff --git a/src/public/img/temp.png b/src/public/img/temp.png new file mode 100644 index 0000000000000000000000000000000000000000..01a7eff4c4ac0bbb5067e810ea524306e35d6afe GIT binary patch literal 6342 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 C!LO|V literal 0 HcmV?d00001 diff --git a/src/public/index.tsx b/src/public/index.tsx index 1643cfc..55e6879 100644 --- a/src/public/index.tsx +++ b/src/public/index.tsx @@ -34,14 +34,6 @@ const EVENTS = [{ image: "img/event.png", workshopName: "Workshop Name", location: "/" -},{ - image: "img/event.png", - workshopName: "Workshop Name", - location: "/" -},{ - image: "img/event.png", - workshopName: "Workshop Name", - location: "/" }]; const officers = [{ @@ -83,7 +75,7 @@ const officers = [{ },{ name: "Samyak Karnavat", position: "Social Chair", - photo: "img/samyak.jpg" + photo: "img/temp.png" },{ name: "Tasnia Jamal", position: "Social Chair", @@ -95,7 +87,7 @@ const officers = [{ },{ name: "Zhiqiang Pi", position: "Quarterly Projects Chair", - photo: "img/zhiqiang.jpg" + photo: "img/temp.png" },{ name: "Kevin Chang", position: "Quarterly Projects Chair", @@ -103,7 +95,7 @@ const officers = [{ },{ name: "Benjamin Tang", position: "Project Space Chair", - photo: "img/benjamin.jpg" + photo: "img/temp.png" },{ name: "Jason Liang", position: "Professional Chair", @@ -131,11 +123,11 @@ const officers = [{ },{ name: "Soyon Kim", position: "Outreach Chair", - photo: "img/soyon.jpg" + photo: "img/temp.png" },{ name: "Niklas Chang", position: "Events Coordinator", - photo: "img/niklas.jpg" + photo: "img/temp.png" }]; interface MainProps {} @@ -149,19 +141,19 @@ class Main extends React.Component { public render() { return <> "#" + e.toLowerCase())} image="img/IEEEUCSD.png" alt="IEEE at UCSD Logo"> - + We are dedicated to helping develop students into professional Engineers

As an organization, we strive to provide opportunities to students both at UC San Diego and in the larger STEM community to gain hands-on experience with autonomous robotics and its various disciplines. Throughout the year, we host dozens of events and workshops to teach skills not frequently taught in the classroom, as well as outreach events for students looking to give back to the STEM community. We also provide professional development and other resources to help students achieve their true potential as they develop into professional engineers. - + {EVENTS.map(e=>)} - + This is a description all about the project space and how amazingly awesome it is @@ -172,9 +164,9 @@ class Main extends React.Component {
Check all availability - Check all availability + Check all availability - + {officers.map(o=>)} ;