From aa84b1bc8c8393ed37027c34a1b2ac709b0a128f Mon Sep 17 00:00:00 2001
From: Alexandre Agostinho <alexandre.agostinho@etu.uca.fr>
Date: Sat, 6 May 2023 14:19:22 +0200
Subject: [PATCH] :iphone: done #10

---
 MCTG/Views/RecipeReviews.xaml           | 47 ++++++++++++++++---------
 MCTG/Views/Resources/Styles/Styles.xaml |  5 +++
 MCTG/Views/UserReview.xaml              | 27 ++++++++------
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/MCTG/Views/RecipeReviews.xaml b/MCTG/Views/RecipeReviews.xaml
index baab301..00ae924 100644
--- a/MCTG/Views/RecipeReviews.xaml
+++ b/MCTG/Views/RecipeReviews.xaml
@@ -11,8 +11,8 @@
             NeedReturn="True"
             HeightRequest="100"/>
 
-        <Grid RowDefinitions="500, *">
-            <ScrollView>
+        <VerticalStackLayout>
+            <ScrollView MaximumHeightRequest="500">
                 <VerticalStackLayout>
 
                     <local:UserReview>
@@ -30,13 +30,22 @@
                             Je suis plutôt vin blanc.
                         </local:UserReview.Comment>
                     </local:UserReview>
+                    <local:UserReview>
+                        <local:UserReview.Comment>
+                            Très bonne recette à l’exeption près qu’il est compliqué d’offrir ces cookies à des enfants. En effet, ils ne sont pas très friant de fruit ou de légumes... Mais ils ont eu beaucoup de succès auprès de mes vieux !
+                            Très bonne recette à l’exeption près qu’il est compliqué d’offrir ces cookies à des enfants. En effet, ils ne sont pas très friant de fruit ou de légumes... Mais ils ont eu beaucoup de succès auprès de mes vieux !
+                            Très bonne recette à l’exeption près qu’il est compliqué d’offrir ces cookies à des enfants. En effet, ils ne sont pas très friant de fruit ou de légumes... Mais ils ont eu beaucoup de succès auprès de mes vieux !
+                            Très bonne recette à l’exeption près qu’il est compliqué d’offrir ces cookies à des enfants. En effet, ils ne sont pas très friant de fruit ou de légumes... Mais ils ont eu beaucoup de succès auprès de mes vieux !
+                        </local:UserReview.Comment>
+                    </local:UserReview>
 
                 </VerticalStackLayout>
             </ScrollView>
-            <Border Grid.Row="1">
-                <Grid ColumnDefinitions="50, *, 50">
-                
-                    <Grid Grid.Column="0"
+            <Border>
+                <AbsoluteLayout>
+
+                    <Grid AbsoluteLayout.LayoutBounds="0, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional"
+                          Margin="20"
                           ColumnDefinitions="50, 50, 50, 50"
                           RowDefinitions="50, 50">
 
@@ -46,24 +55,28 @@
                                HorizontalOptions="StartAndExpand" VerticalOptions="Center"
                                HorizontalTextAlignment="Center"/>
 
-                        <Image Source="star_icon.png" Grid.Row="1" Grid.Column="0"/>
-                        <Image Source="star_icon.png" Grid.Row="1" Grid.Column="1"/>
-                        <Image Source="star_icon.png" Grid.Row="1" Grid.Column="2"/>
-                        <Image Source="star_icon.png" Grid.Row="1" Grid.Column="3"/>
+                        <Image Style="{StaticResource Key=starCommentImage}" Grid.Row="1" Grid.Column="0"/>
+                        <Image Style="{StaticResource Key=starCommentImage}" Grid.Row="1" Grid.Column="1"/>
+                        <Image Style="{StaticResource Key=starCommentImage}" Grid.Row="1" Grid.Column="2"/>
+                        <Image Style="{StaticResource Key=starCommentImage}" Grid.Row="1" Grid.Column="3"/>
 
                     </Grid>
 
-                    <Editor Grid.Column="1"
-                            Placeholder="Laisser un commentaire..."
-                            Keyboard="Plain"
+                    <Editor AbsoluteLayout.LayoutBounds="0.5, 0.5, 700, 150" AbsoluteLayout.LayoutFlags="PositionProportional"
+                            Margin="20"
+                            Placeholder="Laisser un commentaire..." PlaceholderColor="Black" FontSize="16"
+                            BackgroundColor="{StaticResource Gray100}" Keyboard="Text"
                             IsSpellCheckEnabled="True"
                             IsTextPredictionEnabled="True"/>
 
-                    <Button Grid.Column="2" Text="Valider" BackgroundColor="LightGreen"/>
+                    <Button AbsoluteLayout.LayoutBounds="1, 6, 270, 150" AbsoluteLayout.LayoutFlags="PositionProportional"
+                            Margin="50"
+                            Text="Valider" VerticalOptions="Center" TextColor="Black"
+                            BackgroundColor="LightGreen"/>
 
-                </Grid>
+                </AbsoluteLayout>
             </Border>
-        </Grid>
+        </VerticalStackLayout>
     </VerticalStackLayout>
     
-</ContentPage>
\ No newline at end of file
+</ContentPage>
diff --git a/MCTG/Views/Resources/Styles/Styles.xaml b/MCTG/Views/Resources/Styles/Styles.xaml
index 34ebd36..43b6e39 100644
--- a/MCTG/Views/Resources/Styles/Styles.xaml
+++ b/MCTG/Views/Resources/Styles/Styles.xaml
@@ -18,6 +18,11 @@
         <Setter Property="Margin" Value="10"/>
     </Style>
 
+    <Style x:Key="starCommentImage" TargetType="Image">
+        <Setter Property="Source" Value="star_icon.png"/>
+        <Setter Property="Margin" Value="5"/>
+    </Style>
+
     <Style x:Key="button1" TargetType="Button">
         <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
         <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Tertiary}, Dark={StaticResource Gray500}}"/>
diff --git a/MCTG/Views/UserReview.xaml b/MCTG/Views/UserReview.xaml
index 31fa6ba..0612906 100644
--- a/MCTG/Views/UserReview.xaml
+++ b/MCTG/Views/UserReview.xaml
@@ -6,20 +6,21 @@
              x:Name="nUserRef">
 
     <Grid
-        ColumnDefinitions="250, *"
-        RowDefinitions="200">
+        ColumnDefinitions="250, *">
 
         <!-- Stars, user profile picture and name -->
         <Grid Grid.Column="0"
               ColumnDefinitions="50, 50, 50, 50"
-              RowDefinitions="50, 50">
+              RowDefinitions="50, 50"
+              Margin="20">
 
-            <Image Source="star_icon.png" Grid.Column="0"/>
-            <Image Source="star_icon.png" Grid.Column="1"/>
-            <Image Source="star_icon.png" Grid.Column="2"/>
-            <Image Source="star_icon.png" Grid.Column="3"/>
+            <Image Style="{StaticResource Key=starCommentImage}" Grid.Column="0"/>
+            <Image Style="{StaticResource Key=starCommentImage}" Grid.Column="1"/>
+            <Image Style="{StaticResource Key=starCommentImage}" Grid.Column="2"/>
+            <Image Style="{StaticResource Key=starCommentImage}" Grid.Column="3"/>
 
             <Image Source="person_default.png" Grid.Row="1"/>
+            
             <Label Text="Charles Jacob"
                    Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"
                    HorizontalOptions="StartAndExpand" VerticalOptions="Center"
@@ -28,10 +29,14 @@
         </Grid>
         
         <!-- Comment content -->
-        <Label Text="{Binding Comment, Source={x:Reference nUserRef}}"
-               Grid.Column="2"
-               BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Gray400}}"
-               TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
+        <Border Grid.Column="2" Margin="20"
+                BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Gray400}}">
+
+            <Label Text="{Binding Comment, Source={x:Reference nUserRef}}"
+                   BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Gray400}}"
+                   TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"
+                   Margin="20" FontSize="16"/>
+        </Border>
 
     </Grid>