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($theme-default): add text ellipsis to navbar (#1683) #1840

Merged
merged 1 commit into from
Sep 10, 2019
Merged

fix($theme-default): add text ellipsis to navbar (#1683) #1840

merged 1 commit into from
Sep 10, 2019

Conversation

YuYang019
Copy link
Contributor

Summary

What kind of change does this PR introduce? (check at least one)

  • [ x] Bugfix
  • Feature
  • Code style update
  • Refactor
  • Docs
  • Build-related changes
  • Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

  • Yes
  • [ x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

  • [ x] Chrome
  • Firefox
  • Safari
  • Edge
  • IE

If adding a new feature, the PR's description includes:

  • A convincing reason for adding this feature
  • Related documents have been updated
  • Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

@flozero flozero added topic: theme Relates to VuePress theme type: feature request Request to add a new feature version: 1.x Relates to version 1 of VuePress labels Sep 6, 2019
@flozero
Copy link
Collaborator

flozero commented Sep 6, 2019

good job @maoyuyang !

@@ -125,4 +125,9 @@ $navbar-horizontal-padding = 1.5rem
display none
.links
padding-left 1.5rem
.site-name
width calc(100vw - 9.4rem)
Copy link
Member

Choose a reason for hiding this comment

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

Where does the 9.4rem come from? A comment would be helpful because it seems custom otherwise

Copy link
Contributor Author

@YuYang019 YuYang019 Sep 7, 2019

Choose a reason for hiding this comment

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

it is caculated by padding and the width of search icon

image

padding-left: 4rem
padding-right: 1.5rem
sum: 4 + 1.5 = 5.5rem

image

padding-left: 1.5rem
width: 2.5rem
sum: 2.5 + 1.5 = 4rem

so .site-name width = 100vw - (5.5rem + 4rem) = 100vw - 9.5rem

but why 9.4rem ?Because I found that it could display one more Chinese character in the iPhone 6/7/8 Plus (Chinese only)

100vw -9.5rem
image

100vw - 9.4rem
image

I think the title should show as much text as possible.

Copy link
Collaborator

Choose a reason for hiding this comment

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

@bencodezen is that ok for you?

Copy link
Member

Choose a reason for hiding this comment

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

@kefranabg Yup I'm good for now. In the future, we may want to abstract out these calculations since these are "magic numbers," but since the issue number is tagged in the commit, let's go ahead and merge.

@bencodezen bencodezen added the need feedback Awaiting author response label Sep 7, 2019
@kefranabg kefranabg merged commit 74017c5 into vuejs:master Sep 10, 2019
@vue-bot
Copy link

vue-bot commented Sep 10, 2019

Hey @maoyuyang, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
need feedback Awaiting author response topic: theme Relates to VuePress theme type: feature request Request to add a new feature version: 1.x Relates to version 1 of VuePress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants