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

Style: update height of speakerdeck tag to be avoid scaling #5818

Merged
merged 3 commits into from
Feb 6, 2020

Conversation

deepu105
Copy link
Contributor

Fix #5682

What type of PR is this? (check all applicable)

  • Refactor
  • Feature
  • Bug Fix
  • Optimization
  • Documentation Update

Description

The speaker deck tag rendered cuts off horizontal edges due to setting 100% height. I had to remove 63px in order to render slide completely and seems to be fine in all screen sizes, including mobile

Didn't find any tests for this part to update, let me know if I missed it

Related Tickets & Documents

#5682

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

image

image

Added to documentation?

  • docs.dev.to
  • readme
  • no documentation needed

@pr-triage pr-triage bot added the PR: unreviewed bot applied label for PR's with no review label Jan 30, 2020
@claassistantio
Copy link

claassistantio commented Jan 30, 2020

CLA assistant check
All committers have signed the CLA.

rhymes
rhymes previously approved these changes Jan 30, 2020
Copy link
Contributor

@rhymes rhymes left a comment

Choose a reason for hiding this comment

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

Looks fine @deepu105, thank you!

@pr-triage pr-triage bot added PR: reviewed-approved bot applied label for PR's where reviewer approves changes and removed PR: unreviewed bot applied label for PR's with no review labels Jan 30, 2020
Copy link
Contributor

@ludwiczakpawel ludwiczakpawel left a comment

Choose a reason for hiding this comment

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

The problem is actually couple lines above, not here. Check out line #5 - it does some weird magic around calculating padding-bottom. Assuming all speakerdeck presentations have 16:9 ratio, this value should be set to 56.25%. More about the solution itself can be find here: https://benmarshall.me/responsive-iframes/

If you set it like that, all should be good without making changes to the height itself. That change is actually not ideal - it does indeed make it look okey-ish but it will break in certain scenarios.

Also, while on it, maybe we could get rid of that thingy in next line: margin-bottom:1em auto 1.3em; since it's just wrong syntax (so it's basically it's being ignored by browsers).

@pr-triage pr-triage bot added PR: reviewed-changes-requested bot applied label for PR's where reviewer requests changes and removed PR: reviewed-approved bot applied label for PR's where reviewer approves changes labels Feb 3, 2020
@pr-triage pr-triage bot added PR: unreviewed bot applied label for PR's with no review and removed PR: reviewed-changes-requested bot applied label for PR's where reviewer requests changes labels Feb 3, 2020
@deepu105
Copy link
Contributor Author

deepu105 commented Feb 3, 2020

@ludwiczakpawel thanks, you are right. I indeed noticed the padding but wasn't sure why the magic number was there hence I left it alone and altered the height. I fixed as per your suggestion

Copy link
Contributor

@ludwiczakpawel ludwiczakpawel left a comment

Choose a reason for hiding this comment

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

LGTM!

@pr-triage pr-triage bot added PR: reviewed-approved bot applied label for PR's where reviewer approves changes and removed PR: unreviewed bot applied label for PR's with no review labels Feb 3, 2020
@benhalpern benhalpern merged commit 5194c00 into forem:master Feb 6, 2020
@pr-triage pr-triage bot added PR: merged bot applied label for PR's that are merged and removed PR: reviewed-approved bot applied label for PR's where reviewer approves changes labels Feb 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PR: merged bot applied label for PR's that are merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The speaker deck widget cuts off content at the horizontal edges
5 participants