0
Fork 0
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:
Peter Zimon 2021-07-08 15:05:30 +02:00
parent 0ff760ff96
commit 873472ab63
3 changed files with 19 additions and 5 deletions

View file

@ -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>

View file

@ -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;

View file

@ -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 {