styles: Update "Featured" area on Mayor's page to match designs#2327
styles: Update "Featured" area on Mayor's page to match designs#2327
Conversation
| display: block; | ||
|
|
||
| .color-block-card--container { | ||
| position: relative; |
There was a problem hiding this comment.
Adding position: relative here means that when I position the child as absolute, it will be relative to this element (allowing me to pin the overlay in place)
| font-size: 2.5rem; | ||
| line-height: 3rem; | ||
| color: white; | ||
| box-shadow: inset 0 -0.7em 0 0 #0f4d90; |
There was a problem hiding this comment.
this is what gives us that thick, offset underline
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| a.color-block-card { |
There was a problem hiding this comment.
most of this stuff is just to make everything take up the right amount of space, in spite of being positioned absolute and therefore pulled out of the flow
| @include breakpoint(medium down) { | ||
| font-size: 2.75rem; | ||
| line-height: 2.75rem; | ||
| h2 { |
There was a problem hiding this comment.
These changes are just because of indentation I think
There was a problem hiding this comment.
The mock up is using a different font then what's currently being used. That may correct the spacing issue too.
| <?php if (!$action_panel_cta_text == ''): ?> | ||
| <div class="copy <?php if ($action_panel_link_loc) echo 'external';?>"><?php echo $action_panel_cta_text; ?></div> | ||
| <?php endif; ?> | ||
| <div class="color-block-card--container"> |
There was a problem hiding this comment.
I added a "wrapper" or "container" div which I could use for positioning the overlay.
| <?php endif; ?> | ||
| </div> | ||
| </a> | ||
| <div class="color-block-card--background"<?php if (!$action_panel_image == ''): ?> style="background-image: url('<?php echo $action_panel_image; ?>'); background-size: cover; background-repeat: no-repeat;"<?php endif ?>></div> |
There was a problem hiding this comment.
here we conditionally set the background-image via a style tag
millmason
changed the title
millmason
changed the title
There was a problem hiding this comment.
We may need media queries for the top box, the color block bleeds a bit on the bottom.
There was a problem hiding this comment.
I also don't think we need the icon's on the images. I didn't see them on the mock up. Just dbl check.
There was a problem hiding this comment.
Hmm... can you weigh in on this, @m-atia ? The designs aren't showing the logos, but I'm worried it might be an error, because i can see the icons saved as visual assets. If we can remove them, that will resolve the spacing issue, but I want to make sure it's okay to do so
lauricekennel24
left a comment
lauricekennel24
left a comment
There was a problem hiding this comment.
As discussed you will want to require photos for the featured section. Please have Moh or Ritika review the php section.
Thank you @lauricekennel24 ! |
2 participants
What type of PR is this? (check all applicable)
The abbreviated form of the primary type should also be in the PR title
These are the PR types listed in our documentation
feat): A new featurefix): A bug fixDescription
First step towards incorporating feedback on the Mayor's page (linked below)
This recreates the
Featuredblock designs, which have remove the icon, add background images, and add transparent overlay on hover.Related Tickets & Documents
Wrike ticket
Design mockups
QA Instructions, Screenshots, Recordings
If you already have philagov.local, you can test this! Pull down this branch, navigate into the
phila.gov/wp/wp-content/themes/phila.gov-theme/directory, and runnpm run dev:build. (This assumes that you have already done any necessary npm installs, since setting up philagov.local is beyond what I can explain here.)You'll also have to go to the admin interface and add a background image for each of the 3 visible featured cards.
Before
No background image, custom colors etc.
Desktop:
Mobile/tablet:
After
Hover overlays and image background working at desktop screenwidths
Hover overlays and image background working at tablet/mobile screenwidths
