Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Fixed theme uploader UI bug

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/modal-upload-theme.hbs
View file

@ -112,7 +112,7 @@
</div> </div>
</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"}}"> <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> <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-close-button>
<span>{{#if this.theme}}Close{{else}}Cancel{{/if}}</span> <span>{{#if this.theme}}Close{{else}}Cancel{{/if}}</span>

15
ghost/admin/app/styles/components/modals.css
View file

@ -87,13 +87,15 @@
padding: 0 32px; padding: 0 32px;
} }
.fullscreen-modal-body-scrolling .modal-footer { .fullscreen-modal-body-scrolling .modal-footer,
.modal-footer.top-shadow {
position: relative; position: relative;
margin: 20px -32px 0; margin: 20px -32px 0;
padding: 0 32px; padding: 0 32px;
} }
.fullscreen-modal-body-scrolling .modal-footer:before { .fullscreen-modal-body-scrolling .modal-footer:before,
.modal-footer.top-shadow:before {
position: absolute; position: absolute;
content: ""; content: "";
top: -20px; 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%); 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 /* The modal
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -134,8 +141,8 @@
.modal-content .close { .modal-content .close {
position: absolute; position: absolute;
top: 19px; top: 16px;
right: 19px; right: 16px;
z-index: 9999; z-index: 9999;
margin: 0; margin: 0;
padding: 0; padding: 0;

7
ghost/admin/app/styles/layouts/settings.css
View file

@ -981,6 +981,13 @@
overflow-y: auto; overflow-y: auto;
margin: -32px -32px 0; margin: -32px -32px 0;
padding: 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 { .theme-validation-item {