commit-notes.txt

[#61] Fix blog-post.js layout & style on mobile

* conditional.js components added:
  * RenderIfElse is there to render one or another --
    -- passed component based on a passed condition
  * RenderIfMobile:
    * A component that checks window for mobile --
    --breakpoints and renders conditionally.
    * Two passed set of nodes get rendered on condition
    * Uses RenderIfElse to conditionally render.
    * Performs own state updates to check on breakpoints.
    * Uses a throttled event listener to recheck resizes.
* blog-post.js:
  * Now uses RenderIfMobile with seperate renderings --
  -- for each case.
  * The two cases just add a BEM modifier --mobile for --
  -- for styling based on mobile sizes.
* _blog-post.scss:
  * extended classes to handle mobile styles.
  * Changed background color, padding, margin, padding, wdt
* Change mobile background to be brighter in sass aliases.
* Fix _typography.scss family aliases to current standard.
* Add 'window' to eslint recognized globals

Refactor animated site-menu button

* menu-toggle.js:
  * The animated button is now three divs instead of one.
    * Before the one used pseudo classes.
    * They were a nightmare to pass 'highlight' state to.
  * Refactor class name formatting routines:
    * Now all classNames are computed w/ intermediate consts
    * In the end three strings for classNames for ea. bar.
  * Rename class names to use site-menu-buttonXXXX as block
  * Elem. classNames are now __wrapper & __barXXXX
  * BEM mods are now --cross --hamburger --highlight
  * _animated-menu-icon.scss:
    * Complete rewrite with same animations.
    * SASS '&' in use to simplify class definitions.
    * Makes use of the three new divs of animated button
    * Mid bar dissappear is now a 'opacity' transition
    * Highlight is seperate transition changing color
    * Remove container highlight animations & outline
    * TODO in the future better outline handling...
    *... needs implementation for accessibility.
  * Prop to indicate menu open is now 'isCross'
    * This component only cares if the button is a cross or not
    * ... and if it's highlighted
  * This was also fixed in the parent class header.js


[#57] Style mobile-sized post previews

* Rename styles/components/_mobile-post-previes.scss
  * Moved to styles/modules
  * Renamed to _table-items.scss
  * This is to semantically reflect that table items are
  the visual description of what mobile post previews are.
  * It's a module because table items might be reused elsewhere
  * Might need renaming later but for now this works better.
* _table-items.scss:
  * __separator class for visual separators
  * renamed a lot of classes
  * fixed a lot of paddings & margins to make things fit
* feed.js
  * The feed now is the one checking media queries with 'react-media'
  * This is instead of post-preview.js
  * Passes isMobile prop to post-preview to do the same thing as b4
  * Feed now uses a conditional rendering of a bottom separator if mobile
* Fonts are now  Roboto & Roboto Condensed to deal w/ compatibility
* pages/index.js w/ 160 pruneLength for now to make mobile fit easier

[#57] First vers. of mobile-size feed preview style
* Conditional component to more cleanly (in code) render cond'nly
* omitSpacer prop for ContentWrapper to remove horiz. spacers
* omitContentSpacer prop in PageWrapper
  * Used to pass bool into ContentWrapper
  * Same value as ContentWrapper's omitSpacer
* Add const/breaks* back into layouts/index.js
* Change breakpoints to include:
  * mobile - changed to 480
  * tablet - still 768
  * desktop - chaged to 1200
    * new name for autoMenuVisibilityBreakpoint
  * large - new @ 1280
  * xlarge - new @ 1600
* Initial work to make readable boolean breakpoint functions
  * commented out for now till time to flesh it out
* Rename breakpointReached in layout/index, it's semantically reversed
 * renamed, isMobile
* _content-wrapper.scss:
  * page-content__wrapper--mobile is the class for mobile specific styl
  * padding: 0
* new partial stylesheet: src/styles/components/_mobile-post-previews
  * currently an exact copy of _cards.scss
  * will have exact matches to _cards elements with own block selectrs
  * will be used by PostPreview component to render different previews
  when mobile breakpoints are in play.
* PostPreview
  * import 'react-media' & '.../breakpoints.js'
  * now has basic funcitons for managing breakpoint logic.
  * conditional rendering is handled by 'react-media' component
  * for now a <h1> placeholder gets rendered when mobile size
  * otherwise behaves exactly as before but with conditional render