Skip to content

Commit 87cb043

Browse files
jacomyaljacomyal
committed
Refines plugins search page
1 parent 1121683 commit 87cb043

7 files changed

Lines changed: 120 additions & 71 deletions

File tree

‎src/pages/desktop/plugins/PluginsFilters.tsx‎

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -111,61 +111,62 @@ export const PluginsFilters: FC<{ plugins: Plugin[] }> = ({ plugins }) => {
111111
[state, plugins],
112112
);
113113

114-
// TODO: hide/show cards
115114
useEffect(() => {
116115
if (filteredPlugins) {
117116
const visibleIds = new Set(filteredPlugins.map((fp) => fp.id));
118117
const totalSpan = document.getElementById("plugins-list-total");
119-
if (totalSpan) totalSpan.textContent = visibleIds.size + "";
118+
if (totalSpan) totalSpan.textContent = `${visibleIds.size || "No"} ${visibleIds.size > 1 ? "plugins" : "plugin"}`;
120119
plugins.forEach((p) => {
121120
const element = document.getElementById(pluginElementId(p.id));
122121
if (element) element.style.display = !visibleIds.has(p.id) ? "none" : "block";
123122
});
124123
}
125124
}, [plugins, filteredPlugins]);
126-
console.log(versionsOptions);
125+
127126
return (
128-
<div className="plugins-filters">
129-
<fieldset className={`facets-container`}>
130-
<div>
131-
<legend>Search</legend>
132-
<input
133-
type="search"
134-
value={query || ""}
135-
onChange={(e) => {
136-
setQuery(e.target.value);
137-
}}
138-
/>
139-
</div>
127+
<div className="left-scrollbar plugins-filters">
128+
<div className="">
129+
<fieldset className="facets-container">
130+
<div>
131+
<legend>Search</legend>
132+
<input
133+
type="search"
134+
value={query || ""}
135+
onChange={(e) => {
136+
setQuery(e.target.value);
137+
}}
138+
/>
139+
</div>
140140

141-
<div>
142-
<legend>Gephi version</legend>
143-
<CheckboxInputGroup
144-
options={versionsOptions}
145-
selected={state.versions}
146-
onChange={(value, checked) => {
147-
setState((state) => ({
148-
...state,
149-
versions: checked ? [...state.versions, value] : state.versions.filter((v) => v !== value),
150-
}));
151-
}}
152-
/>
153-
</div>
141+
<div>
142+
<legend>Gephi version</legend>
143+
<CheckboxInputGroup
144+
options={versionsOptions}
145+
selected={state.versions}
146+
onChange={(value, checked) => {
147+
setState((state) => ({
148+
...state,
149+
versions: checked ? [...state.versions, value] : state.versions.filter((v) => v !== value),
150+
}));
151+
}}
152+
/>
153+
</div>
154154

155-
<div>
156-
<legend>Plugin category</legend>
157-
<CheckboxInputGroup
158-
options={categoriesOptions}
159-
selected={state.categories}
160-
onChange={(value, checked) => {
161-
setState((state) => ({
162-
...state,
163-
categories: checked ? [...state.categories, value] : state.categories.filter((v) => v !== value),
164-
}));
165-
}}
166-
/>
167-
</div>
168-
</fieldset>
155+
<div>
156+
<legend>Plugin category</legend>
157+
<CheckboxInputGroup
158+
options={categoriesOptions}
159+
selected={state.categories}
160+
onChange={(value, checked) => {
161+
setState((state) => ({
162+
...state,
163+
categories: checked ? [...state.categories, value] : state.categories.filter((v) => v !== value),
164+
}));
165+
}}
166+
/>
167+
</div>
168+
</fieldset>
169+
</div>
169170
</div>
170171
);
171172
};

‎src/pages/desktop/plugins/index.astro‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,45 +15,50 @@ const pluginsData: Plugin[] | null = pluginsDataRequest.ok
1515
---
1616

1717
<Layout>
18-
<header><h1>Gephi plugins</h1></header>
19-
<main class="plugins-main">
18+
<header class="banner py-5">
19+
<section class="container my-5 py-4">
20+
<h1>Gephi plugins</h1>
21+
</section>
22+
</header>
23+
24+
<main class="plugins-main pb-5">
2025
{
2126
pluginsData === null ? (
2227
<h2>Sorry plugins data could not be loaded</h2>
2328
) : (
24-
<div class="d-flex flex-columns ">
29+
<div class="d-flex align-items-start">
2530
<PluginsFilters plugins={pluginsData} client:only />
26-
<div>
27-
<h2>
28-
<span id="plugins-list-total">{pluginsData.length}</span> plugins
31+
32+
<section class="plugins-list">
33+
<h2 id="plugins-list-total" class="mb-5">
34+
{pluginsData.length || "No"} {pluginsData.length > 1 ? "plugins" : "plugin"}
2935
</h2>
3036
<div class="row g-4 w-100">
3137
{pluginsData.map((p) => (
32-
<div
38+
<article
3339
id={pluginElementId(p.id)}
34-
class={`h-100 col-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2 category-${p.category} ${p.versions ? Object.keys(p.versions).map((v) => `version-${v}`) : ""}`}
40+
class={`mb-3 col-12 col-md-6 col-xl-4 col-xxl-3 category-${p.category} ${p.versions ? Object.keys(p.versions).map((v) => `version-${v}`) : ""}`}
3541
>
36-
<div class={`card h-100 `}>
37-
<img
38-
class="card-img-top"
39-
src={
40-
p.images && p.images[0]
41-
? `https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${p.images[0].image}`
42-
: "/plugins/default-screenshot.jpg"
43-
}
44-
/>
45-
<div class="card-body">
46-
<h3 class="card-title">
47-
<a href={`/desktop/plugins/${p.id}`}>{p.name}</a>
48-
</h3>
49-
<p class="card-text">{p.short_description}</p>
42+
<a class="card border-0 text-decoration-none text-dark" href={`/desktop/plugins/${p.id}`}>
43+
<div class="d-flex flex-column gap-1">
44+
<img
45+
alt=""
46+
class="card-img-top plugin-image mb-2"
47+
src={
48+
p.images && p.images[0]
49+
? `https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${p.images[0].image}`
50+
: "/plugins/default-screenshot.jpg"
51+
}
52+
/>
53+
<h3 class="text-primary m-0 text-truncate fs-4">{p.name}</h3>
54+
<p class="fs-5 m-0">{p.short_description}</p>
55+
<div class="text-muted">last updated on {p.last_update}</div>
5056
</div>
51-
<div class="card-footer">last updated on {p.last_update}</div>
52-
</div>
53-
</div>
57+
</a>
58+
</article>
5459
))}
5560
</div>
56-
</div>
61+
</section>
5762
</div>
5863
)
5964
}

‎src/styles/_base.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,10 @@ body {
3131
svg[data-icon] {
3232
margin-bottom: 0.3rem;
3333
}
34+
35+
.left-scrollbar {
36+
direction: rtl;
37+
& > * {
38+
direction: ltr;
39+
}
40+
}

‎src/styles/_homepage.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,8 @@
9595
flex-shrink: 1;
9696

9797
img {
98-
width: 500px;
9998
max-width: 100%;
100-
max-height: 100%;
99+
max-height: 400px;
101100
}
102101
}
103102
}

‎src/styles/_layout.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@extend .py-2;
55
@extend .shadow;
66
@extend .sticky-top;
7+
8+
height: $navbar-height;
79
}
810

911
.navbar-nav {

‎src/styles/_plugins.scss‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,20 @@
55
object-fit: cover;
66
}
77
}
8+
89
.plugins-filters {
9-
padding: 0 0.5rem;
10+
@extend .p-4;
11+
position: sticky;
12+
min-width: 300px;
13+
14+
@include media-breakpoint-down(xl) {
15+
min-width: 220px;
16+
}
17+
18+
top: $navbar-height;
19+
max-height: calc(100dvh - #{$navbar-height});
20+
overflow-y: auto;
21+
1022
.checkbox-group {
1123
.checkbox:not(:last-child) {
1224
margin-bottom: 0.4rem;
@@ -16,6 +28,24 @@
1628
}
1729
}
1830
}
31+
32+
.facets-container {
33+
display: flex;
34+
flex-direction: column;
35+
gap: 2rem;
36+
}
37+
38+
.plugins-list {
39+
@extend .p-4;
40+
}
41+
42+
article {
43+
.plugin-image {
44+
background: white;
45+
max-width: 100%;
46+
max-height: 300px;
47+
}
48+
}
1949
}
2050

2151
.plugin-page {

‎src/styles/_variables-set.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ $custom-colors: (
2828
"gephisto-logo": $gephisto-logo,
2929
);
3030

31+
// Layout:
32+
$navbar-height: 5rem;
33+
3134
// Typography:
3235
$font-family-sans-serif: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
3336
$gephi-title-font-family: "Montserrat Alternates", $font-family-sans-serif;
@@ -41,3 +44,5 @@ $h1-font-size: 5rem !default;
4144
$h2-font-size: 2.5rem !default;
4245
$body-bg: $light !default;
4346
$primary: $custom-purple !default;
47+
$form-check-input-bg: white !default;
48+
$enable-rounded: false !default;

0 commit comments

Comments
 (0)