ios/Mobile.xcodeproj/project.pbxproj | 8 ++++++++
loleaflet/Makefile.am | 11 +++++++++++
loleaflet/css/device-desktop.css | 2 ++
loleaflet/css/device-mobile.css | 30 ++++++++++++++++++++++++++++++
loleaflet/css/device-tablet.css | 2 ++
loleaflet/css/editor.css | 29 -----------------------------
loleaflet/html/loleaflet.html.m4 | 16 ++++++++++++++--
7 files changed, 67 insertions(+), 31 deletions(-)
New commits:
commit 99787522581af296c25863f4ee1b24b170902a22
Author: Jan Holesovsky <ke...@collabora.com>
AuthorDate: Mon Mar 30 11:59:20 2020 +0200
Commit: Jan Holesovsky <ke...@collabora.com>
CommitDate: Tue Mar 31 20:31:49 2020 +0200
mobile detection: Create a separate device-*.css for the
phone/tablet/desktop.
The problem is that the @media-based detection often disagrees with the
JS-based detection which then leads to many problems - most notably that
part of the UI behaves as if it was a tablet, and the other part as if
was a mobile phone, leading to a terrible user experience.
This commit changes it so that there is only one way how to detect if
we are on mobile phone, tablet or desktop: using the JavaScript, and we
will load the appropriate css accordingly.
Only one @media-based rule is converted as an example, the rest will
follow.
Change-Id: Id7bfb58ca12264904b3329db1542ae6b54893f11
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91416
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
Reviewed-by: Tamás Zolnai <tamas.zol...@collabora.com>
Reviewed-by: Jan Holesovsky <ke...@collabora.com>
diff --git a/ios/Mobile.xcodeproj/project.pbxproj
b/ios/Mobile.xcodeproj/project.pbxproj
index 3b0bc6f75..5bff960bc 100644
--- a/ios/Mobile.xcodeproj/project.pbxproj
+++ b/ios/Mobile.xcodeproj/project.pbxproj
@@ -63,6 +63,8 @@
BEA28360214ACA8500848631 /* FakeSocket.cpp in Sources */ = {isa
= PBXBuildFile; fileRef = BEA2835F214ACA8500848631 /* FakeSocket.cpp */; };
BEA28377214FFD8C00848631 /* Unit.cpp in Sources */ = {isa =
PBXBuildFile; fileRef = BEA28376214FFD8C00848631 /* Unit.cpp */; };
BEB0E5D921C7CA800085A0CF /* Settings.bundle in Resources */ =
{isa = PBXBuildFile; fileRef = BEB0E5D821C7CA800085A0CF /* Settings.bundle */;
};
+ BECD984024336DD400016117 /* device-mobile.css in Resources */ =
{isa = PBXBuildFile; fileRef = BECD983E24336DD400016117 /* device-mobile.css
*/; };
+ BECD984124336DD400016117 /* device-tablet.css in Resources */ =
{isa = PBXBuildFile; fileRef = BECD983F24336DD400016117 /* device-tablet.css
*/; };
BEFB1EE121C29CC70081D757 /* L10n.mm in Sources */ = {isa =
PBXBuildFile; fileRef = BEFB1EE021C29CC70081D757 /* L10n.mm */; };
/* End PBXBuildFile section */
@@ -1169,6 +1171,8 @@
BECBD41223D9C98400DA5582 /* svdedxv.cxx */ = {isa =
PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = svdedxv.cxx;
path = "../../ios-device/svx/source/svdraw/svdedxv.cxx"; sourceTree =
"<group>"; };
BECBD41323D9C98400DA5582 /* clonelist.cxx */ = {isa =
PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = clonelist.cxx;
path = "../../ios-device/svx/source/svdraw/clonelist.cxx"; sourceTree =
"<group>"; };
BECBD41423D9C98500DA5582 /* svddrgmt.cxx */ = {isa =
PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = svddrgmt.cxx;
path = "../../ios-device/svx/source/svdraw/svddrgmt.cxx"; sourceTree =
"<group>"; };
+ BECD983E24336DD400016117 /* device-mobile.css */ = {isa =
PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; name =
"device-mobile.css"; path = "../../../loleaflet/dist/device-mobile.css";
sourceTree = "<group>"; };
+ BECD983F24336DD400016117 /* device-tablet.css */ = {isa =
PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; name =
"device-tablet.css"; path = "../../../loleaflet/dist/device-tablet.css";
sourceTree = "<group>"; };
BEF755A723E8200A008A4BB2 /* drawdoc.cxx */ = {isa =
PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = drawdoc.cxx;
path = "../../ios-device/sd/source/core/drawdoc.cxx"; sourceTree = "<group>"; };
BEF755A823E8200A008A4BB2 /* drawdoc3.cxx */ = {isa =
PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = drawdoc3.cxx;
path = "../../ios-device/sd/source/core/drawdoc3.cxx"; sourceTree = "<group>";
};
BEF755A923E8200A008A4BB2 /* sdiocmpt.cxx */ = {isa =
PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; name = sdiocmpt.cxx;
path = "../../ios-device/sd/source/core/sdiocmpt.cxx"; sourceTree = "<group>";
};
@@ -1234,6 +1238,8 @@
BE8D85C7214055F3009F1860 /* unorc */,
BE5EB5DB2140480B00E0826C /* ICU.dat */,
BE00F89721396585001CE2D4 /* bundle.css */,
+ BECD983E24336DD400016117 /* device-mobile.css
*/,
+ BECD983F24336DD400016117 /* device-tablet.css
*/,
BE00F89921396585001CE2D4 /* bundle.js */,
BE00F89E21396585001CE2D4 /* images */,
BE00F89D21396585001CE2D4 /* loleaflet-help.html
*/,
@@ -2936,8 +2942,10 @@
buildActionMask = 2147483647;
files = (
BE8D85D6214055F3009F1860 /* rc in Resources */,
+ BECD984124336DD400016117 /* device-tablet.css
in Resources */,
BE8D85D0214055F3009F1860 /* services in
Resources */,
BE8D85D4214055F3009F1860 /* fundamentalrc in
Resources */,
+ BECD984024336DD400016117 /* device-mobile.css
in Resources */,
BE80E43221AD92F700859C97 /* Fonts in Resources
*/,
BE00F8A821396585001CE2D4 /* images in Resources
*/,
BE5EB5DC2140480B00E0826C /* ICU.dat in
Resources */,
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index e55196e06..f022227bb 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -313,6 +313,9 @@ build-loleaflet: | $(LOLEAFLET_L10N_DST) \
$(LOLEAFLET_PREFIX)/dist/loleaflet-src.js \
$(ADMIN_BUNDLE) \
$(builddir)/dist/bundle.css \
+ $(builddir)/dist/device-mobile.css \
+ $(builddir)/dist/device-tablet.css \
+ $(builddir)/dist/device-desktop.css \
$(builddir)/dist/bundle.js \
$(builddir)/dist/loleaflet.html
@echo "build loleaflet completed"
@@ -418,6 +421,14 @@ node_modules: npm-shrinkwrap.json
@npm install
@touch node_modules
+$(builddir)/dist/device-%.css: $(srcdir)/css/device-%.css
+ @mkdir -p $(dir $@)
+ @if test -z '$(ENABLE_BROWSERSYNC)'; then \
+ NODE_PATH=$(abs_builddir)/node_modules $(NODE)
node_modules/uglifycss/uglifycss $< > $@ ; \
+ else \
+ ln -sf $(abs_srcdir)/$< $@ ; \
+ fi
+
$(builddir)/dist/plugins/%.js: $(srcdir)/plugins/%.js
@mkdir -p $(dir $@)
@if test -z '$(ENABLE_BROWSERSYNC)'; then \
diff --git a/loleaflet/css/device-desktop.css b/loleaflet/css/device-desktop.css
new file mode 100644
index 000000000..401e892a3
--- /dev/null
+++ b/loleaflet/css/device-desktop.css
@@ -0,0 +1,2 @@
+/* CSS specific for desktop browsers. */
+
diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
new file mode 100644
index 000000000..bd9018d85
--- /dev/null
+++ b/loleaflet/css/device-mobile.css
@@ -0,0 +1,30 @@
+/* CSS specific for mobile phones. */
+
+/* Related to editor.css */
+#editor-btn{
+ max-width: 160px;
+}
+#editor-btn td:last-of-type{
+ max-width: 96px;
+ padding-left: 8px;
+ text-align: left;
+}
+#currently-msg{
+ padding: 12px 5px;
+}
+input#follow-checkbox {
+ width: 24px;
+ height: 24px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+ border-radius: 2px;
+ border: 2px solid #aaa;
+ outline: none;
+ box-shadow: #00000015 0px 0px 2px 1px;
+}
+#userlist_table + hr { display: none;}
+div#w2ui-overlay-actionbar.w2ui-overlay{
+ margin-left:-7px;
+}
diff --git a/loleaflet/css/device-tablet.css b/loleaflet/css/device-tablet.css
new file mode 100644
index 000000000..0dcdee9b4
--- /dev/null
+++ b/loleaflet/css/device-tablet.css
@@ -0,0 +1,2 @@
+/* CSS specific for tablets. */
+
diff --git a/loleaflet/css/editor.css b/loleaflet/css/editor.css
index 48a1d0128..c68b4d4cb 100644
--- a/loleaflet/css/editor.css
+++ b/loleaflet/css/editor.css
@@ -21,32 +21,3 @@
text-align: center;
padding: 3px 5px;
}
-@media (max-width: 767px), (max-device-height: 767px) {
- #editor-btn{
- max-width: 160px;
- }
- #editor-btn td:last-of-type{
- max-width: 96px;
- padding-left: 8px;
- text-align: left;
- }
- #currently-msg{
- padding: 12px 5px;
- }
- input#follow-checkbox {
- width: 24px;
- height: 24px;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- border-radius: 2px;
- border: 2px solid #aaa;
- outline: none;
- box-shadow: #00000015 0px 0px 2px 1px;
- }
- #userlist_table + hr { display: none;}
- div#w2ui-overlay-actionbar.w2ui-overlay{
- margin-left:-7px;
- }
-}
diff --git a/loleaflet/html/loleaflet.html.m4 b/loleaflet/html/loleaflet.html.m4
index 273a05605..1bb0c44c9 100644
--- a/loleaflet/html/loleaflet.html.m4
+++ b/loleaflet/html/loleaflet.html.m4
@@ -223,7 +223,7 @@ m4_ifelse(MOBILEAPP,[true],
<p>Copyright © _YEAR_, VENDOR.</p>
</div>
- <script defer>
+ <script>
m4_ifelse(MOBILEAPP,[true],
[window.host = '';
window.serviceRoot = '';
@@ -250,7 +250,19 @@ m4_ifelse(MOBILEAPP,[true],
window.frameAncestors = '%FRAME_ANCESTORS%';
window.tileSize = 256;])
m4_syscmd([cat ]GLOBAL_JS)m4_dnl
- </script>
+
+<!-- Dynamically load the appropriate device-mobile.css, device-tablet.css or
device-desktop.css -->
+var link = document.createElement('link');
+link.setAttribute("rel", "stylesheet");
+link.setAttribute("type", "text/css");
+if (window.mode.isMobile())
+ [link.setAttribute("href",
']m4_ifelse(MOBILEAPP,[],[%SERVICE_ROOT%/loleaflet/%VERSION%/])[device-mobile.css');]
+else if (window.mode.isTablet())
+ [link.setAttribute("href",
']m4_ifelse(MOBILEAPP,[],[%SERVICE_ROOT%/loleaflet/%VERSION%/])[device-tablet.css');]
+else
+ [link.setAttribute("href",
']m4_ifelse(MOBILEAPP,[],[%SERVICE_ROOT%/loleaflet/%VERSION%/])[device-desktop.css');]
+document.getElementsByTagName("head")[[0]].appendChild(link);
+</script>
m4_ifelse(MOBILEAPP,[true],
m4_ifelse(DEBUG,[true],m4_foreachq([fileJS],[LOLEAFLET_JS],
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
