search

TACC / tup-ui

React client for TACC User Portal
2 stars 0 forks source link

feat: TUP-631 migrate blog page css to core-cms #385

Closed wesleyboar closed 7 months ago

wesleyboar commented 7 months ago

Overview

Migrate blog page CSS to Core-CMS.

Related

Changes

Testing & UI

Image Alignment

  1. Open /news/latest-news/2023/09/28/tacc-camps-stem-skills/.
  2. Reduce window width to 767px.
  3. Verify that any element with class="align-..." has max-width: 100% from app.blog.css.
    • align-left
    • align-center
    • align-right (not present in article, so edit another to be align-right instead)
  4. Verify image is as wide as the text content.
left center right
align-left align-center align-right
The align-left and align-right images lacked space beneath caption. I fixed that in TACC/Core-CMS#759 | left | center | right | | - | - | - | | ![left](https://github.com/TACC/tup-ui/assets/62723358/0d837485-7612-4556-8c00-85080f7cabc6) | ![center](https://github.com/TACC/tup-ui/assets/62723358/ae2ee094-f86a-4669-828c-f67f8299ab40) | ![right](https://github.com/TACC/tup-ui/assets/62723358/7aac1b5b-d820-4c6c-bf21-41eb5c85d3e8) |

Image Gallery

  1. Open /news/latest-news/2023/06/22/fratkin-scholarship-recipients/.
  2. Verify that the <div class="lightgallery"> element has style --min-width: 230px from the Core-CMS stylesheet app.blog.css.
  3. Add caption to one image in the gallery. (click to toggle steps) | step 1 | step 2 | | - | - | | ![step 1](https://github.com/TACC/tup-ui/assets/62723358/01b027de-ac06-45dc-aac2-0798f5035e04) | ![step 2](https://github.com/TACC/tup-ui/assets/62723358/7fa0e83c-cda8-457f-81ee-b5d79517a654) |
  4. Verify that the <a> element of the link/image with a caption has style align-items: start from the Core-CMS stylesheet app.blog.css.
min-width align-start
lightgallery min-width from cms stylesheet lightgallery figcaption from cms stylesheet
wesleyboar commented 7 months ago

Yup, align-start isn't doing what I want it to do. But, no one is using a caption on a thumbnail yet (in fact, that page with the test caption is the only page using .lightgallery so far). I'll take responsibility for this when/if it comes up. I'll add note on code, too.