mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ui: refresh community plugins page
This commit is contained in:
parent
bc3440cdef
commit
5937a0fc54
1 changed files with 71 additions and 105 deletions
|
|
@ -6,17 +6,21 @@ const { slug } = Astro.params;
|
|||
---
|
||||
|
||||
<Layout title="Community Plugins">
|
||||
<section class="plugins-page">
|
||||
<div class="page-header">
|
||||
<section class="ui-page">
|
||||
<div class="ui-container">
|
||||
<div class="hero ui-card ui-card-glass">
|
||||
<div class="hero-top">
|
||||
<div>
|
||||
<h1>Plugins</h1>
|
||||
<p class="subtitle">Manage plugins for this community</p>
|
||||
<h1 class="hero-title">Plugins</h1>
|
||||
<p class="hero-subtitle">Manage plugins for this community</p>
|
||||
</div>
|
||||
<a class="ui-btn ui-btn-secondary" href={`/communities/${slug}`}>Back</a>
|
||||
</div>
|
||||
<a class="btn-secondary" href={`/communities/${slug}`}>Back</a>
|
||||
</div>
|
||||
|
||||
<div id="plugins-content">
|
||||
<p class="loading">Loading...</p>
|
||||
<div class="state-card ui-card"><p class="loading">Loading...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
|
@ -121,7 +125,7 @@ const { slug } = Astro.params;
|
|||
<p class="settings-hint">No schema defined. Edit raw JSON:</p>
|
||||
<textarea class="settings-json" spellcheck="false" data-name="${escapeHtml(pluginName)}">${escapeHtml(settingsText)}</textarea>
|
||||
<div class="settings-actions">
|
||||
<button class="btn-primary btn-save-json" data-name="${escapeHtml(pluginName)}">Save Settings</button>
|
||||
<button class="ui-btn ui-btn-primary btn-save-json" data-name="${escapeHtml(pluginName)}">Save Settings</button>
|
||||
<span class="status" id="status-${escapeHtml(pluginName)}"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -136,7 +140,7 @@ const { slug } = Astro.params;
|
|||
<form class="settings-form" data-plugin="${escapeHtml(pluginName)}">
|
||||
${fields}
|
||||
<div class="settings-actions">
|
||||
<button type="submit" class="btn-primary">Save Settings</button>
|
||||
<button type="submit" class="ui-btn ui-btn-primary">Save Settings</button>
|
||||
<span class="status" id="status-${escapeHtml(pluginName)}"></span>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -160,10 +164,13 @@ const { slug } = Astro.params;
|
|||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="community-badge">
|
||||
<div class="community-badge ui-card">
|
||||
<div class="community-badge-title">
|
||||
<span class="name">${escapeHtml(community.name)}</span>
|
||||
<span class="slug">/${escapeHtml(community.slug)}</span>
|
||||
</div>
|
||||
<div class="community-badge-subtitle">Community plugin settings</div>
|
||||
</div>
|
||||
|
||||
<div class="plugins-list">
|
||||
${plugins.map(p => {
|
||||
|
|
@ -174,13 +181,13 @@ const { slug } = Astro.params;
|
|||
const hasSchema = p.settings_schema && p.settings_schema.properties;
|
||||
|
||||
return `
|
||||
<div class="plugin-card" data-name="${escapeHtml(p.name)}">
|
||||
<div class="plugin-card ui-card" data-name="${escapeHtml(p.name)}">
|
||||
<div class="plugin-head">
|
||||
<div class="plugin-title">
|
||||
<h3>${escapeHtml(p.name)}</h3>
|
||||
<span class="version">v${escapeHtml(p.version)}</span>
|
||||
${isCore ? `<span class="badge core">core</span>` : ''}
|
||||
${disabledGlobally ? `<span class="badge disabled">disabled globally</span>` : ''}
|
||||
${isCore ? `<span class="ui-pill tag-core">core</span>` : ''}
|
||||
${disabledGlobally ? `<span class="ui-pill tag-disabled">disabled globally</span>` : ''}
|
||||
</div>
|
||||
|
||||
<div class="plugin-controls">
|
||||
|
|
@ -193,9 +200,12 @@ const { slug } = Astro.params;
|
|||
|
||||
${p.description ? `<p class="desc">${escapeHtml(p.description)}</p>` : ''}
|
||||
|
||||
<details class="settings">
|
||||
<summary>Settings ${hasSchema ? '' : '<span class="schema-badge">JSON</span>'}</summary>
|
||||
<div class="settings-body-wrap">
|
||||
<details class="panel ui-card settings-panel">
|
||||
<summary class="panel-summary">
|
||||
<span class="panel-title">Settings</span>
|
||||
<span class="panel-meta">${hasSchema ? 'Schema' : '<span class="ui-badge">JSON</span>'}</span>
|
||||
</summary>
|
||||
<div class="panel-body settings-body-wrap">
|
||||
${renderSettingsForm(p.name, p.settings_schema, p.settings)}
|
||||
</div>
|
||||
</details>
|
||||
|
|
@ -362,32 +372,51 @@ const { slug } = Astro.params;
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.plugins-page {
|
||||
padding: 2rem 0;
|
||||
.hero {
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
.hero-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
.hero-title {
|
||||
margin: 0;
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.hero-subtitle {
|
||||
margin: 0.25rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.state-card {
|
||||
padding: 2.25rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.community-badge {
|
||||
padding: 1rem 1.1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.community-badge-title {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: baseline;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.community-badge-subtitle {
|
||||
margin-top: 0.35rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.community-badge .name {
|
||||
|
|
@ -406,9 +435,6 @@ const { slug } = Astro.params;
|
|||
}
|
||||
|
||||
.plugin-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -436,22 +462,14 @@ const { slug } = Astro.params;
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.badge.core {
|
||||
.tag-core {
|
||||
background: var(--color-info-muted);
|
||||
color: var(--color-info);
|
||||
border-color: var(--color-info-muted);
|
||||
}
|
||||
|
||||
.badge.disabled {
|
||||
.tag-disabled {
|
||||
background: var(--color-error-muted);
|
||||
color: var(--color-error);
|
||||
border-color: var(--color-error-muted);
|
||||
}
|
||||
|
||||
.desc {
|
||||
|
|
@ -459,17 +477,8 @@ const { slug } = Astro.params;
|
|||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
details.settings {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
details.settings summary {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
.settings-panel {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.settings-body {
|
||||
|
|
@ -495,6 +504,7 @@ const { slug } = Astro.params;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status {
|
||||
|
|
@ -502,41 +512,6 @@ const { slug } = Astro.params;
|
|||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -622,12 +597,7 @@ const { slug } = Astro.params;
|
|||
.schema-field input[type="text"],
|
||||
.schema-field input[type="number"],
|
||||
.schema-field select {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-field-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.schema-field input[type="text"]:focus,
|
||||
|
|
@ -662,13 +632,9 @@ const { slug } = Astro.params;
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.schema-badge {
|
||||
font-size: 0.7rem;
|
||||
background: var(--color-primary-muted);
|
||||
color: var(--color-primary);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
@media (max-width: 768px) {
|
||||
.plugin-head {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue