Skip to content

Commit 1e2c305

Browse files
jacomyaljacomyal
committed
[plugins] Makes plugins page responsive
1 parent e7dc3d0 commit 1e2c305

File tree

2 files changed

+130
-43
lines changed

2 files changed

+130
-43
lines changed

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

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -21,55 +21,53 @@ const pluginsData: Plugin[] | null = pluginsDataRequest.ok
2121
</section>
2222
</header>
2323

24-
<main class="plugins-main pb-5">
24+
<main class="plugins-main">
2525
{
2626
pluginsData === null ? (
2727
<h2>Sorry plugins data could not be loaded</h2>
2828
) : (
29-
<div class="d-flex align-items-start">
29+
<>
3030
<PluginsFilters plugins={pluginsData} client:only />
3131

32-
<section class="plugins-list">
33-
<h2 id="plugins-list-total" class="mb-5">
32+
<section class="plugins-list-container container-fluid">
33+
<h2 id="plugins-list-total">
3434
{pluginsData.length || "No"} {pluginsData.length > 1 ? "plugins" : "plugin"}
3535
</h2>
36-
<div class="row g-4 w-100">
36+
<div class="plugins-list row">
3737
{pluginsData.map((p) => (
3838
<article
3939
id={pluginElementId(p.id)}
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}`) : ""}`}
40+
class={`category-${p.category} ${p.versions ? Object.keys(p.versions).map((v) => `version-${v}`) : ""}`}
4141
>
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 border"
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-
<div>
54-
<small class="small badge text-bg-light border border-primary text-primary">{p.category}</small>
55-
</div>
56-
<h3 class="text-primary m-0 text-truncate fs-4">{p.name}</h3>
57-
<p class="fs-5 m-0">{p.short_description}</p>
58-
<div class="text-muted">last updated on {p.last_update}</div>
59-
<div class="d-flex flex-wrap gap-1">
60-
{Object.keys(p.versions)
61-
.reverse()
62-
.map((v) => (
63-
<span class="badge text-bg-primary">{v}</span>
64-
))}
65-
</div>
42+
<a class="card" href={`/desktop/plugins/${p.id}`}>
43+
<img
44+
alt=""
45+
class="card-img-top plugin-image"
46+
src={
47+
p.images && p.images[0]
48+
? `https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${p.images[0].image}`
49+
: "/plugins/default-screenshot.jpg"
50+
}
51+
/>
52+
<div>
53+
<small class="plugin-category">{p.category}</small>
54+
</div>
55+
<h3 class="plugin-name">{p.name}</h3>
56+
<p class="plugin-description">{p.short_description}</p>
57+
<div class="text-muted">last updated on {p.last_update}</div>
58+
<div class="plugin-versions">
59+
{Object.keys(p.versions)
60+
.reverse()
61+
.map((v) => (
62+
<span>{v}</span>
63+
))}
6664
</div>
6765
</a>
6866
</article>
6967
))}
7068
</div>
7169
</section>
72-
</div>
70+
</>
7371
)
7472
}
7573
</main>

‎src/styles/_plugins.scss‎

Lines changed: 101 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
.plugins-main {
2+
@extend .container-fluid;
3+
padding: 0;
4+
display: flex;
5+
align-items: start;
6+
27
.card {
38
.card-img-top {
49
height: 10rem;
@@ -7,18 +12,10 @@
712
}
813

914
.plugins-filters {
10-
@extend .p-4;
11-
position: sticky;
12-
min-width: 300px;
13-
14-
@include media-breakpoint-down(xl) {
15-
min-width: 220px;
15+
input[type="search"] {
16+
width: 100%;
1617
}
1718

18-
top: $navbar-height;
19-
max-height: calc(100dvh - #{$navbar-height});
20-
overflow-y: auto;
21-
2219
.checkbox-group {
2320
.checkbox:not(:last-child) {
2421
margin-bottom: 0.4rem;
@@ -35,17 +32,109 @@
3532
gap: 2rem;
3633
}
3734

38-
.plugins-list {
39-
@extend .p-4;
35+
.plugins-list-container {
4036
flex-grow: 1;
4137
}
4238

4339
article {
40+
@extend .col-12;
41+
@extend .col-md-6;
42+
@extend .col-xl-4;
43+
@extend .col-xxl-3;
44+
padding: $spacer-2;
45+
46+
.card {
47+
@extend .text-dark;
48+
border: none;
49+
text-decoration: none;
50+
display: flex;
51+
flex-direction: column;
52+
gap: $spacer-1;
53+
}
54+
4455
.plugin-image {
56+
@extend .border;
57+
margin-bottom: $spacer-2;
4558
background: white;
4659
max-width: 100%;
4760
max-height: 300px;
4861
}
62+
.plugin-category {
63+
@extend .small;
64+
@extend .badge;
65+
@extend .text-bg-light;
66+
@extend .border;
67+
@extend .border-primary;
68+
@extend .text-primary;
69+
}
70+
.plugin-name {
71+
@extend .text-primary;
72+
@extend .text-truncate;
73+
@extend .fs-4;
74+
margin: 0;
75+
}
76+
.plugin-description {
77+
@extend .fs-5;
78+
margin: 0;
79+
}
80+
.plugin-versions {
81+
display: flex;
82+
flex-wrap: wrap;
83+
gap: $spacer-1;
84+
85+
& > span {
86+
@extend .badge;
87+
@extend .text-bg-primary;
88+
}
89+
}
90+
}
91+
}
92+
93+
@include media-breakpoint-up(md) {
94+
.plugins-main .plugins-filters {
95+
position: sticky;
96+
min-width: 300px;
97+
top: $navbar-height;
98+
max-height: calc(100dvh - #{$navbar-height});
99+
overflow-y: auto;
100+
}
101+
.plugins-main .plugins-filters,
102+
.plugins-main .plugins-list-container {
103+
padding: $spacer-4;
104+
}
105+
#plugins-list-total {
106+
margin-bottom: $spacer-3;
107+
}
108+
}
109+
@include media-breakpoint-down(xl) {
110+
.plugins-main .plugins-filters {
111+
min-width: 220px;
112+
}
113+
}
114+
@include media-breakpoint-down(md) {
115+
.plugins-main {
116+
flex-direction: column;
117+
align-items: stretch;
118+
}
119+
#plugins-list-total {
120+
margin-bottom: 0;
121+
}
122+
.plugins-main article {
123+
padding-left: 0;
124+
padding-right: 0;
125+
}
126+
.plugins-main .plugins-filters,
127+
.plugins-main .plugins-list {
128+
padding: $spacer-4 calc(#{$spacer-4} * 0.5);
129+
}
130+
.checkbox-group {
131+
display: flex;
132+
flex-wrap: wrap;
133+
justify-content: space-between;
134+
135+
.checkbox {
136+
width: 48%;
137+
}
49138
}
50139
}
51140

0 commit comments

Comments
 (0)