From 56fd79d6b68e30676b9818a3b2513dcc8df15835 Mon Sep 17 00:00:00 2001 From: Nicholas264 <22565232+Nicholas264@users.noreply.github.com> Date: Mon, 24 Jan 2022 00:08:51 -0800 Subject: [PATCH] Temp version --- src/public/components/Availability.tsx | 22 ++++++ src/public/components/ButtonLink.tsx | 22 ++++++ src/public/components/Carousel.tsx | 15 +++- src/public/components/HorizontalSection.tsx | 5 +- src/public/css/styles.css | 86 ++++++++++++++++++--- src/public/index.tsx | 35 ++++++--- 6 files changed, 160 insertions(+), 25 deletions(-) create mode 100644 src/public/components/Availability.tsx create mode 100644 src/public/components/ButtonLink.tsx diff --git a/src/public/components/Availability.tsx b/src/public/components/Availability.tsx new file mode 100644 index 0000000..27ced49 --- /dev/null +++ b/src/public/components/Availability.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import {Component} from "react"; + +interface AvailabilityProps {} +interface AvailabilityState { + available: boolean; +} + +export default class Availability extends Component { + constructor(props: AvailabilityProps) { + super(props); + this.state = { + available: false + }; + } + + public render() { + return
+ {} +
; + } +} diff --git a/src/public/components/ButtonLink.tsx b/src/public/components/ButtonLink.tsx new file mode 100644 index 0000000..44cb068 --- /dev/null +++ b/src/public/components/ButtonLink.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import {Component} from "react"; + +interface ButtonLinkProps { + url: string; +} +interface ButtonLinkState {} + +export default class ButtonLink extends Component { + constructor(props: ButtonLinkProps) { + super(props); + this.state = {}; + } + + public render() { + return ; + } +} diff --git a/src/public/components/Carousel.tsx b/src/public/components/Carousel.tsx index be8dd55..43705d0 100644 --- a/src/public/components/Carousel.tsx +++ b/src/public/components/Carousel.tsx @@ -2,21 +2,28 @@ import * as React from "react"; import {Component} from "react"; interface CarouselProps {} -interface CarouselState {} +interface CarouselState { + innerRef: React.Ref +} export default class Carousel extends Component { constructor(props: CarouselProps) { super(props); - this.state = {}; + this.state = { + innerRef: React.createRef() + }; } private scrollToNext(e: MouseEvent) { - // implement later + let elem = (this.state.innerRef as any).current; + elem.scrollTo({left: elem.scrollWidth, behavior: "smooth"}) } public render() { return
- {this.props.children} +
+ {this.props.children} +
>
; } diff --git a/src/public/components/HorizontalSection.tsx b/src/public/components/HorizontalSection.tsx index c43fa46..a0d4056 100644 --- a/src/public/components/HorizontalSection.tsx +++ b/src/public/components/HorizontalSection.tsx @@ -4,6 +4,7 @@ interface HorizontalSectionProps { link: string; title: string; row?: boolean; + id?: string; } interface HorizontalSectionState {} @@ -14,9 +15,9 @@ export default class HorizontalSection extends Component + return
{this.props.title} -
+
{this.props.children}
; diff --git a/src/public/css/styles.css b/src/public/css/styles.css index 40e52f7..5f3eaae 100644 --- a/src/public/css/styles.css +++ b/src/public/css/styles.css @@ -17,6 +17,7 @@ } *::-webkit-scrollbar { width: 0.6em; + height: 0.6em; } *::-webkit-scrollbar-track { background: transparent; @@ -49,7 +50,7 @@ body { } .nav-link { color: var(--white); - font-size: 1.5em; + font-size: 1.6em; margin-left: 0.75em; margin-right: 0.75em; text-decoration: none; @@ -88,9 +89,11 @@ body { } .section-title { color: var(--med-blue); - font-size: 2.2em; + font-size: 2.4em; text-decoration: none; width: fit-content; + padding-bottom: 0.15em; + font-weight: bold; } .section-title:hover { text-decoration: underline; @@ -98,23 +101,67 @@ body { .carousel-item { display: flex; flex-direction: column; - padding: 1em; - background: ghostwhite; + background: white; box-shadow: 3px 3px 5px 1px grey; margin: 0 1em; } -.carousel { +.carousel-inner { display: flex; overflow-x: auto; padding: 1em 0; } -.carousel :first-child { - margin-left: 0; +.carousel { + position: relative; } -.carousel :last-child { - margin-right: 0; +.carousel::after, .carousel::before { + content: ""; + width: 1em; + height: calc(100% - 0.6em); + position: absolute; + top: 0; + right: 0; + background: linear-gradient(270deg, white, transparent) +} +.carousel::before { + left: 0; + background: linear-gradient(90deg, white, transparent); +} +.carousel-next { + position: absolute; + right: -0.5em; + font-weight: 1000; + font-size: 2em; + border-radius: 1000px; + background: var(--med-blue); + color: var(--white); + width: 1.5em; + height: 1.5em; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.8; + top: calc(50% - 0.75em); + z-index: 1; + user-select: none; + cursor: pointer; +} +.carousel-inner::-webkit-scrollbar-thumb { + background-color: var(--grey); +} +.carousel-item a { + font-weight: 500; + color: var(--med-blue); + padding: 0.5em; +} +.carousel-item a:hover { + color: var(--sky-blue); +} +.carousel-item a:active { + color: var(--dark-blue) +} +.description-text { + font-size: 1.2em; } - /* Image slideshow styles */ .slideshow-image { width: 22em; @@ -122,6 +169,25 @@ body { } .image-slideshow { margin-right: 1em; + float: left; + height: fit-content; + padding: 0 1em 1em 0; +} + +.link-button { + padding: 0.5em; + background-color: var(--med-blue); + border-radius: 1em; + border: none; + font-size: 1.5em; + color: white; + margin-top: 1em; +} +.link-button:hover { + background-color: var(--sky-blue); +} +.link-button:active { + background-color: var(--dark-blue); } /* Responsive queries go here */ diff --git a/src/public/index.tsx b/src/public/index.tsx index bf57e8a..b02d1f9 100644 --- a/src/public/index.tsx +++ b/src/public/index.tsx @@ -5,6 +5,7 @@ import HorizontalSection from "./components/HorizontalSection"; import ImageGallery from "./components/ImageSlideshow"; import Carousel from "./components/Carousel"; import CarouselItem from "./components/CarouselItem"; +import ButtonLink from "./components/ButtonLink"; // The links that are on the top nav bar that link to a lowercase version of their page const ACTIVE_PAGES: string[] = ["About","Events","Officers","Projects","Resources","Sponsors"]; @@ -14,6 +15,11 @@ const TEAM_PHOTOS: string[] = [ "https://dummyimage.com/300x200/000/fff.png&text=image2", "https://dummyimage.com/1200x800/000/fff.png&text=image3" ]; +const PROJECT_SPACE: string[] = [ + "https://dummyimage.com/600x400/000/fff.png&text=image1", + "https://dummyimage.com/300x200/000/fff.png&text=image2", + "https://dummyimage.com/1200x800/000/fff.png&text=image3" +]; const EVENTS = [{ image: "img/event.png", workshopName: "Workshop Name", @@ -47,21 +53,32 @@ class Main extends React.Component { public render() { return <> "#" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"> - + - This is the about IEEE text that should describe all about our organization. - This text should be a succinct summary of what we're all about. Lorem, ipsum dolor - sit amet consectetur adipisicing elit. Soluta voluptate eligendi vero enim, qui - fugiat eveniet consectetur quis, quas deleniti perferendis minus commodi ducimus - ipsum necessitatibus voluptates sed dolor neque? + + This is the about IEEE text that should describe all about our organization. + This text should be a succinct summary of what we're all about. Lorem, ipsum dolor + sit amet consectetur adipisicing elit. Soluta voluptate eligendi vero enim, qui + fugiat eveniet consectetur quis, quas deleniti perferendis minus commodi ducimus + ipsum necessitatibus voluptates sed dolor neque? + - + {EVENTS.map(e=>)} - - + + + + This is a description all about the project space and how amazingly awesome it is + and also how cool it is too. Lorem, ipsum dolor + sit amet consectetur adipisicing elit. Soluta voluptate eligendi vero enim, qui + fugiat eveniet consectetur quis, quas deleniti perferendis minus commodi ducimus + ipsum necessitatibus voluptates sed dolor neque? + +
+ Check all availability ; }