Merge pull request #2 from fellowjamess/master

Add preset supertexts
This commit is contained in:
Emi
2025-10-16 11:46:40 +02:00
committed by GitHub
3 changed files with 64 additions and 8 deletions

View File

@@ -1,4 +1,4 @@
<html>
<html>
<head>
<title>Article cover generator - Godot Engine</title>
<link rel="stylesheet" href="styles/normalize.css" />
@@ -34,6 +34,13 @@
<div class="toolbar-item">
<label for="super-text">Supertext</label>
<input type="text" id="super-text" value="" />
<label>Preset supertexts</label>
<div class="toolbar-item-controls">
<button id="preset-super-1">Progress report</button>
<button id="preset-super-2">Dev snapshot</button>
<button id="preset-super-3">Maintenance release</button>
<button id="preset-super-4">Release candidate</button>
</div>
</div>
<div class="toolbar-spacer"></div>

View File

@@ -171,6 +171,20 @@ class PreviewGenerator {
downloadImage_button.addEventListener("click", () => {
this._saveRender();
});
// Event listeners for preset supertext buttons
document.getElementById("preset-super-1").addEventListener("click", () => {
this._setSuperText("Progress report");
});
document.getElementById("preset-super-2").addEventListener("click", () => {
this._setSuperText("Dev snapshot");
});
document.getElementById("preset-super-3").addEventListener("click", () => {
this._setSuperText("Maintenance release");
});
document.getElementById("preset-super-4").addEventListener("click", () => {
this._setSuperText("Release candidate");
});
}
_initEvents() {
@@ -458,4 +472,11 @@ class PreviewGenerator {
fakeAnchor.setAttribute("href", imageData);
fakeAnchor.click();
}
_setSuperText(text) {
const superText_input = document.getElementById("super-text");
superText_input.value = text;
this._debounceUpdateAndRender();
}
}

View File

@@ -52,12 +52,12 @@ body {
.toolbar-item {
display: flex;
flex-direction: column;
gap: 8px;
gap: 4px;
}
.toolbar-item label {
cursor: pointer;
font-size: 16px;
font-size: 14px;
}
.toolbar-item input[type=file] {
@@ -69,9 +69,11 @@ body {
border: none;
color: var(--button-text-color);
cursor: pointer;
font-size: 16px;
font-size: 12px;
font-weight: 600;
padding: 8px 16px;
padding: 6px 12px;
border-radius: 4px;
transition: background 0.3s;
}
.toolbar-item button:hover {
background: var(--button-hover-color);
@@ -98,14 +100,14 @@ body {
}
.toolbar-item-controls button {
font-size: 12px;
padding: 4px 10px;
font-size: 10px;
padding: 4px 8px;
}
.toolbar-filename-label {
color: var(--text-faint-color);
cursor: help;
font-size: 14px;
font-size: 12px;
text-align: right;
}
@@ -129,6 +131,8 @@ body {
/* CANVAS STYLING. */
.canvas-container {
width: 960px;
height: 540px;
max-height: 540px;
aspect-ratio: 16 / 9;
}
@@ -137,3 +141,27 @@ body {
width: 100%;
height: 100%;
}
/* MEDIA QUERIES FOR RESPONSIVENESS. */
@media (max-width: 768px) {
.content {
flex-direction: column;
align-items: stretch;
}
.toolbar {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.toolbar-item {
flex: 1 1 100%;
}
.toolbar-item--oneline {
flex-direction: column;
align-items: flex-start;
}
}