Problem/Motivation
When a user clicks on preview button, then the logo overlaps with view mode text and also view mode select box is show full width, which not look good.
I have attached the screen shot for more clarity:
Before:
Proposed resolution
Move view mode select box to after the label, we need to change select box width.
Update: Also proposing to make the preview form sticky, which overrides the default node.preview styling that makes it fixed.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | zurb_foundation-preview-select-appearance-2966672-8.patch | 1.94 KB | sim_1 |
| #6 | zurb-preview-sticky.png | 84.5 KB | sim_1 |
| #6 | Screen Shot 2019-10-22 at 9.59.25 AM.png | 127.33 KB | sim_1 |
| #5 | zurb-preview-2966249-5.patch | 2.86 KB | bandanasharma |
| zurb-preview-error.png | 89.58 KB | bandanasharma |
Comments
Comment #2
bandanasharma commentedAdded the patch for select box width.
Can be also add some background on node preview header to resolve logo overlap issue?
Comment #3
bandanasharma commentedComment #4
serg2 commentedThank you for the bug and patch.
I have changed to 'Needs work' because we need to make any styling fixes both to css and scss, as the theme supports both.
Comment #5
bandanasharma commented@serg2 thanks for the review.
Make changes according to your comment and add updated patch.
Comment #6
sim_1I tested your patch and it worked to shrink the size of the select box, but because the preview form is fixed at the top of the page, it still overlaps with whatever's there. I'd like to suggest that we make it sticky so that keeps it's place at the top, but also doesn't overlap with other page elements quite as much.
After changing the form width:
After making the form sticky instead of fixed:
Attaching an updated patch and and interdiff.
Comment #7
sim_1Ok, after revisiting this patch, I think that the simplest possible solution is probably our goal. And so I made a small change to the previous patch to remove any extra styling and just keep the view-mode form positioned relatively instead of sticky or fixed.
Comment #8
sim_1Ok, so I needed this patch for a project but it didn't apply cleanly so I re-rolled it. I also realized that I had forgotten to make the change in the STARTER theme, and I thought better of my sneaky plan to get in code style fixes all in the same patch. So here's the simplified patch with the change also made in the STARTER theme so people will have it even if they turn off the base theme's CSS.
Comment #9
frobIt worked for me, I tested against a fresh install of zurb_foundation 8.x-6.x tested the sub-theme as well.
Comment #11
sim_1Great, thank you for the review @frob. Marking as fixed after committing the last patch and updating the 8.x-6.x-dev page with the release notes for this patch.