Skip to content

fix height of mermaid diagrams#2585

Merged
Rokt33r merged 4 commits intoBoostIO:masterfrom
daiyam:fix-mermaid-height
Dec 25, 2019
Merged

fix height of mermaid diagrams#2585
Rokt33r merged 4 commits intoBoostIO:masterfrom
daiyam:fix-mermaid-height

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

@ZeroX-DG ZeroX-DG Jan 19, 2019

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

@daiyam daiyam Jan 19, 2019

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

ZeroX-DG commented Sep 14, 2019

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

@qrospars
Copy link

qrospars commented Dec 21, 2019

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