search

vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

fix(theme-default): Support centering members in VPTeamPage #3796

Open stevending1st opened 4 weeks ago

stevending1st commented 4 weeks ago

Todo

preview

Please click to view the screenshot ### small ![image](https://github.com/vuejs/vitepress/assets/23376142/9eae560c-c531-4e1a-b869-be2428ed7d97) ![image](https://github.com/vuejs/vitepress/assets/23376142/35d69a27-f4b8-45df-8d03-73bf393956c9) ### medium ![image](https://github.com/vuejs/vitepress/assets/23376142/24e272c0-352b-462e-bc9e-4315d42c9ee2) ![image](https://github.com/vuejs/vitepress/assets/23376142/c713ec56-cbc5-4219-9c00-d29340b3a063)

fixed: #3769

kiaking commented 4 weeks ago

Gonna look into this. Needs a bit adjustment.

kiaking commented 3 weeks ago

I've updated a few things.

  1. I went with more explicit media query approach on how we grid the layout. The .vp-doc part gets a bit more redundant but team member component style became simpler I guess.
  2. Not related to this PR directly, but found out that <VPTeamPage> component margin top was broken (Vite website having issue, too much margin top) so I fixed it too. Also adjusted how we override these things (:slotted wasn't working as I expected).

@brc-dd Could you test it 🙏 I've added https://localhost:5173/team-test page to test full team page. Should remove this file before merging.

stevending1st commented 3 weeks ago

@media (max-width: 640px)

image

@kiaking When there are more than 3 members on the page and the width is large, it is always displayed in two columns.

image

kiaking commented 3 weeks ago

Oh no 😅 Thanks! I'll fix it.

kiaking commented 3 weeks ago

OK, now I think I've fixed. I went and separated small and medium size styles completely since mixing them up was mixing up my brain 😅

stevending1st commented 3 weeks ago

OK, now I think I've fixed. I went and separated small and medium size styles completely since mixing them up was mixing up my brain 😅

Thank you! 😉 But there may be some problems:

  1. When size is set to medium, the height is not equal

image

  1. When the layout is home, size is small, but there are only two columns

image

kiaking commented 3 weeks ago

Oh no... thank you for keep testing! I'll continue look into it. Yeah I wasn't testing in home layout too, but not sure why it makes any difference... 🤔

stevending1st commented 3 weeks ago

Oh no... thank you for keep testing! I'll continue look into it. Yeah I wasn't testing in home layout too, but not sure why it makes any difference... 🤔

Thanks for the commit. ❤️You don't have to say thank you to me, I filed an issue (https://github.com/vuejs/vitepress/issues/3769) and then fixed it, and it's my responsibility to do that too. Since I don't know any more details, thank you for taking the time to help me refine this PR. ❤️