mirror of
https://github.com/donlon/cloudflare-error-page.git
synced 2025-12-31 04:36:39 +00:00
editor/web: support responsive save as dialog
This commit is contained in:
Anthony Donlon
@@ -148,6 +148,75 @@
|
||||
--bs-popover-body-padding-x: 0.7rem !important;
|
||||
--bs-popover-body-padding-y: 0.5rem !important;
|
||||
}
|
||||
|
||||
.save-as-dialog__container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"selector"
|
||||
"code"
|
||||
"buttons";
|
||||
height: fit-content;
|
||||
grid-template-columns: auto;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.save-as-dialog__selector {
|
||||
grid-area: selector;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.save-as-dialog__code {
|
||||
grid-area: code;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 700px !important;
|
||||
font-family: monospace;
|
||||
font-size: 0.8em !important;
|
||||
}
|
||||
|
||||
.save-as-dialog__buttons {
|
||||
grid-area: buttons;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.save-as-dialog__buttons>* {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.save-as-dialog__container {
|
||||
grid-template-areas:
|
||||
"selector code"
|
||||
"buttons code";
|
||||
grid-template-columns: auto 2fr;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.save-as-dialog__selector {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.save-as-dialog__code {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.save-as-dialog__buttons {
|
||||
grid-area: buttons;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.save-as-dialog__buttons>* {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.save-as-dialog__selector {
|
||||
grid-area: selector;
|
||||
min-width: 13em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -408,7 +477,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="button" id="btnShare" class="btn btn-sm btn-primary">Create shareable link</button>
|
||||
<button type="button" id="btnShare" class="btn btn-sm btn-secondary">Create shareable link</button>
|
||||
<div class="mt-2">
|
||||
<div class="input-group input-group-sm">
|
||||
<input id="shareLink" class="form-control" readonly />
|
||||
@@ -443,51 +512,38 @@
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="saveAsDialog" tabindex="-1" aria-labelledby="saveAsDialogLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-fullscreen-lg-down">
|
||||
<!-- <div class="modal-dialog modal-lg modal-dialog-centered"> -->
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal fade" id="saveAsDialog" tabindex="-1" aria-labelledby="saveAsDialogLabel">
|
||||
<div class="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-scrollable">
|
||||
<div class="modal-content h-100">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="saveAsDialogLabel">Save As ...</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<div class="row g-3">
|
||||
<!-- Left: List Group -->
|
||||
<div class="col-3 d-flex flex-column" style="justify-content: space-between;">
|
||||
<div id="saveAsDialogTypes" class="list-group" style="text-align: right;">
|
||||
<button type="button" data-type="json" class="list-group-item list-group-item-action active">
|
||||
JSON
|
||||
</button>
|
||||
<button type="button" data-type="python" class="list-group-item list-group-item-action">
|
||||
Python Example
|
||||
</button>
|
||||
<button type="button" data-type="js" class="list-group-item list-group-item-action">
|
||||
NodeJS Example
|
||||
</button>
|
||||
</div>
|
||||
<!-- Bottom Buttons -->
|
||||
<div class="d-flex flex-column justify-content-end gap-1">
|
||||
<button type="button" class="btn btn-success" id="saveAsDialogCopyBtn" data-bs-toggle="popover"
|
||||
data-bs-placement="right" data-bs-trigger="manual" data-bs-content="Copied">
|
||||
Copy
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="saveAsDialogSaveBtn">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Main Content -->
|
||||
<div class="col-9">
|
||||
<textarea id="saveAsDialogCode" class="form-control" spellcheck="false"
|
||||
style="font-family: monospace; min-height: 500px; height: 100%; font-size: 0.8em;"
|
||||
readonly></textarea>
|
||||
</div>
|
||||
<div class="mx-2 save-as-dialog__container">
|
||||
<div id="saveAsDialogTypes" class="list-group save-as-dialog__selector">
|
||||
<button type="button" data-type="json" class="list-group-item list-group-item-action active">
|
||||
JSON
|
||||
</button>
|
||||
<button type="button" data-type="python" class="list-group-item list-group-item-action">
|
||||
Python Example
|
||||
</button>
|
||||
<button type="button" data-type="js" class="list-group-item list-group-item-action">
|
||||
NodeJS Example
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex gap-1 save-as-dialog__buttons">
|
||||
<button type="button" class="btn btn-success" id="saveAsDialogCopyBtn" data-bs-toggle="popover"
|
||||
data-bs-placement="right" data-bs-trigger="manual" data-bs-content="Copied">
|
||||
Copy
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="saveAsDialogSaveBtn">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
<textarea id="saveAsDialogCode" class="form-control save-as-dialog__code" spellcheck="false"
|
||||
readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user