Merge branch '27-safari-checked-items-don-t-change-color' into 'develop'

Resolve "Safari - checked items don't change color"

See merge request bluekay/shopping-list!14

cont/nav.php

@@ -11,18 +11,18 @@
   <div class="collapse navbar-collapse">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item <?php if(($site=="list")||($site=="-1")){print_r("active");} ?>">
-        <a class="nav-link" href="/list"><i class="fas fa-list"></i> Liste</a>
+        <a class="nav-link-font nav-link" href="/list"><i class="fas fa-list"></i> Liste</a>
       </li>
       <li class="nav-item <?php if($site=="recipes"){print_r("active");} ?>">
-        <a class="nav-link" href="/recipes"><i class="fas fa-book"></i> Rezepte</a>
+        <a class="nav-link-font nav-link" href="/recipes"><i class="fas fa-book"></i> Rezepte</a>
       </li>
     </ul>
     <ul class="navbar-nav">
       <li class="nav-item <?php if($site=="settings"){print_r("active");} ?>">
-        <a class="nav-link" href="/settings"><i class="fas fa-user-cog"></i></a>
+        <a class="nav-link-font nav-link" href="/settings"><i class="fas fa-user-cog"></i></a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="/php/logout.php"><i class="fas fa-sign-out-alt"></i></a>
+        <a class="nav-link-font nav-link" href="/php/logout.php"><i class="fas fa-sign-out-alt"></i></a>
       </li>
     </ul>
   </div>
@@ -30,7 +30,7 @@
 
   <div class="collapse w-75 pl-2" id="navbarToggleResponsive">
     <ul class="navbar-nav mr-auto">
-      <li class="nav-item <?php if($site=="list"){print_r("active");} ?>">
+      <li class="nav-item <?php if(($site=="list")||($site=="-1")){print_r("active");} ?>">
         <a class="nav-link" href="/list"><i class="fas fa-list"></i> Liste</a>
       </li>
       <li class="nav-item <?php if($site=="recipes"){print_r("active");} ?>">

js/list.js

@@ -9,11 +9,11 @@ $(document).ready(function () {
 
 function highlightNewEntry(){
   var cookies = document.cookie;
-  var cookieRegExp = new RegExp(/;?\s+newItem=(\d+)/g);
+  var cookieRegExp = new RegExp(/[;]{0,1}\s{0,1}newItem=(\d+)/g);
   var match = cookieRegExp.exec(cookies);
   if(match!=null){  
     var newID = match[1];
-    var checkBox = $("[data-id=" + newID + "]");
+    var checkBox = $(`[data-id='${newID}']`);
     var newRow = checkBox.parent().parent();
     newRow.removeClass($(checkBox).data("color"));
     newRow.addClass("alert-primary");
@@ -22,7 +22,6 @@ function highlightNewEntry(){
       newRow.addClass($(checkBox).data("color"));
     }, 1000);
     document.cookie = "newItem=-1"
-    console.log(document.cookie);
   }
 }
 
@@ -48,29 +47,29 @@ function checkItem() {
       status: $(this).prop("checked")
     },
     success: function () {
-      var color = $("[data-id='" + dataId + "'").data("color");
+      var dataIdSelector = (`[data-id='${dataId}']`);
+      var color = $(dataIdSelector).data("color");
+      $(dataIdSelector).parent().parent().removeClass("bg-danger");
 
-      $("[data-id='" + dataId + "'").parent().parent().removeClass("bg-danger");
-
-      if($("[data-id='" + dataId + "'").prop("checked")){
-        $("[data-id='" + dataId + "'").parent().parent().removeClass(color);
-        $("[data-id='" + dataId + "'").parent().parent().addClass("bg-success");
+      if($(dataIdSelector).prop("checked")){
+        $(dataIdSelector).parent().parent().removeClass(color);
+        $(dataIdSelector).parent().parent().addClass("bg-success");
       }
       else{
-        $("[data-id='" + dataId + "'").parent().parent().removeClass("bg-success");
-        $("[data-id='" + dataId + "'").parent().parent().addClass(color);
+        $(dataIdSelector).parent().parent().removeClass("bg-success");
+        $(dataIdSelector).parent().parent().addClass(color);
       }
     },
     error: function () {
-      $("[data-id='" + dataId + "'").parent().parent().addClass("bg-danger");
-      $("[data-id='" + dataId + "'").parent().parent().data("toggle", "popover");
-      $("[data-id='" + dataId + "'").parent().parent().data("container", "body");
-      $("[data-id='" + dataId + "'").parent().parent().data("placement", "top");
-      $("[data-id='" + dataId + "'").parent().parent().data("html", true);
-      $("[data-id='" + dataId + "'").parent().parent().data("trigger", "focus");
-      $("[data-id='" + dataId + "'").parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
-      $("[data-id='" + dataId + "'").parent().parent().attr("title", "Fehler!");
-      $("[data-id='" + dataId + "'").parent().parent().popover('show');
+      $(dataIdSelector).parent().parent().addClass("bg-danger");
+      $(dataIdSelector).parent().parent().data("toggle", "popover");
+      $(dataIdSelector).parent().parent().data("container", "body");
+      $(dataIdSelector).parent().parent().data("placement", "top");
+      $(dataIdSelector).parent().parent().data("html", true);
+      $(dataIdSelector).parent().parent().data("trigger", "focus");
+      $(dataIdSelector).parent().parent().data("content", "Dieses Element konnte nicht gespeichert werden.<br />Bitte die Seite Aktualisieren");
+      $(dataIdSelector).parent().parent().attr("title", "Fehler!");
+      $(dataIdSelector).parent().parent().popover('show');
     }
   });
 }

js/search.js

@@ -1,33 +1,32 @@
-$(document).ready(function(){
-  var recipes = $("#recipes a");
-  var headerLetters = $("#recipes h2");
-  $("#search-recipes").on("keyup", searchRecipe(recipes, headerLetters));
+$(document).ready(function () {
+  $("#search-recipes").on("keyup", searchRecipe);
   $("#clear-search-string").click(clearSearchString);
 });
 
-function searchRecipe(recipes, headerLetters) {
-  return function () {
-    var search = $("#search-recipes").val().toUpperCase();
+function searchRecipe() {
+  var searchString = $("#search-recipes").val().toUpperCase();
+  var recipes = $("#recipes a");
+
   for (var i = 0; i < recipes.length; i++) {
-      if (recipes[i].innerHTML.toUpperCase().indexOf(search) > -1) {
-        recipes[i].style.display = "";
+    if (recipes[i].innerHTML.toUpperCase().indexOf(searchString) > -1) {
+      $(recipes[i]).show()
     }
     else {
-        recipes[i].style.display = "none";
+      $(recipes[i]).hide();
     }
   }
-    for (var j = 0; j < headerLetters.length; j++) {
-      if (($("*[data-letter='" + headerLetters[j].innerHTML + "']:visible")).length > 0) {
-        headerLetters[j].style.display = "";
+  
+  $("#recipes").children().each(index => {
+    var container = ($("#recipes").children())[index];
+    $(container).removeClass("d-none").addClass("d-flex");
+    if(($(container).find("a:visible")).length==0){
+      $(container).removeClass("d-flex").addClass("d-none");
     }
-      else {
-        headerLetters[j].style.display = "none";
-      }
-    }
-  };
+  });
+
 }
 
-function clearSearchString(){
+function clearSearchString() {
   $("#search-recipes").val("");
   $("#search-recipes").focus();
   $("#search-recipes").keyup();

style/helper.css

@@ -7,3 +7,7 @@
 .list-row {
     transition: .5s;
 }
+
+.nav-link-font {
+    font-size: 16px !important;
+}