search

the-hideout / tarkov-dev

The official site for tarkov.dev - A web app to track item prices, view trader barters, quests, maps, and much more!
https://tarkov.dev
MIT License
147 stars 53 forks source link

Issue #1000 Responsive design changes and element overhaul to Player Loadout in tarkov.dev/players/* pages #1001

Closed Applefrittr closed 1 month ago

Applefrittr commented 1 month ago

Responsive Design and UI overhaul to Player loadouts in tarkov.dev/players/* Issue #1000

Targeted changes to provide a better user experience, especially on phone.

Description 🗒️

Refer to Issue #1000. The original loadout element caused page layout concerns, especially on smaller screens. Overflow issues fixed and overall look of the element was changed dramatically to give the look and feel of the in game character screen.

KEY CHANGES

  1. A new data field was added to fetched items from the API - 'inspectImageLink' (file: src/features/items/do-fetch-items.mjs)
  2. A new React hook was added to the hooks dir - 'useResponsiveScaling.jsx'. This hook works in conjunction with components/item-image/index.js to scale up/down images passed from pages/player/index.js based on screen size - RESPONSIVE :smiley:
  3. CSS media queries added to pages/player/index.css to match screen breakpoints set up in useResponsiveScaling.jsx. Grid layout overhaul.
  4. IMPORTANT!!!!!!!!!! I commented out the CloudFlare turnstile component, import statement, and the call to fetchProfile() is useEffect() in src/pages/player/index.js for ease of development. The CF turnstile prevents anything from happening on the page unless the capcha is passed. Unfortunately a request from localhost doesn't cut it :face_with_diagonal_mouth: These changes NEED to be reversed before merge!!!!!! I left comments tagged with issue#1000 in the file itself to locate the changes easily.
  5. In order to get a profile loaded into my local environment for testing, I saved a few dummy profiles from the live site and used the LoadProfile feature on the tarkov.dev/players/ page. Those json files are located in src/pages/player/saved-profiles-issue#1000. Since there is no way (not that I found) to navigate to a unique tarkov.dev/players/ page, just type it in directly to the address bar, example: tarkov.dev/palyers/regular/1. This will bring up the unique player page with nothing loaded yet. Simply click the Load Profile button and pick a file from the added directory. Delete saved profiles directory before merge!
  6. My linter/Prettier kind of went crazy on the files I worked on, bloating the changes; I'm unsure if that is standard or not. Still learning :smile:

Examples 📸

loadout1 responsive1 responsive2 responsive3

Related Issues 🔗

I explored the site after my changes in my local environment and did not notice any changes to other image elements across the site :crossed_fingers:

First PR, be gentle :smiley:

Expand for Help - Have questions about the review or deployment process? View our [contributing docs](https://github.com/the-hideout/tarkov-dev/blob/main/CONTRIBUTING.md) - Need additional help and want to chat in real time? Join our [community Discord](https://discord.gg/WwTvNe356u) > By submitting this pull request, you agree to our [code of conduct](https://github.com/the-hideout/tarkov-dev/blob/main/CODE_OF_CONDUCT.md)
Razzmatazzz commented 1 month ago

Thanks for the PR! I'm going to edit this PR to merge it to a new branch of the repo, which will allow us to do the necessary testing and tweaks.