Bootstrap update to v5 of recipe, dish and purchase list editor

lib/Coocook/Controller/PurchaseList.pm

@@ -106,6 +106,17 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie
                 $ingredient->{remove_url} =
                   $c->project_uri( '/purchase_list/remove_ingredient', $ingredient->{id} );
             }
+
+            # TODO move business logic out of controller
+            # 4 <- 5   -> 6
+            # 5 <- 5.1 -> 6
+            # 5 <- 5.9 -> 6
+            # 5 <- 6   -> 7
+            my $value = $item->{value} + $item->{offset};
+            $item->{next_higher_value} = int($value) + 1;
+
+            $value == int($value) and $value--;
+            $item->{next_lower_value} = int($value);
         }
     }
 }

lib/Coocook/Controller/Recipe.pm

@@ -100,7 +100,8 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie
     );
 
     $recipe->project->is_public
-      and $c->stash( public_url => $c->uri_for_action( '/browse/recipe/show', [ $recipe->id, $recipe->url_name ] ) );
+      and $c->stash(
+        public_url => $c->uri_for_action( '/browse/recipe/show', [ $recipe->id, $recipe->url_name ] ) );
 
     for my $ingredient ( @{ $c->stash->{ingredients} } ) {
         $ingredient->{reposition_url} = $c->project_uri( '/recipe/reposition', $ingredient->{id} );

root/static/css/local_bootstrap_modifications.css

@@ -1,17 +1,32 @@
-
 /*
 BOOSTRAP LOCAL CUSTOMIZATION
 */
 
+:root {
+  --cc-green: #4CAF50;
+  --cc-green-dark: #3A8E3D;
+  --cc-green-light: #6CBF6F;
+}
 
-/*
-highlight fontcolor to white in case of navbar-light
-*/
-.navbar-light .navbar-nav .active > .nav-link,
-.navbar-light .navbar-nav           .nav-link.active,
-.navbar-light .navbar-nav           .nav-link.show,
-.navbar-light .navbar-nav .show   > .nav-link {
-    color: rgba(220,220,220,1);
+
+.mt-n3 {
+  margin-top: -1rem !important;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.btn-sm.btn-quad {
+  padding: .25rem;
+}
+
+.btn-icon-1 {
+  width: calc(24px + 1.5rem);
+}
+
+.table colgroup + thead {
+  border-top: none !important;
 }
 
 
@@ -60,15 +75,6 @@ smaller font-size of text similar class small
   font-size: 65%;
 }
 
-
-
-
-input[type="number"] {
-    text-align: left;
-}
-
-
-
 /*===========================================================================
 align material icons vertical: https://stackoverflow.com/questions/56171473/different-material-icons-styles-do-not-align
 ===========================================================================*/
@@ -95,50 +101,24 @@ input.with-markdown-preview {
 }
 
 
-/*===========================================================================
-overwrite behavior of navbar-dark nav-links
-===========================================================================*/
-
-.navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.99);
-}
-
-.navbar-dark .navbar-nav .nav-link:hover,
-.navbar-dark .navbar-nav .nav-link:focus {
-  color: rgba(255, 255, 255, 0.75);
-}
-
-
 /*===========================================================================
 login logout header color
 ===========================================================================*/
-.login_logout input[name="logout"],
-.login_logout button,
-.login_logout a {
-    background-color: rgba(255,255,255,0.0);
+.login-logout-btn {
+    background-color: transparent;
     color: #333333;
     border: 0px;
-
     -webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
     -moz-box-shadow:    0px 0px 0px rgba(255,255,255,0.0) !important;
     box-shadow:         0px 0px 0px rgba(255,255,255,0.0) !important;
 }
 
-.login_logout input[name="logout"]:active,
-.login_logout input[name="logout"]:hover,
-.login_logout button:active,
-.login_logout button:hover,
-.login_logout a:active,
-.login_logout a:hover {
-    color: #f5f5ef;
-    background-color:rgba(255,255,255,0.0);
-    border: 0px;
-
-    -webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important;
-    -moz-box-shadow:    0px 0px 0px rgba(255,255,255,0.0) !important;
-    box-shadow:         0px 0px 0px rgba(255,255,255,0.0) !important;
+.login-logout-btn:active,
+.login-logout-btn:hover,
+.login-logout-btn:focus {
+    color: var(--bs-light);
 }
 
 .bg-header {
-    background-color: #4CAF50;
+    background-color: var(--cc-green);
 }