Skip to content

Commit 30e65ca

Browse files
halfghaninnehalfghaninne
committed
styles
1 parent 3728f24 commit 30e65ca

File tree

4 files changed

+304
-5
lines changed

4 files changed

+304
-5
lines changed

‎src/components/organizer/index.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React, { useState } from 'react'
2+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3+
import { faTimes } from '@fortawesome/free-solid-svg-icons'
4+
import {
5+
faTwitter,
6+
faLinkedinIn,
7+
faGithub,
8+
faLaptopCode
9+
} from '@fortawesome/free-brands-svg-icons'
10+
import styles from './organizer.module.css'
11+
12+
13+
const SocialLink = ({ type, url }) => {
14+
const icons = {
15+
twitter: faTwitter,
16+
linkedin: faLinkedinIn,
17+
github: faGithub,
18+
website: faLaptopCode
19+
}
20+
const urls = {
21+
twitter: `https://twitter.com/${url}`,
22+
linkedin: `https://linkedin.com/in/${url}`,
23+
github: `https://github.com/${url}`,
24+
website: url,
25+
}
26+
return (
27+
<a
28+
href={urls[type]}
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
className={styles.icon}
32+
>
33+
<FontAwesomeIcon icon={icons[type]} />
34+
</a>
35+
)
36+
}
37+
38+
const randomPlaceholder = () => {
39+
const placeholders = [
40+
'/images/speaker.jpg',
41+
'/images/speaker2.jpg',
42+
'/images/speaker3.jpg',
43+
]
44+
return placeholders[Math.floor(Math.random() * placeholders.length)]
45+
}
46+
47+
48+
const Organizer = ({ organizer }) => {
49+
// const [dialogIsOpen, setDialogIsOpen] = useState(false)
50+
return (
51+
<>
52+
<figure className={styles.organizer}>
53+
<img
54+
src={organizer.headshot ? organizer.headshot : randomPlaceholder()}
55+
alt={`${organizer.name} headshot`}
56+
className={styles.headshot}
57+
/>
58+
<figcaption>
59+
<h3>{organizer.name}</h3>
60+
{organizer.role && <h4>{organizer.pronouns}</h4>}
61+
{organizer.city && <h5>{organizer.city}</h5>}
62+
<div className={styles.links}>
63+
{organizer.links &&
64+
organizer.links.map((link, index) => (
65+
<SocialLink type={link.type} url={link.url} key={index} />
66+
))}
67+
</div>
68+
</figcaption>
69+
</figure>
70+
{/* <organizerDialog
71+
dialogIsOpen={dialogIsOpen}
72+
setDialogIsOpen={setDialogIsOpen}
73+
organizer={organizer}
74+
showLinkToTalk={true}
75+
/> */}
76+
</>
77+
)
78+
}
79+
80+
export default Organizer

‎src/components/organizer/organizer.module.css

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/* Speaker Regular Button Styles */
2+
.dialogButton {
3+
display: inline-flex;
4+
align-items: center;
5+
margin: 0.5em 1em 0.5em 0;
6+
padding: 0;
7+
padding-right: 0.5em;
8+
color: var(--navy);
9+
background: transparent;
10+
font-weight: var(--semi-bold);
11+
border-color: inherit;
12+
border-style: solid;
13+
font-size: 0.9em;
14+
border-width: 2px;
15+
&:hover {
16+
cursor: pointer;
17+
color: var(--tan);
18+
}
19+
img {
20+
max-width: 30px;
21+
margin-right: 0.5em;
22+
}
23+
}
24+
25+
/* Speaker Headshot Button Styles*/
26+
.organizer {
27+
border: 2px var(--navy) solid;
28+
padding: 1em;
29+
30+
@media screen and (max-width: 30em) {
31+
display: flex;
32+
align-items: flex-start;
33+
}
34+
margin: 1em 0;
35+
figcaption {
36+
h3 {
37+
margin: 1em 0 0 0;
38+
font-family: 'PT Sans Caption';
39+
font-weight: var(--bold);
40+
font-size: 1.2em;
41+
}
42+
h4 {
43+
margin: 0;
44+
font-weight: var(--semi-bold);
45+
}
46+
h5 {
47+
margin: 0;
48+
font-size: 0.9em;
49+
font-weight: var(--regular);
50+
}
51+
}
52+
}
53+
.headshot {
54+
@media screen and (max-width: 30em) {
55+
width: 100px;
56+
height: 100px;
57+
margin-right: 2em;
58+
}
59+
width: 100%;
60+
}
61+
62+
/* Speaker Dialog Styles */
63+
64+
.dialog {
65+
width: 70vw;
66+
background: linear-gradient(to bottom right, var(--white) 50%, #ebf7ef 50%);
67+
color: var(--navy);
68+
position: relative;
69+
img {
70+
display: none;
71+
}
72+
h1 span {
73+
font-size: 0.6em;
74+
font-weight: var(--regular);
75+
}
76+
h1,
77+
h2,
78+
h3,
79+
h4 {
80+
margin: 0;
81+
}
82+
p {
83+
margin: 0;
84+
line-height: 1.8;
85+
}
86+
figure {
87+
margin: 2em 0 1em 0;
88+
}
89+
@media screen and (min-width: 50em) {
90+
width: 50vw;
91+
figure {
92+
display: flex;
93+
align-items: center;
94+
margin: 1em 2em;
95+
}
96+
p {
97+
max-width: 35em;
98+
margin: 1em 2em;
99+
}
100+
img {
101+
display: block;
102+
max-width: 150px;
103+
margin-right: 1em;
104+
}
105+
}
106+
}
107+
108+
.close {
109+
position: absolute;
110+
right: 1em;
111+
font-size: 1.5em;
112+
background: transparent;
113+
display: block;
114+
color: var(--navy);
115+
border: 0;
116+
&:focus {
117+
background-color: var(--tan);
118+
outline: none;
119+
border: none;
120+
}
121+
&:hover {
122+
cursor: pointer;
123+
}
124+
}
125+
126+
.name {
127+
margin: 0;
128+
font-size: 1.5em;
129+
}
130+
131+
.links {
132+
margin: 1em 0;
133+
a {
134+
margin-right: 1em;
135+
}
136+
.icon {
137+
font-size: 1.1em;
138+
}
139+
.icon:hover {
140+
color: var(--tan);
141+
}
142+
@media screen and (min-width: 50em) {
143+
margin: 1em 2em;
144+
}
145+
}
146+

‎src/components/organizers/index.js

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,50 @@
11
import React from 'react'
2-
2+
import { graphql } from 'gatsby'
33
import Organizer from '../organizer'
4-
54
import styles from './organizers.module.css'
65

76
const Organizers = ({data}) => {
7+
// console.log('organizer data is', data.allOrganizersJson.nodes);
8+
const singleOrganizer = {
9+
"name": "Alex Millatmal",
10+
"pronouns": "she/her",
11+
"role": "Web Application Developer",
12+
"city": "New York City",
13+
"company": "Newsela",
14+
"headshot": "/images/alex-millatmal.jpg",
15+
"links": [
16+
{
17+
"type": "twitter",
18+
"url": "halfghaninNE"
19+
},
20+
{
21+
"type": "linkedin",
22+
"url": "alexandrajmh"
23+
},
24+
{
25+
"type": "github",
26+
"url": "halfghaninNE"
27+
},
28+
// {
29+
// "type": "website",
30+
// "url": "https://alexandramillatmal.com/"
31+
// }
32+
],
33+
"layout": "speaker",
34+
"bio": "Alex is a programmer with a passion for work that has real-world impact. At Newsela, she writes software that helps students read and teachers teach. When she's not thinking about refactoring her Ruby or good object-oriented front-end patterns, Alex spends a lot of time thinking about secular space/discourse, ethics in communicating “othered” experiences, how many cats are too many cats, and if she’ll ever write a novel.",
35+
"years": ["2019"],
36+
"talks": [
37+
{
38+
"year": "2019",
39+
"type": "curriculum",
40+
"title": "Speak Day Curriculum"
41+
}
42+
]
43+
}
844
const boardMembers = []
945
const chapterLeaders = []
1046
const conferenceOrganizers = []
11-
const websiteContributors = []
47+
const websiteContributors = [singleOrganizer, singleOrganizer, singleOrganizer, singleOrganizer, singleOrganizer]
1248

1349
return (
1450
<section id="about" className={styles.aboutUs}>
@@ -41,7 +77,7 @@ const Organizers = ({data}) => {
4177
<h3 className={styles.heading}>Website Contributors</h3>
4278
<div className={styles.grid}>
4379
{websiteContributors.map(websiteContributor => (
44-
<Organizer />
80+
<Organizer organizer={websiteContributor}/>
4581
))}
4682
</div>
4783
</section>
@@ -50,4 +86,24 @@ const Organizers = ({data}) => {
5086
)
5187
};
5288

53-
export default Organizers
89+
export default Organizers
90+
91+
export const organizersQuery = graphql`
92+
query {
93+
allOrganizersJson(
94+
sort: { fields: name, order: ASC }
95+
) {
96+
nodes {
97+
id
98+
name
99+
role
100+
headshot
101+
pronouns
102+
links {
103+
type
104+
url
105+
}
106+
}
107+
}
108+
}
109+
`

‎src/components/organizers/organizers.module.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,21 @@
1616

1717
.heading {
1818
border-bottom: 1px solid var(--tan);
19+
}
20+
21+
.grid {
22+
display: grid;
23+
grid-gap: 1em 2em;
24+
@media screen and (min-width: 30em) {
25+
grid-template-columns: 1fr 1fr;
26+
}
27+
@media screen and (min-width: 50em) {
28+
grid-template-columns: 1fr 1fr 1fr 1fr;
29+
}
30+
@media screen and (min-width: 70em) {
31+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
32+
}
33+
@media screen and (min-width: 100em) {
34+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
35+
}
1936
}

0 commit comments

Comments
 (0)