Update paste modal sizing and scrolling

Signed-off-by: Joe Ma <rikkaneko23@gmail.com>
This commit is contained in:
Joe Ma 2024-02-04 22:46:11 +08:00
parent 2d2cb5e804
commit c5569ea30f
No known key found for this signature in database
GPG key ID: 7A0ECF5F5EDC587F
3 changed files with 24 additions and 11 deletions

View file

@ -217,10 +217,10 @@
</button> </button>
</div> </div>
<img src="" class="mb-3 rounded mx-auto d-block w-75" alt="" id="paste_qrcode" style="max-width: 280px"> <img src="" class="mb-3 rounded mx-auto d-block w-75" alt="" id="paste_qrcode" style="max-width: 280px">
<div class="mb-3 w-75 mx-auto"> <div class="mb-3 mx-auto">
<table class="table table-striped table-bordered align-middle caption-top"> <table class="table table-striped table-bordered align-middle caption-top mx-auto" style="max-width: 280px;">
<caption>Paste information</caption> <caption>Paste information</caption>
<tbody> <tbody id="paste_info_table">
<tr> <tr>
<td class="text-center col-3 text-nowrap">Paste ID</td> <td class="text-center col-3 text-nowrap">Paste ID</td>
<td class="text-center col-6" id="paste_info_uuid">-</td> <td class="text-center col-6" id="paste_info_uuid">-</td>
@ -247,11 +247,11 @@
</tr> </tr>
<tr> <tr>
<td class="text-center col-3 text-nowrap">Created</td> <td class="text-center col-3 text-nowrap">Created</td>
<td class="text-center col-6 text-nowrap" id="paste_info_created">-</td> <td class="text-center col-6 text-nowrap text-truncate" id="paste_info_created">-</td>
</tr> </tr>
<tr> <tr>
<td class="text-center col-3 text-nowrap">Expired</td> <td class="text-center col-3 text-nowrap">Expired</td>
<td class="text-center col-6 text-nowrap" id="paste_info_expired">-</td> <td class="text-center col-6 text-nowrap text-truncate" id="paste_info_expired">-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View file

@ -23,3 +23,19 @@
.card-header .collapsed .fa-chevron-down { .card-header .collapsed .fa-chevron-down {
transform: rotate(90deg); transform: rotate(90deg);
} }
#paste_info_table td.col-6 {
max-width: 200px;
}
#paste_info_title {
overflow: scroll;
white-space: nowrap;
scrollbar-width: none; /* Firefox */
}
#paste_info_title::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent;
}

View file

@ -113,6 +113,7 @@ function build_paste_modal(paste_info, show_qrcode = true, saved = true, build_o
let modal = new bootstrap.Modal(paste_modal.modal); let modal = new bootstrap.Modal(paste_modal.modal);
if (!build_only) modal.show(); if (!build_only) modal.show();
$('.modal-body').scrollTop('0');
} }
/** /**
@ -376,7 +377,7 @@ $(function () {
} }
try { try {
const res = await fetch(`${ENDPOINT}/${uuid}/settings?${new URLSearchParams({ json: '1' })}`); const res = await fetch(`https://pb.nekoid.cc/${uuid}/settings?${new URLSearchParams({ json: '1' })}`);
if (res.ok) { if (res.ok) {
const paste_info = await res.json(); const paste_info = await res.json();
build_paste_modal(paste_info, show_qrcode, false); build_paste_modal(paste_info, show_qrcode, false);
@ -401,11 +402,7 @@ $(function () {
paste_modal.id_copy_btn.removeClass('btn-primary'); paste_modal.id_copy_btn.removeClass('btn-primary');
paste_modal.id_copy_btn.addClass('btn-success'); paste_modal.id_copy_btn.addClass('btn-success');
tooltip.setContent({ '.tooltip-inner': 'Copied' }); tooltip.setContent({ '.tooltip-inner': 'Copied' });
} catch (err) { } catch (err) {}
tooltip.setContent({ '.tooltip-inner': 'Copied failed' });
}
} else {
tooltip.setContent({ '.tooltip-inner': 'Copied failed' });
} }
}); });