Problem/Motivation

The problems:
when we install admin_dialog contrib module with claro theme and click on 'Add Custom Block' dialog box will be open, found that the Inconsistency in the off-canvas dialog theming like (font-size, alignment, buttons themes, padding, duplicate text) etc. Needs the consistency in dialog box theming.

Inconsistency:

  1. "Revision information No revision" is shown twice and without padding.
  2. Filter wrapper is taking too much vertical space, font-size should be like Block description (.form-item__description) and (div.filter-help) should be align right
  3. "Save" Button - font-size and padding is too small & the border-radius is too big compared to claro's non-off-canvas buttons

claro 10.1 off-canvas dialog style problems

Steps to reproduce

  1. Clean install D10 (with default Claro theme)
  2. Edit the "Add Custom Block" action link (route name = block_content_add_action) to be an Off-canvas dialog (data-dialog-type="dialog" data-dialog-renderer="off_canvas"), for example with the help of admin_dialog contrib module.

Proposed resolution

Need the theming consistency in off-canvas dialog, by adding padding, font style, padding , remove duplicate text, alignment etc.

CommentFileSizeAuthor
#13 3360933-nr-bot.txt4.8 KBneeds-review-queue-bot
#7 after-patch.png118.68 KBlokeshsahu
#6 3360933_6.patch4.65 KBdsandhya
#6 after-patch-img.png21.6 KBdsandhya
claro 10.1 off-canvas dialog style problems.png47.69 KBkopeboy

Issue fork drupal-3360933

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

kopeboy created an issue. See original summary.

kopeboy’s picture

kopeboy
Primary language Italian
Location Milan
commented
Issue summary: View changes

amit.mall made their first commit to this issue’s fork.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Harish1688’s picture

Harish1688 commented

Hi,
I attempted to recreate the problem using Core 11.x and the admin_dialog module, but unfortunately, that module is not compatible with Core. However, I was able to replicate the issue using Core 10.0.x with the module.

dsandhya’s picture

dsandhya commented
StatusFileSize
new after-patch-img.png21.6 KB
new 3360933_6.patch4.65 KB

I was able to replicating issue with version 10.0.x and plz review the path

1. I have added space" and for the double time printing Revision information " This is the Drupal core functionality."
2. Vertical space issue for Filter wrapper is fixed
3. "Save" button theming is done

lokeshsahu’s picture

lokeshsahu commented
StatusFileSize
new after-patch.png118.68 KB

I made an attempt to reproduce the issue with Drupal Core 11.x along with the admin_dialog module. but unfortunately, that module is not compatible with D11, However, I was able to replicate the issue using Core 10.0.x with the module As instructed in the IS, I successfully installed a new instance of Drupal 10.0.x. Afterward, I proceeded to install the Admin Dialogs module. Once the module was installed, I applied patch #6 (3360933_6.patch) without encountering any errors. The patch was successfully applied.

These are the following things fixed by the patch:
1. Spaced added between information and No revision text in the "Revision informationNo revision" summary filed
2. Save button styling got fixed.

The duplicate text of "Revision informationNo revision" issue still exists post applying the patch.
Attaching a screenshot after applying the patch for reference .

Harish1688’s picture

Harish1688 commented
Status: Active » Needs review
StatusFileSize
new 3360933 after patch 8.png96.98 KB
new off-canvas-dialog-styling-issues-and-inconsistencies-3360933-8.patch2.76 KB
new interdiff_6-8.txt5.85 KB

Hello dsandhya,
Upon reviewing your patch #6, I noticed that you have used the "!important" declaration in multiple instances. It is important to note that relying heavily on "!important" is not considered good practice according to CSS guidelines. In light of this, I have created a revised patch that eliminates the use of "!important".

Extra point cover:-
1. div.filter-help should be floating right point

Note : The duplicate text of "Revision informationNo revision" issue remain because it's Drupal core functionality.

Status: Needs review » Needs work

The last submitted patch, 8: off-canvas-dialog-styling-issues-and-inconsistencies-3360933-8.patch, failed testing. View results

lokeshsahu’s picture

lokeshsahu commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update

Issue summary should be updated with proposed solution.

Harish1688’s picture

Harish1688 commented
Issue summary: View changes
Status: Needs work » Needs review

1. Updated the Issue summary with proposed solution.
2. #8 patch found the random failure, restoring the status to need review.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3360933-nr-bot.txt4.8 KB

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Gauravvvv changed the visibility of the branch 3360933-claro-off-canvas-dialog to hidden.

Gauravvvv opened merge request !7880

Gauravvvv changed the visibility of the branch 3360933-claro-off-canvas-dialog to hidden.

Gauravvvv changed the visibility of the branch 3360933-claro-off-canvas to hidden.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
Issue tags: -Needs issue summary update

Gauravvvv opened merge request !7881

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs screenshots

Appears to be missing the User interface section, but should have before/after screenshots. Also need to be reproduced without a contrib module.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.