christian/c64-basic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine program card actions

Browse source
This commit is contained in:
Christian Johannesen 2026-10-07 21:49:41 +02:00
parent e13835ab27
commit d828652e9a
2 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/app.js
View file

@ -46,6 +46,10 @@ function renderPrograms() {
for (const program of programs) { for (const program of programs) {
const card = document.createElement('article'); const card = document.createElement('article');
card.className = 'program-card'; card.className = 'program-card';
const programUrl = `/?program=${encodeURIComponent(program.path)}`;
card.addEventListener('click', event => {
if (!event.target.closest('a, button')) location.href = programUrl;
});
const pill = document.createElement('span'); const pill = document.createElement('span');
pill.className = 'type-pill'; pill.className = 'type-pill';
@ -71,13 +75,13 @@ function renderPrograms() {
const actions = document.createElement('div'); const actions = document.createElement('div');
actions.className = 'program-actions'; actions.className = 'program-actions';
const run = document.createElement('a'); const run = document.createElement('a');
run.className = 'program-action primary-action'; run.className = 'card-action';
run.href = `/?program=${encodeURIComponent(program.path)}`; run.href = programUrl;
run.textContent = 'Run program →'; run.innerHTML = '<span class="play-icon" aria-hidden="true">▶</span><span>Run</span>';
const source = document.createElement('button'); const source = document.createElement('button');
source.className = 'source-action'; source.className = 'card-action';
source.type = 'button'; source.type = 'button';
source.textContent = 'Show source'; source.innerHTML = '<span class="code-icon" aria-hidden="true">&lt;/&gt;</span><span>Source</span>';
source.disabled = !program.source; source.disabled = !program.source;
source.addEventListener('click', () => showSource(program)); source.addEventListener('click', () => showSource(program));
actions.append(run, source); actions.append(run, source);

13
public/styles.css
View file

@ -26,18 +26,21 @@ h1 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
.view-button.active { background: #6f4bad; color: #fff; } .view-button.active { background: #6f4bad; color: #fff; }
.toolbar-button { padding: 0 .9rem; } .toolbar-button { padding: 0 .9rem; }
.program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.program-card { display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 1.25rem; border: 1px solid #ffffff24; border-radius: 14px; background: #211c3bcc; color: #fff; transition: transform .15s, border-color .15s; } .program-card { display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 1.25rem; border: 1px solid #ffffff24; border-radius: 14px; background: #211c3bcc; color: #fff; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.program-card:hover { transform: translateY(-3px); border-color: #b58cff; } .program-card:hover { transform: translateY(-3px); border-color: #b58cff; }
.program-card:has(.card-action:hover) { transform: none; background: #252044cc; }
.type-pill { display: inline-flex; gap: .4rem; align-items: center; padding: .3rem .65rem; border: 1px solid #b58cff55; border-radius: 999px; background: #8d5cff24; color: #d9c7ff; font-size: .75rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .type-pill { display: inline-flex; gap: .4rem; align-items: center; padding: .3rem .65rem; border: 1px solid #b58cff55; border-radius: 999px; background: #8d5cff24; color: #d9c7ff; font-size: .75rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.program-title { margin: 1rem 0 0; font-size: 1.2rem; } .program-title { margin: 1rem 0 0; font-size: 1.2rem; }
.program-description { margin: .55rem 0 0; color: #c8c1df; font-size: .92rem; line-height: 1.45; } .program-description { margin: .55rem 0 0; color: #c8c1df; font-size: .92rem; line-height: 1.45; }
.controls { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; } .controls { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
kbd { min-width: 1.8rem; padding: .25rem .45rem; border: 1px solid #aaa1c9; border-bottom-width: 3px; border-radius: 5px; background: #f2eff8; color: #241f38; font: 700 .72rem ui-monospace, monospace; text-align: center; } kbd { min-width: 1.8rem; padding: .25rem .45rem; border: 1px solid #aaa1c9; border-bottom-width: 3px; border-radius: 5px; background: #f2eff8; color: #241f38; font: 700 .72rem ui-monospace, monospace; text-align: center; }
.program-actions { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; } .program-actions { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; }
.program-action, .source-action { color: #cdb9ff; font-size: .9rem; } .card-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 94px; min-height: 38px; margin: 0; padding: .5rem .75rem; border: 1px solid #a783ef66; border-radius: 8px; background: #302653; color: #e4d8ff; font: inherit; font-size: .84rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.program-action { text-decoration: none; } .card-action:hover { border-color: #c4a6ff; background: #6f4bad; color: #fff; }
.program-action:hover, .source-action:hover { color: #fff; } .card-action:focus-visible { outline: 3px solid #c4a6ff77; outline-offset: 2px; }
.source-action { margin: 0; padding: .2rem 0; border: 0; background: none; text-decoration: underline; text-underline-offset: .2rem; } .card-action:disabled { opacity: .45; cursor: not-allowed; }
.play-icon { font-size: .78rem; }
.code-icon { font: 800 .8rem ui-monospace, monospace; }
.program-grid.list-view { grid-template-columns: 1fr; } .program-grid.list-view { grid-template-columns: 1fr; }
.program-grid.list-view .program-card { min-height: 0; display: grid; grid-template-columns: auto minmax(150px, .8fr) minmax(220px, 1.5fr) minmax(180px, 1fr); align-items: center; gap: 1rem; } .program-grid.list-view .program-card { min-height: 0; display: grid; grid-template-columns: auto minmax(150px, .8fr) minmax(220px, 1.5fr) minmax(180px, 1fr); align-items: center; gap: 1rem; }
.program-grid.list-view .program-title, .program-grid.list-view .program-description, .program-grid.list-view .controls, .program-grid.list-view .program-actions { margin: 0; padding: 0; } .program-grid.list-view .program-title, .program-grid.list-view .program-description, .program-grid.list-view .controls, .program-grid.list-view .program-actions { margin: 0; padding: 0; }