cityofaustin / atd-data-tech

Austin Transportation Data & Technology Services

18 stars 2 forks source link

Standardize Apps Banners #19558

Open patrickm02L opened 1 month ago

patrickm02L commented 1 month ago

Description

Resize banners to 600 x 150 for mobile optimization

MSP - new
OCE - new
SMRT - no header
PEP - no header

Design File

Figma

patrickm02L commented 1 month ago

10/22

Built out the initial workgroups above in by converting the .ai file of banners to .svg and bringing them into figma, then synced with @dianamartin to figure out how to add to the image to the knack banners

Navigate to the "Live App Design" section --> "Header & Page Menu" --> Logo.

Banner Sizes

There isn't a way to easily add different sized images for different views. We'll need to add custom code to configure the banner sizes at different break points.

patrickm02L commented 3 weeks ago

11/1/24

In order to implement different header banners for multiple screen sizes, I created a table to store images as file assets, planning to reference their URLs in the Code & API (JavaScript) area so that the banners would display responsively in the header. I generated code with Claude, but the implementation wasn't successful. I'm going to continue tweaking the code and exploring other approaches for managing the banner assets.

dianamartin commented 3 weeks ago

11/4/24

@patrickm02L could this be helpful?

Changing Image depending on Mobile or Desktop HTML & CSS
corresponding test page

if you resize the page, the kitten changes to a different image. I feel like this is kind of what we're trying to do. However, not sure if we'll be able to implement this, but we could always try.