feat: refine mobile document detail controls
This commit is contained in:
parent
0400509b6e
commit
9c9f9fbe0b
|
|
@ -3718,3 +3718,504 @@ table {
|
|||
}
|
||||
}
|
||||
/* ===== end unified top card controls ===== */
|
||||
|
||||
|
||||
/* ===== flags + document type one row ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-doc-actions-row {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: end !important;
|
||||
gap: 0.10rem !important;
|
||||
width: 100% !important;
|
||||
overflow-x: auto !important;
|
||||
padding-bottom: 0.02rem !important;
|
||||
}
|
||||
|
||||
.unified-top-form {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: end !important;
|
||||
gap: 0.10rem !important;
|
||||
flex: 1 1 auto !important;
|
||||
min-width: max-content !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
flex: 1 1 13rem !important;
|
||||
min-width: 11rem !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap input {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.detail-check-inline {
|
||||
flex: 0 0 auto !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
white-space: nowrap !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.unified-flags-form {
|
||||
display: inline-flex !important;
|
||||
flex: 0 0 auto !important;
|
||||
align-items: end !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end flags + document type one row ===== */
|
||||
|
||||
|
||||
/* ===== stack approved/excluded ===== */
|
||||
@media (max-width: 900px) {
|
||||
.unified-top-form {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: end !important;
|
||||
gap: 0.10rem !important;
|
||||
min-width: max-content !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
flex: 1 1 12rem !important;
|
||||
min-width: 10.5rem !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1),
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form {
|
||||
align-items: end !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form::after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline {
|
||||
font-size: 0.70rem !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline input[type="checkbox"] {
|
||||
width: 0.88rem !important;
|
||||
height: 0.88rem !important;
|
||||
}
|
||||
|
||||
/* stack the two flags in a compact column */
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1),
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
margin-bottom: -0.10rem !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
margin-top: -0.10rem !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1),
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) span,
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) span {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* wrap only the two checks into a visual stacked column */
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
order: 2 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
order: 3 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form > button[type="submit"] {
|
||||
order: 4 !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
order: 1 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(10.5rem, 1fr) auto auto !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
column-gap: 0.10rem !important;
|
||||
row-gap: 0.04rem !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 1 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 2 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form > button[type="submit"] {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
align-self: center !important;
|
||||
}
|
||||
}
|
||||
/* ===== end stack approved/excluded ===== */
|
||||
|
||||
|
||||
/* ===== swap update and stacked flags ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-doc-type-form {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(10.5rem, 1fr) auto auto !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
column-gap: 0.10rem !important;
|
||||
row-gap: 0.04rem !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form > button[type="submit"] {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 1 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 2 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end swap update and stacked flags ===== */
|
||||
|
||||
|
||||
/* ===== top row alignment polish ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-doc-actions-row {
|
||||
align-items: start !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(11.5rem, 1fr) auto auto auto !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
column-gap: 0.12rem !important;
|
||||
row-gap: 0.06rem !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap label {
|
||||
margin-bottom: 0.08rem !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap input {
|
||||
height: 1.72rem !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form > button[type="submit"] {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
align-self: center !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 1 !important;
|
||||
align-self: end !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 2 !important;
|
||||
align-self: start !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-review-flags-form {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
align-self: center !important;
|
||||
margin-top: 1.02rem !important;
|
||||
margin-left: 0.04rem !important;
|
||||
}
|
||||
|
||||
.detail-review-flags-form button {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-check-inline {
|
||||
min-height: 0 !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.detail-check-inline span {
|
||||
display: inline-block !important;
|
||||
transform: translateY(-0.01rem) !important;
|
||||
}
|
||||
|
||||
.detail-check-inline input[type="checkbox"] {
|
||||
transform: translateY(0.01rem) !important;
|
||||
}
|
||||
}
|
||||
/* ===== end top row alignment polish ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
/* ===== align update with save flags ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-doc-type-form {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(11.5rem, 1fr) auto auto !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
column-gap: 0.12rem !important;
|
||||
row-gap: 0.06rem !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form > button[type="submit"] {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
align-self: center !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 1 !important;
|
||||
align-self: end !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 2 !important;
|
||||
align-self: start !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-review-flags-form {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
align-self: center !important;
|
||||
margin: 0 !important;
|
||||
padding-top: 1.02rem !important;
|
||||
}
|
||||
|
||||
.detail-review-flags-form button {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end align update with save flags ===== */
|
||||
|
||||
|
||||
/* ===== level update and save-flags buttons ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-doc-actions-row {
|
||||
align-items: start !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(11.5rem, 1fr) auto auto !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
column-gap: 0.12rem !important;
|
||||
row-gap: 0.02rem !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form > button[type="submit"] {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
align-self: center !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
transform: translateY(0.10rem) !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(1) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 1 !important;
|
||||
align-self: end !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form .detail-check-inline:nth-of-type(2) {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 2 !important;
|
||||
align-self: start !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-review-flags-form {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
align-self: start !important;
|
||||
margin: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
transform: translateY(1.12rem) !important;
|
||||
}
|
||||
|
||||
.detail-review-flags-form button {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end level update and save-flags buttons ===== */
|
||||
|
||||
|
||||
/* ===== save flags same grid as update ===== */
|
||||
@media (max-width: 900px) {
|
||||
.detail-doc-actions-row {
|
||||
display: block !important;
|
||||
margin-bottom: 0.10rem !important;
|
||||
}
|
||||
|
||||
.detail-doc-actions-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: minmax(11.5rem, 1fr) auto auto auto !important;
|
||||
grid-template-rows: auto auto !important;
|
||||
column-gap: 0.12rem !important;
|
||||
row-gap: 0.04rem !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.detail-doc-type-form {
|
||||
display: contents !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.detail-type-input-wrap input {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.detail-update-button {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
align-self: center !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-flags-stack {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.08rem !important;
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.detail-saveflags-button {
|
||||
grid-column: 4 !important;
|
||||
grid-row: 1 / span 2 !important;
|
||||
align-self: center !important;
|
||||
justify-self: start !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-review-flags-form {
|
||||
display: contents !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-check-inline {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.20rem !important;
|
||||
white-space: nowrap !important;
|
||||
font-size: 0.72rem !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.detail-check-inline input[type="checkbox"] {
|
||||
width: 0.92rem !important;
|
||||
height: 0.92rem !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
/* ===== end save flags same grid as update ===== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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=87">
|
||||
<link rel="stylesheet" href="/static/app.css?v=99">
|
||||
<link rel="stylesheet" href="/static/app-shell.css?v=66">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -47,8 +47,10 @@
|
|||
</div> <div class="card" style="margin-bottom: 0;">
|
||||
<div style="display:flex; flex-direction:column; gap:0.75rem;">
|
||||
|
||||
|
||||
<div class="detail-doc-actions-row">
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form unified-top-form">
|
||||
<div class="detail-doc-actions-grid">
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form">
|
||||
<div class="detail-type-input-wrap" style="position:relative;">
|
||||
<label for="document_type_input">Document type</label>
|
||||
<input
|
||||
|
|
@ -62,24 +64,26 @@
|
|||
>
|
||||
<div id="document-type-suggestions" style="display:none; position:absolute; top:100%; left:0; right:0; z-index:20; background:#fff; border:1px solid #d7dce5; border-radius:12px; margin-top:0.35rem; max-height:220px; overflow-y:auto; box-shadow:0 10px 24px rgba(15,23,42,0.10);"></div>
|
||||
</div>
|
||||
<button type="submit" class="top-pill-button detail-update-button" style="height:38px;">Update</button>
|
||||
</form>
|
||||
|
||||
<div class="detail-flags-stack">
|
||||
<label class="detail-check-label detail-check-inline">
|
||||
<input type="checkbox" name="is_approved" value="1" {% if review_state and review_state.is_approved %}checked{% endif %}>
|
||||
<input type="checkbox" form="save-review-flags-form" name="is_approved" value="1" {% if review_state and review_state.is_approved %}checked{% endif %}>
|
||||
<span>Approved</span>
|
||||
</label>
|
||||
|
||||
<label class="detail-check-label detail-check-inline">
|
||||
<input type="checkbox" name="is_excluded" value="1" {% if review_state and review_state.is_excluded %}checked{% endif %}>
|
||||
<input type="checkbox" form="save-review-flags-form" name="is_excluded" value="1" {% if review_state and review_state.is_excluded %}checked{% endif %}>
|
||||
<span>Excluded</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="top-pill-button">Update</button>
|
||||
</form>
|
||||
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form unified-flags-form">
|
||||
<button type="submit" class="top-pill-button">Save flags</button>
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form" id="save-review-flags-form">
|
||||
<button type="submit" class="top-pill-button detail-saveflags-button" style="height:38px;">Save flags</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form method="post" action="/documents/{{ document.document_id }}/save-pdf" class="detail-save-pdf-form" style="display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap; margin:0;">
|
||||
<div class="detail-path-row" style="display:flex; align-items:flex-end; gap:0.6rem; width:100%; flex-wrap:nowrap;">
|
||||
|
|
|
|||
Loading…
Reference in New Issue