fix($theme-default): add text ellipsis to navbar (#1683) #1840
Conversation
flozero
added
topic: theme
|
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) | |||
There was a problem hiding this comment.
Where does the 9.4rem come from? A comment would be helpful because it seems custom otherwise
There was a problem hiding this comment.
it is caculated by padding and the width of search icon
padding-left: 4rem
padding-right: 1.5rem
sum: 4 + 1.5 = 5.5rem
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
100vw - 9.4rem
I think the title should show as much text as possible.
There was a problem hiding this comment.
@bencodezen is that ok for you?
There was a problem hiding this comment.
@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.
|
Hey @maoyuyang, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚 |
Summary
What kind of change does this PR introduce? (check at least one)
If changing the UI of default theme, please provide the before/after screenshot:
Does this PR introduce a breaking change? (check one)
If yes, please describe the impact and migration path for existing applications:
The PR fulfills these requirements:
fix #xxx[,#xxx], where "xxx" is the issue number)You have tested in the following browsers: (Providing a detailed version will be better.)
If adding a new feature, the PR's description includes:
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: