Problem/Motivation

When using the Views UI on a narrow screen and the Seven theme, the buttons stack but there is no space in between them.

Steps to reproduce

  1. Enable the Seven theme as the administration theme.
  2. Create a View and make the width narrow so the buttons stack.
  3. Result: There is no space between the save and cancel buttons.
  4. Expected: Space between save and cancel buttons like Bartik has.

Seven Theme:

Bartik Theme:

After patch:

Proposed resolution

Adjust the CSS to add space between the buttons.

Remaining tasks

  1. Create patch
  2. Test patch
  3. Review patch
  4. Commit

User interface changes

Views UI buttons will have space between for on narrow screen widths.

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#31 3193919_after.png38.55 KBroshanibhangale
#31 3193919_before.png44.26 KBroshanibhangale
#22 space_exists_patch20.png49.14 KBsonam.chaturvedi
#21 3193919-spacing-between-buttons.png108.71 KBHarish1688
#20 3193919-20.patch390 bytesShubham Sharma 77
#16 3193919-16.patch500 bytesdjsagar
#9 3193919-after-patch.PNG18.1 KBdevashish jangid
#9 3193919-before-patch.PNG18.15 KBdevashish jangid
#7 3193919--after--patch--pic.png5.64 KBvikashsoni
#7 3193919--befrore-patch--pic.png5.64 KBvikashsoni
#4 after-apply-patch.png14.8 KBbabusaheb.vikas
#3 3193919-after_patch.png46.91 KBabhijith s
#3 3193919-before_patch.png46.45 KBabhijith s
#2 3193919-2.patch500 bytesdjsagar
#2 After-patch.png44.28 KBdjsagar
Bartik.png60.81 KBdjsagar
seven-Issue.png70.67 KBdjsagar

Issue fork seven-3193919

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

djsagar created an issue. See original summary.

djsagar’s picture

djsagar commented
Status: Active » Needs review
StatusFileSize
new After-patch.png44.28 KB
new 3193919-2.patch500 bytes

Here i created small patch for resolving this issue.

Thanks!

abhijith s’s picture

abhijith s commented
StatusFileSize
new 3193919-before_patch.png46.45 KB
new 3193919-after_patch.png46.91 KB

Applied patch #2 and it fine.Adding screenshots below.

Before patch:
before

After patch:
after

babusaheb.vikas’s picture

babusaheb.vikas commented
StatusFileSize
new after-apply-patch.png14.8 KB

I have applied patch #2 and it is working fine. I have added a screenshot after an applied the patch.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

vikashsoni’s picture

vikashsoni commented
StatusFileSize
new 3193919--befrore-patch--pic.png5.64 KB
new 3193919--after--patch--pic.png5.64 KB

Applied #2 patch and patch applied successfully and looks good for me
Thanks for the patch

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Title: Bottom space issue in view on mobile » No space between Views UI buttons on mobile in Seven theme
Issue tags: +Bug Smash Initiative, +Needs manual testing, +Needs issue summary update

@babusaheb.vikas Please do not duplicate testing unless there is a reason such as using a different Drupal version. It was already tested in #3 by @Abhijith S, so I assume testing in #4 was duplicate. But, testing in #7 may not have been as the version had changed to 9.4 so maybe that was tested with 9.4. It is helpful to know what version you are testing with.

Code change is simple. Checked that the patch still applies to Drupal 9.3, 9.4, and 10. For 9.4 and 10, it applies with offsets, e.g.

[drupal-9.4.x-dev/9.4.x] [drupal-9.4.x-dev]$ patch -p1 < 3193919-2.patch 
patching file core/themes/seven/css/components/form.css
Hunk #1 succeeded at 336 (offset 3 lines).

[drupal-10.0.x-dev/10.0.x] [drupal-10.0.x-dev]$ patch -p1 < 3193919-2.patch 
patching file core/themes/seven/css/components/form.css
Hunk #1 succeeded at 336 (offset 3 lines).

1. Assuming #7 was tested on 9.4, this could still be tested on Drupal 9.3.

2. Also, this could be tested on Drupal 10, but I'm not sure if that is required since Seven will be deprecated soon: #3084814: Deprecate Seven theme

3. I updated the title to be more clear but the issue summary needs some cleanup like using the issue summary template and embedding screenshots.

devashish jangid’s picture

devashish jangid commented
StatusFileSize
new 3193919-before-patch.PNG18.15 KB
new 3193919-after-patch.PNG18.1 KB

Drupal 9.3.x-dev
Patch applied successfully and looks good to me.
Sharing screenshot for the reference.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs manual testing, -Needs issue summary update

Thank you for testing on on 9.3 @Devashish Jangid.

I have found out from @catch that when the patch applies to more than one version, we can just test on 9.4 or 10, i.e. we don't have to test on all versions... just ones with different MRs/patches. Sorry for my confusion.

I have updated the issue summary to use the template, cleaned up the steps to reproduce, and embedded the screenshots.

I'm not sure if this is the best CSS approach but the patch applies to 9.3, 9.4, and 10, tests passed, manual testing passed, and code is simple, so I'm marking RTBC.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 2: 3193919-2.patch, failed testing. View results

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Status: Needs work » Reviewed & tested by the community

Unrelated test failure. Back to RTBC.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 2: 3193919-2.patch, failed testing. View results

yogeshmpawar’s picture

yogeshmpawar
He/Him/His
Primary language English
Location Pune(MH), INDIA 🇮🇳
commented
Status: Needs work » Reviewed & tested by the community

Putting back to RTBC as test failures are unrelated.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 2: 3193919-2.patch, failed testing. View results

djsagar’s picture

djsagar commented
Status: Needs work » Needs review
StatusFileSize
new 3193919-16.patch500 bytes

Re-Rolled patch.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Status: Needs review » Reviewed & tested by the community

Putting back to RTBC after verifying reroll is same code change as in #2.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 16: 3193919-16.patch, failed testing. View results

Shubham Sharma 77’s picture

Shubham Sharma 77 commented
Status: Needs work » Needs review
StatusFileSize
new 3193919-20.patch390 bytes

I’m attaching a patch that should fix the issue.

Harish1688’s picture

Harish1688 commented
StatusFileSize
new 3193919-spacing-between-buttons.png108.71 KB

Hi,

Tested the patch 3193919-20.patch on (9.5.x-dev), working fine good for RTBC.
screenshot attached 3193919-spacing-between-buttons.png

sonam.chaturvedi’s picture

sonam.chaturvedi commented
StatusFileSize
new space_exists_patch20.png49.14 KB

Verified and tested the patch #20 on 9.5.x-dev. Patch applied successfully.

Test Steps:
1. Enable the Seven theme as the administration theme.
2. Create a View and make the width narrow so the buttons stack.
3. Verify there is space between the save and cancel buttons.

Test Result: There is space between the save and cancel buttons.
Attached screenshot for reference. RTBC+1

aarti zikre’s picture

aarti zikre commented
Status: Needs review » Reviewed & tested by the community
kunal_sahu’s picture

kunal_sahu commented

I have checked patch #20 works fine for me.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Status: Reviewed & tested by the community » Postponed

We're actively trying to deprecate the Seven theme, so postponing this in the meantime.
Once we move it to contrib, we may choose to unpostpone this issue.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Project: Drupal core » Seven
Version: 9.5.x-dev » 1.0.0-alpha1
Component: Seven theme » Code
Status: Postponed » Reviewed & tested by the community

The Seven theme has been removed from Drupal 10 core. I confirmed that this issue only affects Seven and no other themes included with Drupal core, so I am moving this to the contributed Seven project.

avpaderno made their first commit to this issue’s fork.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Version: 1.0.0-alpha1 » 1.0.x-dev

avpaderno opened merge request !26

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Title: No space between Views UI buttons on mobile in Seven theme » No space between Views UI buttons on mobile
Status: Reviewed & tested by the community » Needs review
roshanibhangale’s picture

roshanibhangale commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3193919_before.png44.26 KB
new 3193919_after.png38.55 KB

Hi
I have manually tested MR 26 on Drupal 1.0.x version.
The MR is applied Successfully...

The space between the Save and cancel button is as per the Bartik.

Attaching screenshot for reference

Hence moving this to RTBC+1

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented

  • avpaderno committed 5e3ff47e on 1.0.x 
    Issue #3193919: No space between Views UI buttons on mobile

  • avpaderno committed 0d3c4887 on 2.0.x 
    Issue #3193919: No space between Views UI buttons on mobile
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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