fix: only show all versions button if more then 10

frankframework · Nov 23, 2023 · 163dfe3 · 163dfe3
1 parent 81aed89
commit 163dfe3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git a/frontend/pages/[name].vue b/frontend/pages/[name].vue
@@ -5,8 +5,9 @@
         <UIcon name="i-heroicons-arrow-left"/>
         All Charts
       </NuxtLink>
-      <NuxtLink class="flex items-center gap-1"
-                :to="'https://github.com/frankframework/charts/tree/master/charts/' + currentChart[0].name">
+      <NuxtLink
+          class="flex items-center gap-1"
+          :to="`https://github.com/frankframework/charts/tree/master/charts/${currentChart[0].name}`">
         <svg class="gh-icon" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 32.58 31.77">
           <path
               d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"></path>
@@ -38,18 +39,26 @@
             <h1 class="text-4xl font-bold">{{ currentChart[0].name }}</h1>
             <p>{{ currentChart[0].description }}</p>
             <div class="mb-0.5">
+              <span class="bg-[#fdc300] font-bold text-black text-xs mr-1 px-2.5 py-0.5 rounded-full">
+                {{ currentChart[0].version }}
+              </span>
               <span
-                  class="bg-[#fdc300] font-bold text-black text-xs mr-0.5 px-2.5 py-0.5 rounded-full">{{
-                  chart[0].version
-                }}</span>
-              <span v-if="chart[0].deprecated"
-                    class="bg-red-100 text-red-800 text-xs mr-0.5 font-medium px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">deprecated</span>
-              <span v-if="chart[0].type === 'library'"
-                    class="bg-blue-100 text-blue-800 text-xs mr-0.5 font-medium px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300">library</span>
+                  v-if="currentChart[0].deprecated"
+                  class="bg-red-100 text-red-800 text-xs mr-1 font-medium px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">
+                deprecated
+              </span>
+              <span
+                  v-if="currentChart[0].type === 'library'"
+                  class="bg-blue-100 text-blue-800 text-xs mr-1 font-medium px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300">
+                library
+              </span>
             </div>
             <div>
-              <span v-for="keyword in chart[0].keywords"
-                    class="bg-yellow-100 text-yellow-800 text-xs mr-0.5 font-medium px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300">{{ keyword }}</span>
+              <span
+                  v-for="keyword in currentChart[0].keywords"
+                  class="bg-yellow-100 text-yellow-800 text-xs mr-1 font-medium px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300">
+                {{ keyword }}
+              </span>
             </div>
           </div>
         </div>
@@ -67,7 +76,11 @@
             <div v-for="chart in charts.entries[currentChart[0].name].slice(0, 10)">
               {{ chart.version }} - {{ formatDate(chart.created) }}
             </div>
-            <NuxtLink :to="'https://github.com/frankframework/charts/releases?q=' + currentChart[0].name">&plus; Show all releases</NuxtLink>
+            <NuxtLink
+                v-if="charts.entries[currentChart[0].name].length > 10"
+                :to="`https://github.com/frankframework/charts/releases?q=${currentChart[0].name}`">
+              &plus; Show all releases
+            </NuxtLink>
           </div>
           <div>
             <h1 class="font-bold">Chart</h1>

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
@@ -26,17 +26,26 @@
             <p>{{ chart[0].description }}</p>
             <div class="mb-0.5">
               <span
-                  class="bg-[#fdc300] font-bold text-black text-xs mr-0.5 px-2.5 py-0.5 rounded-full">{{
-                  chart[0].version
-                }}</span>
-              <span v-if="chart[0].deprecated"
-                    class="bg-red-100 text-red-800 text-xs mr-0.5 font-medium px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">deprecated</span>
-              <span v-if="chart[0].type === 'library'"
-                    class="bg-blue-100 text-blue-800 text-xs mr-0.5 font-medium px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300">library</span>
+                  class="bg-[#fdc300] font-bold text-black text-xs mr-1 px-2.5 py-0.5 rounded-full">
+                {{ chart[0].version }}
+              </span>
+              <span
+                  v-if="chart[0].deprecated"
+                  class="bg-red-100 text-red-800 text-xs mr-1 font-medium px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">
+                deprecated
+              </span>
+              <span
+                  v-if="chart[0].type === 'library'"
+                  class="bg-blue-100 text-blue-800 text-xs mr-1 font-medium px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300">
+                library
+              </span>
             </div>
             <div>
-              <span v-for="keyword in chart[0].keywords"
-                    class="bg-yellow-100 text-yellow-800 text-xs mr-0.5 font-medium px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300">{{ keyword }}</span>
+              <span
+                  v-for="keyword in chart[0].keywords"
+                  class="bg-yellow-100 text-yellow-800 text-xs mr-1 font-medium px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300">
+                {{ keyword }}
+              </span>
             </div>
           </div>
         </div>