Fixes position of upload svg on mobile #2693
Conversation
This works for any 'not large' device.
karmatosed
changed the title
Codecov Report
@@ Coverage Diff @@
## master #2693 +/- ##
==========================================
+ Coverage 33.69% 33.93% +0.24%
==========================================
Files 185 185
Lines 5594 5743 +149
Branches 976 1020 +44
==========================================
+ Hits 1885 1949 +64
- Misses 3141 3203 +62
- Partials 568 591 +23
Continue to review full report at Codecov.
|
editor/header/tools/style.scss
Outdated
| @@ -106,6 +106,13 @@ | |||
| margin-bottom: 0; | |||
| } | |||
|
|
|||
| @media ( max-width: $break-large ) { | |||
| .wp-core-ui .button.wp-block-image__upload-button.button.button-large { | |||
| padding: 6px 21px 6px 6px; | |||
|
@karmatosed, it looks like wrong issue is referenced here. Can you provide some testing instructions here? |
editor/header/tools/style.scss
Outdated
| @@ -106,6 +106,13 @@ | |||
| margin-bottom: 0; | |||
| } | |||
|
|
|||
| @media ( max-width: $break-large ) { | |||
There was a problem hiding this comment.
Can we use @include break-large() on the upload button component?
There was a problem hiding this comment.
Updated to make it mobile first and moved styling to the component's style file.
|
I have updated with the issue it should have referenced, my apologies it was relating to a different issue. #2671 |
|
@mtias can you validate my style changes? Just saying, I'm not an expert in this field :) |
|
@gziolo seems good, though you might also have to do for galleries (that's why I was hoping it could be done for https://github.com/WordPress/gutenberg/tree/master/blocks/media-upload-button directly). |
|
It makes sense, I will update 👍 |
gziolo
force-pushed
the
try/mobile-upload-svg-position
branch
from
caac15d
to
6bde531
Compare
|
It's a different component
|
| @@ -0,0 +1,11 @@ | |||
| .components-form-file-upload { | |||
There was a problem hiding this comment.
The file should be style.scss not editor; editor.scss is used to differentiate editor styles for blocks.
There was a problem hiding this comment.
I see. It makes sense, but it's a bit confusing. I assumed that it needs to be editor view as this is where it only applies :)
There was a problem hiding this comment.
The editor / style split is only for blocks, as we need to load those on the front end, and we don't want to pull block styles that are meant for the editor.
There was a problem hiding this comment.
Thanks for making it clear :) It's now updated to match the convention.
gziolo
force-pushed
the
try/mobile-upload-svg-position
branch
from
6bde531
to
b2d861b
Compare
|
🚢 it |
This works for any 'not large' device.
Fixes #2671
This was before on an iPhone 7 Plus
After
Mobile:
Desktop: