gopi/ReleaseNotesFormatter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More Ui updates

Browse Source
This commit is contained in:
Gurpreet Singh
2026-01-16 17:51:18 -05:00
parent 6df0dd70ed
commit 7126fd7497
1 changed files with 92 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
index.html
View File

@@ -44,8 +44,8 @@
} }
.container { .container {
width: min(92vw, 1500px); width: min(92vw, 1120px);
max-width: 1500px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
padding: 26px 18px 56px; padding: 26px 18px 56px;
} }
@@ -85,7 +85,34 @@
color: var(--text); color: var(--text);
} }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; } .grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.topbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .topbar { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.uploadRow {
display: flex;
gap: 14px;
width: 100%;
align-items: stretch;
flex-wrap: wrap;
}
.uploadRow > .dropZone {
flex: 1 1 420px;
min-width: 320px;
}
.uploadRow > .versionBox {
flex: 1 1 420px;
min-width: 260px;
display: flex;
flex-direction: column;
justify-content: center;
}
.versionBox input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%);
color: var(--text);
}
.navRow { display: flex; flex-wrap: wrap; gap: 10px; } .navRow { display: flex; flex-wrap: wrap; gap: 10px; }
.navBtn { .navBtn {
padding: 8px 10px; padding: 8px 10px;
@@ -105,7 +132,45 @@
.err { color: #ef4444; white-space: pre-wrap; } .err { color: #ef4444; white-space: pre-wrap; }
.small { font-size: 12px; color: var(--muted); } .small { font-size: 12px; color: var(--muted); }
label { font-weight: 600; } label { font-weight: 600; }
input[type="file"] { padding: 6px; } .dropZone {
border: 1.5px dashed color-mix(in srgb, var(--border) 55%, var(--primary2) 45%);
border-radius: 14px;
padding: 18px;
background: color-mix(in srgb, var(--card) 88%, var(--primary2) 12%);
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
user-select: none;
transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease, background 180ms ease;
}
.dropZone:hover {
background: color-mix(in srgb, var(--card) 84%, var(--primary2) 16%);
border-color: color-mix(in srgb, var(--border) 40%, var(--primary2) 60%);
}
.dropZone.dragOver {
border-color: var(--primary2);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary2) 18%, transparent 82%);
transform: translateY(-1px);
}
.dropZone input[type="file"] {
display: none;
}
.dropZoneContent {
display: grid;
gap: 6px;
place-items: center;
}
.dropZoneIcon {
font-size: 22px;
line-height: 1;
}
.dropZoneTitle {
font-weight: 700;
letter-spacing: -0.01em;
}
.ascGrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; } .ascGrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; }
.singleCol { grid-template-columns: 1fr !important; } .singleCol { grid-template-columns: 1fr !important; }
.ascBoxHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px; } .ascBoxHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px; }
@@ -204,29 +269,32 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<button class="btn" id="btnTheme" type="button" title="Toggle dark mode" style="position: fixed; top: 18px; right: 18px; z-index: 10000; border-radius: 999px; padding: 10px 12px;">
🌙
</button>
<h2 style="margin: 0 0 6px 0;">🧾 Release Notes Formatter</h2> <h2 style="margin: 0 0 6px 0;">🧾 Release Notes Formatter</h2>
<p class="muted" style="margin: 0 0 14px 0;">Upload a Gridly CSV export.</p> <p class="muted" style="margin: 0 0 14px 0;">Upload a Gridly CSV export.</p>
<div class="row"> <div class="row">
<div class="card" id="uploadCard"> <div class="card" id="uploadCard">
<div class="topbar"> <div class="topbar">
<div class="dropZone" id="dropZone" title="Drag & drop a CSV here"> <div class="uploadRow">
<label for="file">CSV file</label><br/> <div class="dropZone" id="dropZone" title="Drag & drop a CSV here or click to browse">
<input id="file" type="file" accept=".csv,text/csv" /> <input id="file" type="file" accept=".csv,text/csv" />
<div class="topbar" style="margin-top:8px; gap: 8px;"> <div class="dropZoneContent">
<span class="hintPill">⬇️ Drag & drop CSV</span> <div class="dropZoneIcon">⬇️</div>
<span class="hintPill">or click to browse</span> <div class="dropZoneTitle">Drag & drop your Gridly CSV here</div>
<div class="small muted">or click anywhere in this box to browse</div>
<div id="fileInfo" class="small" style="margin-top:6px;"></div>
</div> </div>
<div id="fileInfo" class="small" style="margin-top:8px;"></div>
</div> </div>
<div>
<label for="gameVersion">Game version</label><br/> <div class="versionBox">
<input id="gameVersion" type="text" inputmode="decimal" placeholder="e.g. 6.51.0" style="padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.15); background:#fff; min-width: 160px;" /> <label for="gameVersion">Game version</label>
<div id="versionHelp" class="small muted">Used for PlayFab News titles only. Format: x.xx.x</div> <input id="gameVersion" type="text" inputmode="decimal" placeholder="e.g. 6.51.0" />
<div id="versionHelp" class="small muted" style="margin-top:6px;">Used for PlayFab News titles only. Format: x.xx.x</div>
</div>
</div> </div>
<div style="flex:1"></div>
<button class="btn" id="btnRefresh" disabled>Refresh</button>
<button class="btn" id="btnTheme" type="button" title="Toggle dark mode">🌙</button>
</div> </div>
</div> </div>
@@ -265,7 +333,7 @@
<div class="small muted">Output JSON</div> <div class="small muted">Output JSON</div>
<button class="btn" id="btnCopyAdcap" disabled><span class="btnLabel">Copy</span></button> <button class="btn" id="btnCopyAdcap" disabled><span class="btnLabel">Copy</span></button>
</div> </div>
<textarea id="outAdcap" readonly></textarea> <textarea id="outAdcap" readonly rows="3" style="min-height: 92px;"></textarea>
</div> </div>
<div class="card" id="playfabAdcomSection"> <div class="card" id="playfabAdcomSection">
@@ -364,7 +432,6 @@
const outGoogle = document.getElementById("outGoogle"); const outGoogle = document.getElementById("outGoogle");
const ascBoxes = document.getElementById("ascBoxes"); const ascBoxes = document.getElementById("ascBoxes");
const btnCopyGoogle = document.getElementById("btnCopyGoogle"); const btnCopyGoogle = document.getElementById("btnCopyGoogle");
const btnRefresh = document.getElementById("btnRefresh");
const dropZone = document.getElementById("dropZone"); const dropZone = document.getElementById("dropZone");
const btnTheme = document.getElementById("btnTheme"); const btnTheme = document.getElementById("btnTheme");
const toastHost = document.getElementById("toastHost"); const toastHost = document.getElementById("toastHost");
@@ -536,8 +603,8 @@
const ta = document.createElement("textarea"); const ta = document.createElement("textarea");
ta.readOnly = true; ta.readOnly = true;
ta.value = title; ta.value = title;
ta.rows = 3; ta.rows = 1;
ta.style.minHeight = "72px"; ta.style.minHeight = "44px";
wrap.className = "fieldBox"; wrap.className = "fieldBox";
wrap.appendChild(headerRow); wrap.appendChild(headerRow);
@@ -877,6 +944,8 @@
const ta = document.createElement("textarea"); const ta = document.createElement("textarea");
ta.readOnly = true; ta.readOnly = true;
ta.value = block; ta.value = block;
ta.rows = 5;
ta.style.minHeight = "120px";
card.appendChild(header); card.appendChild(header);
card.appendChild(ta); card.appendChild(ta);
@@ -929,7 +998,6 @@
outGoogle.value = ""; outGoogle.value = "";
ascBoxes.innerHTML = ""; ascBoxes.innerHTML = "";
btnCopyGoogle.disabled = true; btnCopyGoogle.disabled = true;
btnRefresh.disabled = true;
skippedLocalesEl.textContent = "Upload a CSV to see results."; skippedLocalesEl.textContent = "Upload a CSV to see results.";
clearPlayfab(); clearPlayfab();
clearAdcap(); clearAdcap();
@@ -985,7 +1053,6 @@
} }
window.__lastParsedPayload = { rowObj, headers, recordId }; window.__lastParsedPayload = { rowObj, headers, recordId };
btnRefresh.disabled = false;
flashUploadCard(); flashUploadCard();
__uploadCount += 1; __uploadCount += 1;
@@ -1046,11 +1113,6 @@
} }
}); });
btnRefresh.addEventListener("click", () => {
const payload = window.__lastParsedPayload;
if (!payload) return;
regenerateFromPayload(payload);
});
gameVersionInput.addEventListener("input", () => { gameVersionInput.addEventListener("input", () => {
const payload = window.__lastParsedPayload; const payload = window.__lastParsedPayload;