UI improvements: added light gray background to top three regions and made Templates section foldable by clicking header
This commit is contained in:
@ -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
|
||||
|
Reference in New Issue
Block a user