[Libreoffice-commits] online.git: loleaflet/css

[Henry Castro (via logerrit)]

 loleaflet/css/loleaflet.css           |   52 ++++++++++++++++++++++++++++++++++
 loleaflet/css/partsPreviewControl.css |   23 ++++++++++++++-
 2 files changed, 74 insertions(+), 1 deletion(-)

New commits:
commit 35f2e56d82276dd4a890daa40a17d2a677537e4d
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Mon Nov 4 09:10:19 2019 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Mon Nov 4 22:26:31 2019 +0100

    loleaflet: mobile: apply CSS @media rule for portrait and landscape in
    
    Impress document
    
    When mobile device change orientation the client browser will apply the
    corresponding @media rule.
    
    Change-Id: I96b9d8fe7152833287de1be3a81d7423d22fc4c9
    Reviewed-on: https://gerrit.libreoffice.org/82014
    Reviewed-by: Henry Castro <hcastro at collabora.com>
    Tested-by: Henry Castro <hcastro at collabora.com>

diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index a60a97690..3ab5e2837 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -273,6 +273,58 @@ body {
 	}
 }
 
+ at media (max-width: 767px) and (orientation: portrait),(max-device-height: 767px) and (orientation: portrait) {
+	#presentation-controls-wrapper {
+		top: initial;
+		left: initial;
+		bottom: 33px;
+		position: fixed;
+		width: 100%;
+		max-width: initial;
+	}
+
+	#presentation-controls-wrapper.readonly {
+		top: initial;
+		bottom: 0px;
+		width: 100%;
+		position: fixed;
+	}
+
+	#document-container.readonly.parts-preview-document {
+		bottom: 65px;
+	}
+
+	#document-container.parts-preview-document {
+		left: 0px !important;
+		bottom: 95px;
+		width: 100%;
+	}
+}
+
+ at media (max-width: 767px) and (orientation: landscape),(max-device-height: 767px) and (orientation: landscape)  {
+	#document-container.parts-preview-document {
+		left: 66px !important;
+		bottom: 33px;
+	}
+
+	#document-container.readonly.parts-preview-document {
+		top: 41px;
+		bottom: 0px;
+		width: initial;
+	}
+
+	#presentation-controls-wrapper {
+		top: 41px;
+		bottom: 33px;
+	}
+
+	#presentation-controls-wrapper.readonly {
+		top: 41px;
+		bottom: 0px;
+		max-width: 120px;
+	}
+}
+
 .loleaflet-font {
 	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
 	font-size: 12px !important;
diff --git a/loleaflet/css/partsPreviewControl.css b/loleaflet/css/partsPreviewControl.css
index a27009a3d..19b3c3dcb 100644
--- a/loleaflet/css/partsPreviewControl.css
+++ b/loleaflet/css/partsPreviewControl.css
@@ -32,7 +32,11 @@
 	border: 2px solid #dfdfdf;
 	}
 
- at media (max-width: 767px),(max-device-height: 767px) {
+ at media (max-width: 767px) and (orientation: potrait),(max-device-height: 767px) and (orientation: portrait) {
+	#slide-sorter {
+		max-height: 60px;
+	}
+
 	.preview-img {
 		min-width: 60px;
 		max-width: 60px;
@@ -46,6 +50,23 @@
 	}
 }
 
+ at media (max-width: 767px) and (orientation: landscape),(max-device-height: 767px) and (orientation: landscape) {
+	#slide-sorter {
+		max-width: 120px;
+	}
+
+	.preview-img {
+		min-width: 60px;
+		max-width: 60px;
+	}
+
+	.preview-frame {
+		max-height: initial;
+		max-width: 66px;
+		display: block;
+	}
+}
+
 /* The current part the user is on. */
 .preview-img-currentpart {
     border-color: #000000;