At over 600px, the articles should all gain width 100%

[portermichael]

This is more of an ease in readability. At larger screen sizes we should have the article width reach 100% of the screen so we don't have to read a long skinny article.

This can be accomplished by adjusting the width. The articles all exist as inline-blocks, so if we adjust the width to 100%, it will push the blocks down. I can use an animate on it.

base.css line84

article { text-align: left; display: inline-block; vertical-align: top; width: calc(32% - 3em); }

If we can animate the width to 100% here, it will be a better reading experience.

[portermichael]

Spent an hour or so tinkering. It did work for large screens and after animation looked pretty cool. But unfortunately, the position stayed for the small screen. This was an unacceptable design flaw. I attempted to toggle a class to get the width to adjust accordingly, but was not successful. Will table for now and try again tomorrow afternoon.

viewArticle.js line 44

viewArticles.shortenText = function () { $('.article-body :nth-of-type(n+2)').hide(); $('#articles').on('click', '.read-more', function(event){ event.preventDefault(); if($(this).html() === 'Read more →') { // $(this).parent().addClass('.barticle', 1000) $(this).prev().children().slideDown(200); $(this).html('Read less ←'); $(this).blur(); } else if ($(this).html() === 'Read less ←') { // $(this).parent().animate({width: '25%'}, 1000); // $(this).parent().removeClass('.barticle', 1000) $('.article-body :nth-of-type(n+2)').slideUp(1000); $(this).html('Read more →'); $(this).blur(); } }); };