From 4b18dde625b24bd2f3d33f384564e4c39407b185 Mon Sep 17 00:00:00 2001 From: Pedro Pinto Silva Date: Tue, 29 Mar 2022 10:58:28 +0200 Subject: Improve edit button visibility when infobar, snackbar is present Before we were showing edit button only if the snackbar was not present in the DOM. The goal here was to avoid overlapping elements (bar + FAB). However and since the infobar can be present in the DOM but set to display none this would cause another problem: no edit button and no infobar visible to the user. Solution: - Make use of the existent css class .hidden (which sets it to display none) so we can then in the css side show the Edit FAB only after them snacbar is dismissed. Signed-off-by: Pedro Pinto Silva Change-Id: I31be2dfeb1bcb08b971074466a24db719320f8f4 --- browser/css/device-mobile.css | 2 +- browser/src/control/IFrameDialog.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css index 4b6a3ebbc2..f13087e3c4 100644 --- a/browser/css/device-mobile.css +++ b/browser/css/device-mobile.css @@ -916,6 +916,6 @@ div#fontstyletoolbox + div#style.mobile-wizard { height: 100%; } -.div-infobar-wrap ~ #mobile-edit-button { +.div-infobar-wrap:not(.hidden) ~ #mobile-edit-button { display: none; } diff --git a/browser/src/control/IFrameDialog.js b/browser/src/control/IFrameDialog.js index a573a809b6..44937c27a9 100644 --- a/browser/src/control/IFrameDialog.js +++ b/browser/src/control/IFrameDialog.js @@ -24,7 +24,7 @@ L.IFrameDialog = L.Class.extend({ this._container = L.DomUtil.create('div', this.options.prefix + '-wrap'); content = L.DomUtil.create('div', this.options.prefix + '-content', this._container); } - this._container.style.display = 'none'; + this._container.classList.add('hidden'); form = L.DomUtil.create('form', '', content); @@ -104,7 +104,7 @@ L.IFrameDialog = L.Class.extend({ }, show: function () { - this._container.style.display = ''; + this._container.classList.remove('hidden'); } }); -- cgit