Fix alert message overlap upload form

Signed-off-by: Joe Ma <rikkaneko23@gmail.com>
This commit is contained in:
Joe Ma 2023-03-27 22:27:15 +08:00
parent ca47748164
commit 77060d5f20
No known key found for this signature in database
GPG key ID: 7A0ECF5F5EDC587F
2 changed files with 16 additions and 12 deletions

View file

@ -54,9 +54,9 @@ function validate_url(path) {
function show_pop_alert(message, alert_type = 'alert-primary', add_classes = null) { function show_pop_alert(message, alert_type = 'alert-primary', add_classes = null) {
remove_pop_alert(); remove_pop_alert();
$('.navbar').after(jQuery.parseHTML( $('#alert-container').prepend(jQuery.parseHTML(
`<div class="alert ${alert_type} alert-dismissible position-absolute fade show top-0 start-50 translate-middle-x" `<div class="alert ${alert_type} alert-dismissible position-absolute fade show top-0 start-50 translate-middle-x"
style="margin-top: 80px; max-width: 500px; width: 80%" id="pop_alert" role="alert"> \ style="margin-top: 30px; max-width: 500px; width: 80%" id="pop_alert" role="alert"> \
<div>${message}</div> \ <div>${message}</div> \
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> \ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> \
</div>`, </div>`,
@ -73,7 +73,7 @@ function remove_pop_alert() {
alert.remove(); alert.remove();
} }
function build_paste_modal(paste_info, show_qrcode = true, saved = true) { function build_paste_modal(paste_info, show_qrcode = true, saved = true, build_only = false) {
// Show saved modal // Show saved modal
if (!!!paste_info && !!!saved_modal) { if (!!!paste_info && !!!saved_modal) {
console.err('Invalid call to build_paste_modal().'); console.err('Invalid call to build_paste_modal().');
@ -107,7 +107,7 @@ function build_paste_modal(paste_info, show_qrcode = true, saved = true) {
}); });
let modal = new bootstrap.Modal(paste_modal.modal); let modal = new bootstrap.Modal(paste_modal.modal);
if (saved) saved_modal = modal; if (saved) saved_modal = modal;
modal.show(); if (!build_only) modal.show();
} }
$(function () { $(function () {

View file

@ -29,7 +29,7 @@
<link href="css/paste.css" rel="stylesheet"> <link href="css/paste.css" rel="stylesheet">
</head> </head>
<body> <body>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark" id="navbar">
<div class="container-fluid"> <div class="container-fluid">
<span class="navbar-brand">Paste</span> <span class="navbar-brand">Paste</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar_supported_content" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar_supported_content"
@ -58,8 +58,12 @@
</div> </div>
</nav> </nav>
<div class="d-flex align-items-center justify-content-center vh-100"> <div class="position-relative mb-2" id="alert-container">
<form class="container" style="max-width: 400px" id="upload_form">
</div>
<div class="d-flex justify-content-center vh-100" style="margin-top: 130px">
<form class="container" style="max-width: 400px;" id="upload_form">
<div class="mb-3"> <div class="mb-3">
<div><label class="form-label">Paste Type</label></div> <div><label class="form-label">Paste Type</label></div>
<div class="btn-group w-100" role="group" aria-label="Paste type group"> <div class="btn-group w-100" role="group" aria-label="Paste type group">
@ -152,7 +156,7 @@
</div> </div>
<div class="mb-3 text-end"> <div class="mb-3 text-end">
<button type="button" class="btn btn-secondary me-2" id="show_saved_button" disabled>Show saved</button> <button type="button" class="btn btn-secondary me-2" id="show_saved_button" disabled>Saved Paste</button>
<button type="button" class="btn btn-primary" id="upload_button">Upload</button> <button type="button" class="btn btn-primary" id="upload_button">Upload</button>
</div> </div>
@ -163,7 +167,7 @@
<div class="modal-dialog modal-dialog-scrollable"> <div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="tos_modal_label">Terms and conditions</h5> <h5 class="modal-title" id="tos_modal_label">Terms of service</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">