Merge pull request #14 from dailybruin/henry

finishing touches?
dailybruin · Dec 8, 2019 · 190804d · 190804d
2 parents 43a3e86 + 052b29f
commit 190804d
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 13 deletions.
diff --git a/src/components/ArticleNav/ArticleNav.tsx b/src/components/ArticleNav/ArticleNav.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import styled from 'react-emotion'
+import { Link } from 'gatsby'
+
+const Wrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #6d786a;
+  font-family: IBM Plex Mono;
+  color: #fffcf5;
+  border-bottom: solid 1px #fffcf5;
+  padding: 10vh auto;
+`
+
+const RightNav = styled('div')`
+  display: flex;
+`
+
+const NavItem = styled(Link)`
+  text-decoration: none;
+  color: #fffcf5;
+  &:hover {
+    color: #c2d59c;
+    text-decoration: underline;
+  }
+  font-size: 14px;
+  margin-right: 30px;
+`
+
+const PageTitle = styled(Link)`
+  text-decoration: none;
+  color: #fffcf5;
+  text-transform: uppercase;
+  font-size: 30px;
+  margin: 1vh 20px;
+`
+
+export default class ArticleNav extends React.Component {
+  render() {
+    return (
+      <>
+        <Wrapper>
+          <PageTitle to="/">A Wasted Opportunity</PageTitle>
+          <RightNav>
+            <NavItem to="/#ZeroWasteatUCLA">Zero Waste at UCLA</NavItem>
+            <NavItem to="/#ZeroWasteintheUCSystem">
+              Zero Waste in the UC System
+            </NavItem>
+          </RightNav>
+        </Wrapper>
+      </>
+    )
+  }
+}
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'react-emotion'
 import { css } from 'react-emotion'
 import Picture from '../../images/graybox.png'
+import { Link } from 'gatsby'
 
 const OutDiv = styled('div')`
   display: flex;
@@ -14,6 +15,7 @@ const OutDiv = styled('div')`
   color: #fefbf4;
   flex-direction: column;
   padding: 1.5vh;
+  margin-bottom: 7vh;
   @media only screen and (max-width: 800px) {
     font-size: 37px;
     line-height: 48px;
@@ -34,15 +36,15 @@ const Blurb = styled('p')`
     width: 70%;
   }
 `
-const Box = styled('div')`
+const Box = styled(Link)`
   display: flex;
   flex-direction: row-reverse;
   background-color: #6d786a;
   width: 60%;
   box-shadow: 0 0 5px 2px #282a2d;
   margin: 10px;
   transition: 0.3s;
-
+  text-decoration: none;
   &:hover {
     box-shadow: 0 0 5px 3px #282a2d;
   }
@@ -118,7 +120,7 @@ const BoxImage = styled('div')`
   padding: 15px;
   margin: 15px;
   flex-grow: 2;
-  background: url(${Picture});
+  /* background: url(${Picture}); */
   ${BoxImg}
   padding: 15px;
   @media only screen and (max-width: 800px) {
@@ -141,6 +143,7 @@ interface CardProps {
   CategoryName: string
   // TopicDesc: string
   Cards: {
+    PageLink: string
     ImageURL: string
     Title: string
     Contributor: string
@@ -159,7 +162,7 @@ export default class Card extends React.Component<CardProps> {
           <p>{this.props.TopicDesc}</p>
         </Blurb> */}
         {this.props.Cards.map(card => (
-          <Box>
+          <Box to={`/${card.PageLink}`}>
             <BoxImage pic={card.ImageURL} />
             <InnerBox>
               <BoxTitle>{card.Title}</BoxTitle>

diff --git a/src/components/Heading/index.tsx b/src/components/Heading/index.tsx
@@ -1,12 +1,45 @@
 import * as React from 'react'
+import styled from 'react-emotion'
 
 interface HeadingProps {
-  text: String
+  Headline: string
+  Contributor: string
 }
 
+const Wrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  color: #fefbf4;
+  font-family: IBM Plex Sans;
+  line-height: 62px;
+  align-items: center;
+`
+
+const HeadTitle = styled('p')`
+  font-size: 48px;
+  margin-top: 5vh;
+`
+
+const Contrib = styled('p')`
+  text-transform: uppercase;
+`
+
+const ContribName = styled('span')`
+  border-bottom: solid #c2d59c 1.5px;
+`
+
 class Heading extends React.Component<HeadingProps, {}> {
   render() {
-    return <div>{this.props.text}</div>
+    return (
+      <>
+        <Wrapper>
+          <HeadTitle>{this.props.Headline}</HeadTitle>
+          <Contrib>
+            by <ContribName>{this.props.Contributor}</ContribName>
+          </Contrib>
+        </Wrapper>
+      </>
+    )
   }
 }
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -33,6 +33,7 @@ export const query = graphql`
       Categories {
         CategoryName
         Cards {
+          PageLink
           Title
           ImageURL
           Contributor
@@ -54,7 +55,6 @@ const Page = styled('div')`
 const Divide = styled('hr')`
   background: #fefbf4;
   width: 80%;
-  margin-top: 7vh;
 `
 
 const IndexPage = ({ data }) => (
@@ -68,7 +68,7 @@ const IndexPage = ({ data }) => (
     />
     <Page>
       {data.kerckhoffArticle.Categories.map(category => (
-        <Card {...category} />
+        <Card {...category} id={category.CategoryName.replace(' ', '')} />
       ))}
       <Divide />
       <Footer

diff --git a/src/templates/article.tsx b/src/templates/article.tsx
@@ -6,12 +6,15 @@ import { Article, Footer, Image, PullQuote, Video } from '@dailybruin/lux'
 import Heading from '../components/Heading'
 import PieChart from '../components/Graphs/PieChart'
 import BarChart from '../components/Graphs/BarChart'
+import Recycle from '../images/recycle.svg'
+import ArticleNav from '../components/ArticleNav/ArticleNav'
 
 export const query = graphql`
   query($name: String) {
     kerckhoffArticle(title: { eq: $name }) {
       Headline
       ImageURL
+      Author
       content {
         type
         value
@@ -24,13 +27,33 @@ const Wrapper = styled('div')`
   width: 100%;
   background: #6d786a;
   margin: 0px;
+  background-image: url(${Recycle});
+  background-color: #6d786a;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const Divide = styled('hr')`
+  background: #fefbf4;
+  width: 65%;
+  margin-top: 7vh;
 `
 
 const ArticlePage = ({ data }) => (
   <>
     {/* <Head {...data.site.siteMetadata} /> */}
     {console.log(data)}
+    <ArticleNav />
     <Wrapper>
+      <Heading
+        Headline={
+          data.kerckhoffArticle.Headline != null
+            ? data.kerckhoffArticle.Headline
+            : 'HEADLINE'
+        }
+        Contributor={data.kerckhoffArticle.Author}
+      />
       <Article
         dropcap={true}
         content={data.kerckhoffArticle.content}
@@ -39,9 +62,9 @@ const ArticlePage = ({ data }) => (
           max-width: 60%;
           font-family: 'Arial';
           line-height: 38px;
-          font-size: 1.25rem;
+          font-size: 1rem;
           min-width: 300px;
-          background: #6d786a;
+          /* background: #6d786a; */
           figcaption {
             font-style: italic;
             font-size: 1.15rem;
@@ -59,13 +82,14 @@ const ArticlePage = ({ data }) => (
           barchart: BarChart,
         }}
       />
-
+      <Divide />
       <Footer
         style={css`
-          padding-bottom: 1rem;
+          padding-bottom: 30px;
           margin-bottom: 0px;
+          color: #fffcf5;
         `}
-        developers={'DEVS'}
+        developers="Henry Trinh, Karl Huang, Jay Park, Matthew Ko, Max Wu"
         copyrightYear={2019}
       />
     </Wrapper>