From c38439a2332c3ecc3b0a85631b57368bc066be0e Mon Sep 17 00:00:00 2001 From: Nicholas264 <22565232+Nicholas264@users.noreply.github.com> Date: Sat, 15 Jan 2022 15:00:59 -0800 Subject: [PATCH] Carousel skeleton completed --- package.json | 2 +- src/public/components/Carousel.tsx | 23 ++++ src/public/components/CarouselItem.tsx | 23 ++++ src/public/components/HorizontalSection.tsx | 5 +- .../{ImageGallery.tsx => ImageSlideshow.tsx} | 12 +- src/public/components/TopNav.tsx | 7 +- src/public/css/styles.css | 107 ++++++++++++++---- src/public/img/event.png | Bin 0 -> 7408 bytes src/public/index.tsx | 57 ++++++++-- 9 files changed, 195 insertions(+), 41 deletions(-) create mode 100644 src/public/components/Carousel.tsx create mode 100644 src/public/components/CarouselItem.tsx rename src/public/components/{ImageGallery.tsx => ImageSlideshow.tsx} (65%) create mode 100644 src/public/img/event.png diff --git a/package.json b/package.json index 7f2328b..e4f48ae 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "", "main": "build/index.js", "scripts": { - "build": "webpack & tsc", + "build": "webpack & tsc & time /T", "watch": "npm-watch build" }, "watch": { diff --git a/src/public/components/Carousel.tsx b/src/public/components/Carousel.tsx new file mode 100644 index 0000000..be8dd55 --- /dev/null +++ b/src/public/components/Carousel.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import {Component} from "react"; + +interface CarouselProps {} +interface CarouselState {} + +export default class Carousel extends Component { + constructor(props: CarouselProps) { + super(props); + this.state = {}; + } + + private scrollToNext(e: MouseEvent) { + // implement later + } + + public render() { + return
+ {this.props.children} +
>
+
; + } +} \ No newline at end of file diff --git a/src/public/components/CarouselItem.tsx b/src/public/components/CarouselItem.tsx new file mode 100644 index 0000000..68b058e --- /dev/null +++ b/src/public/components/CarouselItem.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import {Component} from "react"; + +interface CarouselItemProps { + location: string; + workshopName: string; + image: string; +} +interface CarouselItemState {} + +export default class CarouselItem extends Component { + constructor(props: CarouselItemProps) { + super(props); + this.state = {}; + } + + public render() { + return
+ + {this.props.workshopName} +
; + } +} diff --git a/src/public/components/HorizontalSection.tsx b/src/public/components/HorizontalSection.tsx index c4a25ef..c43fa46 100644 --- a/src/public/components/HorizontalSection.tsx +++ b/src/public/components/HorizontalSection.tsx @@ -3,6 +3,7 @@ import React, {Component} from "react"; interface HorizontalSectionProps { link: string; title: string; + row?: boolean; } interface HorizontalSectionState {} @@ -15,7 +16,9 @@ export default class HorizontalSection extends Component {this.props.title} - {this.props.children} +
+ {this.props.children} +
; } } diff --git a/src/public/components/ImageGallery.tsx b/src/public/components/ImageSlideshow.tsx similarity index 65% rename from src/public/components/ImageGallery.tsx rename to src/public/components/ImageSlideshow.tsx index e774848..6dded43 100644 --- a/src/public/components/ImageGallery.tsx +++ b/src/public/components/ImageSlideshow.tsx @@ -1,18 +1,18 @@ import React, {Component} from "react"; -interface ImageGalleryProps { +interface ImageSlideshowProps { urls: string[]; delay: number; alt: string; } -interface ImageGalleryState { +interface ImageSlideshowState { progress: number; } -export default class ImageGallery extends Component { +export default class ImageSlideshow extends Component { private interval: number; - constructor(props: ImageGalleryProps) { + constructor(props: ImageSlideshowProps) { super(props); this.state = { progress: 0 @@ -21,7 +21,7 @@ export default class ImageGallery extends Component + return
{this.props.alt}
; } diff --git a/src/public/components/TopNav.tsx b/src/public/components/TopNav.tsx index 1c15dbd..5430fdb 100644 --- a/src/public/components/TopNav.tsx +++ b/src/public/components/TopNav.tsx @@ -20,8 +20,11 @@ export default class TopNav extends React.Component { }); return
- {this.props.alt} - {navLinks} +
+ {this.props.alt} + {navLinks} +
+
; } } \ No newline at end of file diff --git a/src/public/css/styles.css b/src/public/css/styles.css index 0a506b1..40e52f7 100644 --- a/src/public/css/styles.css +++ b/src/public/css/styles.css @@ -1,22 +1,4 @@ -::-webkit-scrollbar { - width: 10px; -} -::-webkit-scrollbar-button, -::-webkit-scrollbar-corner { - display: none; -} -::-webkit-scrollbar-thumb { - background: #ececec; -} -::-webkit-scrollbar-thumb:hover { - background: #e2e2e2; -} -::-webkit-scrollbar-thumb:active { - background: #b8b8b8; -} -::-webkit-scrollbar-track { - background: #383838; -} + /* Color vars should go here */ :root { @@ -26,8 +8,23 @@ --grey: #c4d2e3; --black: #1f1f1f; --white: #eeeeee; + --accent: #ffe419; } +* { + scrollbar-width: auto; + scrollbar-color: var(--black) transparent; +} +*::-webkit-scrollbar { + width: 0.6em; +} +*::-webkit-scrollbar-track { + background: transparent; +} +*::-webkit-scrollbar-thumb { + background-color: var(--black); + border-radius: 10px; +} html { color: var(--black); font-family: "Open Sans", sans-serif; @@ -36,13 +33,14 @@ body { margin: 0; } +/* Top nav styles */ .top-nav { width: 100%; display: flex; - flex-direction: row; + flex-direction: column; background-color: var(--dark-blue); align-items: center; - position: fixed; + position: relative; } .logo { width: 10em; @@ -56,10 +54,75 @@ body { margin-right: 0.75em; text-decoration: none; } - .top-nav .nav-link:nth-of-type(1) { margin-left: auto; } +.bottom-bar { + width: 100%; + height: 0.25em; + background-color: var(--accent); +} +.nav-container { + width: 100%; + display: flex; + align-items: center; +} + +/* */ +.horizontal-section { + padding: 2em; + width: auto; + display: flex; + flex-direction: column; + padding-left: 15%; + padding-right: 15%; + font-size: 1.2em; +} +.column-group { + display: flex; + flex-direction: column; +} +.row-group { + display: flex; + flex-direction: row; +} +.section-title { + color: var(--med-blue); + font-size: 2.2em; + text-decoration: none; + width: fit-content; +} +.section-title:hover { + text-decoration: underline; +} +.carousel-item { + display: flex; + flex-direction: column; + padding: 1em; + background: ghostwhite; + box-shadow: 3px 3px 5px 1px grey; + margin: 0 1em; +} +.carousel { + display: flex; + overflow-x: auto; + padding: 1em 0; +} +.carousel :first-child { + margin-left: 0; +} +.carousel :last-child { + margin-right: 0; +} + +/* Image slideshow styles */ +.slideshow-image { + width: 22em; + height: auto; +} +.image-slideshow { + margin-right: 1em; +} /* Responsive queries go here */ @media screen and (max-width: 760px) { diff --git a/src/public/img/event.png b/src/public/img/event.png new file mode 100644 index 0000000000000000000000000000000000000000..e837c6cec3abfe0c5375b574b89302b4e38899a1 GIT binary patch literal 7408 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 S+|4f~iJG#uQpKweU;Ybk0I9D4 literal 0 HcmV?d00001 diff --git a/src/public/index.tsx b/src/public/index.tsx index 9b4eac2..bf57e8a 100644 --- a/src/public/index.tsx +++ b/src/public/index.tsx @@ -2,9 +2,39 @@ import * as ReactDom from "react-dom"; import * as React from "react"; import TopNav from "./components/TopNav"; import HorizontalSection from "./components/HorizontalSection"; -import ImageGallery from "./components/ImageGallery"; +import ImageGallery from "./components/ImageSlideshow"; +import Carousel from "./components/Carousel"; +import CarouselItem from "./components/CarouselItem"; -const ACTIVE_PAGES = ["Events","Officers","Projects","Resources","Sponsors"]; +// 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"]; +// Urls of team photos that will go in the "About" slideshow +const TEAM_PHOTOS: 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", + location: "/" +},{ + image: "img/event.png", + workshopName: "Workshop Name", + location: "/" +},{ + image: "img/event.png", + workshopName: "Workshop Name", + location: "/" +},{ + image: "img/event.png", + workshopName: "Workshop Name", + location: "/" +},{ + image: "img/event.png", + workshopName: "Workshop Name", + location: "/" +}]; interface MainProps {} interface MainState {} @@ -16,13 +46,22 @@ class Main extends React.Component { } public render() { return <> - "/" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"> - - - + "#" + 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? + + + + {EVENTS.map(e=>)} + + + + ; }