diff --git a/RecipeList.php b/RecipeList.php
index c6021ac71ca3d121b550e928bc69e017953d9ed0..6d69ad2bbfd8709530d8cabeeeef126525685b5a 100644
--- 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>';
}
}
diff --git a/RecipeView.php b/RecipeView.php
index 66bbab9e7a53ef684ff3924c9aa119a4bcb32304..a4767d8bfd7d071a4db504097967436eabf2f661 100644
--- 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; ?>
diff --git a/Recipes.php b/Recipes.php
index 5f2bebb767fdbeea94bf4d88931e71b26aece661..85032f4270e065e1e6aa3e94d5743d64b710c207 100644
--- 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
diff --git a/css/RecipeList.css b/css/RecipeList.css
index 770bd676178b48015637e8d3311ee3af721628b6..fc6cf32a0545efa25737d05d26e9c16c07680065 100644
--- 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
diff --git a/css/RecipeView.css b/css/RecipeView.css
index 0629fe24f31b13aef76e9c75b0177d11710af594..1779cf4936f11d20407f68f1191e7975c9c1655d 100644
--- 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
diff --git a/images/favourite.png b/images/favourite.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdc8a3abcb4a4d2cc28a25c9339215647cda950d
Binary files /dev/null and b/images/favourite.png differ