Merge pull request #91 from sublimetext-io/fix/contributors-2

Make spacing of contributors really nice and dynamic
sublimetext-io · Oct 29, 2023 · f0c2715 · f0c2715
2 parents 52b2db7 + bd0fb5c
commit f0c2715
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 75 deletions.
diff --git a/docs/.vitepress/components/Contributors.vue b/docs/.vitepress/components/Contributors.vue
@@ -1,67 +1,90 @@
 <template>
-  <h1>Contributors ({{ contributors.length }})</h1>
-
-  <input type="checkbox" id="showMoreToggle" class="hidden">
-
-  <!-- Displayed contributors -->
+  <div class="contributors-card">
+    <h1>Contributors ({{ contributors.length }})</h1>
+
+    <input type="checkbox" id="showMoreToggle" class="hidden">
+
+    <!-- Displayed contributors -->
+    <VPTeamMembers class="contributors" size="small" :members="contributors" />
+
+    <!-- Toggle button -->
+    <label for="showMoreToggle" class="toggleButton">
+      <div class="icon-container">
+        <svg class="show" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+        <svg class="hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="m18 15-6-6-6 6" />
+        </svg>
+      </div>
+    </label>
+
+    <p v-if="error" class="error-message">{{ error }}</p>
+  </div>
+</template>
 
-  <VPTeamMembers class="contributors" size="small" :members="contributors.slice(0, maxVisible)" />
+<style scoped>
+.contributors-card {
+  --item-height: 256px; /* allows for 2 rows in name */
+  --item-width: 180px;
+  --item-gap: 0px; /* items are padded enough */
+
+  background-color: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  min-height: 400px;
+  border-radius: 10px;
+  padding: 24px;
+}
 
-  <!-- More contributors -->
-  <VPTeamMembers class="moreContributors" size="small" :members="contributors" />
+.contributors-card h1 {
+  font-size: 1.75rem;
+  font-weight: 600;
+}
 
-  <!-- Toggle button -->
-  <label for="showMoreToggle" class="toggleButton">
-    <div class="icon-container">
-      <svg class="show" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-        <path d="m6 9 6 6 6-6" />
-      </svg>
-      <svg class="hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-        <path d="m18 15-6-6-6 6" />
-      </svg>
-    </div>
-  </label>
+.hidden {
+  display: none;
+}
 
-  <p v-if="error" class="error-message">{{ error }}</p>
-</template>
+.toggleButton {
+  cursor: pointer;
+}
 
-<style>
 .icon-container {
   display: inline-block;
   width: 24px;
   height: 24px;
   position: relative;
 }
 
-.hidden {
-  display: none;
+.contributors {
+  max-height: calc(var(--item-height) * 2);
+  overflow: hidden;
 }
 
-.moreContributors {
-  display: none;
-}
-
-#showMoreToggle:checked~.contributors {
-  display: none;
-}
-
-#showMoreToggle:checked~.moreContributors {
-  display: block;
+#showMoreToggle:checked ~ .contributors {
+  max-height: none;
 }
 
 #showMoreToggle:checked~.toggleButton .show,
 #showMoreToggle:not(:checked)~.toggleButton .hide {
   display: none;
 }
+</style>
 
-.VPTeamMembers>.container {
+<style>
+/* Overrides for within .VPTeamMembers */
+.contributors-card .VPTeamMembers > .container {
+  /* Allows items to wrap to the next line if there's not enough space */
   display: flex;
   flex-wrap: wrap;
-  /* Allows items to wrap to the next line if there's not enough space */
-  justify-content: center;
   /* Centers items horizontally */
-  gap: 1rem;
-  /* Space between members. Adjust as needed */
+  justify-content: center;
+  gap: var(--item-gap);
+}
+
+.contributors-card .VPTeamMembers > .container > .item {
+  width: var(--item-width);
+  height: var(--item-height);
 }
 </style>
 

diff --git a/docs/.vitepress/data/contributors.data.ts b/docs/.vitepress/data/contributors.data.ts
@@ -43,7 +43,7 @@ export default {
           name: contributor.login,
           title: 'Contributor',
           links: [
-            { icon: 'github', link: contributor.url },
+            { icon: 'github', link: contributor.html_url },
           ]
         }));
 

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -39,7 +39,6 @@
 }
 
 
-
 .VPNavBar:not(.has-sidebar):not(.top) {
   border-bottom-color: transparent !important;
 }
@@ -48,40 +47,7 @@
   background-color: var(--vp-c-bg-elv);
 }
 
-.VPTeamMembers.small .container {
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
-  gap: 10px;
-}
-
 /* Custom Stlye */
-.custom-layout {
-  background-color: var(--vp-c-bg-soft);
-  color: var(--vp-c-text-1);
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 1rem;
-  min-height: 400px;
-  max-width: 1152px;
-  margin: 6rem auto 0;
-  border-radius: 10px;
-}
-
-.custom-layout h1 {
-  font-size: 1.75rem;
-  font-weight: 600;
-}
-
-.custom-layout .btn {
-  background-color: var(--vp-button-brand-bg);
-  color: var(--vp-button-brand-text);
-  border-radius: 20px;
-  padding: 0.5rem 1.4rem;
-}
-
 dt.defined-term {
   color: var(--vp-c-brand) !important;
   text-transform: uppercase;

diff --git a/docs/index.md b/docs/index.md
@@ -48,6 +48,38 @@ head:
 
 <!-- Custom home layout -->
 <div class="custom-layout">
-  <Contributors ></Contributors>
+  <div class="custom-container">
+    <Contributors ></Contributors>
+  </div>
 </div>
 
+<style scoped>
+/* horizonal padding copied from .VPFeatures's padding */
+.custom-layout {
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .custom-layout {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .custom-layout {
+    padding: 0 64px;
+  }
+}
+
+.custom-container {
+  max-width: 1152px;
+  margin: 2rem auto 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 1rem;
+}
+</style>