fix fix fix

vuejs · Apr 22, 2024 · 8e84643 · 8e84643
1 parent 8b7d27a
commit 8e84643
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 32 deletions.
diff --git a/docs/team-test.md b/docs/team-test.md
@@ -12,7 +12,7 @@ import {
  VPTeamMembers
 } from 'vitepress/theme'
 
-const members = [
+const members1 = [
  {
  avatar: 'https://github.com/yyx990803.png',
  name: 'Evan You',
@@ -31,13 +31,43 @@ const members = [
  { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
  ]
  },
+ // {
+ // avatar: 'https://github.com/kiaking.png',
+ // name: 'Kia King Ishii',
+ // title: 'Developer',
+ // links: [
+ // { icon: 'github', link: 'https://github.com/kiaking' },
+ // { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+ // ]
+ // },
+ // {
+ // avatar: 'https://github.com/kiaking.png',
+ // name: 'Kia King Ishii',
+ // title: 'Developer',
+ // links: [
+ // { icon: 'github', link: 'https://github.com/kiaking' },
+ // { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+ // ]
+ // },
+ // {
+ // avatar: 'https://github.com/kiaking.png',
+ // name: 'Kia King Ishii',
+ // title: 'Developer',
+ // links: [
+ // { icon: 'github', link: 'https://github.com/kiaking' },
+ // { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+ // ]
+ // }
+]
+
+const members2 = [
  {
- avatar: 'https://github.com/kiaking.png',
- name: 'Kia King Ishii',
- title: 'Developer',
+ avatar: 'https://github.com/yyx990803.png',
+ name: 'Evan You',
+ title: 'Creator',
  links: [
- { icon: 'github', link: 'https://github.com/kiaking' },
- { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+ { icon: 'github', link: 'https://github.com/yyx990803' },
+ { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
  ]
  },
  {
@@ -57,7 +87,25 @@ const members = [
  { icon: 'github', link: 'https://github.com/kiaking' },
  { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
  ]
- }
+ },
+ // {
+ // avatar: 'https://github.com/kiaking.png',
+ // name: 'Kia King Ishii',
+ // title: 'Developer',
+ // links: [
+ // { icon: 'github', link: 'https://github.com/kiaking' },
+ // { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+ // ]
+ // },
+ // {
+ // avatar: 'https://github.com/kiaking.png',
+ // name: 'Kia King Ishii',
+ // title: 'Developer',
+ // links: [
+ // { icon: 'github', link: 'https://github.com/kiaking' },
+ // { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+ // ]
+ // }
 ]
 </script>
 
@@ -69,15 +117,15 @@ const members = [
   have chosen to be featured below.
  </template>
  </VPTeamPageTitle>
- <VPTeamMembers :members="members" />
+ <VPTeamMembers :members="members1" />
  <VPTeamPageSection>
  <template #title>Team Emeriti</template>
  <template #lead>
   Here we honor some no-longer-active team members who have made valuable
   contributions in the past.
  </template>
  <template #members>
-  <VPTeamMembers size="small" :members="members" />
+  <VPTeamMembers size="small" :members="members2" />
  </template>
  </VPTeamPageSection>
 </VPTeamPage>
diff --git a/src/client/theme-default/components/VPTeamMembers.vue b/src/client/theme-default/components/VPTeamMembers.vue
@@ -38,70 +38,84 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
  width: 100%;
 }
 
+/**
+ * Small size layout.
+ * -------------------------------------------------------------------------- */
+
 @media (min-width: 512px) {
  .VPTeamMembers.small .container {
  grid-template-columns: repeat(2, 1fr);
  }
 
  .VPTeamMembers.small.count-1 .container,
- .VPTeamMembers.medium.count-1 .container {
+ .VPTeamMembers.small.count-2 .container {
  display: flex;
  justify-content: center;
  }
 
- .VPTeamMembers.small.count-1 .item {
+ .VPTeamMembers.small.count-1 .item,
+ .VPTeamMembers.small.count-2 .item {
  max-width: 272px;
  }
+}
 
- .VPTeamMembers.medium.count-1 .item {
- max-width: 368px;
+@media (min-width: 768px) {
+ .VPTeamMembers.small .container {
+ grid-template-columns: repeat(3, 1fr);
  }
 }
 
-@media (min-width: 640px) {
- .VPTeamMembers.medium .container {
- grid-template-columns: repeat(2, 1fr);
+@media (min-width: 960px) {
+ .VPTeamMembers.small .container {
+ grid-template-columns: repeat(4, 1fr);
  }
 
- .VPTeamMembers.medium.count-2 .container {
+ .VPTeamMembers.small.count-3 .container {
  display: flex;
  justify-content: center;
  }
 
- .VPTeamMembers.medium.count-2 .item {
- max-width: 368px;
+ .VPTeamMembers.small.count-3 .item {
+ max-width: 272px;
  }
 }
 
-@media (min-width: 768px) {
- .VPTeamMembers.small .container {
- grid-template-columns: repeat(3, 1fr);
- }
+/**
+ * Medium size layout.
+ * -------------------------------------------------------------------------- */
 
- .VPTeamMembers.small.count-2 .container {
+@media (min-width: 512px) and (max-width: 639px) {
+ .VPTeamMembers.medium .container {
  display: flex;
+ flex-direction: column;
  justify-content: center;
+ align-items: center;
  }
 
- .VPTeamMembers.small.count-2 .item {
- max-width: 272px;
+ .VPTeamMembers.medium .item {
+ max-width: 368px;
  }
 }
 
-@media (min-width: 960px) {
- .VPTeamMembers.small .container {
- grid-template-columns: repeat(4, 1fr);
+@media (min-width: 640px) {
+ .VPTeamMembers.medium .container {
+ grid-template-columns: repeat(2, 1fr);
  }
 
- .VPTeamMembers.small.count-3 .container {
+ .VPTeamMembers.medium.count-1 .container,
+ .VPTeamMembers.medium.count-2 .container {
  display: flex;
  justify-content: center;
+ align-items: center;
  }
 
- .VPTeamMembers.small.count-3 .item {
- max-width: 272px;
+ .VPTeamMembers.medium.count-1 .item,
+ .VPTeamMembers.medium.count-2 .item {
+ max-width: 368px;
  }
+}
 
+@media (min-width: 960px) {
  .VPTeamMembers.medium .container {
  grid-template-columns: repeat(3, 1fr);
  }

diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
@@ -526,6 +526,13 @@
  margin-bottom: 24px;
 }
 
+@media (min-width: 512px) {
+ .VPTeamMembers.small.count-2 .item,
+ .VPTeamMembers.small.count-3 .item {
+ max-width: 100% !important;
+ }
+}
+
 @media (min-width: 768px) {
  .vp-doc .VPTeamMembers.small .container,
  .vp-doc .VPTeamMembers.medium .container {