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.

Sign up for GitHub

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

Jump to bottom

fix height of mermaid diagrams #2585

Merged
merged 4 commits into from
Dec 25, 2019
Merged

fix height of mermaid diagrams #2585

merged 4 commits into from
Dec 25, 2019

Conversation

daiyam
Copy link
Contributor

@daiyam daiyam commented Nov 8, 2018 •
edited by issuehunt-oss bot
Loading

Description

This change fixes the height of the mermaid diagrams.

Before After
screenshot screenshot
screenshot screenshot
screenshot screenshot

Issue fixed

Type of changes

  • ⚪ Bug fix (Change that fixed an issue)
  • ⚪ Breaking change (Change that can cause existing functionality to change)
  • 🔘 Improvement (Change that improves the code. Maybe performance or development improvement)
  • ⚪ Feature (Change that adds new functionality)
  • ⚪ Documentation change (Change that modifies documentation. Maybe typo fixes)

Checklist:

  • 🔘 My code follows the project code style
  • ⚪ I have written test for my code and it has been tested
  • 🔘 All existing tests have been passed
  • 🔘 I have attached a screenshot/video to visualize my change if possible
IssueHunt Summary

Referenced issues

This pull request has been submitted to:

IssueHunt has been backed by the following sponsors. Become a sponsor

@daiyam daiyam mentioned this pull request Nov 8, 2018
Merged
@ZeroX-DG ZeroX-DG added the awaiting review ❇️ Pull request is awaiting a review. label Nov 9, 2018
This was referenced Dec 25, 2018
Closed
Closed
ZeroX-DG
ZeroX-DG reviewed Jan 19, 2019
View reviewed changes
browser/components/render/MermaidRender.js
if (el.style.maxWidth) {
const maxWidth = parseFloat(el.style.maxWidth)

ratio *= el.parentNode.clientWidth / maxWidth
Copy link
Member

Choose a reason for hiding this comment

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

This may sound silly but can you explain to me how this works? 😄 Why did you multiply ratio with clientWidth / maxWidth?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's to compensate the max-width 100% !important applied on the svg.
el.parentNode.clientWidth / maxWidth is the ratio between the available space and the diagram that mermaid wanted.

@ZeroX-DG ZeroX-DG added awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. and removed awaiting review ❇️ Pull request is awaiting a review. labels Jan 19, 2019
@ZeroX-DG ZeroX-DG requested a review from Rokt33r April 15, 2019 13:26
@ZeroX-DG
Copy link
Member

Sorry for let you wait for so long, can you fix the conflict @daiyam ?

@qrospars
Copy link

I tried on my MacOS and I can see that it works fine :) Would be nice if @daiyam could fix the merge issue.
Also remember that there was a IssueHunt page for this issue, if you want to claim the bounty: https://issuehunt.io/r/BoostIO/Boostnote/issues/2335

@daiyam
Copy link
Contributor Author

daiyam commented Dec 21, 2019

@qrospars I will try to fix it this week-end

@Flexo013 Flexo013 added awaiting review ❇️ Pull request is awaiting a review. and removed awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. labels Dec 22, 2019
@Flexo013 Flexo013 requested a review from ZeroX-DG December 22, 2019 22:55
ZeroX-DG
ZeroX-DG approved these changes Dec 24, 2019
View reviewed changes
Copy link
Member

@ZeroX-DG ZeroX-DG left a comment

Choose a reason for hiding this comment

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

LGTM 🎉

@Rokt33r Rokt33r removed the awaiting review ❇️ Pull request is awaiting a review. label Dec 25, 2019
@Rokt33r Rokt33r added this to the v0.14.0 milestone Dec 25, 2019
@Rokt33r Rokt33r merged commit 65e83e7 into BoostIO:master Dec 25, 2019
@Rokt33r Rokt33r mentioned this pull request Jan 6, 2020
Closed
@daiyam daiyam deleted the fix-mermaid-height branch February 3, 2020 17:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZeroX-DG ZeroX-DG ZeroX-DG approved these changes

@Rokt33r Rokt33r Awaiting requested review from Rokt33r

Assignees

@Rokt33r Rokt33r

Labels
None yet
Projects
None yet
Milestone
v0.14.0
Development

Successfully merging this pull request may close these issues.
5 participants
@daiyam @ZeroX-DG @qrospars @Flexo013 @Rokt33r