Skip to content

Commit

Permalink
implements profile sidenav and fixes profile bottom tile display
Browse files Browse the repository at this point in the history
  • Loading branch information
@davelandry
davelandry committed Feb 1, 2019
1 parent 7047311 commit 0752aca
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 16 deletions.
75 changes: 74 additions & 1 deletion app/profile/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,70 @@
}
}
}
& .category {
flex: 1 1 100%;
font-family: "Pathway Gothic One", sans-serif;
font-size: 36px;
font-weight: 300;
letter-spacing: 0.03em;
min-width: 100%;
padding: 25px 24px 30px;
position: relative;
text-transform: uppercase;
text-align: center;
& a {
color: var(--black);
&:hover {
text-decoration: none;
}
}
}
& .sidenav {
align-items: center;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
left: -50px;
opacity: 0;
position: fixed;
top: 0;
transition: left 0.5s, opacity 0.5s;
width: 50px;
&.visible {
left: 0;
opacity: 1;
}
& .sidenav-section {
border-bottom: 1px solid #ccc;
&:last-child {
border-bottom: 0;
}
& .sidenav-circle {
background-color: transparent;
border: 1px solid #999;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 8px;
margin: 12px 4px;
opacity: 0.7;
overflow: hidden;
transition: opacity 0.25s, width 0.25s, height 0.25s, margin 0.25s;
width: 8px;
&:hover, &.active {
height: 12px;
opacity: 1;
margin: 10px 2px;
width: 12px;
}
&.active {
background-color: #999;
}
}
}
}
& .keep-exploring {
& h2 {
color: rgba(255, 255, 255, 0.9);
Expand All @@ -61,11 +125,20 @@
flex-wrap: wrap;
padding: 0 35px;
width: 100%;
& .tile {
& .usa-tile {
flex: 1;
margin: 15px;
min-width: 300px;
}
}
}
}

.sidenav-label {
color: var(--red);
font-family: "Palanquin", sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
}
113 changes: 98 additions & 15 deletions app/profile/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import PropTypes from "prop-types";
import {connect} from "react-redux";
import {Helmet} from "react-helmet";

import {CanonProfile, fetchData, SubNav} from "@datawheel/canon-core";
import {AnchorLink, CanonProfile, fetchData, SubNav} from "@datawheel/canon-core";
import Splash from "toCanon/Splash";
import SectionIcon from "toCanon/SectionIcon";
import Topic from "toCanon/Topic";

import {Tooltip2} from "@blueprintjs/labs";
import axios from "axios";
import {select} from "d3-selection";
import "./index.css";
Expand All @@ -16,14 +17,65 @@ import Loading from "components/Loading";
import Tile from "components/Tile/Tile";
import Section from "toCanon/Section";

const categories = {
geo: [
{title: "Wages", slug: "wages", topic: "income", section: "economy"},
{title: "Occupations", slug: "occupations", topic: "tmap_occ_num_emp", section: "economy"},
{title: "Industries", slug: "industries", topic: "tmap_ind_num_emp", section: "economy"},
{title: "Age", slug: "age", topic: "age_nativity", section: "demographics"},
{title: "Heritage", slug: "heritage", topic: "global_diversity", section: "demographics"},
{title: "Military", slug: "military", topic: "veterans", section: "demographics"},
{title: "Income", slug: "income", topic: "household_income", section: "housing"},
{title: "Housing", slug: "housing", topic: "property_value", section: "housing"},
{title: "Transportation", slug: "transportation", topic: "num_vehicles", section: "housing"}
],
university: [
{title: "Student Expenses", slug: "student_expenses", topic: "tuition", section: "costs"},
{title: "Financial Aid", slug: "financial_aid", topic: "incomeawards", section: "costs"},
{title: "Workforce", slug: "workforce", topic: "jobs", section: "graduates"},
{title: "Degrees", slug: "degrees", topic: "majors", section: "graduates"},
{title: "Diversity", slug: "diversity", topic: "rate", section: "graduates"},
{title: "Finances", slug: "finances", topic: "endowment", section: "operations"},
{title: "Expenses", slug: "expenses", topic: "expenses", section: "operations"},
{title: "Faculty and Staff", slug: "faculty_and_staff", topic: "staff_tmap", section: "operations"}
],
naics: [
{title: "Occupations", slug: "occupations", topic: "tmap_top_occs", section: "workforce"},
{title: "Wages", slug: "wages", topic: "wages", section: "workforce"},
{title: "Opportunities", slug: "opportunities", topic: "wage_geo_rca", section: "workforce"}
],
soc: [
{title: "Wages", slug: "wages", topic: "wage_by_industry", section: "employment"},
{title: "Industries", slug: "industries", topic: "top_ind_num_emp", section: "employment"}
],
cip: [
{title: "Wages", slug: "wages", topic: "top_income", section: "employment"},
{title: "Occupations", slug: "occupations", topic: "top_occ_num_emp", section: "employment"},
{title: "Industries", slug: "industries", topic: "top_ind_num_emp", section: "employment"}
]
};

class Profile extends Component {

constructor(props) {
super(props);
const {pslug} = props.params;

const cats = categories[pslug] || [];
const sidenav = [];
props.profile.sections.forEach(s => {
const sectionCats = cats.filter(c => c.section === s.slug);
if (sectionCats.length) sidenav.push(sectionCats.map(s => ({title: s.title, slug: `category_${s.slug}`})));
else sidenav.push([{title: s.title.replace(/<[^>]+>/g, ""), slug: s.slug}]);
});

this.state = {
activeSection: false,
activeSidenav: false,
comparisons: [],
loading: false
loading: false,
showSidenav: false,
sidenav
};
this.scrollBind = this.handleScroll.bind(this);
}
Expand Down Expand Up @@ -73,31 +125,46 @@ class Profile extends Component {
handleScroll() {

const {sections} = this.props.profile;
const {activeSection} = this.state;
const {activeSection, activeSidenav, showSidenav, sidenav} = this.state;
const navHeight = 85;

let newActiveSection = false;
const elem = document.getElementById("about");
const top = elem ? elem.getBoundingClientRect().top : 1;
if (top <= 0) newActiveSection = "about";
if (top <= navHeight) newActiveSection = "about";
sections.forEach(section => {
const elem = document.getElementById(section.slug);
const top = elem ? elem.getBoundingClientRect().top : 1;
if (top <= 0) newActiveSection = section.slug;
if (top <= navHeight) newActiveSection = section.slug;
});

let newActiveSidenav = false;
sidenav.forEach(section => {
section.forEach(category => {
const elem = document.getElementById(category.slug);
const top = elem ? elem.getBoundingClientRect().top : 1;
if (top <= navHeight) newActiveSidenav = category.slug;
});
});

if (activeSection !== newActiveSection) {
this.setState({activeSection: newActiveSection});
const newShowSidenav = newActiveSection && newActiveSection !== "about" && document.getElementById("keep-exploring").getBoundingClientRect().top > window.innerHeight;

if (activeSection !== newActiveSection || activeSidenav !== newActiveSidenav || showSidenav !== newShowSidenav) {
this.setState({
activeSection: newActiveSection,
activeSidenav: newActiveSidenav,
showSidenav: newShowSidenav
});
}

}

render() {

const {formatters} = this.context;
const {stripHTML} = this.context.formatters;
const {origin, params, profile, similar} = this.props;
const {pslug} = params;
const {activeSection, comparisons, loading} = this.state;

const {activeSection, activeSidenav, comparisons, loading, showSidenav, sidenav} = this.state;
const joiner = ["geo"].includes(pslug) ? "in" : "for";

const profiles = [profile].concat(comparisons);
Expand All @@ -106,25 +173,34 @@ class Profile extends Component {
});

const topics = [];
const cats = categories[pslug] || [];
profile.sections
.forEach(s => {
const arr = [];
const sectionCompares = comparisons.map(c => c.sections.find(ss => ss.id === s.id)).filter(Boolean);
s.topics.forEach(t => {
if (comparisons.length) t.titleCompare = t.title.replace("</p>", ` ${joiner} ${formatters.stripHTML(profile.title)}</p>`);
const cat = cats.find(c => c.topic === t.slug);
if (cat) {
arr.push([
<h2 id={`category_${cat.slug}`} className="category" key={`category_${cat.slug}`}>
<AnchorLink to={`category_${cat.slug}`}>{cat.title}</AnchorLink>
</h2>
]);
}
if (comparisons.length) t.titleCompare = t.title.replace("</p>", ` ${joiner} ${stripHTML(profile.title)}</p>`);
arr.push(<Topic key={`topic_${t.id}${comparisons.length ? "_orig" : ""}`} contents={t} />);
sectionCompares
.map(ss => ss.topics.find(tt => tt.id === t.id))
.forEach(tt => {
tt.titleCompare = tt.title.replace("</p>", ` ${joiner} ${formatters.stripHTML(comparisons[0].title)}</p>`);
tt.titleCompare = tt.title.replace("</p>", ` ${joiner} ${stripHTML(comparisons[0].title)}</p>`);
arr.push(<Topic variables={comparisons[0].variables} key={`topic_${tt.id}_comp`} contents={tt} />);
});
});
topics.push(arr);
});

const metaTitle = formatters.stripHTML(profiles.map(d => d.title).join(" & "));
const metaDesc = formatters.stripHTML(profile.descriptions[0].description);
const metaTitle = stripHTML(profiles.map(d => d.title).join(" & "));
const metaDesc = stripHTML(profile.descriptions[0].description);

return (
<CanonProfile>
Expand All @@ -151,12 +227,19 @@ class Profile extends Component {
<SectionIcon slug="about" title="About" active={ activeSection === "about" } />
{ profile.sections.map((s, i) => <SectionIcon key={i} {...s} active={ activeSection === s.slug } />) }
</SubNav>
{ similar.length && <div className="keep-exploring">
{ similar.length && <div id="keep-exploring" className="keep-exploring">
<h2>Keep Exploring</h2>
<div className="tiles">
{ similar.map(d => <Tile key={d.id} title={d.display || d.name} subtitle={d.hierarchy} image={`/api/profile/${profile.slug}/${d.id}/thumb`} url={`/profile/${profile.slug}/${d.slug || d.id}`} />) }
</div>
</div> }
<div className={`sidenav ${showSidenav ? "visible" : ""}`}>
{ sidenav.map((s, i) => <div key={i} className="sidenav-section">
{s.map(t => <Tooltip2 className={`sidenav-circle ${t.slug === activeSidenav ? "active" : ""}`} key={t.slug} content={<span className="sidenav-label">{t.title}</span>}>
<AnchorLink to={t.slug}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</AnchorLink>
</Tooltip2>)}
</div>) }
</div>
{ loading ? <Loading /> : null }
</CanonProfile>
);
Expand Down

0 comments on commit 0752aca

Please sign in to comment.