From 26a17dab089b3ac5e37763b468b6697c7dc4e9b0 Mon Sep 17 00:00:00 2001 From: Peter Siemens Date: Sat, 29 Sep 2018 16:15:06 -0700 Subject: [PATCH 01/16] Clean up gallery code --- phoenix/static/src/js/components/Galleries.js | 14 +- phoenix/static/src/js/components/Gallery.js | 291 +++++++++--------- 2 files changed, 157 insertions(+), 148 deletions(-) diff --git a/phoenix/static/src/js/components/Galleries.js b/phoenix/static/src/js/components/Galleries.js index 9641246..7e4b74a 100644 --- a/phoenix/static/src/js/components/Galleries.js +++ b/phoenix/static/src/js/components/Galleries.js @@ -2,8 +2,16 @@ import React from 'react'; import Gallery from './Gallery'; export default function Galleries(props) { - const galleries = props.galleries.map(function(gallery, i){ - return (); + const galleries = props.galleries.map((gallery, i) => { + return ( + + ); }); - return (
{galleries}
); + + return
{galleries}
} diff --git a/phoenix/static/src/js/components/Gallery.js b/phoenix/static/src/js/components/Gallery.js index a3c512e..c7fae47 100644 --- a/phoenix/static/src/js/components/Gallery.js +++ b/phoenix/static/src/js/components/Gallery.js @@ -6,6 +6,24 @@ import GallerySlide from './GallerySlide'; import Hammer from 'hammerjs'; import key from 'keymaster'; +// From Modernizr +function whichTransitionEvent(){ + var t; + var el = document.createElement('fakeelement'); + var transitions = { + 'transition':'transitionend', + 'OTransition':'oTransitionEnd', + 'MozTransition':'transitionend', + 'WebkitTransition':'webkitTransitionEnd' + } + + for(t in transitions){ + if( el.style[t] !== undefined ){ + return transitions[t]; + } + } +} + export default class Gallery extends React.Component { constructor(props) { super(props) @@ -18,16 +36,16 @@ export default class Gallery extends React.Component { this.prevSlide = this.prevSlide.bind(this); this.state = { - active: null, - index: false, - image: false, - visible: false, - deltax: 0, - slideWidth: $(window).width() + active: null, + index: false, + image: false, + visible: false, + deltax: 0, + slideWidth: $(window).width() } } - componentWillMount() { + UNSAFE_componentWillMount() { this.images = new LinkedList(this.props.images); } @@ -38,13 +56,14 @@ export default class Gallery extends React.Component { } initSlider() { + var element = this.galleryRef.current; this.element = $(element); - this.container = $("ul.slides", this.element); + this.container = $('ul.slides', this.element); - this.panes = $("li.slide", this.element); + this.panes = $('li.slide', this.element); this.paneWidth = $(window).width(); this.paneCount = this.props.images.length; @@ -55,43 +74,25 @@ export default class Gallery extends React.Component { this.setPaneDimensions(); - $(window).on("load resize orientationchange", () => { - this.setPaneDimensions(); - this.setState({ slideWidth: $(window).width() }); + $(window).on('load resize orientationchange', () => { + this.setPaneDimensions(); + this.setState({ slideWidth: $(window).width() }); }); if(this.paneCount > 1){ - var mc = new Hammer.Manager(element, { drag_lock_to_axis: true } ); - - mc.add( new Hammer.Pan( { threshold: 0, direction: Hammer.DIRECTION_HORIZONTAL }) ); - mc.add( new Hammer.Swipe( { threshold: 1 }) ).recognizeWith( mc.get('pan') ); - - mc.on("panend pancancel panleft panright swipeleft swiperight", this.handleHammer); - - /* From Modernizr */ - function whichTransitionEvent(){ - var t; - var el = document.createElement('fakeelement'); - var transitions = { - 'transition':'transitionend', - 'OTransition':'oTransitionEnd', - 'MozTransition':'transitionend', - 'WebkitTransition':'webkitTransitionEnd' - } - - for(t in transitions){ - if( el.style[t] !== undefined ){ - return transitions[t]; - } - } - } - - /* Listen for a transition! */ - var transitionEvent = whichTransitionEvent(); - transitionEvent && element.addEventListener(transitionEvent, function() { - //this.slideCallback(); - }.bind(this)); + var mc = new Hammer.Manager(element, { drag_lock_to_axis: true } ); + + mc.add( new Hammer.Pan( { threshold: 0, direction: Hammer.DIRECTION_HORIZONTAL }) ); + mc.add( new Hammer.Swipe( { threshold: 1 }) ).recognizeWith( mc.get('pan') ); + + mc.on('panend pancancel panleft panright swipeleft swiperight', this.handleHammer); + + /* Listen for a transition! */ + var transitionEvent = whichTransitionEvent(); + transitionEvent && element.addEventListener(transitionEvent, function() { + //this.slideCallback(); + }.bind(this)); } } @@ -101,8 +102,8 @@ export default class Gallery extends React.Component { } updatePaneDimensions() { - this.container = $("ul.slides", this.element); - this.panes = $("li.slide", this.element); + this.container = $('ul.slides', this.element); + this.panes = $('li.slide', this.element); this.paneCount = this.props.images.length; @@ -112,7 +113,7 @@ export default class Gallery extends React.Component { this.showPane(this.currentPane, false); } - showPane(index, animate) { + showPane(index) { // between the bounds index = Math.max(0, Math.min(index, this.paneCount-1)); @@ -145,38 +146,38 @@ export default class Gallery extends React.Component { //ev.preventDefault(); switch(ev.type) { - case 'panright': - case 'panleft': - // stick to the finger - var pane_offset = -(100/this.paneCount) * this.currentPane; - var drag_offset = ((100/this.paneWidth) * ev.deltaX) / this.paneCount; - - // slow down at the first and last pane - if((this.currentPane == 0 && ev.direction == Hammer.DIRECTION_RIGHT) || - (this.currentPane == this.paneCount-1 && ev.direction == Hammer.DIRECTION_LEFT)) { - drag_offset *= .4; - } - - this.setContainerOffset(drag_offset + pane_offset); - break; - - case 'panend': - case 'pancancel': - //Left & Right - //less then 2/3 moved, don't register swipe - if(Math.abs(ev.deltaX) < (this.paneWidth * 2/3)) { - this.showPane(this.currentPane, true); - } - - break; - - case 'swipeleft': - this.nextSlide(); - break; - - case 'swiperight': - this.prevSlide(); - break; + case 'panright': + case 'panleft': + // stick to the finger + var pane_offset = -(100/this.paneCount) * this.currentPane; + var drag_offset = ((100/this.paneWidth) * ev.deltaX) / this.paneCount; + + // slow down at the first and last pane + if((this.currentPane == 0 && ev.direction == Hammer.DIRECTION_RIGHT) || + (this.currentPane == this.paneCount-1 && ev.direction == Hammer.DIRECTION_LEFT)) { + drag_offset *= .4; + } + + this.setContainerOffset(drag_offset + pane_offset); + break; + + case 'panend': + case 'pancancel': + //Left & Right + //less then 2/3 moved, don't register swipe + if(Math.abs(ev.deltaX) < (this.paneWidth * 2/3)) { + this.showPane(this.currentPane, true); + } + + break; + + case 'swipeleft': + this.nextSlide(); + break; + + case 'swiperight': + this.prevSlide(); + break; } } @@ -188,13 +189,13 @@ export default class Gallery extends React.Component { // Arrow buttons $(document).on('click', '.prev-slide', e => { - e.preventDefault(); - this.previous(); + e.preventDefault(); + this.previous(); }); $(document).on('click', '.next-slide', e => { - e.preventDefault(); - this.next(); + e.preventDefault(); + this.next(); }); } @@ -204,9 +205,9 @@ export default class Gallery extends React.Component { const imageId = $(e.target).data('id'); if(this.state.visible){ - this.close(); + this.close(); } else { - this.open(imageId); + this.open(imageId); } }) } @@ -214,9 +215,9 @@ export default class Gallery extends React.Component { setIndex(index) { const {url, caption} = this.props.images[index]; this.setState({ - index, - caption, - image: url, + index, + caption, + image: url, }); } @@ -228,98 +229,98 @@ export default class Gallery extends React.Component { getActiveImage(imageId) { let active = this.images; while(active){ - if(active.data.id == imageId) - return active; - active = active.next; + if(active.data.id == imageId) + return active; + active = active.next; } return null; } getIndex(imageId, images) { - for (let i = 0; i < images.length; i++) { - if (images[i].id == imageId) - return i; - } - return -1; + for (let i = 0; i < images.length; i++) { + if (images[i].id == imageId) + return i; + } + return -1; } setCurrentImage(imageId) { - this.showPane(this.getIndex(imageId, this.props.images)); - this.setState({ active: this.getActiveImage(imageId)}, this.updatePaneDimensions); + this.showPane(this.getIndex(imageId, this.props.images)); + this.setState({ active: this.getActiveImage(imageId)}, this.updatePaneDimensions); } open(imageId) { - this.setCurrentImage(imageId); - this.setState({ visible: true }); - $('body').addClass('no-scroll'); + this.setCurrentImage(imageId); + this.setState({ visible: true }); + $('body').addClass('no-scroll'); } close() { - this.setState({ - visible: false, - }); - $('body').removeClass('no-scroll'); + this.setState({ + visible: false, + }); + $('body').removeClass('no-scroll'); } previous(callback) { - if(!this.state.active || !this.state.active.prev) - return - this.setState({ active: this.state.active.prev }, callback); + if(!this.state.active || !this.state.active.prev) + return + this.setState({ active: this.state.active.prev }, callback); } next(callback) { - if(!this.state.active || !this.state.active.next) - return - this.setState({ active: this.state.active.next }, callback); + if(!this.state.active || !this.state.active.next) + return + this.setState({ active: this.state.active.next }, callback); } renderImage() { - if(this.state.image){ - var imageStyle = { maxHeight: $(window).height() - 200 }; - return ( -
- -

{this.state.caption}

- {this.renderControls()} -
- ); - } + if(this.state.image){ + var imageStyle = { maxHeight: $(window).height() - 200 }; + return ( +
+ +

{this.state.caption}

+ {this.renderControls()} +
+ ); + } } renderControls() { - if(this.props.images.length > 1){ - return ( -
- - {this.state.index + 1}  of  {this.props.images.length} - -
- ); - } + if(this.props.images.length > 1){ + return ( +
+ + {this.state.index + 1}  of  {this.props.images.length} + +
+ ); + } } render() { - const visible = this.state.visible ? 'visible' : ''; + const visible = this.state.visible ? 'visible' : ''; - const slides = this.props.images.map((image, i) => ( - - )); + const slides = this.props.images.map((image, i) => ( + + )); - const prev = (
this.prevSlide(e)} className="prev">
); - const next = (
this.nextSlide(e)} className="next">
); + const prev = (
this.prevSlide(e)} className='prev'>
); + const next = (
this.nextSlide(e)} className='next'>
); - return ( -
-
-
this.close(e)} className="close-slideshow">
-
-
    {slides}
-
- { this.state.active && this.state.active.prev ? prev : null } - { this.state.active && this.state.active.next ? next : null } -
+ return ( +
+
+
this.close(e)} className='close-slideshow'>
+
+
    {slides}
- ); + { this.state.active && this.state.active.prev ? prev : null } + { this.state.active && this.state.active.next ? next : null } +
+
+ ); } } From c7aad44280f9bb47d6e5a7ac179b3ae609bc23fb Mon Sep 17 00:00:00 2001 From: Peter Siemens Date: Sat, 29 Sep 2018 16:15:40 -0700 Subject: [PATCH 02/16] Add topics field back to TopicsWidget --- phoenix/widgets.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/phoenix/widgets.py b/phoenix/widgets.py index 0c8bae4..c156d72 100644 --- a/phoenix/widgets.py +++ b/phoenix/widgets.py @@ -1,6 +1,6 @@ from dispatch.theme import register from dispatch.theme.widgets import Zone, Widget -from dispatch.theme.fields import ArticleField#, TopicField +from dispatch.theme.fields import ArticleField, TopicField @register.zone class HomepageZone(Zone): @@ -56,4 +56,4 @@ class TopicsWidget(Widget): zones = (NewsZone, LifeZone, FeaturesZone, ArtsZone, SportsZone, OpinionsZone) accepted_keywords = ('section', 'current_topic') - #topics = TopicField('Topics', many=True) + topics = TopicField('Topics', many=True) From 46da1804d09e92cf8fd748315098fae22b0f2879 Mon Sep 17 00:00:00 2001 From: Peter Siemens Date: Sat, 29 Sep 2018 16:17:08 -0700 Subject: [PATCH 03/16] Improve site-wide styles --- .../src/styles/components/_article.scss | 97 +++++++++++++------ .../styles/components/_article_banner.scss | 13 ++- .../static/src/styles/components/_button.scss | 7 +- .../static/src/styles/components/_embed.scss | 2 +- .../static/src/styles/components/_footer.scss | 14 ++- .../static/src/styles/components/_issue.scss | 3 +- .../src/styles/components/_large_header.scss | 14 +-- .../src/styles/components/_mobile_header.scss | 1 - .../src/styles/components/_newsletter.scss | 1 + .../src/styles/components/_print_issue.scss | 51 +++++++--- .../styles/components/_related_articles.scss | 18 +++- .../src/styles/components/_section.scss | 91 ++++++++++------- .../src/styles/components/_small_header.scss | 16 ++- .../src/styles/components/_subsection.scss | 42 +++++++- .../static/src/styles/utilities/_globals.scss | 5 +- .../static/src/styles/utilities/_reset.scss | 3 +- phoenix/static/yarn.lock | 84 +++++++++++++++- phoenix/templates/article.html | 4 +- phoenix/templates/components/article-1.html | 32 +++--- phoenix/templates/components/article-2.html | 21 ++-- phoenix/templates/components/article-3.html | 20 +++- phoenix/templates/components/article-4.html | 18 +++- phoenix/templates/components/article-6.html | 6 +- phoenix/templates/components/print-issue.html | 13 ++- .../components/related-articles.html | 5 +- .../components/subsection-front.html | 4 +- .../components/subsection-primary.html | 9 +- .../components/subsection-secondary.html | 11 +-- phoenix/templates/homepage.html | 2 +- phoenix/templates/section.html | 23 ++++- 30 files changed, 447 insertions(+), 183 deletions(-) diff --git a/phoenix/static/src/styles/components/_article.scss b/phoenix/static/src/styles/components/_article.scss index 9e3b4ae..9e93b51 100644 --- a/phoenix/static/src/styles/components/_article.scss +++ b/phoenix/static/src/styles/components/_article.scss @@ -4,22 +4,35 @@ display: block; // Text - font-weight: bold; - font-size: px-to-em(15); + font-weight: 600; + font-size: px-to-em(14); + letter-spacing: px-to-em(0.5); + text-transform: uppercase; color: $color-brand-primary; - letter-spacing: -0.15px; +} + +.c-article__info > a { + // Structure + display: block; + + // Text + text-decoration: none; + + &:hover { + // Extras + opacity: 0.75; + } } .c-article__headline { // Structure margin-top: 0; - margin-bottom: 0.5rem; + margin-bottom: 0.25rem; // Text font-family: $font-headline; font-size: px-to-em(26); color: $color-text-body; - letter-spacing: -0.3px; line-height: 1.2em; a { @@ -28,7 +41,7 @@ text-decoration: none; &:hover { - text-decoration: underline; + opacity: 0.75; } } } @@ -70,25 +83,28 @@ display: block; // Text - font-size: px-to-em(14); + font-size: px-to-em(15); color: $color-text-light; - letter-spacing: -0.15px; - line-height: 1.5em; + line-height: 1.65em; +} + +.c-article__meta__date { + // Text + color: $color-text-extra-light; } .c-article__description { // Structure - margin-top: 0.5rem; + margin-top: 0.25rem; margin-bottom: 0; // Text - font-size: px-to-em(14); - color: $color-text-dark; - line-height: 21px; + font-size: px-to-em(15); + color: $color-text-light; + line-height: 1.5em; } -.c-article--1, -.c-article--2, { +.c-article--1 { .c-article__image { // Structure margin-bottom: 0.75rem; @@ -112,46 +128,62 @@ } } -.c-article--2 { +.c-article--3 { + // Structure + display: flex; + .c-article__image-container { // Structure - flex: 2; // Golden ratio + width: 12rem; } + .c-article__info { // Structure - flex: 3; + flex: 1; + padding-left: 1.25rem; } } .c-article--4 { // Structure - margin-bottom: 1rem; + margin-bottom: 1.25rem; &:last-child { margin-bottom: 0; } -} -.c-article--5 { - // Border - border: 1px solid $color-border; - border-radius: 2px; + .c-article__image-container { + // Structure + margin-bottom: 0.75rem; + } - // Extras - box-shadow: 0 0 4px rgba(0, 0, 0, 0.03); + .c-article__image { + // Structure + padding-top: 56%; + } + + .c-article__headline { + // Text + font-size: px-to-em(20); + } +} +.c-article--5 { .c-article__info { // Structure margin-top: 1rem; margin-bottom: 1rem; - padding-left: 1rem; - padding-right: 1rem; } .c-article__headline { // Text font-size: px-to-em(22); } + + .c-article__image { + // Structure + padding-top: 56%; + } } .c-article--6 { @@ -166,6 +198,11 @@ padding-right: 1rem; } + .c-article__image { + // Structure + padding-top: 56%; + } + @media only screen and (min-width: $bp-desktop) { // Structure display: flex; @@ -210,7 +247,6 @@ // Text font-size: px-to-em(32); - letter-spacing: -0.5px; @media only screen and (min-width: $bp-desktop) { // Text @@ -225,7 +261,6 @@ // Text font-size: px-to-em(16); - letter-spacing: -0.22px; @media only screen and (min-width: $bp-desktop) { // Text @@ -300,7 +335,7 @@ // Text font-family: $font-body; - font-size: px-to-em(17); + font-size: px-to-em(18); line-height: 1.75em; color: $color-text-body; diff --git a/phoenix/static/src/styles/components/_article_banner.scss b/phoenix/static/src/styles/components/_article_banner.scss index 56f0792..371967a 100644 --- a/phoenix/static/src/styles/components/_article_banner.scss +++ b/phoenix/static/src/styles/components/_article_banner.scss @@ -47,8 +47,8 @@ // Text font-family: $font-headline; font-size: px-to-em(36); - color: #272525; - letter-spacing: -0.35px; + color: $color-text-body; + line-height: 1.2em; a { // Text @@ -56,7 +56,7 @@ text-decoration: none; &:hover { - text-decoration: underline; + opacity: 0.75; } } } @@ -69,8 +69,7 @@ margin-bottom: 1.5rem; // Text - font-size: px-to-em(15); - color: #272525; - letter-spacing: -0.2px; - line-height: 21px; + font-size: px-to-em(16); + color: $color-text-light; + line-height: 1.5em; } diff --git a/phoenix/static/src/styles/components/_button.scss b/phoenix/static/src/styles/components/_button.scss index 3810215..a38e31f 100644 --- a/phoenix/static/src/styles/components/_button.scss +++ b/phoenix/static/src/styles/components/_button.scss @@ -11,13 +11,12 @@ // Background background: $color-brand-primary; - font-size: px-to-em(15); // Text - font-weight: bold; - font-size: px-to-em(15); + font-weight: 600; + font-size: px-to-em(14); color: #fff; - letter-spacing: 0.1px; + letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; diff --git a/phoenix/static/src/styles/components/_embed.scss b/phoenix/static/src/styles/components/_embed.scss index b8d8e91..f8f7718 100644 --- a/phoenix/static/src/styles/components/_embed.scss +++ b/phoenix/static/src/styles/components/_embed.scss @@ -71,7 +71,7 @@ overflow: hidden; // Text - font-size: px-to-em(14); + font-size: px-to-em(15); color: $color-text-light; } diff --git a/phoenix/static/src/styles/components/_footer.scss b/phoenix/static/src/styles/components/_footer.scss index 6fd83c8..317fcc7 100644 --- a/phoenix/static/src/styles/components/_footer.scss +++ b/phoenix/static/src/styles/components/_footer.scss @@ -58,7 +58,7 @@ .c-footer__list__item, .c-topic { // Structure - margin-bottom: 0.25rem; + margin-bottom: 0.5rem; display: none; @media only screen and (min-width: 900px) { @@ -68,19 +68,14 @@ // Text color: #fff; - font-size: px-to-em(13); - - // Extras - opacity: 0.85; + font-size: px-to-em(15); &:first-child { // Structure - margin-bottom: 0.5rem; display: block; // Text font-weight: bold; - text-transform: uppercase; } &:last-child { @@ -93,8 +88,11 @@ color: #fff; text-decoration: none; + // Extras + opacity: 0.65; + &:hover { - text-decoration: underline; + opacity: 1; } } } diff --git a/phoenix/static/src/styles/components/_issue.scss b/phoenix/static/src/styles/components/_issue.scss index 356bb31..597ab0e 100644 --- a/phoenix/static/src/styles/components/_issue.scss +++ b/phoenix/static/src/styles/components/_issue.scss @@ -7,8 +7,9 @@ .c-issue__header { // Structure - margin-top: 1.5rem; display: flex; + margin-top: 1.5rem; + margin-bottom: 1.5rem; } .c-issue__header__left, diff --git a/phoenix/static/src/styles/components/_large_header.scss b/phoenix/static/src/styles/components/_large_header.scss index 119eb08..34fbcd7 100644 --- a/phoenix/static/src/styles/components/_large_header.scss +++ b/phoenix/static/src/styles/components/_large_header.scss @@ -41,11 +41,12 @@ margin: 0; // Text - font-size: px-to-em(13); + font-size: px-to-em(14); color: #888888; } .c-large-header__nav { + // Border border-top: 1px solid $color-border; @@ -70,14 +71,13 @@ display: block; height: 50px; line-height: 50px; - padding-left: 1rem; - padding-right: 1rem; + padding-left: 0.75rem; + padding-right: 0.75rem; // Text font-weight: bold; - font-size: px-to-em(14); + font-size: px-to-em(15); color: $color-text-body; - letter-spacing: -0.15px; text-decoration: none; &:hover { @@ -89,7 +89,7 @@ .c-large-header__social__item { a { - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-left: 0.65rem; + padding-right: 0.65rem; } } diff --git a/phoenix/static/src/styles/components/_mobile_header.scss b/phoenix/static/src/styles/components/_mobile_header.scss index dce2423..f8c1aa3 100644 --- a/phoenix/static/src/styles/components/_mobile_header.scss +++ b/phoenix/static/src/styles/components/_mobile_header.scss @@ -179,7 +179,6 @@ $header-height: 57px; font-weight: bold; font-size: px-to-em(14); color: $color-text-body; - letter-spacing: -0.15px; text-decoration: none; &:hover { diff --git a/phoenix/static/src/styles/components/_newsletter.scss b/phoenix/static/src/styles/components/_newsletter.scss index eadbed4..975a47a 100644 --- a/phoenix/static/src/styles/components/_newsletter.scss +++ b/phoenix/static/src/styles/components/_newsletter.scss @@ -42,6 +42,7 @@ // Text line-height: 1; + font-weight: bold; // Extra cursor: pointer; diff --git a/phoenix/static/src/styles/components/_print_issue.scss b/phoenix/static/src/styles/components/_print_issue.scss index 1000199..829cbef 100644 --- a/phoenix/static/src/styles/components/_print_issue.scss +++ b/phoenix/static/src/styles/components/_print_issue.scss @@ -1,32 +1,57 @@ .c-print-issue { // Structure - padding-left: 1.5rem; padding-right: 1.5rem; - - // Text - text-align: center; } -.c-print-issue__label { +.c-print-issue__image { // Structure - margin-top: 0; + display: block; + padding: 1rem; + + // Border + border: 1px solid $color-border; + + // Extra + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05); + + img { + // Structure + display: block; + width: 100%; + height: auto; + } } -.c-print-issue__image { +.c-print-issue__label { // Structure - width: 100%; - height: auto; + margin-top: 1rem; + margin-bottom: 0.5rem; - // Extra - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); + // Text + font-weight: 600; + font-size: px-to-em(14); + letter-spacing: px-to-em(0.5); + text-transform: uppercase; + color: $color-brand-primary; } .c-print-issue__title { // Structure - margin-top: 0.75rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; // Text font-size: px-to-em(18); color: $color-text-dark; - letter-spacing: -0.2px; } + +.c-print-issue__description { + // Structure + margin-top: 0.5rem; + margin-bottom: 0.5rem; + + // Text + font-size: px-to-em(15); + color: $color-text-light; + line-height: 1.5em; +} \ No newline at end of file diff --git a/phoenix/static/src/styles/components/_related_articles.scss b/phoenix/static/src/styles/components/_related_articles.scss index cf2a5df..642d00c 100644 --- a/phoenix/static/src/styles/components/_related_articles.scss +++ b/phoenix/static/src/styles/components/_related_articles.scss @@ -9,10 +9,24 @@ .c-related-articles__title { // Structure margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-bottom: 0.75rem; // Text font-size: px-to-em(28); color: $color-text-dark; - letter-spacing: -0.35px; + + .fas { + // Structure + margin-right: 0.5rem; + } +} + +.c-related-articles__subtitle { + // Structure + margin-top: 0; + margin-bottom: 1.5rem; + + // Text + font-size: px-to-em(18); + color: $color-text-light; } diff --git a/phoenix/static/src/styles/components/_section.scss b/phoenix/static/src/styles/components/_section.scss index 230bb23..82e42f0 100644 --- a/phoenix/static/src/styles/components/_section.scss +++ b/phoenix/static/src/styles/components/_section.scss @@ -1,27 +1,48 @@ .c-section__title { // Structure - margin-top: 1rem; - margin-bottom: 1rem; - padding-left: 1.4rem; + margin-top: 1.5rem; + margin-bottom: 0.75rem; // Text font-size: px-to-em(28); + color: $color-text-dark; @media only screen and (min-width: $bp-desktop) { // Structure padding-left: 0; // Text - font-size: px-to-em(36); - text-align: center; + font-size: px-to-em(48); } } -.c-section__topics { - // Border - border-top: 1px solid $color-border; - border-bottom: 1px solid $color-border; +.c-section__subtitle { + // Structure + margin-top: 0; + margin-bottom: 0.5rem; + // Text + font-size: px-to-em(18); + font-weight: normal; + color: $color-text-light; +} + +.c-section__heading { + // Structure + margin-top: 1.5rem; + margin-bottom: 1.5rem; + + // Text + font-size: px-to-em(24); + color: $color-text-dark; + + .fas { + // Structure + margin-right: 0.5rem; + } +} + +.c-section__topics { ul { // Structure list-style-type: none; @@ -33,9 +54,6 @@ // Structure padding-left: 0; padding-right: 0; - - // Text - text-align: center; } } @@ -43,32 +61,31 @@ // Structure display: inline-block; margin-top: 1rem; - margin-right: 0.4rem; + margin-right: 0.25rem; margin-bottom: 1rem; - margin-left: 0.4rem; + margin-left: 0.25rem; position: relative; + padding: 0.25rem 0.5rem; + border-radius: 3px; + + background: $color-brand-primary; + + opacity: 0.75; + + &:first-child { + margin-left: 0; + } + // Text - font-size: px-to-em(16); + font-size: px-to-em(14); + letter-spacing: px-to-em(0.5); + color: #fff; font-weight: 600; + text-transform: uppercase; - @media only screen and (min-width: $bp-desktop) { - // Structure - margin-right: 0.8rem; - margin-left: 0.8rem; - - &:not(:last-child):after { - content: '\B7'; - position: absolute; - top: 0; - bottom: 0; - height: 2rem; - line-height: 2rem; - right: -1rem; - width: 0.2rem; - text-align: center; - color: $color-brand-primary; - } + &:hover { + opacity: 1; } a { @@ -111,7 +128,7 @@ @media only screen and (min-width: $bp-desktop) { // Structure - margin-top: 2rem; + margin-top: 1.5rem; margin-bottom: 2rem; } } @@ -236,13 +253,21 @@ // Structure padding-left: 0; padding-bottom: 1rem; + margin-bottom: 1.5rem; } // Text font-size: px-to-em(24); + color: $color-text-dark; // Border border-bottom: 1px solid $color-border; + + .fas { + // Structure + margin-right: 0.5rem; + } + } .c-section__pagination { diff --git a/phoenix/static/src/styles/components/_small_header.scss b/phoenix/static/src/styles/components/_small_header.scss index 609c0c4..b94d75a 100644 --- a/phoenix/static/src/styles/components/_small_header.scss +++ b/phoenix/static/src/styles/components/_small_header.scss @@ -22,7 +22,7 @@ $header-height: 57px; background: #fff; // Border - border-bottom: 1px solid #E0E0E0; + border-bottom: 1px solid #efefef; // Extras box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.025); @@ -62,6 +62,7 @@ $header-height: 57px; .c-small-header__nav { // Structure flex: 1; + padding-left: 0.5rem; ul { // Structure @@ -80,14 +81,13 @@ $header-height: 57px; display: block; height: $header-height; line-height: $header-height; - padding-left: 0.75rem; - padding-right: 0.75rem; + padding-left: 0.5rem; + padding-right: 0.5rem; // Text font-weight: bold; - font-size: px-to-em(14); + font-size: px-to-em(15); color: $color-text-body; - letter-spacing: -0.15px; text-decoration: none; &:hover { @@ -115,14 +115,10 @@ $header-height: 57px; display: block; height: $header-height; line-height: $header-height; - padding-left: 0.5rem; - padding-right: 0.5rem; // Text - font-weight: bold; - font-size: px-to-em(14); + font-size: px-to-em(16); color: $color-text-body; - letter-spacing: -0.15px; text-decoration: none; &:hover { diff --git a/phoenix/static/src/styles/components/_subsection.scss b/phoenix/static/src/styles/components/_subsection.scss index d98e368..b2a4c8c 100644 --- a/phoenix/static/src/styles/components/_subsection.scss +++ b/phoenix/static/src/styles/components/_subsection.scss @@ -20,7 +20,6 @@ font-weight: bold; font-size: px-to-em(28); color: $color-text-dark; - letter-spacing: -0.35px; } .c-subsection__body { @@ -92,6 +91,47 @@ } } +.c-subsection--front { + .c-subsection__left { + @media only screen and (min-width: $bp-desktop) { + // Structure + flex: 1; + padding-right: 1.5rem; + margin-right: 1.5rem; + + // Border + border-right: none; + } + } + + .c-subsection__row { + @media only screen and (min-width: $bp-desktop) { + // Structure + display: block; + margin-top: 1.5rem; + } + } + + .c-subsection__row__item { + @media only screen and (min-width: $bp-desktop) { + // Structure + margin-bottom: 1.25rem; + + &:first-child { + // Structure + padding-right: 0; + border-right: none; + } + + &:last-child { + // Structure + padding-left: 0; + margin-bottom: 0; + } + } + } +} + .c-subsection__footer { // Structure display: flex; diff --git a/phoenix/static/src/styles/utilities/_globals.scss b/phoenix/static/src/styles/utilities/_globals.scss index e4af1a1..8499737 100644 --- a/phoenix/static/src/styles/utilities/_globals.scss +++ b/phoenix/static/src/styles/utilities/_globals.scss @@ -1,5 +1,5 @@ // Fonts -$font-default: 'Noto Sans', 'Helvetica', Arial, sans-serif; +$font-default: 'KievitOT', 'Lucida Grande', 'Noto Sans', 'Helvetica', Arial, sans-serif; $font-headline: 'Athelas', Georgia, serif; $font-body: Georgia, serif; @@ -14,8 +14,9 @@ $base-font-size: 16; $color-brand-primary: #eb2c2c; $color-text-body: #262626; -$color-text-light: #5c5c5c; $color-text-dark: #1a1a1a; +$color-text-light: #424242; +$color-text-extra-light: #7d7d7d; $color-text-hyperlink: #326fd0; diff --git a/phoenix/static/src/styles/utilities/_reset.scss b/phoenix/static/src/styles/utilities/_reset.scss index ad93e17..be09b20 100644 --- a/phoenix/static/src/styles/utilities/_reset.scss +++ b/phoenix/static/src/styles/utilities/_reset.scss @@ -9,5 +9,6 @@ body { font-family: $font-default; font-size: $base-font-size + px; -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -moz-osx-font-smoothing: grayscale; + text-rendering: geometricPrecision; } diff --git a/phoenix/static/yarn.lock b/phoenix/static/yarn.lock index d513cea..ac86dd5 100644 --- a/phoenix/static/yarn.lock +++ b/phoenix/static/yarn.lock @@ -140,6 +140,13 @@ array-find-index@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" +array-includes@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d" + dependencies: + define-properties "^1.1.2" + es-abstract "^1.7.0" + array-union@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39" @@ -1566,6 +1573,12 @@ deep-is@~0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" +define-properties@^1.1.2: + version "1.1.3" + resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1" + dependencies: + object-keys "^1.0.12" + define-property@^0.2.5: version "0.2.5" resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116" @@ -1729,6 +1742,24 @@ error-ex@^1.2.0: dependencies: is-arrayish "^0.2.1" +es-abstract@^1.7.0: + version "1.12.0" + resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165" + dependencies: + es-to-primitive "^1.1.1" + function-bind "^1.1.1" + has "^1.0.1" + is-callable "^1.1.3" + is-regex "^1.0.4" + +es-to-primitive@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d" + dependencies: + is-callable "^1.1.1" + is-date-object "^1.0.1" + is-symbol "^1.0.1" + es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14: version "0.10.39" resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.39.tgz#fca21b67559277ca4ac1a1ed7048b107b6f76d87" @@ -1804,6 +1835,16 @@ eslint-loader@^2.0.0: object-hash "^1.1.4" rimraf "^2.6.1" +eslint-plugin-react@^7.11.1: + version "7.11.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c" + dependencies: + array-includes "^3.0.3" + doctrine "^2.1.0" + has "^1.0.3" + jsx-ast-utils "^2.0.1" + prop-types "^15.6.2" + eslint-scope@^3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8" @@ -2182,7 +2223,7 @@ fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2: mkdirp ">=0.5 0" rimraf "2" -function-bind@^1.0.2: +function-bind@^1.0.2, function-bind@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -2408,6 +2449,12 @@ has@^1.0.1: dependencies: function-bind "^1.0.2" +has@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" + dependencies: + function-bind "^1.1.1" + hash-base@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1" @@ -2625,6 +2672,10 @@ is-builtin-module@^1.0.0: dependencies: builtin-modules "^1.0.0" +is-callable@^1.1.1, is-callable@^1.1.3: + version "1.1.4" + resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75" + is-data-descriptor@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56" @@ -2637,6 +2688,10 @@ is-data-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" +is-date-object@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16" + is-descriptor@^0.1.0: version "0.1.6" resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca" @@ -2765,6 +2820,12 @@ is-property@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84" +is-regex@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491" + dependencies: + has "^1.0.1" + is-resolvable@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88" @@ -2779,6 +2840,10 @@ is-svg@^2.0.0: dependencies: html-comment-regex "^1.1.0" +is-symbol@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572" + is-typedarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" @@ -2911,6 +2976,12 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" +jsx-ast-utils@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f" + dependencies: + array-includes "^3.0.3" + keymaster@^1.6.2: version "1.6.2" resolved "https://registry.yarnpkg.com/keymaster/-/keymaster-1.6.2.tgz#e1ae54d0ea9488f9f60b66b668f02e9a1946c6eb" @@ -3489,6 +3560,10 @@ object-hash@^1.1.4, object-hash@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.2.0.tgz#e96af0e96981996a1d47f88ead8f74f1ebc4422b" +object-keys@^1.0.12: + version "1.0.12" + resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2" + object-visit@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb" @@ -4039,6 +4114,13 @@ prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.6.2: + version "15.6.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" + dependencies: + loose-envify "^1.3.1" + object-assign "^4.1.1" + prr@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" diff --git a/phoenix/templates/article.html b/phoenix/templates/article.html index f42869f..9ed1dea 100644 --- a/phoenix/templates/article.html +++ b/phoenix/templates/article.html @@ -19,7 +19,7 @@ {{ article.section.name }} {% endif %}

{{ article.headline }}

- {% if article.get_author_string %}By {{ article.get_author_string }}  ·  {% endif %}{{ article.published_at|date:"F jS, Y \a\t P" }} + {% if article.get_author_string %}By {{ article.get_author_string }} · {% endif %}{{ article.published_at|date:"F jS, Y \a\t P" }}
- {{ article.headline }} - -
-
- {% article_tag article %} -

{{ article.headline }}

- {% if article.get_author_string %}By {{ article.get_author_string }}  ·  {% endif %}{{ article.published_at|date:"F jS, Y \a\t P" }} - {% if article.snippet %}

{{ article.snippet }}

{% endif %} -
+
+ + +
+
+ +
{% article_tag article %}
+

{{ article.headline }}

+
+ {% if article.get_author_string %}
By {{ article.get_author_string }}
{% endif %} +
{{ article.published_at|naturaltime }}
+
+ {% if article.snippet %}

{{ article.snippet }}

{% endif %} + +
diff --git a/phoenix/templates/components/article-2.html b/phoenix/templates/components/article-2.html index f56db1b..cd38c2b 100644 --- a/phoenix/templates/components/article-2.html +++ b/phoenix/templates/components/article-2.html @@ -1,16 +1,15 @@ {% load phoenix %} +{% load humanize %}
-
- - -
- {% article_tag article %} -

{{ article.headline }}

- {% if article.get_author_string %}By {{ article.get_author_string }}  ·  {% endif %}{{ article.published_at|date:"F jS, Y \a\t P" }} - {% if article.snippet %}

{{ article.snippet }}

{% endif %} + +
{% article_tag article %}
+

{{ article.headline }}

+
+ {% if article.get_author_string %}
By {{ article.get_author_string }}
{% endif %} +
{{ article.published_at|naturaltime }}
+
+ {% if article.snippet %}

{{ article.snippet }}

{% endif %} +
diff --git a/phoenix/templates/components/article-3.html b/phoenix/templates/components/article-3.html index 28ccb8d..ed5e775 100644 --- a/phoenix/templates/components/article-3.html +++ b/phoenix/templates/components/article-3.html @@ -1,9 +1,21 @@ {% load phoenix %} +{% load humanize %} diff --git a/phoenix/templates/components/article-4.html b/phoenix/templates/components/article-4.html index e231527..77e8e2e 100644 --- a/phoenix/templates/components/article-4.html +++ b/phoenix/templates/components/article-4.html @@ -1,8 +1,20 @@ {% load phoenix %} +{% load humanize %} diff --git a/phoenix/templates/components/article-6.html b/phoenix/templates/components/article-6.html index 75e0c9b..443ee45 100644 --- a/phoenix/templates/components/article-6.html +++ b/phoenix/templates/components/article-6.html @@ -1,4 +1,5 @@ {% load phoenix %} +{% load humanize %}
{% article_tag article %}

{{ article.headline }}

- {% if article.get_author_string %}By {{ article.get_author_string }}  ·  {% endif %}{{ article.published_at|date:"F jS, Y \a\t P" }} +
+ {% if article.get_author_string %}
By {{ article.get_author_string }}
{% endif %} +
{{ article.published_at|naturaltime }}
+
diff --git a/phoenix/templates/components/print-issue.html b/phoenix/templates/components/print-issue.html index 4480272..1668121 100644 --- a/phoenix/templates/components/print-issue.html +++ b/phoenix/templates/components/print-issue.html @@ -1,8 +1,13 @@ {% load static %} {% load phoenix %}
-

Latest Issue

- {{ issue.title }} -

{{ issue.title }}

- Issue archive + + {{ issue.title }} + +
+
Latest Issue
+

{{ issue.title }}

+

We asked people from each faculty to share with us the contents of their bag. Here's what we found.

+ More issues +
diff --git a/phoenix/templates/components/related-articles.html b/phoenix/templates/components/related-articles.html index 0593b81..c3f821a 100644 --- a/phoenix/templates/components/related-articles.html +++ b/phoenix/templates/components/related-articles.html @@ -1,6 +1,9 @@ {% load phoenix %}
-

More {{ title }}

+

+ Suggested +

+

If you enjoyed this story, here are a few more you might like.

{% for article in articles %} diff --git a/phoenix/templates/components/subsection-front.html b/phoenix/templates/components/subsection-front.html index de97855..69a89f3 100644 --- a/phoenix/templates/components/subsection-front.html +++ b/phoenix/templates/components/subsection-front.html @@ -5,8 +5,8 @@

{{ title }}

{% include 'components/article-1.html' with article=articles.0 %}
-
{% include 'components/article-4.html' with article=articles.1 %}
-
{% include 'components/article-4.html' with article=articles.2 %}
+
{% include 'components/article-3.html' with article=articles.1 %}
+
{% include 'components/article-3.html' with article=articles.2 %}
{{ title }}
{% include 'components/article-1.html' with article=articles.0 %}
-
{% include 'components/article-3.html' with article=articles.1 %}
-
{% include 'components/article-3.html' with article=articles.2 %}
-
-
- More {{ title }} +
{% include 'components/article-2.html' with article=articles.1 %}
+
{% include 'components/article-2.html' with article=articles.2 %}
diff --git a/phoenix/templates/components/subsection-secondary.html b/phoenix/templates/components/subsection-secondary.html index 8307fb2..0d5ea88 100644 --- a/phoenix/templates/components/subsection-secondary.html +++ b/phoenix/templates/components/subsection-secondary.html @@ -3,15 +3,10 @@

{{ title }}

- {% include 'components/article-2.html' with article=articles.0 %} + {% include 'components/article-1.html' with article=articles.0 %}
-
{% include 'components/article-3.html' with article=articles.1 %}
-
{% include 'components/article-3.html' with article=articles.2 %}
-
-
- More {{ title }} +
{% include 'components/article-2.html' with article=articles.1 %}
+
{% include 'components/article-2.html' with article=articles.2 %}
diff --git a/phoenix/templates/homepage.html b/phoenix/templates/homepage.html index af357c4..8c93c9c 100644 --- a/phoenix/templates/homepage.html +++ b/phoenix/templates/homepage.html @@ -9,7 +9,7 @@ {% zone 'homepage' %}
- {% include 'components/subsection-front.html' with title='News' slug='news' articles=news issue=issue %} + {% include 'components/subsection-front.html' with title='Top Stories' slug='news' articles=news issue=issue %} {% include 'components/subsection-secondary.html' with title='Lifestyle' slug='life' articles=lifestyle advertisement='components/advertisement-sidebar-a.html' %} {% include 'components/advertisement-leaderboard.html' with hide_mobile=True %} {% include 'components/subsection-primary.html' with title='Features' slug='features' articles=features %} diff --git a/phoenix/templates/section.html b/phoenix/templates/section.html index 9022feb..8278dea 100644 --- a/phoenix/templates/section.html +++ b/phoenix/templates/section.html @@ -9,14 +9,29 @@ {% include 'components/mobile-header.html' %}
+ {% include 'components/advertisement-leaderboard.html' %} +

{{ section.name }}

-