Skip to content

Commit

Permalink
Merge pull request #3003 from threefoldtech/development_2.6_responsiv…
Browse files Browse the repository at this point in the history 
…e_application_cards

Improved styling and functionality of application cards display
  • Loading branch information
@Mahmoud-Emad
Mahmoud-Emad authored Jun 26, 2024
2 parents cdda708 + 6e5c58f commit 62ff834
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 147 deletions.
63 changes: 63 additions & 0 deletions packages/playground/src/components/applications/ApplicationCards.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<v-row>
<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 :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"
: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" v-bind="props"> {{ card.excerpt }} </v-card-text>
</v-card>
</template></v-hover
>
</router-link>
</v-col>
</v-row>
</template>

<script lang="ts">
import { defineComponent, type PropType } from "vue";
import type { ApplicationCard } from "@/utils/types";
export default defineComponent({
name: "ApplicationCards",
props: {
cards: {
type: Object as PropType<ApplicationCard[]>,
required: true,
},
},
setup() {
const baseURL = import.meta.env.BASE_URL;
return {
baseURL,
};
},
});
</script>

<style scoped>
a {
text-decoration: none !important;
}
.card-opacity {
background-color: rgba(125, 227, 200, 0.12);
}
</style>
8 changes: 8 additions & 0 deletions packages/playground/src/utils/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,11 @@ export interface IPublicConfig {
gw6?: string;
domain?: string;
}

export interface ApplicationCard {
title: string;
excerpt: string;
icon: string;
route: string;
tags?: string[];
}
55 changes: 7 additions & 48 deletions packages/playground/src/views/orchestrators_view.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,21 @@
<v-icon size="30" class="pr-3">mdi-group</v-icon>
<v-card-title class="pa-0">Orchestrators</v-card-title>
</v-card>
<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:
Expand All @@ -63,22 +34,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>
59 changes: 8 additions & 51 deletions packages/playground/src/views/solutions_view.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,56 +5,25 @@
<v-card-title class="pa-0">Applications</v-card-title>
</v-card>
<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:
Expand Down Expand Up @@ -171,28 +140,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>
56 changes: 8 additions & 48 deletions packages/playground/src/views/vms_view.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,22 @@
<v-icon size="30" class="pr-3">mdi-television</v-icon>
<v-card-title class="pa-0">Virtual Machines</v-card-title>
</v-card>
<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:
Expand All @@ -63,22 +35,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>

0 comments on commit 62ff834

Please sign in to comment.