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.
threefoldtech · Jun 23, 2024 · ca7ec09 · ca7ec09
1 parent 3f6d5c5
commit ca7ec09
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 147 deletions.
diff --git 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
@@ -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 { 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
@@ -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 { ApplicationCard } from "@/utils/types";
 
 export default {
   name: "SolutionsView",
+  components: {
+    ApplicationCards,
+  },
   setup() {
-    let cards: Card[] = [
+    let cards: ApplicationCard[] = [
       {
         title: "Nostr",
         excerpt:
@@ -167,28 +136,16 @@ 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())),
     );
 
     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
@@ -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 { 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>