[ENHANCEMENT] Rework to increase responsiveness and verticallity

[SethCram]

Is your feature request related to a problem? Please describe.

• Yes, mobile phone users will have a difficult time on parts of the website

Describe the solution you'd like

• Rework to increase responsiveness and verticallity
  • CSS classes could change w/ screen size reaches certain range
  • could rework mostly write page in a vertical fashion

Additional context

• take responsive features from portfolio website maybe

Development

• [x] turn topbar into hamburger dropdown menu for mobile phone users

  • Redbubble has a similar design to mine and Weebly, but only during desktop view
  • phone view uses hamburger
  • used premade react component
  • then only displayed while screen size was small enough for tablets of phones
  • has probs w/ Safari and IE

• [x] update currDeviceType everytime screen width changes

  • only updates w/ refresh rn since code setting var not in any method
  • https://stackoverflow.com/a/19014495/13046931
  • used this to determine device type and exported device type

• [x] restrict post container to fit within viewport when it shrinks

  • could use media queries and generic container class
  • did so but only had to for post class

• [x] sidebar should be displayed if present for mobile phones

  • displayed it below page content since page content deemed more important than author details
  • did so thru css media query flipping flex row to flex column

• [x] remove about page slides during mobile phone mode

  • used exported DeviceType and copy + pasted currDeviceType setting code
  • could turn that into a function and export it too
  • did so
  • doesnt rlly make sense that funct + const resides in topbar but oh well

• [x] write page must be vertically reworked for mobile phones

  • left title and pic upload on same row
  • shift category selection + public btn up
  • recentered picture display

• [x] rework singlepostpage in phone display

  • no RHS margins around contents or picture since no sidebar there anymore
  • so added constant RHS margin

• login and register page seem fine

  • bg image still shifted as mentioned in #22

• [x] make posts render the same as prevs

  • ensure post preview boxes stay the same size regardless of screen resolution
  • doesnt seem like the right way to do it
  • so just set min width
  • so, now posts are the same size wrt the other posts on the screen
  • don't needa worry ab posts with more than 3 cats since not how it works for users

• [x] fix mid-edit singlepostpage to be presentable in tablet and mobile screens

  • setting width to fit contents on sidebar helped
  • adjusted width of ckeditor since it was pushing sidebar

• [x] change home page presentation during tablet mode

  • sidebar currently being cutoff otherwise
  • could only allow 1 post horizontally when home page queried in tablet mode
  • easier to render sidebar underneath posts tho
  • but the sidebar becomes very wide
  • so set max width of sidebar in tablet mode to 50%
  • and aligned the contents in the center during tablet mode

• [ ] place logout + user setting under profile picture dropdown

  • logout currently under hamburger
  • could reuse hamburger menu or try to find different dropdown
  • for now, placed logout under hamburger
  • not as intuitive but could fix thru adding logout btn to setting page

• [ ] link login + register btns under dropdown

  • take up too much space on phone
  • needa display some new default character icon when no user logged in
  • for now, placed under hamburger
  • bc default character icon non-intuitive

• [ ] add logout btn to settings page

• [ ] fix background coloring problems introduced by mobile phone mode

• [ ] create an author topbar displayed above each post in mobile phone view

[SethCram]

core functionality completed