Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GIVCAMP-294 | Basic Hero overlay options and image optimization #243

Merged
merged 2 commits into from
Mar 6, 2024

Conversation

yvonnetangsu
Copy link
Member

@yvonnetangsu yvonnetangsu commented Mar 6, 2024

READY FOR REVIEW

Summary

  • Dark overlay (top, middle, bottom gradient stops) and background image blur options for Basic Page Hero
  • Improve image optimization for Basic Page Hero

Review By (Date)

  • Retro

Criticality

  • 3

Review Tasks

Setup tasks and/or behavior to test

  1. Go to https://deploy-preview-243--giving-campaign.netlify.app/initiatives
  2. Check that the basic page hero has a custom 3 point gradient
    Screenshot 2024-03-05 at 5 37 12 PM
  3. Additional existing basic pages heroes to check (whether there is a dark overlay)
    https://deploy-preview-243--giving-campaign.netlify.app/newsletter/sign-up
    https://deploy-preview-243--giving-campaign.netlify.app/404
  4. Pull down locally and go to any test basic page and try out the new hero options (overlay, background blur)

Associated Issues and/or People

@yvonnetangsu yvonnetangsu marked this pull request as draft March 6, 2024 00:49
Copy link

netlify bot commented Mar 6, 2024

Deploy Preview for giving-campaign ready!

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/giving-campaign/deploys/65e7c9359ce37ca7d1e04a46
😎 Deploy Preview https://deploy-preview-243--giving-campaign.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@yvonnetangsu yvonnetangsu marked this pull request as ready for review March 6, 2024 01:46
@@ -2,7 +2,7 @@ import { cnb } from 'cnbuilder';

export const root = 'relative overflow-hidden';
export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-t' : '');
export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-b' : '');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously I had the gradient direction going from bottom to top to take advantage of not having to write to-transparent TW class (no need to write this if fading to transparent). However, after testing real example pages, I found that we rarely would start with a transparent color at the top anyway so no need for me to do this reverse gradient trick.

@yvonnetangsu
Copy link
Member Author

Merging this one in @sherakama ! I've looked at the preview build and things should be fine.

@yvonnetangsu yvonnetangsu merged commit 192620b into dev Mar 6, 2024
5 checks passed
@yvonnetangsu yvonnetangsu deleted the feature/GIVCAMP-294_basic-hero-overlay branch March 6, 2024 01:57
@yvonnetangsu yvonnetangsu mentioned this pull request Mar 6, 2024
yvonnetangsu added a commit that referenced this pull request Mar 6, 2024
* dev:
  1.2.2
  GIVCAMP-294 | Basic Hero overlay options and image optimization (#243)
  HSTS set max-age to 31536000 (#242)
  1.2.1
  Icon animation (#240)
  GIVCAMP-304 | Add CTA region to Section and Homepage Theme/Story Section (#239)
yvonnetangsu added a commit that referenced this pull request Apr 2, 2024
* dev: (34 commits)
  GIVCAMP-292 GIVCAMP-305 | Horizontal Initiative card and image aspect ratio options (#256)
  1.3.3
  Update robots to use different URL for sitemap path (#254)
  1.3.2
  GIVCAMP-307 | Stacked story hero variant (#251)
  1.3.1
  GIVCAMP-297 GIVCAMP-312 | Section background options + add light overlay options (#248)
  Bump follow-redirects from 1.15.4 to 1.15.6 (#249)
  1.3.0
  GIVCAMP-289: Inline External Script Loading. (#246)
  GIVCAMP-88 | data card (#245)
  1.2.2
  GIVCAMP-294 | Basic Hero overlay options and image optimization (#243)
  HSTS set max-age to 31536000 (#242)
  1.2.1
  Icon animation (#240)
  GIVCAMP-304 | Add CTA region to Section and Homepage Theme/Story Section (#239)
  1.2.0
  GIVCAMP-293 | Moment poster (#236)
  NoJira: Remove Editor Token (#237)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants