feat: tighten mobile detail and metadata layouts
This commit is contained in:
parent
ddaa1007a8
commit
98acc6a59b
|
|
@ -4247,3 +4247,369 @@ table {
|
|||
}
|
||||
}
|
||||
/* ===== end center text inside top-row pills ===== */
|
||||
|
||||
|
||||
/* ===== tighten document type vs proposed path spacing ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-doc-actions-row {
|
||||
margin-bottom: 0.02rem !important;
|
||||
}
|
||||
|
||||
.detail-doc-actions-grid {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.detail-sticky-header > .card > div {
|
||||
gap: 0.22rem !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
align-self: end !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap label,
|
||||
.detail-sticky-header form[action$="/save-pdf"] label {
|
||||
margin-bottom: 0.08rem !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap input {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.detail-sticky-header form[action$="/save-pdf"] {
|
||||
margin-top: 0 !important;
|
||||
align-items: end !important;
|
||||
gap: 0.10rem !important;
|
||||
}
|
||||
|
||||
.detail-sticky-header form[action$="/save-pdf"] > div:first-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#proposed_storage_path_input {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end tighten document type vs proposed path spacing ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== lower document-type right controls slightly ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-update-button,
|
||||
.detail-flags-stack,
|
||||
.detail-saveflags-button {
|
||||
transform: translateY(0.30rem) !important;
|
||||
}
|
||||
|
||||
.detail-flags-stack {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
/* ===== end lower document-type right controls slightly ===== */
|
||||
|
||||
|
||||
/* ===== OCR status text matches field-label size ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] > p,
|
||||
.tab-panel[data-panel="ocr-review"] #line-warning,
|
||||
.tab-panel[data-panel="ocr-review"] #expected-lines,
|
||||
.tab-panel[data-panel="ocr-review"] #actual-lines {
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end OCR status text matches field-label size ===== */
|
||||
|
||||
|
||||
/* ===== OCR label + warning one line same size ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
|
||||
display: block !important;
|
||||
white-space: nowrap !important;
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1.25 !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] #line-warning {
|
||||
display: inline !important;
|
||||
font-size: inherit !important;
|
||||
line-height: inherit !important;
|
||||
white-space: nowrap !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
/* ===== end OCR label + warning one line same size ===== */
|
||||
|
||||
|
||||
/* ===== OCR current-version line one-row ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] > p:first-of-type {
|
||||
font-size: 0.76rem !important;
|
||||
line-height: 1.15 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
}
|
||||
/* ===== end OCR current-version line one-row ===== */
|
||||
|
||||
|
||||
/* ===== OCR meta block uniform small text ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] > p:first-of-type,
|
||||
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
|
||||
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
|
||||
font-size: 0.76rem !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
|
||||
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
|
||||
margin-top: 0.18rem !important;
|
||||
margin-bottom: 0.18rem !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2) {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
|
||||
display: block !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] #expected-lines,
|
||||
.tab-panel[data-panel="ocr-review"] #actual-lines,
|
||||
.tab-panel[data-panel="ocr-review"] #line-warning {
|
||||
font-size: inherit !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
}
|
||||
/* ===== end OCR meta block uniform small text ===== */
|
||||
|
||||
|
||||
/* ===== tighten OCR meta line spacing ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] > p:first-of-type,
|
||||
.tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
|
||||
.tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
|
||||
margin-top: 0.06rem !important;
|
||||
margin-bottom: 0.06rem !important;
|
||||
line-height: 1.05 !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] > h2.card-title {
|
||||
margin-bottom: 0.18rem !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] form[action$="/rerun-ocr"] {
|
||||
margin: 0.28rem 0 !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] .form-field.full:first-of-type {
|
||||
margin-top: 0.18rem !important;
|
||||
}
|
||||
}
|
||||
/* ===== end tighten OCR meta line spacing ===== */
|
||||
|
||||
|
||||
/* ===== rerun OCR inline with Reviewed OCR title ===== */
|
||||
@media (max-width: 900px) {
|
||||
.ocr-review-header-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 0.4rem !important;
|
||||
margin-bottom: 0.18rem !important;
|
||||
}
|
||||
|
||||
.ocr-review-header-row .card-title {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.ocr-rerun-inline-form {
|
||||
margin: 0 !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
.ocr-rerun-inline-form .button-row {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.ocr-rerun-inline-form button {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 0.72rem !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 500 !important;
|
||||
height: 1.5rem !important;
|
||||
min-height: 1.5rem !important;
|
||||
padding: 0 0.34rem !important;
|
||||
border-radius: 999px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end rerun OCR inline with Reviewed OCR title ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== Reviewed OCR title + rerun button clean one-row layout ===== */
|
||||
@media (max-width: 900px) {
|
||||
.ocr-review-header-row {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(0, 1fr) auto !important;
|
||||
align-items: center !important;
|
||||
column-gap: 0.35rem !important;
|
||||
margin-bottom: 0.18rem !important;
|
||||
}
|
||||
|
||||
.ocr-review-header-row .card-title {
|
||||
margin: 0 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
word-break: normal !important;
|
||||
overflow-wrap: normal !important;
|
||||
min-width: 0 !important;
|
||||
font-size: 0.98rem !important;
|
||||
line-height: 1.05 !important;
|
||||
}
|
||||
|
||||
.ocr-rerun-inline-form {
|
||||
margin: 0 !important;
|
||||
justify-self: end !important;
|
||||
}
|
||||
|
||||
.ocr-rerun-inline-form button {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
white-space: nowrap !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end Reviewed OCR title + rerun button clean one-row layout ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== tighten OCR editor spacing v2 ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] .form-field.full {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0.2rem !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] .form-field.full label[for="reviewed_text"] {
|
||||
display: block !important;
|
||||
margin: 0 0 0.02rem 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] .editor-wrap {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] .line-numbers,
|
||||
.tab-panel[data-panel="ocr-review"] #reviewed_text {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end tighten OCR editor spacing v2 ===== */
|
||||
|
||||
|
||||
/* ===== reduce OCR line-number gutter ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] .editor-wrap {
|
||||
grid-template-columns: 2.1rem minmax(0, 1fr) !important;
|
||||
column-gap: 0 !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="ocr-review"] .line-numbers {
|
||||
width: 2.1rem !important;
|
||||
min-width: 2.1rem !important;
|
||||
padding-left: 0.18rem !important;
|
||||
padding-right: 0.22rem !important;
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
/* ===== end reduce OCR line-number gutter ===== */
|
||||
|
||||
|
||||
/* ===== slightly reduce OCR editor text size ===== */
|
||||
@media (max-width: 900px) {
|
||||
.tab-panel[data-panel="ocr-review"] #reviewed_text,
|
||||
.tab-panel[data-panel="ocr-review"] .line-numbers {
|
||||
font-size: 0.88rem !important;
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end slightly reduce OCR editor text size ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== tighten metadata panel on mobile (real classes) ===== */
|
||||
@media (max-width: 900px) {
|
||||
.meta-grid {
|
||||
gap: 0.38rem !important;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
padding: 0.45rem 0.55rem !important;
|
||||
border-radius: 0.9rem !important;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 0.72rem !important;
|
||||
line-height: 1.1 !important;
|
||||
margin-bottom: 0.16rem !important;
|
||||
}
|
||||
|
||||
.meta-item,
|
||||
.meta-item div,
|
||||
.meta-item span:not(.meta-label) {
|
||||
font-size: 0.78rem !important;
|
||||
line-height: 1.22 !important;
|
||||
}
|
||||
|
||||
.meta-grid + .card-title,
|
||||
.tab-panel[data-panel="source-options"] .card-title,
|
||||
.tab-panel[data-panel="source-options"] h2.card-title {
|
||||
margin-bottom: 0.35rem !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="source-options"] .card[style*="padding:1rem"] {
|
||||
padding: 0.7rem !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="source-options"] form[style*="gap:1rem"] {
|
||||
gap: 0.55rem !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="source-options"] h3 {
|
||||
font-size: 0.88rem !important;
|
||||
line-height: 1.1 !important;
|
||||
margin-bottom: 0.35rem !important;
|
||||
}
|
||||
|
||||
.tab-panel[data-panel="source-options"] label[style*="display:flex"] {
|
||||
font-size: 0.76rem !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end tighten metadata panel on mobile (real classes) ===== */
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Document Processor{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/app.css?v=110">
|
||||
<link rel="stylesheet" href="/static/app.css?v=131">
|
||||
<link rel="stylesheet" href="/static/app-shell.css?v=66">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -169,13 +169,12 @@
|
|||
</div>
|
||||
|
||||
<div class="tab-panel{% if active_tab == 'ocr-review' %} active{% endif %}" data-panel="ocr-review">
|
||||
<div class="ocr-review-header-row">
|
||||
<h2 class="card-title">Reviewed OCR</h2>
|
||||
|
||||
<form method="post" action="/documents/{{ document.document_id }}/rerun-ocr" style="margin: 0.75rem 0;">
|
||||
<div class="button-row">
|
||||
<form method="post" action="/documents/{{ document.document_id }}/rerun-ocr" class="ocr-rerun-inline-form">
|
||||
<button type="submit">Rerun OCR</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% if current_text_version %}
|
||||
<p>Current OCR version: v{{ current_text_version.version_number }} — {{ current_text_version.version_type }} — {{ current_text_version.created_at }}</p>
|
||||
{% else %}
|
||||
|
|
@ -183,16 +182,16 @@
|
|||
{% endif %}
|
||||
|
||||
<p>
|
||||
Expected OCR lines: <span id="expected-lines">{{ expected_line_count }}</span><br>
|
||||
Current editor lines: <span id="actual-lines">{{ actual_line_count }}</span><br>
|
||||
<span id="line-warning" class="line-warning" {% if expected_line_count == actual_line_count %}style="display:none;"{% endif %}>
|
||||
Line count mismatch may affect corrected PDF layout.
|
||||
</span>
|
||||
Expected OCR lines: <span id="expected-lines">{{ expected_line_count }}</span>
|
||||
|
|
||||
Current editor lines: <span id="actual-lines">{{ actual_line_count }}</span>
|
||||
</p>
|
||||
|
||||
<form method="post" action="/documents/{{ document.document_id }}/review-text">
|
||||
<div class="form-field full">
|
||||
<label for="reviewed_text">Edit reviewed OCR text (one line per OCR line)</label>
|
||||
<label for="reviewed_text">
|
||||
Review OCR text (1 line each; mismatch affects PDF)
|
||||
</label>
|
||||
<div class="editor-wrap">
|
||||
<pre class="line-numbers" id="line-numbers">{% for n in line_numbers %}{{ n }}
|
||||
{% endfor %}</pre>
|
||||
|
|
|
|||
Loading…
Reference in New Issue