Problem/Motivation

When using Stark, the progess__bar is higher then the progress__track.

It seems that Stark and raw system styling does not have any special styling for the progress bar, so this seems due to the default styling.

progress__bar defaults to 1.5em, where the progress__track defaults to 16px.

Patch defaults both to 16px.

Before:

After:

Proposed resolution

Make progress__track and progress__bar default to the same height.

Remaining tasks

none

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Lendude created an issue. See original summary.

Lendude’s picture

Issue summary: View changes
Status: Active » Needs review
FileSize
9.35 KB

now with the right before img....

Lendude’s picture

Add the patch again, see if it gets queued now

Lendude’s picture

Component: system.module » CSS
Issue tags: -CSS, -frontend
FileSize
430 bytes

Since .progress--small is in px, this should probably be px too.

swentel’s picture

swentel’s picture

It's actually in seven theme too.

emma.maria’s picture

Issue tags: +CSS
surabhi-gokte’s picture

I have tested the latest patch in Ubuntu 14 and it was successful.

Steps I have followed :
1. Download the patch in the root directory of the site.
2. Run git apply patch_name
3. Clear caches of the site.
4. Go to Configuration > Testing
5. Run the test to check the UI of progress bar.

Please check the before and after screen shots.

Before:
before

After :
after

Manjit.Singh’s picture

Status: Needs review » Reviewed & tested by the community

RTBC++
I have tested it locally, It meets the observation mentioned in the description.
changing the status to RTBC.

emma.maria’s picture

RTBC++

As the progress track has a fixed height in the module CSS, the progress bar inside has to follow suit, plus also not set itself to be bigger than it's container.

Great work everyone!

Lendude’s picture

Issue summary: View changes

Thanks all for taking a look at this!

Updated the issue summary to reflect the fix and #6.

emma.maria’s picture

alexpott’s picture

Status: Reviewed & tested by the community » Needs review

So we're choosing to the leave the bug in Stable? I think that makes sense as our policy is not to change Stable.

But what confuses me is that Classy has a override for .progress__bar which seven should inherit. So the question I have is why aren't batches triggered in Seven using the Seven theme - which inherits from Classy.

swentel’s picture

I can confirm, this fix, when applied in stable fixes it too for the progress bar on file uploads - however, not when only in default css file.

Don't ask me about the inheritence - also, why wouldn't we want to fix this in stable too ?

star-szr’s picture

The patch looks like the appropriate fix for core and manual testing checks out. I think we should leave Stable as is, I'm having trouble coming up with a situation where we would want to change CSS in Stable. The kind of things we want to fix in Stable would be more like malformed HTML than CSS bugs.

This could possibly be back to RTBC but I think we need to work out if/how Seven is involved first. Similar to what @alexpott is saying in #13 I'm not seeing how this a problem for Seven, is the issue summary up to date in that regard? My guess is the screenshots in #8 and in the OP are from Stark. Can someone please clear this up, either providing screenshot(s) and steps to reproduce the bug with Seven or updating the issue summary to remove mentions of Seven?

Below is what I did to test Seven and the progress bar looked like this:

  1. Clean install of Drupal 8 standard profile
  2. Enable Testing module
  3. Navigate to /admin/config/development/testing
  4. Select a test
  5. Click Run tests

To test Stark I installed Stark and set it as the admin theme, and was able to see the bug then.

alexpott’s picture

Status: Needs review » Reviewed & tested by the community

@Cottser yep I can confirm that the batch is themed using seven and it works correctly. So this is a stark and wild west issue. Fix looks perfect.

alexpott’s picture

Issue summary: View changes
star-szr’s picture

Assigned: Unassigned » star-szr

Thanks! Spoke with @swentel and there may be an issue with Seven's progress bar when displaying file upload progress.

I'm going to investigate to see if/how it connects to this and I'm eyeing this as my first commit so assigning :)

star-szr’s picture

Issue summary: View changes
Issue tags: -Needs issue summary update

Alright so the Seven issue is something different, I filed #2662778: Ajax progress is rendered via JavaScript theme function; does not include progress library for that. Thanks @swentel for the help figuring out how to test that :)

Also seeing if I can save credits.

  • Cottser committed 5e6b13b on
    Issue #2571539 by Lendude, Surabhi Gokte, Cottser, swentel, emma.maria,...
star-szr’s picture

Title: Progress bar higher then progress track » Progress bar higher than progress track
Assigned: star-szr » Unassigned
Status: Reviewed & tested by the community » Fixed

Since this is not adding/removing selectors this bug fix is safe for 8.0.x and 8.1.x.

Committed 553838c and pushed to 8.0.x and 8.1.x. Thanks!

joelpittet’s picture

FileSize
59.36 KB

Woo first commit!

Status: Fixed » Closed (fixed)

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