TIST-46: fixed display issues with recent reviews and daily recipes

apps/Index/Templates/index.php

@@ -106,6 +106,7 @@ the_header(
         </div>
     </div>
     <?php if(CURRENT_USER): ?>
+    <?php if($context['usermenu_recipe_prefetch']): ?>
     <div class="daily-meals">
         <h2 class="title">Your Menu for <?= date("l"); ?></h2>
         <div class="daily-meals-grid">
@@ -116,6 +117,12 @@ the_header(
             ?>
         </div>
     </div>
+    <?php else: ?>
+    <div class="daily-meals">
+        <h2 class="title">No meals added for <?= date("l"); ?></h2>
+        <p class="no-daily-meals-msg">You have not added any recipes for <?= date("l");?>, please go to the catalog and add recipes.</p>
+    </div>
+    <?php endif; ?>
     <?php endif; ?>
 
 </div>

apps/Recipes/Templates/daily-meals.php

@@ -17,6 +17,7 @@ the_header(
 <?php
 foreach ($context['weeks'] as $day => $recipe_prefetches) {
 ?>
+    <?php if(!empty($recipe_prefetches)): ?>
     <div class="daily-meals">
         <h2 class="title">Your Menu for <?= ucfirst($day) ?></h2>
         <div class="daily-meals-grid">
@@ -28,6 +29,12 @@ foreach ($context['weeks'] as $day => $recipe_prefetches) {
             ?>
         </div>
     </div>
+    <?php else: ?>
+        <div class="daily-meals">
+        <h2 class="title">No meals added for <?= ucfirst($day); ?></h2>
+        <p class="no-daily-meals-msg">You have not added any recipes for <?= ucfirst($day);?>, please go to the catalog and add recipes.</p>
+    </div>
+    <?php endif; ?>
 <?php
 }
 ?>

assets/css/style.css

@@ -334,12 +334,15 @@ body {
 .reviews-grid {
     display: grid;
     grid-template-columns: repeat(3, 310px);
-    grid-template-rows: repeat(2, 175px);
+    grid-auto-rows: 175px;    
     row-gap: 20px;
     column-gap: 50px;
 }
 
 .recent-review {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
     height: 100%;
     width: 310px;
     padding: 15px;
@@ -406,7 +409,7 @@ body {
 .daily-meals-grid {
     display: grid;
     grid-template-columns: repeat(2, 300px);
-    grid-template-rows: repeat(3, 100px);
+    grid-auto-rows: auto;  
     row-gap: 20px;
     column-gap: 20px;
     margin: 0 auto;
@@ -452,6 +455,7 @@ body {
     font-family: var(--title-font);
     font-size: 14px;
     color: var(--common-text);
+    margin-bottom: 3px;
 
 }
 
@@ -469,19 +473,27 @@ body {
 }
 
 .ingredients-list {
-    /* columns: 2;
-    -webkit-columns: 2;
-    -moz-columns: 2; */
     margin-left: 15px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     row-gap: 3px;
     column-gap: 8px;
     padding: 0;
+    height: 100%;
 }
 
 .ingredients-list li {
-    margin-right: 5px;
+    margin-right: 15px;
+    max-width: 72px;
+}
+
+.daily-meal-ingredients{
+    height: 100%;
+}
+
+.no-daily-meals-msg{
+    width: 100%;
+    text-align: center;
 }
 
 
@@ -1157,6 +1169,11 @@ label {
     width: 50%;
 }
 
+.review{
+    margin-bottom: 20px;
+    border-bottom: 1px solid #b3b3b3;
+}
+
 .subtitle{
     font-family: var(--title-font);
     font-size: 16px;