Webmaster/old-ieeeucsd-org
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Carousel skeleton completed

Browse source
This commit is contained in:
Nicholas264 2022-01-15 15:00:59 -08:00
parent 7b3177a8e2
commit c38439a233
9 changed files with 195 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -4,7 +4,7 @@
"description": "",
"main": "build/index.js",
"scripts": {
"build": "webpack & tsc",
"build": "webpack & tsc & time /T",
"watch": "npm-watch build"
},
"watch": {

23
src/public/components/Carousel.tsx Normal file
View file

@ -0,0 +1,23 @@
import * as React from "react";
import {Component} from "react";
interface CarouselProps {}
interface CarouselState {}
export default class Carousel extends Component<CarouselProps, CarouselState> {
constructor(props: CarouselProps) {
super(props);
this.state = {};
}
private scrollToNext(e: MouseEvent) {
// implement later
}
public render() {
return <div className="carousel">
{this.props.children}
<div className="carousel-next" onClick={this.scrollToNext.bind(this)}>&gt;</div>
</div>;
}
}

23
src/public/components/CarouselItem.tsx Normal file
View file

@ -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<CarouselItemProps, CarouselItemState> {
constructor(props: CarouselItemProps) {
super(props);
this.state = {};
}
public render() {
return <div className="carousel-item">
<img src={this.props.image}></img>
<a href={this.props.location}>{this.props.workshopName}</a>
</div>;
}
}

5
src/public/components/HorizontalSection.tsx
View file

@ -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<HorizontalSectionProps,
public render() {
return <div className="horizontal-section">
<a className="section-title" href={this.props.link}>{this.props.title}</a>
{this.props.children}
<div className={this.props.row ? "row-group" : "col-group"}>
{this.props.children}
</div>
</div>;
}
}

12
src/public/components/ImageGallery.tsx → src/public/components/ImageSlideshow.tsx
View file

@ -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<ImageGalleryProps, ImageGalleryState> {
export default class ImageSlideshow extends Component<ImageSlideshowProps, ImageSlideshowState> {
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<ImageGalleryProps, ImageGall
}
private changeImage(): void {
if (this.state.progress < this.props.urls.length) {
if (this.state.progress < this.props.urls.length - 1) {
this.setState({progress: this.state.progress + 1});
} else {
this.setState({progress: 0});
@ -29,7 +29,7 @@ export default class ImageGallery extends Component<ImageGalleryProps, ImageGall
}
public render() {
return <div className="image-gallery">
return <div className="image-slideshow">
<img className="slideshow-image" src={this.props.urls[this.state.progress]} alt={this.props.alt}></img>
</div>;
}

7
src/public/components/TopNav.tsx
View file

@ -20,8 +20,11 @@ export default class TopNav extends React.Component<TopNavProps, TopNavState> {
});
return <div className="top-nav">
<img className="logo" src={this.props.image} alt={this.props.alt}></img>
{navLinks}
<div className="nav-container">
<img className="logo" src={this.props.image} alt={this.props.alt}></img>
{navLinks}
</div>
<div className="bottom-bar"></div>
</div>;
}
}

107
src/public/css/styles.css
View file

@ -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) {

BIN
src/public/img/event.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

55
src/public/index.tsx
View file

@ -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<MainProps, MainState> {
}
public render() {
return <>
<TopNav names={ACTIVE_PAGES} links={ACTIVE_PAGES.map(e=>"/" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"></TopNav>
<TopNav names={ACTIVE_PAGES} links={ACTIVE_PAGES.map(e=>"#" + e.toLowerCase())} image="img/logo.png" alt="IEEE at UCSD Logo"></TopNav>
<HorizontalSection title="About" link="about:blank" row={true}>
<ImageGallery urls={TEAM_PHOTOS} alt="Team photos" delay={8000}></ImageGallery>
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?
</HorizontalSection>
<HorizontalSection title="Events" link="about:blank">
<Carousel>
{EVENTS.map(e=><CarouselItem {...e}/>)}
</Carousel>
</HorizontalSection>
<HorizontalSection title="Project Space" link="about:blank">
<HorizontalSection title="About" link="about:blank">
<ImageGallery urls={["https://images.unsplash.com/photo-1637266702043-287eb7d2b5b2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80",
"https://images.unsplash.com/photo-1637278643503-3a49c91b7000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"https://images.unsplash.com/photo-1637278643503-3a49c91b7000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"]}
alt="Team photos" delay={2000}></ImageGallery>
</HorizontalSection>
</>;
}