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

Consolidated component headers

Browse Source
This commit is contained in:
Nathan Schneider
2025-05-07 21:48:48 -06:00
parent 5a4af2bf79
commit adf155e954
3 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/css/main.css
View File

@ -1079,7 +1079,7 @@ input:checked + .toggle-slider:before {
background-color: rgba(0, 0, 0, 0.02);
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-start;
/* Remove clickable appearance since components won't be collapsible */
cursor: default;
}
@ -1089,19 +1089,20 @@ input:checked + .toggle-slider:before {
}
.component-short-label {
font-size: 0.75rem;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent-color);
margin-bottom: 0.25rem;
font-weight: 500;
margin-bottom: 0.5rem;
font-weight: 600;
}
.component-header h3 {
font-size: 1.2rem;
margin: 0;
color: var(--dark-color);
font-weight: 600;
.component-description {
font-size: 0.8rem;
color: var(--medium-color);
margin-bottom: 0.5rem;
font-style: italic;
line-height: 1.2;
}
.component-body {

8
static/js/builder.js
View File

@ -111,15 +111,17 @@ document.addEventListener('DOMContentLoaded', function() {
padding-bottom: 0 !important;
}
.component-short-label { display: none !important; }
.component-short-label { display: block !important; }
.component-description { display: none !important; }
/* Improved typography for preview mode */
.component-header h3 {
font-size: 1.4rem !important;
.component-short-label {
font-size: 1.2rem !important;
margin-bottom: 1rem !important;
color: #000 !important;
border-bottom: 1px solid #eee !important;
padding-bottom: 0.5rem !important;
font-weight: 600 !important;
}
`;

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

@ -45,7 +45,7 @@
<div class="component-header">
<div class="component-title-wrapper">
<div class="component-short-label">{{ $componentId | humanize }}</div>
<h3>{{ .title }}</h3>
<div class="component-description">{{ .description }}</div>
</div>
</div>
<div class="component-body">
@ -207,7 +207,16 @@ document.addEventListener('DOMContentLoaded', function() {
background-color: transparent !important;
border-bottom: none !important;
}
.component-short-label { display: none !important; }
.component-short-label {
display: block !important;
font-size: 1.2rem !important;
margin-bottom: 1rem !important;
color: #000 !important;
border-bottom: 1px solid #eee !important;
padding-bottom: 0.5rem !important;
font-weight: 600 !important;
}
.component-description { display: none !important; }
`;
document.head.appendChild(style);