mcelwain
/
document-processor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split layout review tools into two toolbar rows

This commit is contained in:
Sean McElwain 2026-05-28 21:37:14 -05:00
parent 40428a9976
commit b8a9a3f731
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/static/app.css
View File

@ -6282,3 +6282,29 @@ table {
width: 100% !important;
max-width: 100% !important;
}
/* Layout Review toolbar: split selection tools into two compact rows */
#layout-review-toolbar .word-ribbon-group:first-child {
gap: 0.35rem;
}
#layout-review-toolbar .layout-tool-row {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
align-items: center;
width: 100%;
}
#layout-review-toolbar .layout-tool-row .layout-tool-btn {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
}
@media (max-width: 760px) {
#layout-review-toolbar .layout-tool-row .layout-tool-btn {
padding-left: 0.55rem;
padding-right: 0.55rem;
}
}

14
app/templates/documents/detail.html
View File

@ -1904,17 +1904,19 @@ document.addEventListener("DOMContentLoaded", () => {
<div id="layout-review-toolbar" class="word-ribbon-toolbar">
<div class="word-ribbon-group">
<div class="word-ribbon-row">
<button type="button" class="layout-tool-btn active" id="layout-tool-select">Select</button>
<div class="word-ribbon-row layout-tool-row">
<button type="button" class="layout-tool-btn active" id="layout-tool-select">Select</button>
<button type="button" class="layout-tool-btn" id="layout-select-all">Select All</button>
<button type="button" class="layout-tool-btn" id="layout-multi-select">Multi</button>
<button type="button" class="layout-tool-btn" id="layout-clear-selection">Clear</button>
<button type="button" class="layout-tool-btn" id="layout-invert-selection">Invert</button>
</div>
<div class="word-ribbon-row layout-tool-row">
<button type="button" class="layout-tool-btn" id="layout-select-line">Line</button>
<button type="button" class="layout-tool-btn" id="layout-tool-pan">Pan</button>
<button type="button" class="layout-tool-btn" id="layout-tool-add">Add</button>
<button type="button" class="layout-tool-btn danger" id="layout-delete-word">Delete</button>
</div>
<button type="button" class="layout-tool-btn" id="layout-tool-pan">Pan</button>
<button type="button" class="layout-tool-btn" id="layout-tool-add">Add</button>
<button type="button" class="layout-tool-btn danger" id="layout-delete-word">Delete</button>
</div>
<div class="word-ribbon-label">Tools</div>
</div>