From 6ed43944f720d580a3c6a54a99167e625782612b Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Sat, 21 Mar 2020 13:20:39 +0100 Subject: [PATCH] Make popup menues in table rows responsive --- public/css/grocy.css | 34 +++++++++++++++++++++++++++++++ views/batteriesoverview.blade.php | 8 ++++---- views/choresoverview.blade.php | 8 ++++---- views/stockoverview.blade.php | 24 +++++++++++----------- 4 files changed, 54 insertions(+), 20 deletions(-) diff --git a/public/css/grocy.css b/public/css/grocy.css index 0e0195f9..d75b5665 100644 --- a/public/css/grocy.css +++ b/public/css/grocy.css @@ -225,6 +225,40 @@ input::-webkit-inner-spin-button { display: none; } +/* Stock overview table */ + +.table-inline-menu.dropdown-menu { + padding-left: 12px; + padding-right: 12px; + width: 96vw; /* Set width of popup menu to screen size */ +} + +/* Set width of popup menu to fixed value on larger devices */ +@media (min-width: 400px) { + .table-inline-menu.dropdown-menu { + width: 400px; + } +} + +.table-inline-menu .dropdown-item { + width: auto; + text-indent: -24px; +} + +.table-inline-menu .dropdown-item .dropdown-item-icon { + min-width: 24px; + padding-left:20px; + text-align: center; + display: inline; +} + +.table-inline-menu .dropdown-item .dropdown-item-text { + display: inline; + padding: 0; + word-wrap: break-word; + white-space: pre-wrap; +} + /* Third party component customizations - Bootstrap */ /* Hide the form validation feedback icons introduced in Bootstrap 4.2.0 - a colored border is enough */ diff --git a/views/batteriesoverview.blade.php b/views/batteriesoverview.blade.php index 4140eff0..05bb46b1 100644 --- a/views/batteriesoverview.blade.php +++ b/views/batteriesoverview.blade.php @@ -66,15 +66,15 @@ -
+
- {{ $__t('Show battery details') }} + {{ $__t('Show battery details') }} - {{ $__t('Journal for this battery') }} + {{ $__t('Journal for this battery') }} - {{ $__t('Edit battery') }} + {{ $__t('Edit battery') }}
diff --git a/views/choresoverview.blade.php b/views/choresoverview.blade.php index 2b10a3f9..79763f7a 100644 --- a/views/choresoverview.blade.php +++ b/views/choresoverview.blade.php @@ -86,15 +86,15 @@ -
+
- {{ $__t('Show chore details') }} + {{ $__t('Show chore details') }} - {{ $__t('Journal for this chore') }} + {{ $__t('Journal for this chore') }} - {{ $__t('Edit chore') }} + {{ $__t('Edit chore') }}
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php index 46e189ec..37730e5e 100644 --- a/views/stockoverview.blade.php +++ b/views/stockoverview.blade.php @@ -124,38 +124,38 @@ -
+
- {{ $__t('Add to shopping list') }} + {{ $__t('Add to shopping list') }}
- {{ $__t('Purchase') }} + {{ $__t('Purchase') }} - {{ $__t('Consume') }} + {{ $__t('Consume') }} @if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING) - {{ $__t('Transfer') }} + {{ $__t('Transfer') }} @endif - {{ $__t('Inventory') }} + {{ $__t('Inventory') }}
- {{ $__t('Show product details') }} + {{ $__t('Show product details') }} - {{ $__t('Show stock entries') }} + {{ $__t('Show stock entries') }} - {{ $__t('Stock journal for this product') }} + {{ $__t('Stock journal for this product') }} - {{ $__t('Edit product') }} + {{ $__t('Edit product') }}
- {{ $__t('Consume %1$s of %2$s as spoiled', '1 ' . FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name, FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name) }} + {{ $__t('Consume %1$s of %2$s as spoiled', '1 ' . FindObjectInArrayByPropertyValue($quantityunits, 'id', FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->qu_id_stock)->name, FindObjectInArrayByPropertyValue($products, 'id', $currentStockEntry->product_id)->name) }} @if(GROCY_FEATURE_FLAG_RECIPES) - {{ $__t('Search for recipes containing this product') }} + {{ $__t('Search for recipes containing this product') }} @endif