Skip to content

Commit 7513616

Browse files
author
mirkobrombin
committed
feat: replace table wth a list of cards
1 parent 68f66fa commit 7513616

File tree

4 files changed

+49
-77
lines changed

4 files changed

+49
-77
lines changed

‎src/components/RecipeDetails.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="flex flex-wrap py-4">
33
<div class="flex flex-col w-full lg:w-1/3 p-2">
44
<div class="w-full p-2">
5-
<div class="bg-white rounded shadow flex justify-between items-center p-4">
5+
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
66
<div class="flex items-center">
77
<i class="material-icons text-gray-700 mr-2">extension</i>
88
<span class="font-semibold">Modules</span>
@@ -11,7 +11,7 @@
1111
</div>
1212
</div>
1313
<div class="w-full p-2">
14-
<div class="bg-white rounded shadow flex justify-between items-center p-4">
14+
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
1515
<div class="flex items-center">
1616
<i class="material-icons text-gray-700 mr-2">layers</i>
1717
<span class="font-semibold">Stages</span>
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
<div class="w-full p-2">
23-
<div class="bg-white rounded shadow flex justify-between items-center p-4">
23+
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
2424
<div class="flex items-center">
2525
<i class="material-icons text-gray-700 mr-2">settings</i>
2626
<span class="font-semibold">Args</span>
@@ -29,7 +29,7 @@
2929
</div>
3030
</div>
3131
<div class="w-full p-2">
32-
<div class="bg-white rounded shadow flex justify-between items-center p-4">
32+
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
3333
<div class="flex items-center">
3434
<i class="material-icons text-gray-700 mr-2">play_arrow</i>
3535
<span class="font-semibold">Runs</span>
@@ -39,7 +39,7 @@
3939
</div>
4040
</div>
4141
<div class="w-full lg:w-2/3 p-2">
42-
<div class="bg-white rounded shadow">
42+
<div class="bg-white rounded-lg shadow">
4343
<div class="p-4 flex items-center">
4444
<i class="material-icons text-gray-700 mr-2">pie_chart</i>
4545
<span class="font-semibold">Modules Usage</span>

‎src/components/RecipeModules.vue

Lines changed: 37 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,48 @@
11
<template>
22
<div class="py-4">
33
<div v-if="!moduleDetails">
4-
<div class="flex items-center">
4+
<div class="flex items-center mb-4 gap-2">
55
<span class="material-icons text-gray-500 text-lg">search</span>
6-
<input class="form-input ml-2 border rounded p-2 flex-grow" type="search" v-model="searchQuery"
7-
placeholder="Search modules" />
6+
<input
7+
class="bg-white dark:bg-gray-700 p-2 rounded text-sm border border-gray-300 shadow focus:outline-none flex-1"
8+
type="search" v-model="searchQuery" placeholder="Search modules" />
89
</div>
910

1011
<div v-for="(group, groupIndex) in moduleGroups" :key="groupIndex">
11-
<h2 class="text-xl font-bold py-4" v-if="groupIndex != 'nested'">Stage "{{ groupIndex }}"</h2>
12-
<div class="overflow-x-auto">
13-
<table class="min-w-full divide-y divide-gray-200">
14-
<thead class="bg-gray-50">
15-
<tr>
16-
<th
17-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
18-
Name</th>
19-
<th
20-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
21-
Type</th>
22-
<th
23-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
24-
</th>
25-
</tr>
26-
</thead>
27-
<tbody v-for="(module, index) in group" :key="index" class="bg-white divide-y divide-gray-200">
28-
<tr :class="hasNestedModules(module) ? 'bg-gray-100' : ''">
29-
<td class="px-6 py-4 whitespace-nowrap">
30-
<div class="flex items-center">
31-
<span v-if="hasNestedModules(module)" @click="toggleNested(module)">
32-
<i class="material-icons cursor-pointer">
33-
{{ isNestedExpanded(module) ? 'keyboard_arrow_down' :
34-
'keyboard_arrow_right'
35-
}}
36-
</i>
37-
</span>
38-
{{ module.name }}
39-
</div>
40-
</td>
41-
<td class="px-6 py-4 whitespace-nowrap">
42-
<div class="flex items-center">
43-
<span
44-
class="inline-flex items-center text-xs font-medium mr-2 px-2.5 py-0.5 rounded gap-2"
45-
:class="getModuleTypeColors(module.type)">
46-
<span class="material-icons align-middle text-base">
47-
{{ getModuleTypeClass(module.type) }}
48-
</span>
49-
{{ module.type }}
50-
</span>
51-
</div>
52-
</td>
53-
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
54-
<div class="flex items-center space-x-2">
55-
<button class="py-2 px-3 rounded" @click="showModuleDetails(module)"
56-
title="Show module details">
57-
<i class="material-icons text-md">list</i>
58-
</button>
59-
<copy-btn :textToCopy="getRouteToModule(module)"
60-
title="Copy link to module"></copy-btn>
61-
</div>
62-
</td>
63-
</tr>
64-
<tr v-if="hasNestedModules(module) && isNestedExpanded(module)" class="bg-gray-50">
65-
<td colspan="3" class="px-6 py-4 whitespace-nowrap">
66-
<recipe-modules :recipe="module" :moduleDetails="moduleDetails"
67-
@showModuleDetails="showModuleDetails"
68-
@closeModuleDetails="goBack"></recipe-modules>
69-
</td>
70-
</tr>
71-
</tbody>
72-
</table>
12+
<h2 class="text-xl font-bold mb-4" v-if="groupIndex != 'nested'">Stage "{{ groupIndex }}"</h2>
13+
<div class="flex flex-col gap-4">
14+
<div v-for="(module, index) in group.filter(module => module.name.toLowerCase().includes(searchQuery.toLowerCase()))"
15+
:key="index" class="bg-white rounded-lg shadow overflow-hidden transition-all">
16+
<div class="py-2 px-6">
17+
<div class="flex items-center justify-between">
18+
<i class="material-icons cursor-pointer" v-if="hasNestedModules(module)"
19+
@click="toggleNested(module)"
20+
:title="isNestedExpanded(module) ? 'Collapse child modules' : 'Expand child modules'">
21+
{{ isNestedExpanded(module) ? 'keyboard_arrow_down' :
22+
'keyboard_arrow_right' }}
23+
</i>
24+
<h3 class="text-lg font-medium text-gray-900 flex-1">{{ module.name }}</h3>
25+
<span class="inline-flex items-center mr-2 px-2.5 py-0.5 rounded gap-2"
26+
:class="getModuleTypeColors(module.type)">
27+
<span class="material-icons align-middle text-base">{{
28+
getModuleTypeClass(module.type) }}</span>
29+
{{ module.type }}
30+
</span>
31+
<button class="py-2 px-3 rounded mr-2" @click="showModuleDetails(module)"
32+
title="Show module details">
33+
<i class="material-icons text-md">list</i>
34+
</button>
35+
<copy-btn :textToCopy="getRouteToModule(module)" title="Copy link to module"></copy-btn>
36+
</div>
37+
</div>
38+
<div v-if="hasNestedModules(module) && isNestedExpanded(module)"
39+
class="bg-gray-100 border border-gray-200 p-4 mx-4 mb-4 rounded-lg shadow-md flex-1">
40+
<recipe-modules :recipe="module" :moduleDetails="moduleDetails"
41+
@showModuleDetails="showModuleDetails" @closeModuleDetails="goBack"></recipe-modules>
42+
</div>
43+
</div>
7344
</div>
45+
7446
</div>
7547

7648
</div>

‎src/views/HomeView.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
1212
<div v-if="atlasStore.layout === 'list'">
1313
<div class="overflow-x-auto">
14-
<table class="min-w-full bg-white rounded shadow">
14+
<table class="min-w-full bg-white rounded-lg shadow">
1515
<thead class="bg-gray-200">
1616
<tr>
1717
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">

‎src/views/RecipeView.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,35 +30,35 @@
3030
</section>
3131

3232
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
33-
<div class="bg-white dark:bg-gray-800 rounded-lg shadow">
33+
<div class="bg-white dark:bg-gray-800 rounded-lg shadow relative overflow-hidden">
3434
<ul class="flex divide-x divide-gray-200 dark:divide-gray-700">
3535
<li class="cursor-pointer flex-grow text-center"
3636
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'details' }">
3737
<a @click="curTab = 'details'"
38-
class="block py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
38+
class="block py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
3939
:class="{ 'text-gray-900 dark:text-white': curTab === 'details' }">Details</a>
4040
</li>
4141
<li class="cursor-pointer flex-grow text-center items-stretch"
4242
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'snippet' }">
4343
<a @click="curTab = 'snippet'"
44-
class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
44+
class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
4545
:class="{ 'text-gray-900 dark:text-white': curTab === 'snippet' }">Recipe</a>
4646
</li>
4747
<li class="cursor-pointer flex-grow text-center items-stretch"
4848
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'modules' }">
4949
<a @click="curTab = 'modules'"
50-
class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
50+
class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
5151
:class="{ 'text-gray-900 dark:text-white': curTab === 'modules' }">Modules</a>
5252
</li>
5353
<li class="cursor-pointer flex-grow text-center items-stretch"
5454
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'runs' }">
5555
<a @click="curTab = 'runs'"
56-
class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
56+
class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
5757
:class="{ 'text-gray-900 dark:text-white': curTab === 'runs' }">Runs</a>
5858
</li>
5959
<li class="cursor-pointer flex-grow text-center items-stretch">
6060
<a :href="recipeSourceUrl" target="_blank"
61-
class="flex justify-center gap-2 py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
61+
class="flex justify-center gap-2 py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
6262
<span>Source</span>
6363
<i class="material-icons text-sm">open_in_new</i>
6464
</a>

0 commit comments

Comments
 (0)