From ebcd7816b4d8ade695c99bcfc35890f5a288d007 Mon Sep 17 00:00:00 2001 From: Jan Holesovsky Date: Wed, 1 Apr 2020 11:27:55 +0200 Subject: [PATCH] mobile: More menu-related stuff moved to device-mobile.css. Change-Id: I33df7cbfe4835caf2d9757e8f357f456b9d1e777 Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91474 Tested-by: Jenkins CollaboraOffice Reviewed-by: Jan Holesovsky --- loleaflet/css/device-mobile.css | 61 +++++++++++++++++++++++++++++++++ loleaflet/css/menubar.css | 56 ++---------------------------- 2 files changed, 64 insertions(+), 53 deletions(-) diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css index 4414fd4c5..fe3c688ad 100644 --- a/loleaflet/css/device-mobile.css +++ b/loleaflet/css/device-mobile.css @@ -54,3 +54,64 @@ div#w2ui-overlay-actionbar.w2ui-overlay{ #document-header{ display: none !important; } + +/* Related to menubar.css */ +.document-logo { + width: 35px; + height: 38px; +} + +#document-titlebar { + display: none; +} + +.document-title { + display: none; +} + +/* hide the menu in mobile view */ +#main-menu-state:not(:checked) ~ #main-menu { + display: none; +} + +.main-menu-btn { + display: inline-block; +} + +.main-nav { + position: absolute; + height: 0; + width: 100%; + top: 37px; /*set equal to toolbar up's height*/ + margin: 0; + -webkit-overflow-scrolling: touch; + overflow: scroll; + z-index: 1010; + bottom: 34px !important; + background-color: #00000050; +} + +#main-menu { + position: relative; + top: 0; + width: 70%; + float: right; + background-color: white; + height: 100%; +} + +.writer-icon-img { + background-size: 35px 35px; +} + +.calc-icon-img { + background-size: 35px 35px; +} + +.impress-icon-img { + background-size: 35px 35px; +} + +#document-name-input { + display: none; +} diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css index 1f52f4048..5e7ab15c5 100644 --- a/loleaflet/css/menubar.css +++ b/loleaflet/css/menubar.css @@ -256,65 +256,15 @@ background-position: bottom; } +/* FIXME remove this @media; but for the moment doing so breaks the cypress + * tests. + */ @media (max-width: 767px), (max-device-height: 767px) { - .document-logo { - width: 35px; - height: 38px; - } - - #document-titlebar { - display: none; - } - - .document-title { - display: none; - } - - /* hide the menu in mobile view */ - #main-menu-state:not(:checked) ~ #main-menu { - display: none; - } - - .main-menu-btn { - display: inline-block; - } - .main-nav { position: absolute; height: 0; width: 100%; top: 37px; /*set equal to toolbar up's height*/ - margin: 0; - -webkit-overflow-scrolling: touch; - overflow: scroll; - z-index: 1010; - bottom: 34px !important; - background-color: #00000050; - } - - #main-menu { - position: relative; - top: 0; - width: 70%; - float: right; - background-color: white; - height: 100%; - } - - .writer-icon-img { - background-size: 35px 35px; - } - - .calc-icon-img { - background-size: 35px 35px; - } - - .impress-icon-img { - background-size: 35px 35px; - } - - #document-name-input { - display: none; } }