strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile detection: Create a separate device-*.css for the phone/tablet/desktop.

Browse source 
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 <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tamás Zolnai <tamas.zolnai@collabora.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
This commit is contained in:
Jan Holesovsky 2020-03-30 11:59:20 +02:00
parent 47d6d9eae6
commit 9978752258
7 changed files with 67 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ios/Mobile.xcodeproj/project.pbxproj
View file

@ -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 */,

11
loleaflet/Makefile.am
View file

@ -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 \

2
loleaflet/css/device-desktop.css Normal file
View file

@ -0,0 +1,2 @@
/* CSS specific for desktop browsers. */

30
loleaflet/css/device-mobile.css Normal file
View file

@ -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;
}

2
loleaflet/css/device-tablet.css Normal file
View file

@ -0,0 +1,2 @@
/* CSS specific for tablets. */

29
loleaflet/css/editor.css
View file

@ -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;
}
}

16
loleaflet/html/loleaflet.html.m4
View file

@ -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],