Problem/Motivation

There is no space below the action button (Apply to selected items ). For a better user experience, we need to provide some space to differentiate the button and the below table.

Steps to reproduce

  1. Install the theme and set it as an admin theme
  2. Go to the content and see the action button below space

Proposed resolution

Give some space

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#19 Screenshot (100).png51.33 KBnupur badola
#19 Screenshot (99).png43.67 KBnupur badola
#19 Screenshot (98).png72.81 KBnupur badola
#19 secondary-menu.png113.74 KBnupur badola
#19 Screenshot (97).png21.03 KBnupur badola
#19 Content-break.png29.61 KBnupur badola
#16 after_space_in_extend_page.png203.42 KBesha_kundu
#16 after_operations_buttons.png142.97 KBesha_kundu
#16 after_recent_log_button.png94.97 KBesha_kundu
#16 after_secondary_tab_focus.png20.43 KBesha_kundu
#16 after_bulk_operation_button.png72.34 KBesha_kundu
#16 after_design_break_accessibility.png105.36 KBesha_kundu
#16 before_no_space_in_extend.png158.26 KBesha_kundu
#16 before_operations_buttons.png183.32 KBesha_kundu
#16 before_recent_log_button.png115.05 KBesha_kundu
#16 before_secondary_tab_focus.png20.34 KBesha_kundu
#16 before_bulk_operation_button.png62.3 KBesha_kundu
#16 before_design_break_accessibility.png85.62 KBesha_kundu
#13 Screenshot from 2024-05-29 14-13-32.png54.62 KBsourojeetpaul
#13 Screenshot from 2024-05-29 14-13-54.png101.98 KBsourojeetpaul
#13 Screenshot from 2024-05-29 14-14-25.png70.52 KBsourojeetpaul
#13 Screenshot from 2024-05-29 14-07-13.png50.31 KBsourojeetpaul
#13 Screenshot from 2024-05-29 14-05-14.png46.5 KBsourojeetpaul
#12 Screenshot at Feb 05 17-02-55.png148.26 KBshweta__sharma
#11 Fix_buttons_in_mobile_view.png43.52 KBesha_kundu
#11 Action_button_design_break_in _mobile.png58.07 KBesha_kundu
#11 filters_with_space.png72.87 KBesha_kundu
#7 space_not present.png13.7 KBtanuja bohra
#7 space_present.png15.74 KBtanuja bohra
#6 Screenshot from 2024-02-03 19-16-12.png168.67 KBesha_kundu
Screenshot at Feb 02 10-48-19.png153.99 KBshweta__sharma

Issue fork root-3418802

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

shweta__sharma created an issue. See original summary.

esha_kundu’s picture

esha_kundu commented
Assigned: Unassigned » esha_kundu

Hi, @shweta__sharma
I'm working on it.

Neha-Verma made their first commit to this issue’s fork.

Neha-Verma’s picture

Neha-Verma commented
Assigned: esha_kundu » Neha-Verma

Esha_Kundu opened merge request !9

esha_kundu’s picture

esha_kundu commented
Assigned: Neha-Verma » Unassigned
Status: Active » Needs review
StatusFileSize
new Screenshot from 2024-02-03 19-16-12.png168.67 KB

I have created an MR to fix the issue.
merge request !9
Added 1 commit

  • ae7d39e3 - Issue #3418802: There is no space below action button

Please review the added ss for reference.

tanuja bohra’s picture

tanuja bohra commented
Status: Needs review » Needs work
StatusFileSize
new space_present.png15.74 KB
new space_not present.png13.7 KB

@Esha_Kundu, this has to be fixed for the condition when there is no content and the "filter" action button is visible. Added screenshots for reference

Esha_Kundu closed merge request !9

Esha_Kundu reopened merge request !9

shweta__sharma’s picture

shweta__sharma commented
Status: Needs work » Needs review
esha_kundu’s picture

esha_kundu commented
StatusFileSize
new filters_with_space.png72.87 KB
new Action_button_design_break_in _mobile.png58.07 KB
new Fix_buttons_in_mobile_view.png43.52 KB

The filters action button had a design break in the mobile view, I have also fixed that and included in the MR.
I added ss for reference.

shweta__sharma’s picture

shweta__sharma commented
StatusFileSize
new Screenshot at Feb 05 17-02-55.png148.26 KB

Tested MR 9 and it's fixed the issue now the space is added in both conditions. Moving to RTBC.

After Patch

after-patch

sourojeetpaul’s picture

sourojeetpaul commented
Version: 8.x-1.x-dev » 2.0.0-alpha8
Status: Needs review » Needs work
StatusFileSize
new Screenshot from 2024-05-29 14-05-14.png46.5 KB
new Screenshot from 2024-05-29 14-07-13.png50.31 KB
new Screenshot from 2024-05-29 14-14-25.png70.52 KB
new Screenshot from 2024-05-29 14-13-54.png101.98 KB
new Screenshot from 2024-05-29 14-13-32.png54.62 KB

Hello there,
I've reproduced the issue on the specified version and tested the patch also. The MR solves the spacing issue of the action buttons.
But on the latest version the issue doesn't persist, I think it has been already addressed! Though on the latest version I've found some other style break issues related to the action button and filters. I think it'll be great if we address those in this!
I'm attaching MR testing screenshots as well as the screenshots for the newly found style break issues as well as some accessibility issues are there!
Hence I'm changing the version component on the metadata!

esha_kundu’s picture

esha_kundu commented
Assigned: Unassigned » esha_kundu

Hi,
I'm working on it.

Esha_Kundu opened merge request !12

esha_kundu’s picture

esha_kundu commented
StatusFileSize
new before_design_break_accessibility.png85.62 KB
new before_bulk_operation_button.png62.3 KB
new before_secondary_tab_focus.png20.34 KB
new before_recent_log_button.png115.05 KB
new before_operations_buttons.png183.32 KB
new before_no_space_in_extend.png158.26 KB
new after_design_break_accessibility.png105.36 KB
new after_bulk_operation_button.png72.34 KB
new after_secondary_tab_focus.png20.43 KB
new after_recent_log_button.png94.97 KB
new after_operations_buttons.png142.97 KB
new after_space_in_extend_page.png203.42 KB

Hello,
I have fixed the accessibility issue for the action buttons globally, the design break as mentioned in #13 in devices.
I found design issue noted below:

  • In the bulk operations button in responsive devices the text App appeared along with the tick sign
  • In the secondary tabs the border on the left side was not being visible for first tab
  • In the recent logs page the Filter button size look too large
  • In tab devices the operations buttons in content listing page looked larger
  • In the extend page there was no space between the filter and the core

so I have fixed all the above issues and raised a new MR!12 for the changes.
I have attached the before and after for the issues.
Please have a look.

esha_kundu’s picture

esha_kundu commented
Status: Needs work » Needs review
esha_kundu’s picture

esha_kundu commented
Assigned: esha_kundu » Unassigned
nupur badola’s picture

nupur badola commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Content-break.png29.61 KB
new Screenshot (97).png21.03 KB
new secondary-menu.png113.74 KB
new Screenshot (98).png72.81 KB
new Screenshot (99).png43.67 KB
new Screenshot (100).png51.33 KB

Reviewed MR!12, it is working fine for me.

ahmad-alyasaki closed merge request !9

ahmad-alyasaki made their first commit to this issue’s fork.

ahmad-alyasaki’s picture

ahmad-alyasaki commented

Thanks all for your contributions

ahmad-alyasaki’s picture

ahmad-alyasaki commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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