mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Fixed theme uploader UI bug
- added max height to theme uploader modal container to avoid long list of errors leaning out of screen - added shadow on top of footer to indicate long list of errors
This commit is contained in:
parent
0ff760ff96
commit
873472ab63
3 changed files with 19 additions and 5 deletions
|
@ -112,7 +112,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer {{if (and this.theme this.hasWarningsOrErrors) "top-shadow"}}">
|
||||
<div class="flex items-center justify-between {{if (or this.displayOverwriteWarning this.canActivateTheme this.validationErrors this.fatalValidationErrors) "flex-auto"}}">
|
||||
<button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-close-button>
|
||||
<span>{{#if this.theme}}Close{{else}}Cancel{{/if}}</span>
|
||||
|
|
|
@ -87,13 +87,15 @@
|
|||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.fullscreen-modal-body-scrolling .modal-footer {
|
||||
.fullscreen-modal-body-scrolling .modal-footer,
|
||||
.modal-footer.top-shadow {
|
||||
position: relative;
|
||||
margin: 20px -32px 0;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.fullscreen-modal-body-scrolling .modal-footer:before {
|
||||
.fullscreen-modal-body-scrolling .modal-footer:before,
|
||||
.modal-footer.top-shadow:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -20px;
|
||||
|
@ -104,6 +106,11 @@
|
|||
box-shadow: 0 -0.3px 1px rgb(0 0 0 / 3%), 0 -4px 7px rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
.modal-footer.top-shadow:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* The modal
|
||||
/* ---------------------------------------------------------- */
|
||||
|
@ -134,8 +141,8 @@
|
|||
|
||||
.modal-content .close {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 19px;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 9999;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
@ -981,6 +981,13 @@
|
|||
overflow-y: auto;
|
||||
margin: -32px -32px 0;
|
||||
padding: 32px 32px 0;
|
||||
max-height: calc(100vh - 20vw);
|
||||
}
|
||||
|
||||
@media (max-height: 960px) {
|
||||
.theme-validation-container {
|
||||
max-height: calc(100vh - 180px);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-validation-item {
|
||||
|
|
Loading…
Add table
Reference in a new issue