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

Add nav styles and image slideshow

Browse source
This commit is contained in:
Nicholas264 2021-11-22 11:13:07 -08:00
parent 8f297dbbc8
commit 7b3177a8e2
11 changed files with 238 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
build
dist
node_modules
src/public/fonts

21
src/public/components/HorizontalSection.tsx Normal file
View file

@ -0,0 +1,21 @@
import React, {Component} from "react";
interface HorizontalSectionProps {
link: string;
title: string;
}
interface HorizontalSectionState {}
export default class HorizontalSection extends Component<HorizontalSectionProps, HorizontalSectionState> {
constructor(props: HorizontalSectionProps) {
super(props);
this.state = {};
}
public render() {
return <div className="horizontal-section">
<a className="section-title" href={this.props.link}>{this.props.title}</a>
{this.props.children}
</div>;
}
}

36
src/public/components/ImageGallery.tsx Normal file
View file

@ -0,0 +1,36 @@
import React, {Component} from "react";
interface ImageGalleryProps {
urls: string[];
delay: number;
alt: string;
}
interface ImageGalleryState {
progress: number;
}
export default class ImageGallery extends Component<ImageGalleryProps, ImageGalleryState> {
private interval: number;
constructor(props: ImageGalleryProps) {
super(props);
this.state = {
progress: 0
};
this.interval = setInterval(this.changeImage.bind(this), this.props.delay) as any as number;
}
private changeImage(): void {
if (this.state.progress < this.props.urls.length) {
this.setState({progress: this.state.progress + 1});
} else {
this.setState({progress: 0});
}
}
public render() {
return <div className="image-gallery">
<img className="slideshow-image" src={this.props.urls[this.state.progress]} alt={this.props.alt}></img>
</div>;
}
}

17
src/public/components/ImageScrollPanel.tsx Normal file
View file

@ -0,0 +1,17 @@
import React, {Component} from "react";
interface ImageScrollPanelProps {
imageUrls: string[];
}
interface ImageScrollPanelState {}
export default class ImageScrollPanel extends Component<ImageScrollPanelProps, ImageScrollPanelState> {
constructor(props: ImageScrollPanelProps) {
super(props);
this.state = {};
}
public render() {
return <></>;
}
}

20
src/public/components/NavLink.tsx
View file

@ -1,20 +0,0 @@
import React from "react";
interface NavLinkProps {
url: string;
text: string;
}
interface NavLinkState {}
export default class NavLink extends React.Component<NavLinkProps, NavLinkState> {
constructor(props: NavLinkProps) {
super(props);
this.state = {};
}
public render() {
return <div className="nav-link">
<a href={this.props.url}>{this.props.text}</a>
</div>;
}
}

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

@ -1,9 +1,9 @@
import React from "react";
import NavLink from "./NavLink";
interface TopNavProps {
image: string;
links: string[];
names: string[];
alt: string;
}
interface TopNavState {}
@ -15,8 +15,8 @@ export default class TopNav extends React.Component<TopNavProps, TopNavState> {
}
public render() {
let navLinks = this.props.links.map(name=>{
return <NavLink text={name} url={"/"+name.toLowerCase()} key={name}></NavLink>;
let navLinks = this.props.links.map((url, i)=>{
return <a className="nav-link" href={url} key={this.props.names[i]}>{this.props.names[i]}</a>;
});
return <div className="top-nav">

108
src/public/css/fonts.css Normal file
View file

@ -0,0 +1,108 @@
/* open-sans-300 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local(''),
url('../fonts/open-sans-v27-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('../fonts/open-sans-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local(''),
url('../fonts/open-sans-v27-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-500 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
src: local(''),
url('../fonts/open-sans-v27-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local(''),
url('../fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-800 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: local(''),
url('../fonts/open-sans-v27-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-300italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local(''),
url('../fonts/open-sans-v27-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-500italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 500;
src: local(''),
url('../fonts/open-sans-v27-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local(''),
url('../fonts/open-sans-v27-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: local(''),
url('../fonts/open-sans-v27-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local(''),
url('../fonts/open-sans-v27-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-800italic - latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 800;
src: local(''),
url('../fonts/open-sans-v27-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/open-sans-v27-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

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

@ -20,7 +20,45 @@
/* Color vars should go here */
:root {
--dark-blue: #00629b;
--med-blue: #4486c4;
--sky-blue: #6ab7ff;
--grey: #c4d2e3;
--black: #1f1f1f;
--white: #eeeeee;
}
html {
color: var(--black);
font-family: "Open Sans", sans-serif;
}
body {
margin: 0;
}
.top-nav {
width: 100%;
display: flex;
flex-direction: row;
background-color: var(--dark-blue);
align-items: center;
position: fixed;
}
.logo {
width: 10em;
height: auto;
padding: 0.5em;
}
.nav-link {
color: var(--white);
font-size: 1.5em;
margin-left: 0.75em;
margin-right: 0.75em;
text-decoration: none;
}
.top-nav .nav-link:nth-of-type(1) {
margin-left: auto;
}
/* Responsive queries go here */

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

14
src/public/index.tsx
View file

@ -1,6 +1,10 @@
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";
const ACTIVE_PAGES = ["Events","Officers","Projects","Resources","Sponsors"];
interface MainProps {}
interface MainState {}
@ -12,8 +16,14 @@ class Main extends React.Component<MainProps, MainState> {
}
public render() {
return <>
<TopNav links={["Events","Officers","Projects","Resources","Sponsors"]}
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">
<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>
</>;
}
}

1
src/public/template.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<title>$TITLE</title>
<link rel="stylesheet" type="text/css" href="css/fonts.css" media="screen">
<link rel="stylesheet" type="text/css" href="$CSSFILE" media="screen">
<link rel="icon" href="img/favicon.png" type="image/png">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">