From 0f28233e04d11b2cfad6d9ec8d95d7c714459deb Mon Sep 17 00:00:00 2001
From: "Zach Keeping [SSW]" <11418832+zacharykeeping@users.noreply.github.com>
Date: Fri, 24 May 2024 12:34:19 +1000
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Mobile=20|=20Move=20to=20C?=
 =?UTF-8?q?ollectionView=20on=20EarnPage=20and=20RedeemPage=20(#920)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Move to CollectionView on EarnPage and RedeemPage

* Cleanup
---
 src/MobileUI/Controls/ListItem.xaml |  4 +-
 src/MobileUI/Pages/EarnPage.xaml    | 41 ++++++++++++---------
 src/MobileUI/Pages/RedeemPage.xaml  | 57 ++++++++++++++++-------------
 3 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/src/MobileUI/Controls/ListItem.xaml b/src/MobileUI/Controls/ListItem.xaml
index 36df3f807..26c51c434 100644
--- a/src/MobileUI/Controls/ListItem.xaml
+++ b/src/MobileUI/Controls/ListItem.xaml
@@ -46,7 +46,7 @@
         <Grid
             Grid.Column="1"
             ColumnDefinitions="*,Auto"
-            RowDefinitions="*,*"
+            RowDefinitions="Auto,*"
             VerticalOptions="Center"
             RowSpacing="2">
             <Label Grid.Row="0"
@@ -54,6 +54,8 @@
                    Text="{Binding Title, Source={x:Reference this}}"
                    TextColor="White"
                    InputTransparent="True"
+                   MaxLines="2"
+                   LineBreakMode="WordWrap"
                    VerticalTextAlignment="End"
                    FontSize="16"
                    Style="{StaticResource LabelBold}">
diff --git a/src/MobileUI/Pages/EarnPage.xaml b/src/MobileUI/Pages/EarnPage.xaml
index ebf9a9d35..8bc341b57 100644
--- a/src/MobileUI/Pages/EarnPage.xaml
+++ b/src/MobileUI/Pages/EarnPage.xaml
@@ -52,28 +52,33 @@
                                    Margin="0,0,0,25"
                                    x:Name="QuizIndicator" />
                 </Grid>
-
-                <VerticalStackLayout
+                <CollectionView
                     Grid.Row="1"
                     x:Name="QuizListSection"
-                    BindableLayout.ItemsSource="{Binding Quizzes}"
-                    Spacing="6">
-                    <BindableLayout.ItemTemplate>
+                    ItemsSource="{Binding Quizzes}"
+                    ItemsUpdatingScrollMode="KeepItemsInView"
+                    ItemSizingStrategy="{OnPlatform iOS='MeasureFirstItem', Android='MeasureAllItems'}">
+                    <CollectionView.ItemsLayout>
+                        <GridItemsLayout Orientation="Vertical" />
+                    </CollectionView.ItemsLayout>
+                    <CollectionView.ItemTemplate>
                         <DataTemplate x:DataType="viewModels:QuizItemViewModel">
-                            <controls:ListItem Title="{Binding Title}"
-                                               Description="{Binding Description}"
-                                               Points="{Binding Points}"
-                                               ButtonText="GO"
-                                               ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
-                                               ItemId="{Binding Id}"
-                                               ThumbnailImage="{Binding ThumbnailImage}"
-                                               PlaceholderGlyph="&#xf11b;"
-                                               ShowTick="{Binding Passed}"
-                                               IsDisabled="{Binding Passed}"
-                                               IsButtonDisabled="{Binding Passed}"/> 
+                            <Grid Padding="0,0,0,6">
+                                <controls:ListItem Title="{Binding Title}"
+                                                   Description="{Binding Description}"
+                                                   Points="{Binding Points}"
+                                                   ButtonText="GO"
+                                                   ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
+                                                   ItemId="{Binding Id}"
+                                                   ThumbnailImage="{Binding ThumbnailImage}"
+                                                   PlaceholderGlyph="&#xf11b;"
+                                                   ShowTick="{Binding Passed}"
+                                                   IsDisabled="{Binding Passed}"
+                                                   IsButtonDisabled="{Binding Passed}"/> 
+                            </Grid>
                         </DataTemplate>
-                    </BindableLayout.ItemTemplate>
-                </VerticalStackLayout>
+                    </CollectionView.ItemTemplate>
+                </CollectionView>
             </Grid>
             <ActivityIndicator
                 HorizontalOptions="Center"
diff --git a/src/MobileUI/Pages/RedeemPage.xaml b/src/MobileUI/Pages/RedeemPage.xaml
index 68f2ddfde..1ec7ebc0b 100644
--- a/src/MobileUI/Pages/RedeemPage.xaml
+++ b/src/MobileUI/Pages/RedeemPage.xaml
@@ -109,34 +109,39 @@
                                            Margin="0,0,0,25"
                                            x:Name="QuizIndicator" />
                         </Grid>
-
-                        <VerticalStackLayout
-                            x:Name="QuizListSection"
-                            BindableLayout.ItemsSource="{Binding Rewards}"
-                            Spacing="6">
-                            <BindableLayout.ItemTemplate>
+                        
+                        <CollectionView
+                            ItemsSource="{Binding Rewards}"
+                            ItemsUpdatingScrollMode="KeepItemsInView"
+                            ItemSizingStrategy="{OnPlatform iOS='MeasureFirstItem', Android='MeasureAllItems'}">
+                            <CollectionView.ItemsLayout>
+                                <GridItemsLayout Orientation="Vertical" />
+                            </CollectionView.ItemsLayout>
+                            <CollectionView.ItemTemplate>
                                 <DataTemplate x:DataType="models:Reward">
-                                    <controls:ListItem Title="{Binding Name}"
-                                                       Description="{Binding Description}"
-                                                       IsButtonDisabled="{Binding CanAfford, Converter={StaticResource InverseBool}}"
-                                                       ItemId="{Binding Id}"
-                                                       Points="{Binding Cost}"
-                                                       ButtonText="GET"
-                                                       ThumbnailImage="{Binding ImageUri}"
-                                                       PlaceholderGlyph="&#xf06b;"
-                                                       ButtonCommand="{Binding Source={x:Reference RewardList}, Path=BindingContext.RedeemRewardCommand}">
-                                        <controls:ListItem.Triggers>
-                                            <DataTrigger TargetType="controls:ListItem"
-                                                         Binding="{Binding IsPendingRedemption}"
-                                                         Value="True">
-                                                <Setter Property="ButtonText"
-                                                        Value="QR" />
-                                            </DataTrigger>
-                                        </controls:ListItem.Triggers>
-                                    </controls:ListItem>
+                                    <Grid Padding="0,0,0,6">
+                                        <controls:ListItem Title="{Binding Name}"
+                                                           Description="{Binding Description}"
+                                                           IsButtonDisabled="{Binding CanAfford, Converter={StaticResource InverseBool}}"
+                                                           ItemId="{Binding Id}"
+                                                           Points="{Binding Cost}"
+                                                           ButtonText="GET"
+                                                           ThumbnailImage="{Binding ImageUri}"
+                                                           PlaceholderGlyph="&#xf06b;"
+                                                           ButtonCommand="{Binding Source={x:Reference RewardList}, Path=BindingContext.RedeemRewardCommand}">
+                                            <controls:ListItem.Triggers>
+                                                <DataTrigger TargetType="controls:ListItem"
+                                                             Binding="{Binding IsPendingRedemption}"
+                                                             Value="True">
+                                                    <Setter Property="ButtonText"
+                                                            Value="QR" />
+                                                </DataTrigger>
+                                            </controls:ListItem.Triggers>
+                                        </controls:ListItem>
+                                    </Grid>
                                 </DataTemplate>
-                            </BindableLayout.ItemTemplate>
-                        </VerticalStackLayout>
+                            </CollectionView.ItemTemplate>
+                        </CollectionView>
                     </VerticalStackLayout>
                 </ScrollView>
             </Grid>