From 84b3b8ee393edee8c1ae2714e651736771376bb2 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Sun, 22 May 2016 16:12:17 -0700 Subject: [PATCH] More styles and components --- src/components/AtlasPreview/AtlasPreview.js | 4 +- .../components/DocumentLink/DocumentLink.js | 17 +++++ .../components/DocumentLink/DocumentLink.scss | 23 ++++++ .../components/DocumentLink/index.js | 2 + .../CenteredContent/CenteredContent.scss | 3 +- src/components/Divider/Divider.js | 11 +++ src/components/Divider/Divider.scss | 13 ++++ src/components/Divider/index.js | 2 + src/components/Document/Document.js | 33 +++++---- src/components/Document/Document.scss | 11 +-- src/components/DocumentList/DocumentList.js | 29 ++++++++ src/components/DocumentList/DocumentList.scss | 0 src/components/DocumentList/index.js | 2 + .../DocumentPreview/DocumentPreview.js | 46 ++++++++---- .../DocumentPreview/DocumentPreview.scss | 23 +++--- .../PublishingInfo/PublishingInfo.js | 26 +++++++ .../PublishingInfo/PublishingInfo.scss | 9 +++ src/components/PublishingInfo/index.js | 2 + src/scenes/Atlas/Atlas.js | 6 +- src/scenes/Atlas/Atlas.scss | 14 ---- src/utils/base-styles.scss | 74 ++++++++++++++++++- 21 files changed, 279 insertions(+), 71 deletions(-) create mode 100644 src/components/AtlasPreview/components/DocumentLink/DocumentLink.js create mode 100644 src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss create mode 100644 src/components/AtlasPreview/components/DocumentLink/index.js create mode 100644 src/components/Divider/Divider.js create mode 100644 src/components/Divider/Divider.scss create mode 100644 src/components/Divider/index.js create mode 100644 src/components/DocumentList/DocumentList.js create mode 100644 src/components/DocumentList/DocumentList.scss create mode 100644 src/components/DocumentList/index.js create mode 100644 src/components/PublishingInfo/PublishingInfo.js create mode 100644 src/components/PublishingInfo/PublishingInfo.scss create mode 100644 src/components/PublishingInfo/index.js diff --git a/src/components/AtlasPreview/AtlasPreview.js b/src/components/AtlasPreview/AtlasPreview.js index 4ee8cc4ca..acbfeb3e9 100644 --- a/src/components/AtlasPreview/AtlasPreview.js +++ b/src/components/AtlasPreview/AtlasPreview.js @@ -1,7 +1,7 @@ import React from 'react'; import Link from 'react-router/lib/Link'; -import DocumentPreview from 'components/DocumentPreview'; +import DocumentLink from './components/DocumentLink'; import styles from './AtlasPreview.scss'; import classNames from 'classnames/bind'; @@ -21,7 +21,7 @@ class AtlasPreview extends React.Component { { data.recentDocuments.length > 0 ? data.recentDocuments.map(document => { return ( - ) + ) }) : (
No documents. Why not create one?
diff --git a/src/components/AtlasPreview/components/DocumentLink/DocumentLink.js b/src/components/AtlasPreview/components/DocumentLink/DocumentLink.js new file mode 100644 index 000000000..0bf988207 --- /dev/null +++ b/src/components/AtlasPreview/components/DocumentLink/DocumentLink.js @@ -0,0 +1,17 @@ +import React from 'react'; + +import moment from 'moment'; +import Link from 'react-router/lib/Link'; + +import styles from './DocumentLink.scss'; + +const DocumentLink = (props) => { + return ( + +

{ props.document.title }

+ { moment(props.document.updatedAt).fromNow() } + + ); +}; + +export default DocumentLink; diff --git a/src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss b/src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss new file mode 100644 index 000000000..1907f1128 --- /dev/null +++ b/src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss @@ -0,0 +1,23 @@ +@import '../../../../utils/constants.scss'; + +.link { + display: flex; + flex: 1; + justify-content: space-between; + + margin-bottom: 20px; + text-decoration: none; +} + +.title { + font-weight: normal; + font-size: 15px; + color: $textColor; + + margin: 0; +} + +.timestamp { + font-size: 13px; + color: #ccc; +} \ No newline at end of file diff --git a/src/components/AtlasPreview/components/DocumentLink/index.js b/src/components/AtlasPreview/components/DocumentLink/index.js new file mode 100644 index 000000000..013b30986 --- /dev/null +++ b/src/components/AtlasPreview/components/DocumentLink/index.js @@ -0,0 +1,2 @@ +import DocumentLink from './DocumentLink'; +export default DocumentLink; \ No newline at end of file diff --git a/src/components/CenteredContent/CenteredContent.scss b/src/components/CenteredContent/CenteredContent.scss index 1e74499dd..f41b19c2c 100644 --- a/src/components/CenteredContent/CenteredContent.scss +++ b/src/components/CenteredContent/CenteredContent.scss @@ -1,5 +1,4 @@ .content { - display: flex; - flex: 1; + width: 100%; margin: 40px 20px; } \ No newline at end of file diff --git a/src/components/Divider/Divider.js b/src/components/Divider/Divider.js new file mode 100644 index 000000000..1df40dc9e --- /dev/null +++ b/src/components/Divider/Divider.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import styles from './Divider.scss'; + +const Divider = (props) => { + return( +
+ ); +}; + +export default Divider; \ No newline at end of file diff --git a/src/components/Divider/Divider.scss b/src/components/Divider/Divider.scss new file mode 100644 index 000000000..4a72b8c42 --- /dev/null +++ b/src/components/Divider/Divider.scss @@ -0,0 +1,13 @@ +.divider { + display: flex; + flex: 1; + justify-content: center; + + span { + display: flex; + width: 50%; + margin: 20px 0; + + border-bottom: 1px solid #eee; + } +} \ No newline at end of file diff --git a/src/components/Divider/index.js b/src/components/Divider/index.js new file mode 100644 index 000000000..a4bf4cadb --- /dev/null +++ b/src/components/Divider/index.js @@ -0,0 +1,2 @@ +import Divider from './Divider'; +export default Divider; \ No newline at end of file diff --git a/src/components/Document/Document.js b/src/components/Document/Document.js index dc0697675..8d87fadd2 100644 --- a/src/components/Document/Document.js +++ b/src/components/Document/Document.js @@ -1,24 +1,29 @@ import React from 'react'; import moment from 'moment'; +import marked from 'marked'; -import { Avatar } from 'rebass'; -import Flex from 'components/Flex'; +import { Link } from 'react-router'; +import PublishingInfo from 'components/PublishingInfo'; import styles from './Document.scss'; -const Document = (props) => { - return ( -
- - - - { props.document.user.name } published { moment(document.createdAt).fromNow() } - - +class Document extends React.Component { + static propTypes = { + document: React.PropTypes.object.isRequired, + } -
-
- ); + render() { + return ( +
+ +
+
+ ); + } }; export default Document; diff --git a/src/components/Document/Document.scss b/src/components/Document/Document.scss index a29cb514d..be5400abe 100644 --- a/src/components/Document/Document.scss +++ b/src/components/Document/Document.scss @@ -1,11 +1,4 @@ .container { - padding: 20px 0; + width: 100%; + padding: 20px; } - -.user { - margin-bottom: 40px; -} - -.userName { - margin: 0 0 0 10px; -} \ No newline at end of file diff --git a/src/components/DocumentList/DocumentList.js b/src/components/DocumentList/DocumentList.js new file mode 100644 index 000000000..61ebc0692 --- /dev/null +++ b/src/components/DocumentList/DocumentList.js @@ -0,0 +1,29 @@ +import React from 'react'; + +import DocumentPreview from 'components/DocumentPreview'; +import Divider from 'components/Divider'; + +import styles from './DocumentList.scss'; + +class DocumentList extends React.Component { + static propTypes = { + documents: React.PropTypes.arrayOf(React.PropTypes.object), + } + + render() { + return ( +
+ { this.props.documents.map((document) => { + return ( +
+ + +
+ ); + }) } +
+ ); + } +}; + +export default DocumentList; \ No newline at end of file diff --git a/src/components/DocumentList/DocumentList.scss b/src/components/DocumentList/DocumentList.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/DocumentList/index.js b/src/components/DocumentList/index.js new file mode 100644 index 000000000..61f77a02b --- /dev/null +++ b/src/components/DocumentList/index.js @@ -0,0 +1,2 @@ +import DocumentList from './DocumentList'; +export default DocumentList; \ No newline at end of file diff --git a/src/components/DocumentPreview/DocumentPreview.js b/src/components/DocumentPreview/DocumentPreview.js index 52ce56cdb..d81c8bcb3 100644 --- a/src/components/DocumentPreview/DocumentPreview.js +++ b/src/components/DocumentPreview/DocumentPreview.js @@ -1,26 +1,46 @@ import React from 'react'; -import moment from 'moment'; -import Link from 'react-router/lib/Link'; +import marked from 'marked'; -import styles from './documentPreview.scss'; -import classNames from 'classnames/bind'; -const cx = classNames.bind(styles); +import { Link } from 'react-router'; -class documentPreview extends React.Component { +import PublishingInfo from 'components/PublishingInfo'; + +import styles from './DocumentPreview.scss'; + +class Document extends React.Component { static propTypes = { document: React.PropTypes.object.isRequired, } render() { - const document = this.props.document; - return ( - -

{ document.title }

- { moment(document.updatedAt).fromNow() } - +
+ + + +

{ this.props.document.title }

+ + +
+ +
+ + Continue reading... + +
+
); } }; -export default documentPreview; \ No newline at end of file +export default Document; diff --git a/src/components/DocumentPreview/DocumentPreview.scss b/src/components/DocumentPreview/DocumentPreview.scss index 424932b33..426e20b74 100644 --- a/src/components/DocumentPreview/DocumentPreview.scss +++ b/src/components/DocumentPreview/DocumentPreview.scss @@ -1,23 +1,20 @@ @import '../../utils/constants.scss'; -.documentPreview { - display: flex; - flex: 1; - justify-content: space-between; - margin-bottom: 20px; - text-decoration: none; +.container { + width: 100%; + padding: 20px 0; } -h3 { - font-weight: normal; - font-size: 15px; +.title { color: $textColor; + text-decoration: none; - margin: 0; + h2 { + font-size: 1.3em; + } } -span { - font-size: 13px; - color: #ccc; +.continueLink { + text-decoration: none; } \ No newline at end of file diff --git a/src/components/PublishingInfo/PublishingInfo.js b/src/components/PublishingInfo/PublishingInfo.js new file mode 100644 index 000000000..a41b33dd5 --- /dev/null +++ b/src/components/PublishingInfo/PublishingInfo.js @@ -0,0 +1,26 @@ +import React from 'react'; +import moment from 'moment'; + +import { Avatar } from 'rebass'; +import Flex from 'components/Flex'; + +import styles from './PublishingInfo.scss'; + +const PublishingInfo = (props) => { + return ( + + + + { props.name } published { moment(props.timestamp).fromNow() } + + + ); +}; + +PublishingInfo.propTypes = { + avatarUrl: React.PropTypes.string.isRequired, + name: React.PropTypes.string.isRequired, + timestamp: React.PropTypes.string.isRequired, +}; + +export default PublishingInfo; \ No newline at end of file diff --git a/src/components/PublishingInfo/PublishingInfo.scss b/src/components/PublishingInfo/PublishingInfo.scss new file mode 100644 index 000000000..bc1f0e282 --- /dev/null +++ b/src/components/PublishingInfo/PublishingInfo.scss @@ -0,0 +1,9 @@ +.user { + margin-bottom: 30px; + color: #ccc; + font-size: 13px; +} + +.userName { + margin: 0 0 0 10px; +} diff --git a/src/components/PublishingInfo/index.js b/src/components/PublishingInfo/index.js new file mode 100644 index 000000000..e52f636aa --- /dev/null +++ b/src/components/PublishingInfo/index.js @@ -0,0 +1,2 @@ +import PublishingInfo from './PublishingInfo'; +export default PublishingInfo; \ No newline at end of file diff --git a/src/scenes/Atlas/Atlas.js b/src/scenes/Atlas/Atlas.js index be67142d2..2c174c660 100644 --- a/src/scenes/Atlas/Atlas.js +++ b/src/scenes/Atlas/Atlas.js @@ -11,6 +11,8 @@ import { client } from 'utils/ApiClient'; import Layout, { Title } from 'components/Layout'; import AtlasPreviewLoading from 'components/AtlasPreviewLoading'; import CenteredContent from 'components/CenteredContent'; +import DocumentList from 'components/DocumentList'; +import Divider from 'components/Divider'; import styles from './Atlas.scss'; @@ -54,7 +56,9 @@ class Atlas extends React.Component {
-
+ + +
) } diff --git a/src/scenes/Atlas/Atlas.scss b/src/scenes/Atlas/Atlas.scss index 547b0d7b0..6c2e2a19a 100644 --- a/src/scenes/Atlas/Atlas.scss +++ b/src/scenes/Atlas/Atlas.scss @@ -15,17 +15,3 @@ font-style: italic; } } - -.divider { - display: flex; - flex: 1; - justify-content: center; - - span { - display: flex; - width: 50%; - margin: 20px 0; - - border-bottom: 1px solid #eee; - } -} \ No newline at end of file diff --git a/src/utils/base-styles.scss b/src/utils/base-styles.scss index 1123c368d..461eccfa7 100644 --- a/src/utils/base-styles.scss +++ b/src/utils/base-styles.scss @@ -4,16 +4,84 @@ box-sizing: border-box; } +:root { + --line-height-1: 1; + --line-height-2: 1.125; + --line-height-3: 1.25; + --line-height-4: 1.5; + --letter-spacing: 1; + --caps-letter-spacing: .2em; + --bold-font-weight: bold; +} + html, body, .viewport { width: 100%; margin: 0; } -html, body { - font-family: 'Atlas Grotesk', 'Helvetica Neue', sans-serif; +body { + font-family: 'Atlas Grotesk', -apple-system, 'Helvetica Neue', Helvetica, sans-serif; + line-height: 1.5; + margin: 0; color: $textColor; + background-color: #fff; +} +img { + max-width: 100%; + height: auto; +} +svg { + max-height: 100%; } - a { color: #0C77F8; } +h1, h2, h3, +h4, h5, h6 { + font-weight: 600; + line-height: 1.25; + margin-top: 1em; + margin-bottom: .5em; +} +h1 { font-size: 2rem } +h2 { font-size: 1.5rem } +h3 { font-size: 1.25rem } +h4 { font-size: 1rem } +h5 { font-size: .875rem } +h6 { font-size: .75rem } +p, dl, ol, ul, pre, blockquote { + margin-top: 1em; + margin-bottom: 1em; +} +code, +pre, +samp { + font-family: + 'Atlas Typewriter', + 'Source Code Pro', + Menlo, + Consolas, + 'Liberation Mono', + monospace; +} +code, samp { + font-size: 87.5%; + padding: .125em; +} +pre { + font-size: 87.5%; + overflow: scroll; +} +blockquote { + font-size: 1.25rem; + font-style: italic; + margin-left: 0; +} +hr { + margin-top: 1.5em; + margin-bottom: 1.5em; + border: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: #ccc; +}