Recipes.php now links to RecipeList with all lists as parameter

1f0fbba7 · ALGLAVE Ivan · 9e5b65ac · 1f0fbba7 · 1f0fbba7 · 1f0fbba7
Commit 1f0fbba7 authored Dec 30, 2020 by ALGLAVE Ivan
--- a/RecipeList.php
+++ b/RecipeList.php
@@ -28,20 +28,22 @@
            {
                $re = explode(':', $recipesIds[$i]);
    
-                echo '<li>';
+                echo '<li><div class="container">';
+
+                echo '<img class="toggleFavourite" src="images/favourite.png" >';
                echo '<div class="listElement" onclick="showRecipe(' . intval($re[0]) . ');">';
    
                $recipe = $Recettes[intval($re[0])];
                
                $image_url = getRecipeImage($recipe['titre']);
                $image_url = '' . 'Photos/' . $image_url;
-                if(file_exists($image_url)) echo '<img src="' . $image_url . '"></img>';
-                else echo '<img src="images/missing.jfif"></img>';
+                if(file_exists($image_url)) echo '<img class="cocktailImg" src="' . $image_url . '"></img>';
+                else echo '<img class="cocktailImg" src="images/missing.jfif"></img>';
    
                echo '<h1>' . $recipe['titre'] . '</h1>';
            
                echo '</div>';
-                echo '</li>';
+                echo '</div></li>';
            }
        }


--- a/RecipeView.php
+++ b/RecipeView.php
@@ -5,6 +5,7 @@

 <body>

+    <img class="toggleFavourite" src="images/favourite.png" >
    <?php
        include "scripts/Functions.php";
        include "Donnees.inc.php";
@@ -22,7 +23,7 @@
    ?>

    <div>
-        <img src=<?php echo "\"" . $image_url . "\"" ?> width="128" height="128"; ?>
+        <img src=<?php echo "\"" . $image_url . "\"" ?> width="256" height="256"; ?>
        <span>
            <h1>
                <?php echo $r_name; ?>

--- a/Recipes.php
+++ b/Recipes.php
@@ -4,37 +4,22 @@
    <title>Drinkpedia</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/Recipes.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 </head>

 <body>
-    <h1>Cocktails</h1>
-    <ul>
-
-        <?php
-            include "Donnees.inc.php";
-            $ar = $Recettes;
-
-            for($i = 0; $i < count($ar); $i++)
-            {
-                echo '<li onclick="notifyParent(' . $i . ');" hint="Voir">' . $ar[$i]['titre'] . '</li>';
-            }
-        ?>
-
-    </ul>
-
+    <script src="scripts/DataQuery.js"></script>
    <script>
-        
-        function notifyParent(e) // Send a message to the parent window, asking to display the recipe #e
-        {
+
+        getRecipes([], [], 0, true, true, function(e) {
            var data = {
-                event: 'recipeselect',
-                value: Number(e)
+                event: 'recipelist',
+                value: e
            };
            window.top.postMessage(data, [data.event, data.value]);
-        }
+        });

    </script>
-
 </body>

 </html>
\ No newline at end of file
--- a/css/RecipeList.css
+++ b/css/RecipeList.css
@@ -29,19 +29,34 @@ ul li:last-child {
    border-bottom-right-radius: 15px;
 }

+.container {
+    width: 100%;
+    overflow: hidden;
+}
+
 .listElement {
+    float: left;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
 }

-.listElement img {
+.cocktailImg {
    border-radius: 7px;
+    background-color: white;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    width: 64px;
    height: 64px;
    margin-right: 15px;
-}
\ No newline at end of file
+    object-fit: contain;
+}
+
+.toggleFavourite {
+    float: right;
+    vertical-align: middle;
+    width: 32px;
+    height: auto;
+  }
\ No newline at end of file
--- a/css/RecipeView.css
+++ b/css/RecipeView.css
@@ -2,4 +2,17 @@ body {
    display: flex;
    justify-content: center;
    align-items: center;
+}
+
+img {
+    background-color: white;
+    object-fit: contain;
+}
+
+.toggleFavourite {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 32px;
+    height: 32px;
 }
\ No newline at end of file
--- a/images/favourite.png
+++ b/images/favourite.png