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

Temp version

Browse source
This commit is contained in:
Nicholas264 2022-01-24 00:08:51 -08:00
parent 03ef5c0b6d
commit 56fd79d6b6
6 changed files with 160 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/public/components/Availability.tsx Normal file
View file

@ -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<AvailabilityProps, AvailabilityState> {
constructor(props: AvailabilityProps) {
super(props);
this.state = {
available: false
};
}
public render() {
return <div className="availability">
{}
</div>;
}
}

22
src/public/components/ButtonLink.tsx Normal file
View file

@ -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<ButtonLinkProps, ButtonLinkState> {
constructor(props: ButtonLinkProps) {
super(props);
this.state = {};
}
public render() {
return <button className="link-button" onClick={
(()=>(window.location as any)=this.props.url).bind(this)
}>
{this.props.children}
</button>;
}
}

15
src/public/components/Carousel.tsx
View file

@ -2,21 +2,28 @@ import * as React from "react";
import {Component} from "react";
interface CarouselProps {}
interface CarouselState {}
interface CarouselState {
innerRef: React.Ref<HTMLDivElement>
}
export default class Carousel extends Component<CarouselProps, CarouselState> {
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 <div className="carousel">
{this.props.children}
<div className="carousel-inner" ref={this.state.innerRef}>
{this.props.children}
</div>
<div className="carousel-next" onClick={this.scrollToNext.bind(this)}>&gt;</div>
</div>;
}

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

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

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

@ -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 */

35
src/public/index.tsx
View file

@ -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<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>
<HorizontalSection title="About" link="about:blank" row={true}>
<HorizontalSection title="About" link="about:blank" id="about">
<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?
<span className="description-text">
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?
</span>
</HorizontalSection>
<HorizontalSection title="Events" link="about:blank">
<HorizontalSection title="Events" link="about:blank" id="events">
<Carousel>
{EVENTS.map(e=><CarouselItem {...e}/>)}
</Carousel>
</HorizontalSection>
<HorizontalSection title="Project Space" link="about:blank">
<HorizontalSection title="Project Space" link="about:blank" id="projects">
<ImageGallery urls={PROJECT_SPACE} alt="The IEEE Project Space" delay={8000}></ImageGallery>
<span className="description-text">
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?
</span>
<br/>
<ButtonLink url="about:blank">Check all availability</ButtonLink>
</HorizontalSection>
</>;
}