dispute-protocol/builder-prototype
2
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements: added light gray background to top three regions and made Templates section foldable by clicking header

Browse Source
This commit is contained in:
Nathan Schneider
2025-05-13 07:36:53 -06:00
parent 19636afed2
commit d5bf9cc4b4
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
themes/dispute-protocol-theme/layouts/_default/builder.html
View File

@@ -1,11 +1,20 @@
{{ define "main" }}
<style>
/* Direct inline style for gray backgrounds */
.protocol-metadata,
.protocol-template-selector,
.protocol-template-selector .stage-header,
.template-body {
background-color: #f5f5f5 !important;
}
</style>
<div class="builder-container">
<h1>{{ .Title }}</h1>
{{ .Content }}
<div id="protocol-builder" class="builder">
<div class="builder-main">
<div class="protocol-metadata">
<div class="protocol-metadata" style="background-color: #efefef !important;">
<div class="metadata-field">
<h2>Community Name</h2>
<input type="text" id="community-name" name="community-name" placeholder="Enter your community name...">
@@ -17,14 +26,14 @@
</div>
</div>
<div class="protocol-template-selector">
<div class="stage-header" id="template-header">
<div class="protocol-template-selector" style="background-color: #efefef !important;">
<div class="stage-header" style="background-color: #efefef !important;">
<div class="stage-header-content">
<h2>Select a Template</h2>
<h2>Templates</h2>
</div>
<button type="button" class="toggle-btn" aria-label="Toggle section" onclick="toggleTemplateSection(this)">+</button>
</div>
<div class="template-body" style="display: none;">
<div class="template-body" style="display: none; background-color: #efefef !important;">
<div class="template-options">
<div class="template-option" data-template-id="">
<button class="template-select-btn">Create Your Own Protocol</button>
@@ -174,15 +183,13 @@ function toggleTemplateSection(button) {
body.style.display = 'block';
button.textContent = '-';
}
// Prevent event from propagating
event.stopPropagation();
}
// Make headers also toggle sections
document.addEventListener('DOMContentLoaded', function() {
const headers = document.querySelectorAll('.stage-header-content');
headers.forEach(header => {
// Add click handler to all stage headers
const stageHeaders = document.querySelectorAll('.stage-section .stage-header-content');
stageHeaders.forEach(header => {
header.addEventListener('click', function() {
const stageHeader = this.closest('.stage-header');
const toggleButton = stageHeader.querySelector('.toggle-btn');
@@ -190,14 +197,16 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
// Make template header also toggle section
const templateHeader = document.querySelector('#template-header .stage-header-content');
// Add click handler to the template header
const templateHeader = document.querySelector('.protocol-template-selector .stage-header-content');
if (templateHeader) {
templateHeader.addEventListener('click', function() {
const header = this.closest('#template-header');
const toggleButton = header.querySelector('.toggle-btn');
const toggleButton = document.querySelector('.protocol-template-selector .toggle-btn');
toggleButton.click();
});
// Templates should be closed by default
// (No auto-opening code)
}
// Textarea auto-resizing is now handled by the script in head.html