Advanced form button styling

Created on 12 November 2023, about 1 year ago

Problem/Motivation

With Drupal 10 the Claro theme has this styling:

.layout-node-form {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 3fr minmax(22.5rem,1fr);
  gap: var(--space-l);
}

And due to that the float: right on the button placement gets pushed to the right of that .layout-node-form element, creating a column of white-space on the right edge.

Steps to reproduce

Observe switch to advanced button placement in node create/edit in Drupal 10 Claro administration theme

Proposed resolution

To discuss: unsure what is best but potentially it could be wrapped in a div with text-align: right on that div

Remaining tasks

Discuss/implement best approach

🐛 Bug report
Status

Needs work

Version

2.0

Component

User interface

Created by

🇳🇿New Zealand klidifia

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @klidifia
  • 🇳🇿New Zealand ericgsmith

    It looks nice with Gin!

    Not really sure best approach here given variety of admin themes. Could potentially attach a library conditional of the claro theme with a small CSS tweak

  • 🇳🇿New Zealand klidifia

    Have:

    • Added outer wrapper div with text-align: right
    • Removed float and bottom margin from the button
  • 🇳🇿New Zealand ericgsmith

    Visually the change looks good to me, tested on Claro and Gin and looks good. Couple minor points. Would be good to spin up MR to use the gitlab pipeline code style checks / tests.

    +++ b/js/advanced-form.js
    @@ -1,15 +1,16 @@
    +(function ($, window, Drupal) {
    

    Is this change related, can't see where window is used?

    +++ b/js/advanced-form.js
    @@ -1,15 +1,16 @@
    +      var toggleButton = "<div class='advanced-form-ow'><button class='advanced-form-toggle btn' type='button' title='Some form elements may be hidden. Switch this form between full and partial detail'>Switch to Advanced</button></div>";
    

    Should the class be `.advanced-form-row`?

  • Status changed to Needs review about 1 year ago
  • 🇳🇿New Zealand klidifia

    Outer wrapper :) I changed to just wrapper - and took out other misc changes

  • Status changed to RTBC about 1 year ago
  • 🇳🇿New Zealand ericgsmith

    Looks good to me! I note that eslint is showing an additional error for using var, but its already showing a lot of errors in on the main branch and I think its better to be consistent with the rest of the file.

  • Status changed to Fixed 26 days ago
  • 🇳🇿New Zealand ericgsmith

    Better late than never! Not sure why I didn't merge this at the time - have been using the patch for over a year.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024