feat: add file size in resource list and resource pages

[ibrahimjaved12]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/1681

Description (What does it do?)

Adds file size in resource list pages and individual resource pages. Refer to figma designs in https://github.com/mitodl/hq/issues/1681#issuecomment-1746874289

In this PR, apart from the SCSS changes, we:

• Remove the get_resource_thumbnail_attributes.html partial
• Use new partial get_resource_category.html instead (we no longer have imgs for thumbnails)
• Introduced a file_size_formatter.html partial for calculating file size in respective units (converted from bytes)
• Also changed the styling of resource body page in general (apart from the file sizing fixes). Previously we used container class (this is still used in a lot of places in OCW) but removed it for this page as per @mbilalmughal recommendation. It was less aesthetically pleasing. Instead, for resource body page we have resource-page-container.
• There's only reformatting changes in resource_list_collapsible.html

How can this be tested?

Test rendering for (to ensure nothing has broken for moving resource partials from course-v2 to base-theme): www online + www offline course online + course offline.

Steps: First checkout to this branch. yarn build /to/ocw-content-rc/ocw-www or a course/ /to/ocw-hugo-projects/ocw-www or ocw-course-v2/config-offline.yaml For offline themes.

yarn start www For online www Make sure the builds succeed ^ from dist directory do check that the theme is alright too from any index pages.

For course, we will want to:

1. yarn start course 6.0002-fall-2016 (using this course because this has file size content)
2. Go to: http://localhost:3000/download/
3. Check the UI.
4. Click on a resource (other than video lectures)
5. Check the UI. Also you might want to use bigger resource names (like I have done in the screenshots) to ensure the UI does not break.
6. Also try different file sizes, too small, too big. Make sure the unit is okay.
7. Also check for cases where a resource might not have file size (just clear the file_size from the .md file of a resource)

For offline course theme, build a course and go to dist/index.html and then "Browse Resources". Steps will be same as above but not as thorough testing just make sure the changes have applied.

References

Use these figma links for reference. https://github.com/mitodl/hq/issues/1681#issuecomment-1746874289

Screenshots (if appropriate):

• [x] Desktop screenshots
• [x] Mobile width screenshots

https://github.com/mitodl/ocw-hugo-themes/assets/109785089/94d91928-921e-4f2a-b4e3-b6c3a7d7a8cf

[github-actions[bot]]

Netlify Deployments:
www: https://ocw-hugo-themes-www-pr-1225--ocw-next.netlify.app/
Course v2: https://ocw-hugo-themes-course-v2-pr-1225--ocw-next.netlify.app/

[mbilalmughal]

@ibrahimjaved12 The UI looks good to me. One request, If you could decrease the space between the description and the text, that would be better.

However, as we have discussed, we won't be implementing any additional fixes at this time. For instance, the right-hand space on the mobile container is not equal to the right-hand side.

[mbilalmughal]

@Ferdi Could you please take a look at this? I've reduced the file size label's font size and explained it in this thread

[pdpinch]

@mbilalmughal can you explain what you and @ibrahimjaved12 have changed in response to Ferdi's comment? I don't recall the original design, so I'm not sure what's new.

[mbilalmughal]

@pdpinch, we've changed the file size to a minimum of 10px. Please see the attached image. @ibrahimjaved12 has not pushed the code yet, we are waiting for a response.

Originally, the file size font and the title font were the same, but now the file size font has been reduced to 10px.

[mbilalmughal]

Before, also attached with this PR

[pdpinch]

@ibrahimjaved12 we've decided to make another pass on the design for this. I expect this will be on hold for at least another week.

[ibrahimjaved12]

Animated hover video:

https://github.com/mitodl/ocw-hugo-themes/assets/109785089/94d91928-921e-4f2a-b4e3-b6c3a7d7a8cf