feat: polish mobile document detail actions

This commit is contained in:
Sean McElwain 2026-04-26 14:31:15 -05:00
parent bb68af783c
commit ddaa1007a8
3 changed files with 47 additions and 58 deletions

View File

@ -3488,26 +3488,7 @@ table {
align-items: center !important; align-items: center !important;
} }
.detail-sticky-header .queue-nav-row::before {
content: "Save Document";
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;
min-height: 1.50rem !important;
height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
white-space: nowrap !important;
border: 1px solid #d7dce5 !important;
background: #ffffff !important;
color: #1f2937 !important;
box-sizing: border-box !important;
order: -1 !important;
} }
}
/* ===== end save document into nav row ===== */ /* ===== end save document into nav row ===== */
@ -3666,21 +3647,6 @@ table {
.top-pill-button, .top-pill-button,
.detail-sticky-header .queue-nav-row .button-link, .detail-sticky-header .queue-nav-row .button-link,
.detail-trash-inline button, .detail-trash-inline button,
.detail-sticky-header .queue-nav-row::before {
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.50rem !important;
min-height: 1.50rem !important;
padding: 0 0.34rem !important;
border-radius: 999px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
.detail-save-pdf-form { .detail-save-pdf-form {
display: flex !important; display: flex !important;
flex-wrap: wrap !important; flex-wrap: wrap !important;
@ -4221,17 +4187,11 @@ table {
/* ===== save document far right ===== */
@media (max-width: 900px) {
.detail-sticky-header .queue-nav-row::before {
order: 99 !important;
margin-left: auto !important;
}
}
/* ===== end save document far right ===== */
/* ===== save button blue + nav row spacing ===== */
/* ===== real save button in queue row ===== */
@media (max-width: 900px) { @media (max-width: 900px) {
.detail-sticky-header .queue-nav-row { .detail-sticky-header .queue-nav-row {
display: flex !important; display: flex !important;
@ -4241,20 +4201,49 @@ table {
row-gap: 0.12rem !important; row-gap: 0.12rem !important;
} }
.detail-sticky-header .queue-nav-row .button-link, .detail-save-document-button {
.detail-trash-inline button {
margin: 0 !important;
}
.detail-sticky-header .queue-nav-row::before {
order: 99 !important;
margin-left: auto !important;
background: #2563eb !important; background: #2563eb !important;
color: #ffffff !important; color: #ffffff !important;
border-color: #2563eb !important; border-color: #2563eb !important;
box-shadow: none !important; box-shadow: none !important;
margin: 0 !important;
}
.detail-sticky-header .queue-nav-row .button-link,
.detail-trash-inline button,
.detail-save-document-button {
margin: 0 !important;
} }
} }
/* ===== end save button blue + nav row spacing ===== */ /* ===== end real save button in queue row ===== */
/* ===== center text inside top-row pills ===== */
@media (max-width: 900px) {
.detail-update-button,
.detail-saveflags-button,
#toggle-path-edit,
.detail-sticky-header button,
.detail-sticky-header .button-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
vertical-align: middle !important;
}
.detail-update-button,
.detail-saveflags-button,
#toggle-path-edit {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.detail-update-button span,
.detail-saveflags-button span,
#toggle-path-edit span {
display: inline-flex !important;
align-items: center !important;
}
}
/* ===== end center text inside top-row pills ===== */

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Document Processor{% endblock %}</title> <title>{% block title %}Document Processor{% endblock %}</title>
<link rel="stylesheet" href="/static/app.css?v=102"> <link rel="stylesheet" href="/static/app.css?v=110">
<link rel="stylesheet" href="/static/app-shell.css?v=66"> <link rel="stylesheet" href="/static/app-shell.css?v=66">
</head> </head>
<body> <body>

View File

@ -85,7 +85,7 @@
</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;"> <form method="post" action="/documents/{{ document.document_id }}/save-pdf" id="save-pdf-form" 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;"> <div class="detail-path-row" style="display:flex; align-items:flex-end; gap:0.6rem; width:100%; flex-wrap:nowrap;">
<div style="flex:1; min-width:260px;"> <div style="flex:1; min-width:260px;">
<label for="proposed_storage_path_input">Proposed path</label> <label for="proposed_storage_path_input">Proposed path</label>
@ -101,8 +101,7 @@
</div> </div>
<button type="button" id="toggle-path-edit" class="top-pill-button">Edit path</button> <button type="button" id="toggle-path-edit" class="top-pill-button">Edit path</button>
</div> </div>
<button type="submit" class="btn btn-primary top-pill-button">Save Document</button> </form>
</form>
</div> </div>
@ -118,6 +117,7 @@
<form method="post" action="/documents/{{ document.document_id }}/move-to-trash" class="detail-trash-form detail-trash-inline"> <form method="post" action="/documents/{{ document.document_id }}/move-to-trash" class="detail-trash-form detail-trash-inline">
<button class="danger" type="submit">Move to trash</button> <button class="danger" type="submit">Move to trash</button>
</form> </form>
<button type="submit" form="save-pdf-form" class="button-link primary detail-save-document-button">Save Document</button>
</div> </div>
</div> </div>
</div> </div>