From 43a18115ba12b825295b6f363cb1fe9a2b44dc2f Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 1 Jun 2017 22:02:03 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20IE11=20bugs=20and=20styles?= =?UTF-8?q?=20(#724)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/controllers/settings/general.js | 16 ++++++---------- app/styles/components/modals.css | 4 ++-- app/styles/components/notifications.css | 2 +- app/styles/components/power-select.css | 2 +- app/styles/components/publishmenu.css | 3 ++- app/styles/components/settings-menu.css | 2 +- app/styles/components/uploader.css | 2 +- app/styles/layouts/auth.css | 4 ++-- app/styles/layouts/editor.css | 2 +- app/styles/layouts/main.css | 3 +++ app/styles/layouts/settings.css | 4 ++-- app/styles/layouts/subscribers.css | 2 +- app/styles/layouts/user.css | 2 +- app/styles/patterns/forms.css | 4 ++-- app/styles/patterns/navlist.css | 2 +- 15 files changed, 27 insertions(+), 27 deletions(-) diff --git a/app/controllers/settings/general.js b/app/controllers/settings/general.js index 0764acf7b2..49f351b4ae 100644 --- a/app/controllers/settings/general.js +++ b/app/controllers/settings/general.js @@ -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(); } }, diff --git a/app/styles/components/modals.css b/app/styles/components/modals.css index 0384c41cf4..207d174ce5 100644 --- a/app/styles/components/modals.css +++ b/app/styles/components/modals.css @@ -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 { diff --git a/app/styles/components/notifications.css b/app/styles/components/notifications.css index f60317be81..e0b17d05dc 100644 --- a/app/styles/components/notifications.css +++ b/app/styles/components/notifications.css @@ -60,7 +60,7 @@ .gh-notification-close svg { height: 7px; - width: auto; + width: 7px; } .gh-notification-close:hover { diff --git a/app/styles/components/power-select.css b/app/styles/components/power-select.css index 8158c58b15..047963f384 100644 --- a/app/styles/components/power-select.css +++ b/app/styles/components/power-select.css @@ -6,7 +6,7 @@ .ember-power-select-trigger svg { height: 4px; - width: auto; + width: 4px; margin-left: 2px; vertical-align: middle; } diff --git a/app/styles/components/publishmenu.css b/app/styles/components/publishmenu.css index 1ba22cd9fb..3549b0df30 100644 --- a/app/styles/components/publishmenu.css +++ b/app/styles/components/publishmenu.css @@ -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%)); } diff --git a/app/styles/components/settings-menu.css b/app/styles/components/settings-menu.css index 451d40924a..703ac488c9 100644 --- a/app/styles/components/settings-menu.css +++ b/app/styles/components/settings-menu.css @@ -97,7 +97,7 @@ .settings-menu-header.subview .back svg { height: 14px; - width: auto; + width: 14px; } .settings-menu-header.subview .back svg path { diff --git a/app/styles/components/uploader.css b/app/styles/components/uploader.css index 43b038fce6..6f314b8078 100644 --- a/app/styles/components/uploader.css +++ b/app/styles/components/uploader.css @@ -55,7 +55,7 @@ .gh-image-uploader .image-cancel svg { fill: #fff; height: 13px; - width: auto; + width: 13px; } .gh-image-uploader .upload-form { diff --git a/app/styles/layouts/auth.css b/app/styles/layouts/auth.css index 47bf4c2a9d..36c386825c 100644 --- a/app/styles/layouts/auth.css +++ b/app/styles/layouts/auth.css @@ -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; } diff --git a/app/styles/layouts/editor.css b/app/styles/layouts/editor.css index 1585ef34bc..40629afaca 100644 --- a/app/styles/layouts/editor.css +++ b/app/styles/layouts/editor.css @@ -98,7 +98,7 @@ .post-view-link svg { display: inline; height: 10px; - width: auto; + width: 10px; fill: var(--blue); } diff --git a/app/styles/layouts/main.css b/app/styles/layouts/main.css index 3b34ed6b9f..d8b9ccdeee 100644 --- a/app/styles/layouts/main.css +++ b/app/styles/layouts/main.css @@ -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; } diff --git a/app/styles/layouts/settings.css b/app/styles/layouts/settings.css index 45c1366717..a44b741557 100644 --- a/app/styles/layouts/settings.css +++ b/app/styles/layouts/settings.css @@ -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; } diff --git a/app/styles/layouts/subscribers.css b/app/styles/layouts/subscribers.css index bbe5a098fb..7b4617daa6 100644 --- a/app/styles/layouts/subscribers.css +++ b/app/styles/layouts/subscribers.css @@ -35,7 +35,7 @@ .subscribers-table table .gh-btn svg { height: 13px; - width: auto; + width: 13px; } .subscribers-table table tr:hover .gh-btn { diff --git a/app/styles/layouts/user.css b/app/styles/layouts/user.css index 2cc69abcd5..b1311f3612 100644 --- a/app/styles/layouts/user.css +++ b/app/styles/layouts/user.css @@ -11,7 +11,7 @@ .user-actions-cog svg { height: 13px; - width: auto; + width: 13px; fill: var(--midgrey); margin-right: 0; } diff --git a/app/styles/patterns/forms.css b/app/styles/patterns/forms.css index d77de9b2cf..16012620b5 100644 --- a/app/styles/patterns/forms.css +++ b/app/styles/patterns/forms.css @@ -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; diff --git a/app/styles/patterns/navlist.css b/app/styles/patterns/navlist.css index a6b909e483..052a0bad22 100644 --- a/app/styles/patterns/navlist.css +++ b/app/styles/patterns/navlist.css @@ -69,7 +69,7 @@ right: 10px; margin-top: -0.9rem; height: 1.4rem; - width: auto; + width: 1.4rem; } .nav-list-item svg path {