[Libreoffice-commits] online.git: loleaflet/css loleaflet/src
Jan Holesovsky (via logerrit)
logerrit at kemper.freedesktop.org
Thu Apr 2 11:02:14 UTC 2020
loleaflet/css/device-mobile.css | 130 ++++++++++++++++++++++++++
loleaflet/css/loleaflet.css | 132 ---------------------------
loleaflet/src/layer/tile/ImpressTileLayer.js | 17 +++
3 files changed, 146 insertions(+), 133 deletions(-)
New commits:
commit ef1a14e175c526865cc3b07fc82fdda5143c2b5d
Author: Jan Holesovsky <kendy at collabora.com>
AuthorDate: Thu Apr 2 11:02:47 2020 +0200
Commit: Jan Holesovsky <kendy at collabora.com>
CommitDate: Thu Apr 2 13:01:57 2020 +0200
mobile: Move the slidesorter handling to device-mobile.css.
Don't use @media for portrait / landscape handling either.
Change-Id: I5a67488e862b59878284bbc5d0ef067a1ff7f60a
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91559
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
Reviewed-by: Jan Holesovsky <kendy at collabora.com>
diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index 5b1143739..e642080f1 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -519,3 +519,133 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button div.w2ui-icon, td[id
flex-direction: row;
align-items: center;
}
+
+/* Related to slidesorter */
+/* Show slidesorter beyond 768px only */
+#presentation-controls-wrapper {
+ top: initial;
+ left: initial;
+ bottom: 33px;
+ max-width: initial;
+}
+
+#presentation-controls-wrapper.readonly {
+ top: initial;
+ bottom: 0px;
+}
+
+/* Show sidebar beyond 768px only */
+#sidebar-dock-wrapper {
+ display: none;
+ top: 41px;
+}
+
+#document-container.sidebar-document {
+ left: 0px !important;
+}
+
+#document-container.readonly {
+ top: 37px; /*set equal to toolbar up's height*/
+ bottom: 0px;
+}
+
+#document-container.readonly.parts-preview-document {
+ bottom: 65px;
+}
+
+#document-container.readonly.spreadsheet-document {
+ top: 61px !important;
+ bottom: 42px;
+}
+
+#document-container.parts-preview-document {
+ left: 0px !important;
+ bottom: 95px;
+}
+
+#document-container.spreadsheet-document {
+ top: 92px !important;
+ bottom: 68px;
+}
+
+#document-container {
+ top: 37px; /*set equal to toolbar up's height*/
+ right: 0px !important;
+ bottom: 35px;
+}
+
+#spreadsheet-row-column-frame {
+ top: 72px !important;
+ bottom: 68px;
+}
+
+#spreadsheet-row-column-frame.readonly {
+ top: 41px !important;
+ bottom: 35px !important;
+}
+
+#closebuttonwrapper {
+ display: none;
+}
+/* Show menubar even if folded */
+.main-nav {
+ display: block !important;
+}
+
+/* Slidesorter in portrait mode */
+#presentation-controls-wrapper.portrait {
+ top: initial;
+ left: initial;
+ bottom: 33px;
+ position: fixed;
+ width: 100%;
+ max-width: initial;
+}
+
+#presentation-controls-wrapper.portrait.readonly {
+ top: initial;
+ bottom: 0px;
+ width: 100%;
+ position: fixed;
+}
+
+#document-container.portrait.readonly.parts-preview-document {
+ bottom: 65px;
+}
+
+#document-container.portrait.parts-preview-document {
+ left: 0px !important;
+ bottom: 95px;
+ width: 100%;
+}
+
+#document-container.portrait.parts-preview-document.keyboard {
+ bottom: 33px;
+}
+
+/* Slidesorter in landscape mode */
+#presentation-controls-wrapper.landscape {
+ top: 41px;
+ bottom: 33px;
+}
+
+#presentation-controls-wrapper.landscape.readonly {
+ top: 41px;
+ bottom: 0px;
+ max-width: 120px;
+}
+
+#document-container.landscape.parts-preview-document {
+ left: 66px !important;
+ bottom: 33px;
+}
+
+#document-container.landscape.readonly.parts-preview-document {
+ top: 41px;
+ bottom: 0px;
+ width: initial;
+}
+
+#document-container.landscape.parts-preview-document.keyboard {
+ left: 0px !important;
+}
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index d56a602c4..3b4d4f439 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -221,138 +221,6 @@ body {
.w2ui-tag .w2ui-tag-top{display:none !important;}
}
- at media (max-width: 767px), (max-device-height: 767px) {
- /* Show slidesorter beyond 768px only */
- #presentation-controls-wrapper {
- top: initial;
- left: initial;
- bottom: 33px;
- max-width: initial;
- }
-
- #presentation-controls-wrapper.readonly {
- top: initial;
- bottom: 0px;
- }
-
- /* Show sidebar beyond 768px only */
- #sidebar-dock-wrapper {
- display: none;
- top: 41px;
- }
-
- #document-container.sidebar-document {
- left: 0px !important;
- }
-
- #document-container.readonly {
- top: 37px; /*set equal to toolbar up's height*/
- bottom: 0px;
- }
-
- #document-container.readonly.parts-preview-document {
- bottom: 65px;
- }
-
- #document-container.readonly.spreadsheet-document {
- top: 61px !important;
- bottom: 42px;
- }
-
- #document-container.parts-preview-document {
- left: 0px !important;
- bottom: 95px;
- }
-
- #document-container.spreadsheet-document {
- top: 92px !important;
- bottom: 68px;
- }
-
- #document-container {
- top: 37px; /*set equal to toolbar up's height*/
- right: 0px !important;
- bottom: 35px;
- }
-
- #spreadsheet-row-column-frame {
- top: 72px !important;
- bottom: 68px;
- }
-
- #spreadsheet-row-column-frame.readonly {
- top: 41px !important;
- bottom: 35px !important;
- }
-
- #closebuttonwrapper {
- display: none;
- }
- /* Show menubar even if folded */
- .main-nav {
- display: block !important;
- }
-}
-
- at media (max-width: 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%;
- }
-
- #document-container.parts-preview-document.keyboard {
- bottom: 33px;
- }
-}
- at media (max-width: 1023px) and (orientation: landscape) {
- #presentation-controls-wrapper {
- top: 41px;
- bottom: 33px;
- }
-
- #presentation-controls-wrapper.readonly {
- top: 41px;
- bottom: 0px;
- max-width: 120px;
- }
-
- #document-container.parts-preview-document {
- left: 66px !important;
- bottom: 33px;
- }
-
- #document-container.readonly.parts-preview-document {
- top: 41px;
- bottom: 0px;
- width: initial;
- }
-
- #document-container.parts-preview-document.keyboard {
- left: 0px !important;
- }
-}
-
.loleaflet-font {
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 494fa56da..0319cf7b1 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -99,8 +99,23 @@ L.ImpressTileLayer = L.TileLayer.extend({
}
var presentationControlWrapperElem = L.DomUtil.get('presentation-controls-wrapper');
- var visible = L.DomUtil.getStyle(presentationControlWrapperElem, 'display');
+ var documentContainer = L.DomUtil.get('document-container');
+
+ // update portrait / landscape
+ var remove = 'portrait';
+ var add = 'landscape';
+ if (L.DomUtil.isPortrait()) {
+ remove = 'landscape';
+ add = 'portrait';
+ }
+ L.DomUtil.removeClass(presentationControlWrapperElem, remove);
+ L.DomUtil.removeClass(documentContainer, remove);
+ L.DomUtil.addClass(presentationControlWrapperElem, add);
+ L.DomUtil.addClass(documentContainer, add);
+
+ // update parts
+ var visible = L.DomUtil.getStyle(presentationControlWrapperElem, 'display');
if (!this._isSlidePaneVisible && visible !== 'none') {
this._map.fire('updateparts', {
selectedPart: this._selectedPart,
More information about the Libreoffice-commits
mailing list