Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FIX: Dragzone overlapping #1333

Merged
merged 6 commits into from
Dec 10, 2019
Merged

FIX: Dragzone overlapping #1333

merged 6 commits into from
Dec 10, 2019

Conversation

VladimirMikulic
Copy link

@VladimirMikulic VladimirMikulic commented Dec 7, 2019

Changes:

  • inline styles moved from ../ImportImage/Ui.js to demo.css
  • minor code improvements

The change was necessary because in the old UI drag zone was overlapping
an image.

test

Resolves #1294

@harshithpabbati @keshav234156 requesting review :)

Changes:
- inline styles moved from ../ImportImage/Ui.js to demo.css
- minor code improvements

The change was necessary because in the old UI dragzone was overlapping
an image.

Resolves #1294
@welcome
Copy link

welcome bot commented Dec 7, 2019

Thanks for opening this pull request!
There may be some errors, but don't worry! We're here to help! 👍🎉😄

@codecov
Copy link

codecov bot commented Dec 7, 2019

Codecov Report

Merging #1333 into main will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #1333   +/-   ##
=======================================
  Coverage   66.57%   66.57%           
=======================================
  Files         125      125           
  Lines        2546     2546           
  Branches      397      397           
=======================================
  Hits         1695     1695           
  Misses        851      851

Copy link
Member

@keshav234156 keshav234156 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me!!!

examples/demo.css Show resolved Hide resolved
Changes:
- rollback .dropzone input style
- add styles to  .import-image-zone input element
@VladimirMikulic
Copy link
Author

@keshav234156
I kept max-width: 100%; rule and added max-width: fit-content; to .import-image-zone.
fit-content is necessary because on 100% text is squished in three dots(...).

Everything else remained the same :)

@keshav234156
Copy link
Member

@VladimirMikulic As the text was getting squashed with 100% that why I suggested you to increase the max-width in import-image-zone.Can you please do the changes.

Changes:
-  max-width increased to 120% on import-image-zone input element
@VladimirMikulic
Copy link
Author

@keshav234156 as you've requested, here is the change.

@keshav234156
Copy link
Member

@VladimirMikulic don't increase max-width in .import-image-zone input ie keep it 100%.Change max-width in import-image-zone from 230 to 250.Hope it's clear now ,If not please let me know.

Changes:
- rollback .import-image-zone input max-width to fit-content
- increase .import-image-zone max-width from 230px to 250px
@VladimirMikulic
Copy link
Author

I apologise. Apparently, I got lost with all these widths 😅.
Here is the new look:

new

examples/demo.css Outdated Show resolved Hide resolved
Changes:
 - max-width set to 100%
@VladimirMikulic
Copy link
Author

That should do it.

new2

@keshav234156
Copy link
Member

Looks absolutely perfect to me now.Thanks for your patience.

@VladimirMikulic
Copy link
Author

@keshav234156 thank you for your clarification and patience. We did it together.

@keshav234156 keshav234156 self-requested a review December 7, 2019 15:12
@keshav234156
Copy link
Member

@jywarren can you please review the changes.

@VladimirMikulic
Copy link
Author

@jywarren can we get this merged? I would like you to review the changes :)

@jywarren
Copy link
Member

jywarren commented Dec 9, 2019

Looks great! Thank you! Let's merge after #1325; we'll update the branch just after that merges!

@jywarren jywarren merged commit bb4fc5b into publiclab:main Dec 10, 2019
@jywarren
Copy link
Member

Awesome!

@welcome
Copy link

welcome bot commented Dec 10, 2019

Congrats on merging your first pull request! 🙌🎉⚡️
Your code will be published to https://beta.sequencer.publiclab.org in a day or two.
In the meantime, can you tell us your Twitter handle so we can thank you properly?
Now that you've completed this, you can help someone else take their first step!
See: Public Lab's coding community!

jywarren pushed a commit that referenced this pull request Dec 16, 2019
* FIX: Dragzone overlapping

Changes:
- inline styles moved from ../ImportImage/Ui.js to demo.css
- minor code improvements

The change was necessary because in the old UI dragzone was overlapping
an image.

Resolves #1294

* FIX: Improve commit #ead4b932

Changes:
- rollback .dropzone input style
- add styles to  .import-image-zone input element

* FIX:  .import-image-zone input element width

Changes:
-  max-width increased to 120% on import-image-zone input element

* FIX: .import-image-zone max-width

Changes:
- rollback .import-image-zone input max-width to fit-content
- increase .import-image-zone max-width from 230px to 250px

* FIX: .import-image-zone input element max-width

Changes:
 - max-width set to 100%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Overlapping of the dragzone with the image in import image module
3 participants