mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
🐛 fix IE11 bugs and styles (#724)
closes https://github.com/TryGhost/Ghost/issues/8384 - fixes image uploads on settings/general by reverting to jQuery for triggering the file dialog because IE11 doesn't support `MouseEvent` events or have the `.closest` method on native DOM elements - gives all SVG elements an explicit `width` and `height` - if one property is set to `auto` or not specified IE11 will treat it as 100% of the container - fixes horizontal scroll + scrollbar on the main app viewport
This commit is contained in:
Kevin Ansfield
Katharina Irrgang
parent
b425cb1352
commit
2243c12aca
15 changed files with 27 additions and 27 deletions
|
|
@ -1,3 +1,4 @@
|
|||
import $ from 'jquery';
|
||||
import Controller from 'ember-controller';
|
||||
import computed from 'ember-computed';
|
||||
import injectService from 'ember-service/inject';
|
||||
|
|
@ -102,23 +103,18 @@ export default Controller.extend({
|
|||
* @param {MouseEvent} event - MouseEvent fired by the button click
|
||||
*/
|
||||
triggerFileDialog(event) {
|
||||
let fileInput = event.target
|
||||
let fileInput = $(event.target)
|
||||
.closest('.gh-setting')
|
||||
.querySelector('input[type="file"]');
|
||||
|
||||
if (fileInput) {
|
||||
let click = new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
.find('input[type="file"]');
|
||||
|
||||
if (fileInput.length > 0) {
|
||||
// reset file input value before clicking so that the same image
|
||||
// can be selected again
|
||||
fileInput.value = '';
|
||||
|
||||
// simulate click to open file dialog
|
||||
fileInput.dispatchEvent(click);
|
||||
// using jQuery because IE11 doesn't support MouseEvent
|
||||
$(fileInput).click();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -89,14 +89,14 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
width: 16px;
|
||||
height: auto;
|
||||
height: 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-content .close svg {
|
||||
fill: #808284;
|
||||
width: 16px;
|
||||
height: auto;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.modal-content .close svg:hover {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
.gh-notification-close svg {
|
||||
height: 7px;
|
||||
width: auto;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.gh-notification-close:hover {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.ember-power-select-trigger svg {
|
||||
height: 4px;
|
||||
width: auto;
|
||||
width: 4px;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.gh-publishmenu-trigger svg {
|
||||
height: 8px;
|
||||
width: auto;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.gh-publishmenu-trigger svg path {
|
||||
|
|
@ -190,6 +190,7 @@
|
|||
}
|
||||
|
||||
.gh-date-time-picker-date svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: color(var(--midgrey) l(+15%));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
|
||||
.settings-menu-header.subview .back svg {
|
||||
height: 14px;
|
||||
width: auto;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.settings-menu-header.subview .back svg path {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
.gh-image-uploader .image-cancel svg {
|
||||
fill: #fff;
|
||||
height: 13px;
|
||||
width: auto;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.gh-image-uploader .upload-form {
|
||||
|
|
|
|||
|
|
@ -38,9 +38,9 @@
|
|||
border-radius: 0;
|
||||
}
|
||||
.forgotten-link span {
|
||||
height: 24px;
|
||||
height: 20px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 24px;
|
||||
line-height: 20px;
|
||||
padding: 0 11px 0 12px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
.post-view-link svg {
|
||||
display: inline;
|
||||
height: 10px;
|
||||
width: auto;
|
||||
width: 10px;
|
||||
fill: var(--blue);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ body > .ember-view:not(.default-liquid-destination) {
|
|||
display: flex;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
/* prevent horizontal scroll in IE11 */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Flexbox fix. https://github.com/TryGhost/Ghost/issues/5804#issuecomment-141416812 */
|
||||
|
|
@ -540,6 +542,7 @@ body > .ember-view:not(.default-liquid-destination) {
|
|||
}
|
||||
|
||||
.gh-canvas-title svg {
|
||||
width: 0.6em;
|
||||
height: 0.6em;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
|
||||
.gh-blognav-grab svg {
|
||||
width: 16px;
|
||||
height: auto;
|
||||
height: 16px;
|
||||
fill: color(var(--midgrey) l(+15%));
|
||||
}
|
||||
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
.gh-blognav-delete svg {
|
||||
fill: color(var(--midgrey) l(+15%));
|
||||
height: 14px;
|
||||
width: auto;
|
||||
width: 14px;
|
||||
transition: fill 0.1s linear;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
.subscribers-table table .gh-btn svg {
|
||||
height: 13px;
|
||||
width: auto;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.subscribers-table table tr:hover .gh-btn {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
.user-actions-cog svg {
|
||||
height: 13px;
|
||||
width: auto;
|
||||
width: 13px;
|
||||
fill: var(--midgrey);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ input {
|
|||
left: 10px;
|
||||
z-index: 2;
|
||||
height: 14px;
|
||||
width: auto;
|
||||
width: 14px;
|
||||
fill: color(var(--midgrey) l(+15%));
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
|
|
@ -290,7 +290,7 @@ textarea {
|
|||
|
||||
.gh-select svg {
|
||||
height: 8px;
|
||||
width: auto;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1.2rem;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
right: 10px;
|
||||
margin-top: -0.9rem;
|
||||
height: 1.4rem;
|
||||
width: auto;
|
||||
width: 1.4rem;
|
||||
}
|
||||
|
||||
.nav-list-item svg path {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue