mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-04-26 13:34:45 +00:00
Code Issues Projects Releases Wiki Activity

Add fallback plugin image and display plugins in 1 to 3 columns (#1247)

Browse source
This commit is contained in:
Lukas 2022-10-09 19:31:53 +02:00 committed by GitHub
parent 9871b3cc8c
commit b3c816abbd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/plugins/woodpecker-plugins/src/theme/Icons.tsx
View file

@ -43,3 +43,15 @@ export const IconWebsite = (size = 32) => (
</g> </g>
</svg> </svg>
); );
export const IconPlugin = () => (
<svg style={{ width: '100%', maxWidth: '50px' }} viewBox="0 0 24 24">
<g fill="none">
<path d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M2 9a3 3 0 0 1 3-3h2.853c.297 0 .48-.309.366-.583A2.474 2.474 0 0 1 8.083 5c-.331-1.487.792-3 2.417-3c1.626 0 2.748 1.513 2.417 3a2.48 2.48 0 0 1-.136.417c-.115.274.069.583.366.583H15a3 3 0 0 1 3 3v1.853c0 .297.308.48.583.366c.135-.056.273-.104.417-.136c1.487-.331 3 .791 3 2.417s-1.513 2.748-3 2.417a2.475 2.475 0 0 1-.417-.136c-.274-.115-.583.069-.583.366V19a3 3 0 0 1-3 3h-1.893c-.288 0-.473-.291-.39-.566c.041-.14.072-.284.085-.434a2.31 2.31 0 1 0-4.604 0c.013.15.044.294.086.434c.082.275-.103.566-.39.566H5a3 3 0 0 1-3-3v-2.893c0-.288.291-.473.566-.39c.14.041.284.072.434.085a2.31 2.31 0 1 0 0-4.604c-.15.013-.294.044-.434.086c-.275.082-.566-.103-.566-.39V9Z"
/>
</g>
</svg>
);

6
docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx
View file

@ -3,7 +3,7 @@ import Fuse from 'fuse.js';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import './style.css'; import './style.css';
import { WoodpeckerPlugin } from '../types'; import { WoodpeckerPlugin } from '../types';
import { IconVerified } from './Icons'; import { IconPlugin, IconVerified } from './Icons';
function PluginPanel({ plugin }: { plugin: WoodpeckerPlugin }) { function PluginPanel({ plugin }: { plugin: WoodpeckerPlugin }) {
const pluginUrl = `/plugins/${plugin.name}`; const pluginUrl = `/plugins/${plugin.name}`;
@ -11,9 +11,7 @@ function PluginPanel({ plugin }: { plugin: WoodpeckerPlugin }) {
return ( return (
<a href={pluginUrl} className="card shadow--md wp-plugin-card"> <a href={pluginUrl} className="card shadow--md wp-plugin-card">
<div className="card__header row"> <div className="card__header row">
<div className="col col--2 text--left"> <div className="col col--2 text--left">{plugin.icon ? <img src={plugin.icon} width="50" /> : IconPlugin()}</div>
<img src={plugin.icon} width="50" height="50" />
</div>
<div className="col col--10"> <div className="col col--10">
<h3>{plugin.name}</h3> <h3>{plugin.name}</h3>
<p>{plugin.description}</p> <p>{plugin.description}</p>

11
docs/plugins/woodpecker-plugins/src/theme/style.css
View file

@ -1,10 +1,16 @@
.wp-plugins-list { .wp-plugins-list {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
grid-gap: 2rem; grid-gap: 2rem;
margin-top: 2rem; margin-top: 2rem;
} }
@media screen and (max-width: 450px) {
.wp-plugins-list {
grid-template-columns: auto;
}
}
.wp-plugin-card { .wp-plugin-card {
display: flex; display: flex;
position: relative; position: relative;
@ -13,6 +19,8 @@
text-decoration: none; text-decoration: none;
padding: .5rem 0 1rem; padding: .5rem 0 1rem;
flex-grow: 1; flex-grow: 1;
margin: 0 auto;
width: 100%;
} }
.wp-plugin-card:hover { .wp-plugin-card:hover {
@ -40,6 +48,7 @@
.wp-plugin-tags { .wp-plugin-tags {
display: flex; display: flex;
gap: .5rem; gap: .5rem;
flex-wrap: wrap;
} }
.wp-plugin-search { .wp-plugin-search {