Skip to content

Commit

Permalink
adds share icons to profile sections
Browse files Browse the repository at this point in the history
for issue #109
  • Loading branch information
melteng committed Feb 22, 2017
1 parent a2077f6 commit 1c90c4b
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 8 deletions.
20 changes: 14 additions & 6 deletions app/components/profile/Section.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
import React, {Component, PropTypes} from "react";
import styles from "css/components/profile/section";
import downloadSvg from "images/icon-download.svg";
import shareSvg from "images/icon-share.svg";

const Section = ({children, index, numSections, slug, title}) => {
return (
<section className="profile-section" key={slug}>
<div className="section-head">
<a name={slug}><h4>{title}</h4></a>
<span className="section-nav">
{[...Array(numSections)].map((x, i) =>
i === index ? <span key={i} className="icon-circle active"></span> : <span key={i} className="icon-circle"></span>
)}
</span>
<div className="section-title">
<a name={slug}><h4>{title}</h4></a>
<span className="section-nav">
{[...Array(numSections)].map((x, i) =>
i === index ? <span key={i} className="icon-circle active"></span> : <span key={i} className="icon-circle"></span>
)}
</span>
</div>
<div className="section-actions">
<a className="section-share"><img src={shareSvg} alt={`Share this visualization`} /></a>
<a className="section-download"><img src={downloadSvg} alt={`Download this visualization`} /></a>
</div>
</div>
<div className="section-body">
{ children }
Expand Down
27 changes: 25 additions & 2 deletions app/css/components/profile/section.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,31 @@
}

& .section-head {
& > * {
display: inline-block;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

& .section-title, & .section-actions {
& > * {
display: inline-block;
}
}

& .section-actions {
& a {
padding: 2px 3px;
margin: 0 6px;
cursor: pointer;

&:hover {
opacity: 0.7;
}
}

& img {
height: 20px;
}
}

& h4 {
Expand Down
19 changes: 19 additions & 0 deletions app/images/icon-download.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions app/images/icon-share.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1c90c4b

Please sign in to comment.