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

[Pedro Pinto Silva (via logerrit)]

 loleaflet/css/toolbar-mobile.css             |   18 ++++++++++++++++++
 loleaflet/src/layer/tile/CalcTileLayer.js    |    4 ++--
 loleaflet/src/layer/tile/ImpressTileLayer.js |    4 ++--
 loleaflet/src/layer/tile/WriterTileLayer.js  |    4 ++--
 4 files changed, 24 insertions(+), 6 deletions(-)

New commits:
commit a19f2faf2ff41a862f3886b6df87bec74543abaa
Author:     Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Fri Nov 1 13:38:09 2019 +0100
Commit:     Muhammet Kara <muhammet.kara at collabora.com>
CommitDate: Tue Nov 5 13:57:34 2019 +0100

    mobile: toolbar-search:
    
    - replace free text "Search:" with a proper label element
    - give class to input group parent
    - style search toolbar
    - change font size to 16px so to avoid auto zooms from iOS devices
    
    Change-Id: Iccbae8f7a932786acfde936e2002bd36b1fc564b
    Reviewed-on: https://gerrit.libreoffice.org/81883
    Reviewed-by: Pedro Pinto da Silva <pedro.silva at collabora.com>
    Reviewed-by: Muhammet Kara <muhammet.kara at collabora.com>
    Tested-by: Muhammet Kara <muhammet.kara at collabora.com>

diff --git a/loleaflet/css/toolbar-mobile.css b/loleaflet/css/toolbar-mobile.css
index 892290280..408654851 100644
--- a/loleaflet/css/toolbar-mobile.css
+++ b/loleaflet/css/toolbar-mobile.css
@@ -45,3 +45,21 @@
 	top: 100%;
 	margin-top: -3px;
 }
+#toolbar-search #tb_searchbar_item_search *{
+	width: 100% !important;
+}
+#toolbar-search input#search-input{
+	font-size: 16px;
+}
+#toolbar-search #tb_searchbar_item_left, #tb_searchbar_right {
+	display: none;
+}
+#toolbar-search #tb_searchbar_item_hidesearchbar{
+	padding: 1px 8px !important;
+}
+#toolbar-search #tb_searchbar_item_search{
+	width: 80%;
+}
+#toolbar-search #search-input-group > label{
+	display: none;
+}
diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index b5ee7ca8d..0ccbbd3a0 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -245,8 +245,8 @@ L.CalcTileLayer = L.TileLayer.extend({
 			items: [
 				{
 					type: 'html', id: 'search',
-					html: '<div style="padding: 3px 10px;" class="loleaflet-font">' +
-						' ' + _('Search:') +
+					html: '<div id="search-input-group" style="padding: 3px 10px;" class="loleaflet-font">' +
+						'    <label for="search-input">Search:</label>' +
 						'    <input size="10" id="search-input"' +
 						'style="padding: 3px; border-radius: 2px; border: 1px solid silver"/>' +
 						'</div>'
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index f47695176..46379cc67 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -231,8 +231,8 @@ L.ImpressTileLayer = L.TileLayer.extend({
 			items: [
 				{
 					type: 'html', id: 'search',
-					html: '<div style="padding: 3px 10px;" class="loleaflet-font">' +
-						' ' + _('Search:') +
+					html: '<div id="search-input-group" style="padding: 3px 10px;" class="loleaflet-font">' +
+						'    <label for="search-input">Search:</label>' +
 						'    <input size="10" id="search-input"' +
 						'style="padding: 3px; border-radius: 2px; border: 1px solid silver"/>' +
 						'</div>'
diff --git a/loleaflet/src/layer/tile/WriterTileLayer.js b/loleaflet/src/layer/tile/WriterTileLayer.js
index 91869aa1b..5fd7643e6 100644
--- a/loleaflet/src/layer/tile/WriterTileLayer.js
+++ b/loleaflet/src/layer/tile/WriterTileLayer.js
@@ -170,8 +170,8 @@ L.WriterTileLayer = L.TileLayer.extend({
 			items: [
 				{
 					type: 'html', id: 'search',
-					html: '<div style="padding: 3px 10px;" class="loleaflet-font">' +
-						' ' + _('Search:') +
+					html: '<div id="search-input-group" style="padding: 3px 10px;" class="loleaflet-font">' +
+						'    <label for="search-input">Search:</label>' +
 						'    <input size="10" id="search-input"' +
 						'style="padding: 3px; border-radius: 2px; border: 1px solid silver"/>' +
 						'</div>'