From 836f93f0e2f771a41ebe73d0c6e2ba6e610fed83 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 19 Mar 2017 22:37:38 -0400 Subject: [PATCH 1/3] style: tweak sizing of page sections --- components/page/page-style.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/components/page/page-style.scss b/components/page/page-style.scss index 1204ae059e61..a3527970855d 100644 --- a/components/page/page-style.scss +++ b/components/page/page-style.scss @@ -10,22 +10,19 @@ // XXX: Temporary hack to fix sidebar width .page > div:first-of-type { - flex: 0 0 auto; + display: none; position: relative; overflow: hidden; @include break { - flex:0 0 30%; - } - - @include break('large') { - flex:0 0 25%; + display: block; + flex: 0 0 280px; } } .page__content { + flex: 1 1 auto; overflow-x: hidden; - width: 100%; padding: 1.5em 1em; @media break { From 63ce480565c529a4a818470f69f8fccea00c20c1 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sun, 19 Mar 2017 22:38:41 -0400 Subject: [PATCH 2/3] docs: sorting and renaming some configuration docs --- ...{javascript-alternatives.md => configuration-languages.md} | 4 ++-- content/configuration/configuration-types.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename content/configuration/{javascript-alternatives.md => configuration-languages.md} (94%) diff --git a/content/configuration/javascript-alternatives.md b/content/configuration/configuration-languages.md similarity index 94% rename from content/configuration/javascript-alternatives.md rename to content/configuration/configuration-languages.md index b426ebdc2c60..b6ddfc35c988 100644 --- a/content/configuration/javascript-alternatives.md +++ b/content/configuration/configuration-languages.md @@ -1,6 +1,6 @@ --- -title: Configuration with Javascript Alternatives -sort: 3 +title: Configuration Languages +sort: 2 contributors: - sokra - skipjack diff --git a/content/configuration/configuration-types.md b/content/configuration/configuration-types.md index 3c31fbe79276..dd11133e7c03 100644 --- a/content/configuration/configuration-types.md +++ b/content/configuration/configuration-types.md @@ -1,6 +1,6 @@ --- title: Configuration Types -sort: 2 +sort: 3 contributors: - sokra - skipjack From a7ee1ea14e503e4850d533b8eea9d4f681dcc68e Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Wed, 22 Mar 2017 08:49:49 -0400 Subject: [PATCH 3/3] feat: redesigning the sidebar Using an img shield to display the webpack version Updating the styling to match @pastelsky's comp (see #438) Cleaning up some of the code in Sidebar and SidebarItem --- .../sidebar-item/sidebar-item-style.scss | 101 +++++++++--------- components/sidebar-item/sidebar-item.jsx | 88 ++++++++++----- components/sidebar/sidebar.jsx | 5 +- styles/partials/_mixins.scss | 6 ++ 4 files changed, 123 insertions(+), 77 deletions(-) diff --git a/components/sidebar-item/sidebar-item-style.scss b/components/sidebar-item/sidebar-item-style.scss index 3600cb221898..00c930f1c9fb 100644 --- a/components/sidebar-item/sidebar-item-style.scss +++ b/components/sidebar-item/sidebar-item-style.scss @@ -3,81 +3,82 @@ .sidebar-item { position: relative; - font-size: getFontSize(-1); - margin-bottom: 0.75em; - - &__title { - padding-right: 15px; - font-weight: 400; - text-decoration: none; - color: inherit; - - &:hover { - color: $text-color-highlight; - } - } + display: flex; + flex-wrap: wrap; + font-size: 15px; + margin: 0.6em 0; &__toggle { - position: absolute; - right: 0; - line-height: 1.5; + flex: 0 0 auto; + margin-top: 0.125em; + margin-right: 0.5em; cursor: pointer; - color: getColor(dusty-grey); - transition: color 250ms; - margin-left: 1.5rem; + color: getColor(denim); + transition: all 250ms; &:hover { color: getColor(mine-shaft); } } + &__title { + flex: 1 1 auto; + font-weight: 600; + color: getColor(dove-grey); + } + &__anchors { - display:none; + position: relative; + display: none; + flex: 0 0 100%; + flex-wrap: wrap; + margin: 0.35em 0; + padding-left: 1.5em; + overflow: hidden; list-style: none; - padding: 0; - margin: 0.5em 0 1em; - } - &__version { - margin-bottom: 10px; + &:before { + content: ''; + position: absolute; + height: calc(100% - 0.6em); + top: 0; + left: 1.5em; + border-left: 1px dashed getColor(dusty-grey); + } } &__anchor { - margin:0.25em 0; + position: relative; + flex: 0 0 100%; + margin: 0.25em 0; + padding-left: 1em; + @include control-overflow; - a { - display: inline-block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: getColor(dusty-grey); + &:first-child { margin-top: 0; } + &:last-child { margin-bottom: 0; } + &:before { + content: ''; + position: absolute; + width: 0.5em; + left: 0; + top: 60%; + border-bottom: 1px dashed getColor(dusty-grey); + } - &:hover { - color: getColor(mine-shaft); - } + a { + color: getColor(emperor); + &:hover { color: getColor(denim); } } } &--open { .sidebar-item__anchors { - display:block; - } - - .sidebar-item__title { - color: $text-color-highlight; + display: flex; } .sidebar-item__toggle { - margin-left:-2px; - transform:rotate(180deg) translateX(1px); - } - } - - &--empty { - .sidebar-item__toggle, - .sidebar-item__anchors { - display: none; + transform-origin: center center; + transform: rotate(90deg); } } } diff --git a/components/sidebar-item/sidebar-item.jsx b/components/sidebar-item/sidebar-item.jsx index 54d7641fdd18..f1337710cdf1 100644 --- a/components/sidebar-item/sidebar-item.jsx +++ b/components/sidebar-item/sidebar-item.jsx @@ -1,51 +1,77 @@ import React from 'react'; import Link from '../link/link'; +const block = 'sidebar-item'; + export default class SidebarItem extends React.Component { constructor(props) { super(props); this.state = { - open: this.isOpen(props) + open: this._isOpen(props) }; } render() { - let { index, url, title, anchors = [], currentPage } = this.props; - - let emptyMod = !anchors.length ? 'sidebar-item--empty' : ''; - let openMod = (this.state.open) ? 'sidebar-item--open' : ''; - let anchorUrl = url + '#'; - let isCurrentPage = `/${currentPage}` === url; + let { title, anchors = [] } = this.props; + let openMod = this.state.open ? `${block}--open` : ''; return ( -
- { title } - - +
+ { anchors.length > 0 ? ( + + ) : null } + + + { title } + + + { anchors.length > 0 ? ( + + ) : null }
); } componentWillReceiveProps(nextProps) { - if (nextProps.currentPage == this.props.currentPage) return; - - this.setState({ open: this.isOpen(nextProps) }); + if ( nextProps.currentPage !== this.props.currentPage ) { + this.setState({ + open: this._isOpen(nextProps) + }); + } } - isOpen(props) { + /** + * Checks whether the item should be expanded + * + * @param {object} props - The current props + */ + _isOpen(props) { return `/${props.currentPage}` === props.url; } - toggle(e) { + /** + * Toggles the open state (expanded/collapsed) + * + * @param {object} e - Click event + */ + _toggle(e) { let { onToggle } = this.props; this.setState({ @@ -56,4 +82,18 @@ export default class SidebarItem extends React.Component { } }); } + + /** + * Generate the url for the given [anchor] depending on the current page + * + * @return {object} anchor - The anchor object containing its id + */ + _generateAnchorURL(anchor) { + let { currentPage, url } = this.props; + + if ( `/${currentPage}` === url ) { + return `#${anchor.id}`; + + } else return `${url}#${anchor.id}`; + } } diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx index c6b62c5b9999..d47862cd81a6 100644 --- a/components/sidebar/sidebar.jsx +++ b/components/sidebar/sidebar.jsx @@ -35,13 +35,12 @@ export default class Sidebar extends Component { height={ availableHeight } />
-

Version 2.2

+ + currentPage= { currentPage } /> { pages.map(({ url, title, anchors }, i) => diff --git a/styles/partials/_mixins.scss b/styles/partials/_mixins.scss index 6f0407b084fa..f01729f24f43 100644 --- a/styles/partials/_mixins.scss +++ b/styles/partials/_mixins.scss @@ -4,6 +4,12 @@ } } +@mixin control-overflow { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + @mixin fontantialias ($on) { @if $on == true { -webkit-font-smoothing: antialiased;