diff --git a/app/static/app.css b/app/static/app.css index dcca5b5..6f5d4ea 100644 --- a/app/static/app.css +++ b/app/static/app.css @@ -5763,3 +5763,323 @@ table { stroke-linecap: round; stroke-linejoin: round; } + + + + +/* ===== line item queue styled like document review ===== */ +.queue-review-card { + padding: 1rem 1rem 0.95rem 1rem; + border-radius: 1.5rem; + box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06); +} + +.queue-review-card .topbar { + margin-bottom: 0.8rem !important; + align-items: flex-start; + gap: 0.75rem; +} + +.queue-review-meta { + font-size: 0.94rem; + color: #6b7280; + line-height: 1.25; + margin-bottom: 0.12rem; +} + +.queue-review-title { + margin: 0.1rem 0 0 0 !important; + font-size: 1.15rem; + line-height: 1.15; + font-weight: 700; +} + +.queue-review-raw { + margin-top: 0.18rem; + font-size: 0.96rem; + color: #8a8f98; + line-height: 1.2; +} + +.queue-review-badges { + gap: 0.45rem; + align-self: flex-start; +} + +.queue-review-badges .badge { + font-size: 0.84rem; + padding: 0.32rem 0.7rem; +} + +.queue-review-form-grid { + gap: 0.9rem; +} + +.queue-review-form-grid .form-field label { + font-size: 0.92rem; + margin-bottom: 0.35rem; + color: #4b5563; +} + +.queue-review-rating-input, +.queue-review-note-input { + border-radius: 1.1rem; +} + +.queue-review-rating-input { + min-height: 3rem; +} + +.queue-review-note-input { + min-height: 6.25rem; +} + +.queue-review-checkbox-row { + gap: 1rem; + align-items: center; + flex-wrap: wrap; +} + +.queue-review-checkbox-row label { + margin: 0; + font-size: 0.92rem; +} + +.queue-review-actions { + gap: 0.6rem; + align-items: center; + flex-wrap: wrap; +} + +.queue-review-actions .button-link, +.queue-review-actions button { + min-height: 2.65rem; + border-radius: 999px; +} + +.tab-panel[data-panel="queue"] > .card-title { + margin-bottom: 0.75rem; +} + +.tab-panel[data-panel="queue"] > .empty-state, +.tab-panel[data-panel="queue"] .empty-state { + margin-top: 0.25rem; +} + +@media (max-width: 900px) { + .queue-review-card { + padding: 0.95rem 0.95rem 0.9rem 0.95rem; + } + + .queue-review-card .topbar { + flex-direction: column; + align-items: flex-start; + gap: 0.55rem; + } + + .queue-review-title { + font-size: 1.08rem; + } + + .queue-review-badges { + width: 100%; + } + + .queue-review-rating-input { + min-height: 2.8rem; + } + + .queue-review-note-input { + min-height: 5.2rem; + } + + .queue-review-actions { + gap: 0.5rem; + } +} +/* ===== end line item queue styled like document review ===== */ + + + + +/* ===== line item queue header relayout ===== */ +.queue-review-card { + padding: 0.82rem; + border-radius: 1.35rem; +} + +.queue-review-header { + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: 0.58rem; + align-items: start; + margin-bottom: 0.58rem; +} + +.queue-review-title-block { + min-width: 0; +} + +.queue-review-meta { + font-size: 0.78rem; + color: #6b7280; + line-height: 1.08; + margin-bottom: 0.08rem; +} + +.queue-review-title { + margin: 0 !important; + font-size: 0.88rem; + line-height: 1.02; + font-weight: 700; +} + +.queue-review-raw { + margin-top: 0.12rem; + font-size: 0.78rem; + color: #8a8f98; + line-height: 1.08; +} + +.queue-review-flags { + display: flex; + flex-direction: column; + gap: 0.18rem; + align-self: start; + padding-top: 0; +} + +.queue-flag-row { + display: flex; + align-items: center; + gap: 0.28rem; + font-size: 0.76rem; + color: #4b5563; + white-space: nowrap; + margin: 0; + line-height: 1; +} + +.queue-flag-row input[type="checkbox"] { + width: 0.92rem; + height: 0.92rem; + margin: 0; +} + +.queue-review-badges { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 0.28rem; + align-self: start; +} + +.queue-review-badges .badge { + white-space: nowrap; + font-size: 0.74rem; + padding: 0.2rem 0.5rem; + line-height: 1.05; +} + +.queue-review-body { + display: grid; + gap: 0.52rem; +} + +.queue-review-body .form-field label { + font-size: 0.76rem; + margin-bottom: 0.14rem; + color: #6b7280; + line-height: 1.05; +} + +.queue-review-rating-input, +.queue-review-note-input { + border-radius: 0.92rem; + font-size: 0.82rem; +} + +.queue-review-rating-input { + min-height: 2.35rem; +} + +.queue-review-note-input { + min-height: 4.3rem; +} + +.queue-review-actions { + margin-top: 0.62rem; + gap: 0.42rem; + flex-wrap: wrap; +} + +.queue-review-actions .button-link, +.queue-review-actions button { + min-height: 2.18rem; + font-size: 0.82rem; + padding: 0.48rem 0.9rem; +} + +@media (max-width: 900px) { + .queue-review-card { + padding: 0.78rem; + border-radius: 1.2rem; + } + + .queue-review-header { + grid-template-columns: minmax(0, 1fr) auto auto; + gap: 0.46rem; + margin-bottom: 0.5rem; + } + + .queue-review-meta { + font-size: 0.74rem; + } + + .queue-review-title { + font-size: 0.84rem; + } + + .queue-review-raw { + font-size: 0.74rem; + } + + .queue-flag-row { + font-size: 0.72rem; + } + + .queue-flag-row input[type="checkbox"] { + width: 0.86rem; + height: 0.86rem; + } + + .queue-review-badges .badge { + font-size: 0.7rem; + padding: 0.18rem 0.45rem; + } + + .queue-review-body .form-field label { + font-size: 0.72rem; + } + + .queue-review-rating-input, + .queue-review-note-input { + font-size: 0.8rem; + } + + .queue-review-rating-input { + min-height: 2.2rem; + } + + .queue-review-note-input { + min-height: 3.9rem; + } + + .queue-review-actions .button-link, + .queue-review-actions button { + min-height: 2.05rem; + font-size: 0.8rem; + padding: 0.44rem 0.82rem; + } +} +/* ===== end line item queue header relayout ===== */ diff --git a/app/templates/base.html b/app/templates/base.html index f728337..320f3de 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -4,7 +4,7 @@