From 5271eabd979182d337c7f76b1bb4e708671954c1 Mon Sep 17 00:00:00 2001
From: Raphael Okon <raphael@okon.io>
Date: Fri, 24 Feb 2017 16:59:17 +0100
Subject: [PATCH] [BUGFIX] Fix CSS layout of cropper UI for Firefox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
The fix is to remove previously introduced CSS hacks
and provide a cleaner and leaner base
Resolves: #79998
Resolves: #79989
Releases: master
Change-Id: Ic63b3acaf46f50f92a3c44578c28748dfca74351
Reviewed-on: https://review.typo3.org/51842
Tested-by: Jasmina Ließmann <code@frauliessmann.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Jasmina Ließmann <code@frauliessmann.de>
Reviewed-by: Anders Kostending <aha@systime.dk>
Reviewed-by: Helmut Hummel <typo3@helhum.io>
Tested-by: Helmut Hummel <typo3@helhum.io>
---
.../Public/Less/TYPO3/_element_cropper.less | 18 +++----------
.../Public/Less/TYPO3/_element_modal.less | 11 +++++---
.../backend/Resources/Public/Css/backend.css | 26 +++++++------------
.../install/Resources/Public/Css/install.css | 2 +-
4 files changed, 22 insertions(+), 35 deletions(-)
diff --git a/Build/Resources/Public/Less/TYPO3/_element_cropper.less b/Build/Resources/Public/Less/TYPO3/_element_cropper.less
index 853a93bc30ed..5d945ebce348 100644
--- a/Build/Resources/Public/Less/TYPO3/_element_cropper.less
+++ b/Build/Resources/Public/Less/TYPO3/_element_cropper.less
@@ -55,6 +55,10 @@
outline: 1px dashed @color-orange;
}
+ .cropper-modal {
+ background-color: transparent;
+ }
+
.cropper-bg {
background-image: data-uri("../Images/cropper-background.png");
}
@@ -84,20 +88,6 @@
[aria-expanded=true] {
border-left: 2px solid @color-orange;
position: relative;
-
- &:before {
- position: absolute;
- left: -10px;
- top: 50%;
- margin-top: -10px;
- content: " ";
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 10px 10px 10px 0;
- border-color: transparent @color-orange transparent transparent;
- }
-
&[data-toggle=collapse] {
background-color: #333;
}
diff --git a/Build/Resources/Public/Less/TYPO3/_element_modal.less b/Build/Resources/Public/Less/TYPO3/_element_modal.less
index c0c20660b48a..f5ba154fd78a 100644
--- a/Build/Resources/Public/Less/TYPO3/_element_modal.less
+++ b/Build/Resources/Public/Less/TYPO3/_element_modal.less
@@ -105,7 +105,7 @@
height: 90vh;
.modal-panel {
display: flex;
- max-height: 80vh;
+ height: 80vh;
overflow: visible;
}
.modal-panel-body {
@@ -115,12 +115,14 @@
justify-content: center;
}
.modal-panel .modal-panel-body {
- max-height: 100%;
- width: 100% !important;
+ height: 100%;
+ width: 78% ;
+ float: none;
+ overflow: hidden
}
.modal-panel .modal-panel-sidebar {
- min-width: 300px;
+ width: 22%;
max-height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
@@ -128,6 +130,7 @@
.modal-panel .modal-panel-sidebar-right {
background-color: #212424;
+ float: none;
position: relative;
}
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 5464aa646324..25abc92a5159 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -9715,6 +9715,9 @@ iframe,
.cropper .cropper-view-box {
outline: 1px dashed #ff8700;
}
+.cropper .cropper-modal {
+ background-color: transparent;
+}
.cropper .cropper-bg {
background-image: url("../Images/cropper-background.png");
}
@@ -9740,18 +9743,6 @@ iframe,
border-left: 2px solid #ff8700;
position: relative;
}
-.cropper .panel-group [aria-expanded=true]:before {
- position: absolute;
- left: -10px;
- top: 50%;
- margin-top: -10px;
- content: " ";
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 10px 10px 10px 0;
- border-color: transparent #ff8700 transparent transparent;
-}
.cropper .panel-group [aria-expanded=true][data-toggle=collapse] {
background-color: #333;
}
@@ -10497,7 +10488,7 @@ div#contentMenu1 {
.modal-image-manipulation .modal-panel {
display: -ms-flexbox;
display: flex;
- max-height: 80vh;
+ height: 80vh;
overflow: visible;
}
.modal-image-manipulation .modal-panel-body {
@@ -10510,17 +10501,20 @@ div#contentMenu1 {
justify-content: center;
}
.modal-image-manipulation .modal-panel .modal-panel-body {
- max-height: 100%;
- width: 100% !important;
+ height: 100%;
+ width: 78% ;
+ float: none;
+ overflow: hidden;
}
.modal-image-manipulation .modal-panel .modal-panel-sidebar {
- min-width: 300px;
+ width: 22%;
max-height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.modal-image-manipulation .modal-panel .modal-panel-sidebar-right {
background-color: #212424;
+ float: none;
position: relative;
}
.modal-image-manipulation .modal-panel .modal-footer {
diff --git a/typo3/sysext/install/Resources/Public/Css/install.css b/typo3/sysext/install/Resources/Public/Css/install.css
index fb23cf71c77f..8df8dabc110b 100644
--- a/typo3/sysext/install/Resources/Public/Css/install.css
+++ b/typo3/sysext/install/Resources/Public/Css/install.css
@@ -5921,7 +5921,7 @@ a.thumbnail.active {
overflow: hidden;
height: 18px;
margin-bottom: 18px;
- background-color: #f5f5f5;
+ background-color: #dedede;
border-radius: 2px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
--
GitLab