From 6e4cd221188fcc86b71a0894d72c7c1719a90999 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Sat, 12 May 2018 16:38:21 +0200
Subject: [PATCH] Make big buttons on overview pages responsive (references #9)

---
 public/css/grocy.css              | 4 ++++
 views/batteriesoverview.blade.php | 4 ++--
 views/habitsoverview.blade.php    | 4 ++--
 views/stockoverview.blade.php     | 6 +++---
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/public/css/grocy.css b/public/css/grocy.css
index 13f4263a..e38fc54a 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -108,6 +108,10 @@ td {
      vertical-align: middle !important;
 }
 
+.responsive-button {
+    white-space: normal;
+}
+
 .discrete-link {
 	color: inherit !important;
 	transition: all 0.3s !important;
diff --git a/views/batteriesoverview.blade.php b/views/batteriesoverview.blade.php
index 7d7c02a5..ae6e4ac6 100644
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@@ -9,8 +9,8 @@
 
 <div class="container-fluid">
 	<div class="row">
-		<p class="btn btn-lg btn-warning no-real-button">{{ $L('#1 batteries are due to be charged within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
-		<p class="btn btn-lg btn-danger no-real-button">{{ $L('#1 batteries are overdue to be charged', $countOverdue) }}</p>
+		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 batteries are due to be charged within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
+		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 batteries are overdue to be charged', $countOverdue) }}</p>
 	</div>
 </div>
 
diff --git a/views/habitsoverview.blade.php b/views/habitsoverview.blade.php
index d5845830..2ba666e3 100644
--- a/views/habitsoverview.blade.php
+++ b/views/habitsoverview.blade.php
@@ -9,8 +9,8 @@
 
 <div class="container-fluid">
 	<div class="row">
-		<p class="btn btn-lg btn-warning no-real-button">{{ $L('#1 habits are due to be done within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
-		<p class="btn btn-lg btn-danger no-real-button">{{ $L('#1 habits are overdue to be done', $countOverdue) }}</p>
+		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 habits are due to be done within the next #2 days', $countDueNextXDays, $nextXDays) }}</p>
+		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 habits are overdue to be done', $countOverdue) }}</p>
 	</div>
 </div>
 
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index 45882297..2bb5ab59 100644
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -9,9 +9,9 @@
 
 <div class="container-fluid">
 	<div class="row">
-		<p class="btn btn-lg btn-warning no-real-button">{{ $L('#1 products expiring within the next #2 days', $countExpiringNextXDays, $nextXDays) }}</p>
-		<p class="btn btn-lg btn-danger no-real-button">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p>
-		<p class="btn btn-lg btn-info no-real-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
+		<p class="btn btn-lg btn-warning no-real-button responsive-button">{{ $L('#1 products expiring within the next #2 days', $countExpiringNextXDays, $nextXDays) }}</p>
+		<p class="btn btn-lg btn-danger no-real-button responsive-button">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p>
+		<p class="btn btn-lg btn-info no-real-button responsive-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
 	</div>
 </div>