Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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
Comment | File | Size | Author |
---|---|---|---|
#22 | cottser-first-d8-commit.png | 59.36 KB | joelpittet |
#15 | seven-progress-bar-2571539-14.png | 19 KB | star-szr |
#8 | progress-bar-after.png | 19.53 KB | surabhi-gokte |
#8 | progress-bar-before.png | 19.51 KB | surabhi-gokte |
#4 | progress_bar_height-2571539-4.patch | 430 bytes | Lendude |
Comments
Comment #2
Lendudenow with the right before img....
Comment #3
LendudeAdd the patch again, see if it gets queued now
Comment #4
LendudeSince .progress--small is in px, this should probably be px too.
Comment #5
swentel CreditAttribution: swentel commentedYeah, saw this too when trying to fix #2587755: AJAX error when using progress bar on file field widget
Comment #6
swentel CreditAttribution: swentel commentedIt's actually in seven theme too.
Comment #7
emma.mariaComment #8
surabhi-gokte CreditAttribution: surabhi-gokte at Srijan | A Material+ Company commentedI 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:
After :
Comment #9
Manjit.SinghRTBC++
I have tested it locally, It meets the observation mentioned in the description.
changing the status to RTBC.
Comment #10
emma.mariaRTBC++
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!
Comment #11
LendudeThanks all for taking a look at this!
Updated the issue summary to reflect the fix and #6.
Comment #12
emma.mariaComment #13
alexpottSo 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.Comment #14
swentel CreditAttribution: swentel commentedI 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 ?
Comment #15
star-szrThe 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:
To test Stark I installed Stark and set it as the admin theme, and was able to see the bug then.
Comment #16
alexpott@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.
Comment #17
alexpottComment #18
star-szrThanks! 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 :)
Comment #19
star-szrAlright 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.
Comment #21
star-szrSince 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!
Comment #22
joelpittetWoo first commit!