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

CSS: Improve the display of the links/buttons on Edit Entry #2162

Open
5 tasks
rafaehlers opened this issue Oct 4, 2024 · 0 comments
Open
5 tasks

CSS: Improve the display of the links/buttons on Edit Entry #2162

rafaehlers opened this issue Oct 4, 2024 · 0 comments

Comments

@rafaehlers
Copy link
Contributor

rafaehlers commented Oct 4, 2024

The Edit Entry action links have always been quirky CSS-wise. I think we should improve them.

Before Search:
image

After Search:
image

On the Edit Entry page
image

Here's a video: https://www.loom.com/share/f28e92d3e13d425986433a39b18f76b0

  • Set margin on the clear button to avoid jumping after a search has been performed
.gv-search-clear {
    order: 2;
    display: inline-block;
    margin: 0 3%;
    height: 100%;
}
  • Set width:100% on #publishing-action wrapper
#publishing-action{ width:100% } 
  • Remove margins from delete button:
.gv-button-delete{  margin-bottom: unset;  margin-top: unset; }
  • Set same margin-botton that the update/submit button has to .gv-button-cancel
.gv-button-cancel{  margin-bottom: 8px; }

With these modifications alone we already get this look:
image

  • We also need to put a margin here but I don't know the best way since the search bar uses flexbox
    image
@zackkatz zackkatz added this to the Next minor release milestone Oct 21, 2024
@GravityKit GravityKit deleted a comment Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants
@zackkatz @rafaehlers and others