From 89c660cd2d68104a38d1d0e6911f8301cf5039fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sun, 9 Oct 2022 10:44:56 +0100
Subject: [PATCH] fix: mobile issue with panel split
---
examples/web/index.css | 26 +++++++++----------
.../components/panel-split/panel-split.css | 13 ++++++++++
2 files changed, 26 insertions(+), 13 deletions(-)
diff --git a/examples/web/index.css b/examples/web/index.css
index 4b0f9caf..fc4edd1e 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -385,6 +385,7 @@ p {
-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-khtml-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
+ margin-top: 30px;
max-width: 100%;
padding: 24px 24px 24px 24px;
text-align: left;
@@ -394,17 +395,17 @@ p {
-moz-transform: scale(0.96);
-khtml-transform: scale(0.96);
-webkit-transform: scale(0.96);
- margin-top: 30px;
transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
- -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -o-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -ms-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -moz-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -khtml-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 480px;
}
.modal-container.visible > .modal {
+ margin-top: 0px;
pointer-events: all;
transform: scale(1);
-o-transform: scale(1);
@@ -412,13 +413,12 @@ p {
-moz-transform: scale(1);
-khtml-transform: scale(1);
-webkit-transform: scale(1);
- margin-top: 0px;
transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
- -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
- -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);;
+ -o-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -ms-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -moz-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -khtml-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+ -webkit-transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), margin-top 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.modal-container > .modal .modal-top-buttons {
@@ -451,9 +451,9 @@ p {
}
.modal-container > .modal .modal-buttons > .button.simple {
+ display: inline-block;
margin-right: 12px;
min-width: 120px;
- display: inline-block;
}
.modal-container > .modal .modal-buttons > .button.simple:last-child {
diff --git a/examples/web/react/components/panel-split/panel-split.css b/examples/web/react/components/panel-split/panel-split.css
index 88edf704..8b927d8a 100644
--- a/examples/web/react/components/panel-split/panel-split.css
+++ b/examples/web/react/components/panel-split/panel-split.css
@@ -2,6 +2,12 @@
display: flex;
}
+@media only screen and (max-width: 1120px) {
+ .panel-split {
+ flex-direction: column;
+ }
+}
+
.panel-split > .side-left {
display: flex;
flex: 1 0;
@@ -15,3 +21,10 @@
min-width: 580px;
padding: 0px 24px 0px 24px;
}
+
+@media only screen and (max-width: 1120px) {
+ .panel-split > .side-right {
+ min-width: unset;
+ padding: 0px 0px 0px 0px;
+ }
+}
--
GitLab