Issues in redesign - Githubissues

MartinKolarik commented 2 years ago

GitHub is hiding comments in #400 because there are too many, so we're going to track all remaining issues here for better visibility.

MartinKolarik commented 2 years ago

Package page: https://www-jsdelivr-com-pr-400.onrender.com/package/npm/react

[x] undefined chart labels on Statistics tab - be sure to test all period options including yearly
- [x] the fix for this broke charts in the sidebar (compare with design)
[x] chart labels on Y axis - number should be aligned to the right and have space between every three digits (see design), use _.formatNumber
- [x] still no space between digits and broke formatting:
[x] "Group by" - this needs to be implemented on the client. Show only the groups for which we have all the data, drop the first/last group with partial data. Example: today is May 13, I select yearly range and group by month. Data for May won't be shown because the month isn't complete yet, the chart will have (from right to left) April, March, ..., until June 2021 (again May 2021 won't be shown because the API response will only have data for dates 13. 05. 2021 - 31. 05. 2021).
- [ ] the data is not aligned to months/week yet as explained above
[x] the version text should not change color on open - still wrong when you open it and hover something in the dropdown
[x] missing unit after number
[x] broken date in tooltip with yearly data range:
[x] improve version dropdowns - in all places where we show package versions like this, set max-width to 320px (but keep default width if it's enough (test with react package):
[x] changing the link options on mobile changes the code immediately - it should change only after users clicks "apply" https://dl.dropboxusercontent.com/s/7t9xvwy4cmb2ny5/2022-06-01_22-06-18.png
[x] the dropdown should be full-width when open https://dl.dropboxusercontent.com/s/d4gzul9o1n7iemz/2022-06-01_22-10-51.png
[x] the box shadow is weirdly cut here https://dl.dropboxusercontent.com/s/dan167sl6v8eylr/2022-06-01_22-17-27.png
[x] for some reason on starts tab the right panel has smaller width so its content doesn't fit - on other tabs it's ok https://dl.dropboxusercontent.com/s/zixim7kzrcxlv1z/2022-06-01_22-20-04.png
[ ] on smaller screens, the sidebar is cut, we should make it work down to 992px ideally and then hide it below 992 (currently it's still partially visible) https://dl.dropboxusercontent.com/s/fnnmd77zrgy606l/2022-06-01_22-25-37.png
[x] missing rounded corners at the top if there's only 1 item https://dl.dropboxusercontent.com/s/yx5cuwh0zd4w7ie/2022-06-02_01-12-34.png
[x] tweet button has broken text: "jquery is the 11th most popular package on @jsDelivr CDN, with 23 344 847 771 hits in the last year: undefined "
[x] unify formatting of the install script so that it's always three lines - for "default" show it like this https://dl.dropboxusercontent.com/s/vpivygg6fs6tzqy/2022-06-02_04-11-51.png - make sure the CSS code is unified too
- [x] do the same change for <link> so each should be on three lines here https://dl.dropboxusercontent.com/s/919vup1rdy85mwb/2022-06-02_04-14-24.png
- [x] copy to clipboard icon is missing for ESM type
- [x] The message "URL is guessed and might not be correct. Browse the NPM package to find the correct one or use our configurator to combine files and generate SRI" should be displayed only if the call to https://data.jsdelivr.com/v1/package/npm/bootstrap@5.1.3/entrypoints returned "guessed": true for at least one file
[x] on sizes 768 - 1199, let's use this design for top versions/files tables https://dl.dropboxusercontent.com/s/cdsfiqrs5hcr9t9/2022-06-02_19-23-35.png - keep the tables next to each other, but split the content name/number into two rows like on smaller screens, otherwise it often doesn't fit https://dl.dropboxusercontent.com/s/yb8nbhxodkqq6fd/2022-06-02_19-25-25.png - test with https://www-jsdelivr-com-pr-400.onrender.com/package/npm/mathjax
- [x] on >= 1200 make sure the second and third columns are large enough for a number with 11 digits and to stay aligned. The filename in the first column can be split into multiple lines if it's not avoidable. E.g. https://dl.dropboxusercontent.com/s/zmi4332pg9pcpj1/2022-06-02_19-36-40.png
[x] search box overflows the webpage on certain resolutions: https://dl.dropboxusercontent.com/s/tlgyadridoucxuu/2022-06-03_23-40-51.png
[x] line not aligned to content https://dl.dropboxusercontent.com/s/p4ewwcy60k1fz9b/2022-06-06_23-48-42.png
[x] double line on the last row of tables https://dl.dropboxusercontent.com/s/trux1pnjogjddj8/2022-06-07_15-30-45.png

Fixed:

- [x] if a package doesn't have a readme, show the "Show/Configure Files" tab on load (https://www-jsdelivr-com-pr-400.onrender.com/package/npm/yandex-metrica-watch) - [x] Ignore "day" period for charts - if a user selects "day", don't update the charts, keep whatever was shown before, update only the tables (see how it works at https://www.jsdelivr.com/package/npm/react) - [x] Vulnerabilities badge needs to be a link (see at master branch) - [x] code/icon overlap ![image](https://user-images.githubusercontent.com/6192491/168694027-e4518e81-6764-47e7-9f1e-0394e4772135.png)

MartinKolarik commented 2 years ago

All pages:

[x] In all places where we refer to "requests" and "GB", it should be "requests" and "bandwidth" instead, and the unit should be part of the value. E.g. this switch but it's in many places so use search for "GB" and fix everywhere:

[x] everywhere we say "X% growth", if X is negative, say "X% decline"
[x] everywhere where we show bandwidth, make sure it's auto-converted to reasonable units, don't show it in bytes
[x] broken menu at 992px - make sure that media queries don't overlap, e.g. use < 992 and >= 992, NOT <= 992 and >= 992 at the same time https://dl.dropboxusercontent.com/s/gi6ve9ebfm2ky0x/2022-06-01_22-38-45.png
[x] in all tables where we show numerical values, set the following CSS for the number values only font-family: Verdana, sans-serif; font-size: 90%; examples: https://dl.dropboxusercontent.com/s/cj7363ax2bo9d3w/2022-06-03_16-53-22.png, https://dl.dropboxusercontent.com/s/r1xscdhxedupcfd/2022-06-03_16-54-16.png, https://dl.dropboxusercontent.com/s/urme8ibmimh5oe1/2022-06-03_16-56-24.png

Homepage:

[x] the box height should not change when switching npm/GitHub/Wordpress tabs. Make sure the correct min height is set in all resolutions.
- [x] try to make the bars a little smaller to that we at least fit the numbers in one line (name can stay in two lines, not much we can do about that) https://user-images.githubusercontent.com/6192491/171481738-1443b17c-c217-4e1c-b4af-062a12f9ab05.png
- [x] the footer is in a broken state at exactly 767px width https://user-images.githubusercontent.com/6192491/171481994-b5321a82-8cc8-41a4-8022-0e0f40027af3.png
- [x] use two columns here so that it's aligned with the part below (on smaller width it's correctly) https://user-images.githubusercontent.com/6192491/171482637-544420d9-d765-4543-a0a9-36af565ce5a3.png
- [x] open menu must be full width (probably issue with some bootstrap var?) https://user-images.githubusercontent.com/6192491/171483027-9063a564-5342-4882-847c-39f93e5c2853.png
- [x] the filter buttons should be the same size as the labels in search results https://dl.dropboxusercontent.com/s/uryhwh3x0fymfid/2022-06-02_01-37-40.png
- [x] add hover effect with same colors as the active state
- [x] change border colors on hover/active
- [x] allow clicking the labels (ESM/Styles) in search results too to activate the filter
  - [x] style them as clickable only in full-size search results, not on the package page and not in compact search

jimaek commented 2 years ago

[x] On mobile project pages don't look good. They are positioned to the left https://user-images.githubusercontent.com/1834071/170531216-e4773667-76c7-4d73-9148-84613e915585.png
[x] Make sure full docs doesnt go above the content https://dl.dropboxusercontent.com/s/aepb17mw4pfibb7/chrome_2022-05-26_19-13-32.png
[x] Fix header of stats on homepage https://dl.dropboxusercontent.com/s/r44si2pwjrfamk5/chrome_2022-05-26_19-14-38.png
[x] Descript in search is too close to the icons. Check figma. https://dl.dropboxusercontent.com/s/5nimq0x97qcmsmm/chrome_2022-05-26_19-15-57.png
[x] Project chart is shifted to right https://dl.dropboxusercontent.com/s/fcrznl7x6veuk0f/chrome_2022-05-26_19-17-08.png
[x] Our network section breaks https://dl.dropboxusercontent.com/s/yy8pswwa94uktt7/chrome_2022-05-26_19-18-36.png

IvanAdamovic646 commented 2 years ago

All pages:

[ ] In all places where we refer to "requests" and "GB", it should be "requests" and "bandwidth" and the unit should be part of the value. E.g. this switch but it's in many places so use search for "GB" and fix everywhere:

@MartinKolarik, could you explain more about this point? Does the current chart is about for "GB" ? right?

MartinKolarik commented 2 years ago

@IvanAdamovic646

IvanAdamovic646 commented 2 years ago

So we are fetching "Request" data using "fetchPackageDateStats" function and the api url is https://data.jsdelivr.com/v1/package/npm/react-is/stats/date/month

To get "GB" data, we can use "fetchPackageBandwidthStats" function and api url is https://data.jsdelivr.com/v1/package/npm/react-is/stats/bandwidth/date/month

right?

MartinKolarik commented 2 years ago

@IvanAdamovic646 you wrote the same URL twice but yes, the function names are correct.

IvanAdamovic646 commented 2 years ago

Thanks for details, @MartinKolarik .

MartinKolarik commented 2 years ago

We now have preview endpoints for everything except part of the stats page. All data mocks should be replaced by the real endpoints.

[x] Custom OSS stats: https://www-jsdelivr-com-pr-400.onrender.com/custom-cdn-oss (code https://github.com/jsdelivr/www.jsdelivr.com/blob/b75210f927f0fcfc33f53863cc980ade6cd92f09/src/views/pages/custom-cdn-oss.html#L59 and https://github.com/jsdelivr/www.jsdelivr.com/blob/e090531502551a17b602040ea94b80adf0c9cb36/src/views/components/request-bandwidth-stats.html#L59), currently uses random data from package endpoint instead of OSS CDN data (the same component is used also on package pages so it needs to work for both types - on package pages, it's already correct but when rendered from the custom cdn pages, the API endpoints are different). Correct API for custom OSS:
- https://data-jsdelivr-com-preview.onrender.com/v1/proxy/cocoa/stats?type=hits
- https://data-jsdelivr-com-preview.onrender.com/v1/proxy/pyodide/stats?type=hits
- https://data-jsdelivr-com-preview.onrender.com/v1/proxy/musescore/stats?type=hits
- https://data-jsdelivr-com-preview.onrender.com/v1/proxy/cocoa/stats?type=bandwidth
- https://data-jsdelivr-com-preview.onrender.com/v1/proxy/pyodide/stats?type=bandwidth
- https://data-jsdelivr-com-preview.onrender.com/v1/proxy/musescore/stats?type=bandwidth
- [ ] same on the details page: https://www-jsdelivr-com-pr-400.onrender.com/custom-cdn-oss/cocoapods
- [ ] this change broke package pages, which is exactly what I warned about: https://www-jsdelivr-com-pr-400.onrender.com/package/npm/react?nav=stats
- [ ] not sure if related but hits per months per version also got broken

IvanAdamovic646 commented 2 years ago

@MartinKolarik tweet button has broken text: "jquery is the 11th most popular package on https://github.com/jsdelivr CDN, with 23 344 847 771 hits in the last year: undefined" Can you tell me what can be replaced instead of undefined?

MartinKolarik commented 2 years ago

@MartinKolarik tweet button has broken text: "jquery is the 11th most popular package on https://github.com/jsdelivr CDN, with 23 344 847 771 hits in the last year: undefined" Can you tell me what can be replaced instead of undefined?

It's supposed to be a link to that page.

IvanAdamovic646 commented 2 years ago

I'm attaching image about the link for tweet button. I have checked again which can be the link to that page but still not sure what can be the proper link for it. Could you give me a hint or proper tweet url for attached page again please?

MartinKolarik commented 2 years ago

I'm attaching image about the link for tweet button. I have checked again which can be the link to that page but still not sure what can be the proper link for it. Could you give me a hint or proper tweet url for attached page again please?

in this case it would be the full localhost url to that page, which you see in the browser url bar (simply location.href)

IvanAdamovic646 commented 2 years ago

Ok. thanks for letting me know.

IvanAdamovic646 commented 2 years ago

Hi, @MartinKolarik. on smaller screens, the sidebar is cut, we should make it work down to 992px ideally and then hide it below 992 (currently it's still partially visible) Regarding this issue, currently, I have updated this page that it can work down to 1200px and if below 1200px it hide sidebar. Let me know please if current state is okay.

Or when size down like to 995px, is it okay to split the button text into 2 lines like below image ?

MartinKolarik commented 2 years ago

@IvanAdamovic646 we could probably come up with a different layout for the buttons but generally I hoped we could make the right panel smaller on that size.

MartinKolarik commented 2 years ago

@xbpcb reassigned to you, please check the remaining unchecked tasks in the comments above (I've hidden all comments that are already resolved).

MartinKolarik commented 2 years ago

Stats page:

[ ] use the correct flags in all places (https://github.com/jsdelivr/www.jsdelivr.com/pull/400#issuecomment-1147972967)
- [ ] add css for rounded corners
- [ ] update browser/platform tables to use real data (note that period can only be s-month and s-year for these endpoints, if users selects something else, ignore it for these tables... also we don't have a full year of data yet so that option returns no results yet)

jsdelivr / www.jsdelivr.com

Issues in redesign #438