From 59a53cb8e603ef22c0e675cc4f902b32f8a41278 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Sun, 23 Jun 2024 10:35:31 +0300
Subject: [PATCH 1/4] style: Improved styling and functionality of application
 cards display

- Introduced a new component called 'ApplicationCards' to manage the display of application cards.
- Implemented dynamic card height adjustment based on the tallest card to ensure consistent appearance.
- Added functionality to detect the current viewport size (mobile or desktop) and adjust card heights accordingly for better responsiveness and user experience.
---
 .../applications/ApplicationCards.vue         | 81 +++++++++++++++++++
 packages/playground/src/utils/types.ts        |  9 +++
 .../src/views/orchestrators_view.vue          | 55 ++-----------
 .../playground/src/views/solutions_view.vue   | 59 ++------------
 packages/playground/src/views/vms_view.vue    | 56 ++-----------
 5 files changed, 113 insertions(+), 147 deletions(-)
 create mode 100644 packages/playground/src/components/applications/ApplicationCards.vue

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
new file mode 100644
index 0000000000..ad14566ab0
--- /dev/null
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -0,0 +1,81 @@
+<template>
+  <v-row>
+    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="6" lg="6">
+      <router-link :to="card.route">
+        <v-hover>
+          <template v-slot:default="{ isHovering, props }">
+            <v-card
+              class="pa-3 pt-6"
+              :height="isMobile && tallestCard > 220 ? 220 : 200"
+              v-bind="props"
+              :class="isHovering ? 'card-opacity' : undefined"
+            >
+              <v-img
+                class="d-inline-block ml-3 mb-2"
+                width="35"
+                :src="baseURL + 'images/icons/' + card.icon"
+                :alt="card.title"
+                :style="{
+                  filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
+                  lineHeight: 1,
+                }"
+              />
+              <v-card-title class="d-inline-block">
+                {{ card.title }}
+                <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
+                  {{ tag }}
+                </v-chip>
+                <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
+              </v-card-title>
+              <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
+            </v-card>
+          </template></v-hover
+        >
+      </router-link>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref } from "vue";
+import { useDisplay } from "vuetify";
+
+import type { ApplicationCard } from "@/utils/types";
+
+export default defineComponent({
+  name: "ApplicationCards",
+  props: {
+    cards: {
+      type: Object as PropType<ApplicationCard[]>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const baseURL = import.meta.env.BASE_URL;
+    const tallestCard = ref(0);
+    const isMobile = useDisplay().mobile;
+
+    props.cards.forEach(card => {
+      if (card.excerpt.length > tallestCard.value) {
+        tallestCard.value = card.excerpt.length;
+      }
+    });
+
+    return {
+      baseURL,
+      tallestCard,
+      isMobile,
+    };
+  },
+});
+</script>
+
+<style scoped>
+a {
+  text-decoration: none !important;
+}
+
+.card-opacity {
+  background-color: rgba(125, 227, 200, 0.12);
+}
+</style>
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index 881c7398fa..49a04d9a18 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -14,3 +14,12 @@ export interface IPublicConfig {
   gw6?: string;
   domain?: string;
 }
+
+export interface ApplicationCard {
+  title: string;
+  excerpt: string;
+  icon: string;
+  route: string;
+  flare?: string;
+  tags?: string[];
+}
diff --git a/packages/playground/src/views/orchestrators_view.vue b/packages/playground/src/views/orchestrators_view.vue
index f62e96691a..cc87a6e51a 100644
--- a/packages/playground/src/views/orchestrators_view.vue
+++ b/packages/playground/src/views/orchestrators_view.vue
@@ -1,49 +1,20 @@
 <template>
   <view-layout>
-    <v-row>
-      <v-col v-for="card in cards" :key="card.title">
-        <router-link :to="card.route">
-          <v-hover>
-            <template v-slot:default="{ isHovering, props }">
-              <v-card class="pa-3 pt-6" height="200" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
-                <v-img
-                  class="d-inline-block ml-3 mb-2"
-                  width="35"
-                  :src="baseURL + 'images/icons/' + card.icon"
-                  :alt="card.title"
-                  :style="{
-                    filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
-                    lineHeight: 1,
-                  }"
-                />
-                <v-card-title class="d-inline-block">
-                  {{ card.title }}
-                  <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
-                </v-card-title>
-                <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
-              </v-card>
-            </template></v-hover
-          >
-        </router-link>
-      </v-col>
-    </v-row>
+    <ApplicationCards :cards="cards" />
   </view-layout>
 </template>
 <script lang="ts">
+import ApplicationCards from "@/components/applications/ApplicationCards.vue";
 import { DashboardRoutes } from "@/router/routes";
-
-interface Card {
-  title: string;
-  excerpt: string;
-  icon: string;
-  route: string;
-  flare?: string;
-}
+import type { ApplicationCard } from "@/utils/types";
 
 export default {
   name: "Orchestrators View",
+  components: {
+    ApplicationCards,
+  },
   setup() {
-    const cards: Card[] = [
+    const cards: ApplicationCard[] = [
       {
         title: "Kubernetes",
         excerpt:
@@ -59,22 +30,10 @@ export default {
         route: DashboardRoutes.Orchestrators.CapRover,
       },
     ];
-    const baseURL = import.meta.env.BASE_URL;
 
     return {
       cards,
-      baseURL,
     };
   },
 };
 </script>
-
-<style scoped>
-a {
-  text-decoration: none !important;
-}
-
-.card-opacity {
-  background-color: rgba(125, 227, 200, 0.12);
-}
-</style>
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 1b89bd283c..e6abf394ee 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -1,56 +1,25 @@
 <template>
   <view-layout>
     <v-text-field label="Search Applications" v-model="searchItem" class="mb-5" clearable></v-text-field>
-    <v-row>
-      <v-col sm="12" md="6" lg="4" v-for="card in filteredCards" :key="card.title">
-        <router-link :to="card.route">
-          <v-hover>
-            <template v-slot:default="{ isHovering, props }">
-              <v-card class="pa-3 pt-6" height="100%" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
-                <v-img
-                  class="d-inline-block ml-3 mb-2"
-                  width="35"
-                  :src="baseURL + 'images/icons/' + card.icon"
-                  :alt="card.title"
-                  :style="{
-                    filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
-                    lineHeight: 1,
-                  }"
-                />
-                <v-card-title class="d-inline-block">
-                  {{ card.title }}
-                  <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
-                    {{ tag }}
-                  </v-chip>
-                </v-card-title>
-                <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
-              </v-card>
-            </template></v-hover
-          >
-        </router-link>
-      </v-col>
-      <p v-if="filteredCards.length === 0" class="mx-3 mb-3">No solution was found with the provided search query.</p>
-    </v-row>
+    <ApplicationCards :cards="filteredCards" />
+    <p v-if="filteredCards.length === 0" class="mx-3 mb-3">No solution was found with the provided search query.</p>
   </view-layout>
 </template>
 
 <script lang="ts">
 import { computed, ref } from "vue";
 
+import ApplicationCards from "@/components/applications/ApplicationCards.vue";
 import { DashboardRoutes } from "@/router/routes";
-
-interface Card {
-  title: string;
-  excerpt: string;
-  icon: string;
-  route: string;
-  tags?: string[];
-}
+import type { ApplicationCard } from "@/utils/types";
 
 export default {
   name: "SolutionsView",
+  components: {
+    ApplicationCards,
+  },
   setup() {
-    let cards: Card[] = [
+    let cards: ApplicationCard[] = [
       {
         title: "Nostr",
         excerpt:
@@ -167,7 +136,6 @@ export default {
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));
 
-    const baseURL = import.meta.env.BASE_URL;
     const searchItem = ref("");
     const filteredCards = computed(() =>
       cards.filter(n => n.title.toLocaleLowerCase().includes(searchItem.value.toLocaleLowerCase())),
@@ -175,20 +143,9 @@ export default {
 
     return {
       cards,
-      baseURL,
       searchItem,
       filteredCards,
     };
   },
 };
 </script>
-
-<style scoped>
-a {
-  text-decoration: none !important;
-}
-
-.card-opacity {
-  background-color: rgba(125, 227, 200, 0.12);
-}
-</style>
diff --git a/packages/playground/src/views/vms_view.vue b/packages/playground/src/views/vms_view.vue
index a60cce9865..881f58ffdb 100644
--- a/packages/playground/src/views/vms_view.vue
+++ b/packages/playground/src/views/vms_view.vue
@@ -1,49 +1,21 @@
 <template>
   <view-layout>
-    <v-row>
-      <v-col v-for="card in cards" :key="card.title">
-        <router-link :to="card.route">
-          <v-hover>
-            <template v-slot:default="{ isHovering, props }">
-              <v-card class="pa-3 pt-6" height="200" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
-                <v-img
-                  class="d-inline-block ml-3 mb-2"
-                  width="35"
-                  :src="baseURL + 'images/icons/' + card.icon"
-                  :alt="card.title"
-                  :style="{
-                    filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
-                    lineHeight: 1,
-                  }"
-                />
-                <v-card-title class="d-inline-block">
-                  {{ card.title }}
-                  <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
-                </v-card-title>
-                <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
-              </v-card>
-            </template></v-hover
-          >
-        </router-link>
-      </v-col>
-    </v-row>
+    <ApplicationCards :cards="cards" />
   </view-layout>
 </template>
 <script lang="ts">
+import ApplicationCards from "@/components/applications/ApplicationCards.vue";
 import { DashboardRoutes } from "@/router/routes";
-
-interface Card {
-  title: string;
-  excerpt: string;
-  icon: string;
-  route: string;
-  flare?: string;
-}
+import type { ApplicationCard } from "@/utils/types";
 
 export default {
   name: "VmsView",
+  components: {
+    ApplicationCards,
+  },
+
   setup() {
-    const cards: Card[] = [
+    const cards: ApplicationCard[] = [
       {
         title: "Full Virtual Machine",
         excerpt:
@@ -59,22 +31,10 @@ export default {
         route: DashboardRoutes.VirtualMachines.MicroVirtualMachine,
       },
     ];
-    const baseURL = import.meta.env.BASE_URL;
 
     return {
       cards,
-      baseURL,
     };
   },
 };
 </script>
-
-<style scoped>
-a {
-  text-decoration: none !important;
-}
-
-.card-opacity {
-  background-color: rgba(125, 227, 200, 0.12);
-}
-</style>

From cde0ec2be7c6e64ef1dc13b48eb812c13f797565 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Mon, 24 Jun 2024 09:22:54 +0300
Subject: [PATCH 2/4] style: Adjust card heights dynamically

- Dynamically set card heights based on the length of the tallest card to ensure a consistent layout.
- Modify the flex system to make the 'md' view span the full width of the container for improved responsiveness and visual appeal.
---
 .../src/components/applications/ApplicationCards.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index ad14566ab0..e132637f12 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -1,12 +1,12 @@
 <template>
   <v-row>
-    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="6" lg="6">
+    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6">
       <router-link :to="card.route">
         <v-hover>
           <template v-slot:default="{ isHovering, props }">
             <v-card
               class="pa-3 pt-6"
-              :height="isMobile && tallestCard > 220 ? 220 : 200"
+              :height="isMobile && tallestCard > 200 ? tallestCard + 15 : 200"
               v-bind="props"
               :class="isHovering ? 'card-opacity' : undefined"
             >

From df843660bb3d2d8853a6ce38eb7d2f201bfcd9d8 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 25 Jun 2024 11:25:42 +0300
Subject: [PATCH 3/4] fix: Applied changes:

- Removed unnecessary flare field.
- Optimized card style for large screens.
---
 .../src/components/applications/ApplicationCards.vue           | 3 +--
 packages/playground/src/utils/types.ts                         | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index e132637f12..a523f743dd 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row>
-    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6">
+    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6" xl="4">
       <router-link :to="card.route">
         <v-hover>
           <template v-slot:default="{ isHovering, props }">
@@ -25,7 +25,6 @@
                 <v-chip v-for="tag in card.tags" :key="tag" class="ml-2 pulse-animation">
                   {{ tag }}
                 </v-chip>
-                <v-chip v-if="card.flare" class="ml-2 pulse-animation"> Community </v-chip>
               </v-card-title>
               <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
             </v-card>
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
index 49a04d9a18..da82544b2c 100644
--- a/packages/playground/src/utils/types.ts
+++ b/packages/playground/src/utils/types.ts
@@ -20,6 +20,5 @@ export interface ApplicationCard {
   excerpt: string;
   icon: string;
   route: string;
-  flare?: string;
   tags?: string[];
 }

From 6e5c58f3a1b5a195cc874166ae466641a61cf7be Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Wed, 26 Jun 2024 11:31:39 +0300
Subject: [PATCH 4/4] style: Update the application cards:

- Removed the tallest Card concept.
- Set a default height of 200 and fixed the responsiveness.
- Removed the mobile view checker.
---
 .../applications/ApplicationCards.vue         | 27 ++++---------------
 1 file changed, 5 insertions(+), 22 deletions(-)

diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index a523f743dd..1200609d46 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -1,15 +1,10 @@
 <template>
   <v-row>
-    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6" xl="4">
+    <v-col v-for="card in cards" :key="card.title" cols="12" sm="12" md="12" lg="6" :xl="cards.length > 3 ? 4 : 6">
       <router-link :to="card.route">
         <v-hover>
           <template v-slot:default="{ isHovering, props }">
-            <v-card
-              class="pa-3 pt-6"
-              :height="isMobile && tallestCard > 200 ? tallestCard + 15 : 200"
-              v-bind="props"
-              :class="isHovering ? 'card-opacity' : undefined"
-            >
+            <v-card :height="200" class="pa-3 pt-6" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
               <v-img
                 class="d-inline-block ml-3 mb-2"
                 width="35"
@@ -26,7 +21,7 @@
                   {{ tag }}
                 </v-chip>
               </v-card-title>
-              <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
+              <v-card-text class="mt-2" v-bind="props"> {{ card.excerpt }} </v-card-text>
             </v-card>
           </template></v-hover
         >
@@ -36,8 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from "vue";
-import { useDisplay } from "vuetify";
+import { defineComponent, type PropType } from "vue";
 
 import type { ApplicationCard } from "@/utils/types";
 
@@ -49,21 +43,10 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  setup() {
     const baseURL = import.meta.env.BASE_URL;
-    const tallestCard = ref(0);
-    const isMobile = useDisplay().mobile;
-
-    props.cards.forEach(card => {
-      if (card.excerpt.length > tallestCard.value) {
-        tallestCard.value = card.excerpt.length;
-      }
-    });
-
     return {
       baseURL,
-      tallestCard,
-      isMobile,
     };
   },
 });