search

rhw-repo / mern-post-app

In development: Full stack with JavaScript, React.js, Node.js, Express.js, MongoDB. JWT Authentication, CRUD & validation, filtering and database. Responsive CSS. TanStack Table. Current sprint: prepare for testing, refactor auth to SSO, re-testing & deployment.
3 stars 0 forks source link

Add media queries & review re: responsive design #6

Open rhw-repo opened 1 year ago

rhw-repo commented 1 year ago

Project designed for desktop yet should display and respond correctly across different devices Ideally the following should happen after bugfix

(for inifinte loop on render of ExperimentalAllTagsSelect in CreateNew.js and renaming of ExperimentalAllTagsSelect to a much shorter name)

Reviewing all frontend components identify where display is poor at 320px List out components & issues Table: Strategy for responsive table: adding data-title may be appropriate Generally: Width and height causing issues, review to refactor without (Flexbox) and/or review to write media queries

rhw-repo commented 1 year ago

Preparation Branched from feature/refactor-code-smell new branch feature/refactor-css-modules, both merged into dev on completion Refactored directory structure:

Globally used components stay within components directory Components used only within one particular page moving into dedicated directory for that page, located within the pages directory. Should see all the specific components for one page within its own directory, easier to find. Also refactoring current single stylesheet index.css into global.css stylesheet + css modules

Clearer structure in anticipation of adapting to responsive design Also more intuitive structure for any future understanding, maintenance, collaboration

rhw-repo commented 1 year ago

Bug with infinite re-render in CreateNew.js now fixed and merged into dev.

rhw-repo commented 1 year ago

Same bugfix for infinite re-render in CreateNew.js now merged into main. Branched from main, merged dev into new branch. Manually tested. Merged new branch into main: directory structure and css updates currently consistent in main and dev. Continuing setting up css refactoring in dev.

rhw-repo commented 1 year ago

Table refactoring underway, breakpoints change layout to grid at 1370px and limit table cell width at 480px. Currently simplified table row filtering @ first breakpoint: filter components rendered Global Filter and Date Range Filter.

rhw-repo commented 1 year ago

Table refactoring complete, rows and pagination. Next items: Table Options Container display:grid at media breakpoints complete. Now needs display sizing of GlobalFilter adjusting at media breakpoints to prevent overflowing container.

Project pause due to vacation until 6th Nov

rhw-repo commented 1 year ago

Pushed feature/responsive-css now please note not complete, WIP.

UPDATE 01/12/2023

WIP:

Login & Signup pages - checking rendering on certain IPad 7 iPhone screen sizes next, otherwise complete

Navbar:

  1. problematic to display unknown length email - has been displayed as placeholder Design solution: require username at sign up, limit allowed characters to letters and numbers and a max length, display username in navbar

    1. Logout button needs display to scale down at smaller screen sizes, too prominent for a secondary button

    2. CreateNew needs review

    3. Ensuring all touch targets are minimum 44 x 44 px for accessibility and usability at all screen sizes

rhw-repo commented 11 months ago

TODO: add a wrapper around DateRangeFilter and use it to change display orientation for @media (max-width700px) UPDATE: abandoned - client requests DateRangeFilter should not be displayed at screen width less than 700px as app is intended for use as desktop first