Merge pull request #146 from CodebreakerApp/145-maui-inconsistent-font-size

145 maui inconsistent font size

Author: christiannagel

src/Codebreaker.MAUI/Views/Components/GameResultDisplay.xaml

@@ -11,12 +11,12 @@
         <VerticalStackLayout IsVisible="{Binding GameStatus, Mode=OneWay, Converter={converter:GameStatusToIsVisibleConverter}, ConverterParameter=Won}">
             <Image Source="wonanimation_300_opt.gif" IsAnimationPlaying="True" MaximumHeightRequest="300" />
             <Label Text="Congratulations - you won the game 🎉🏆" FontSize="20" HorizontalOptions="Center" Margin="0,50,0,20" />
-            <Button Text="Great, play again" HorizontalOptions="Center" Margin="0,0,0,100" Command="{Binding StartGameCommand, Mode=OneTime}" />
+            <Button Text="Great, play again" HorizontalOptions="Center" Margin="0,0,0,50" Command="{Binding StartGameCommand, Mode=OneTime}" />
         </VerticalStackLayout>
         <VerticalStackLayout IsVisible="{Binding GameStatus, Mode=OneWay, Converter={converter:GameStatusToIsVisibleConverter}, ConverterParameter=Lost}">
             <Image Source="lostanimation_300_opt.gif" IsAnimationPlaying="True" MaximumHeightRequest="300" />
             <Label Text="Oh no - you lost the game 😑" FontSize="20" HorizontalOptions="Center" Margin="0,50,0,20" />
-            <Button Text="Ok, try again" HorizontalOptions="Center" Margin="0,0,0,100" Command="{Binding StartGameCommand, Mode=OneTime}" />
+            <Button Text="Ok, try again" HorizontalOptions="Center" Margin="0,0,0,50" Command="{Binding StartGameCommand, Mode=OneTime}" />
         </VerticalStackLayout>
     </Grid>
 </ContentView>

src/Codebreaker.MAUI/Views/Components/PegSelectionView.xaml

@@ -12,22 +12,47 @@
     <ContentView.Resources>
         <conv:DictionaryToValuesConverter x:Key="DictionaryToValuesConverter" />
     </ContentView.Resources>
-    <VerticalStackLayout>
-        <Label Text="Select your colors" FontSize="Header" />
-        <HorizontalStackLayout
+    <FlexLayout
+        Wrap="Wrap"
+        JustifyContent="Center"
+        AlignItems="End">
+        <VerticalStackLayout Spacing="5" Padding="5,0" VerticalOptions="End">
+            <Label Text="Select your colors" />
+            <HorizontalStackLayout
             BindableLayout.ItemsSource="{Binding Path=Fields, Mode=OneWay}"
             Spacing="4">
-            <BindableLayout.ItemTemplate>
-                <DataTemplate>
-                    <Picker
+                <BindableLayout.ItemTemplate>
+                    <DataTemplate>
+                        <Picker
                         x:Name="PegSelectionPicker"
                         x:DataType="{x:Type vmComponents:SelectedFieldViewModel}"
                         ItemsSource="{Binding Path=BindingContext.Game.FieldValues, Converter={StaticResource DictionaryToValuesConverter}, ConverterParameter='colors', Mode=OneWay, Source={x:Reference PegSelectionViewControl}}"
                         SelectedItem="{Binding Value, Mode=TwoWay}"
                         MinimumWidthRequest="50"
                         WidthRequest="88" />
-                </DataTemplate>
-            </BindableLayout.ItemTemplate>
-        </HorizontalStackLayout>
-    </VerticalStackLayout>
+                    </DataTemplate>
+                </BindableLayout.ItemTemplate>
+            </HorizontalStackLayout>
+        </VerticalStackLayout>
+        <Grid
+            FlexLayout.Basis="200"
+            FlexLayout.Grow="1"
+            ColumnDefinitions="*, auto"
+            MinimumWidthRequest="250"
+            VerticalOptions="End"
+            Padding="5,0"
+            Margin="0,5,0,0">
+            <Button
+                Grid.Column="0"
+                Text="Move"
+                MinimumWidthRequest="150"
+                Command="{Binding SetMoveCommand, Mode=OneTime}" />
+            <ActivityIndicator
+                Grid.Column="1"
+                Margin="15,0,0,0"
+                IsVisible="{Binding InProgress, Mode=OneWay}"
+                IsRunning="True"
+                VerticalOptions="Center" />
+        </Grid>
+    </FlexLayout>
 </ContentView>

src/Codebreaker.MAUI/Views/Pages/GamePage.xaml

@@ -26,20 +26,20 @@
             IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Start}">
             <VerticalStackLayout
                 FlexLayout.Basis="500"
-                FlexLayout.Grow="2">
-                <Label
-                    VerticalTextAlignment="Center"
-                    Text="Enter your Gamername" 
-                    FontSize="Header" />
+                Padding="5,0"
+                FlexLayout.Grow="2"
+                Spacing="5">
+                <Label Text="Enter your player name" />
                 <Entry
                     IsEnabled="{Binding IsNameEnterable, Mode=OneWay}"
                     Text="{Binding Name, Mode=TwoWay }"
-                    Placeholder="Enter your name"/>
+                    Placeholder="Enter your player name"/>
             </VerticalStackLayout>
-            <Grid 
+            <Grid
                 FlexLayout.Basis="300"
                 FlexLayout.Grow="1"
                 Margin="0,5,0,0"
+                Padding="5,0"
                 ColumnDefinitions="*, auto"
                 MinimumWidthRequest="250"
                 IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Start}">
@@ -57,36 +57,12 @@
             </Grid>
         </FlexLayout>
 
-        <FlexLayout
+        <components:PegSelectionView
             Grid.Row="1"
             MaximumWidthRequest="700"
-            IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Cancelable}"
-            Wrap="Wrap"
-            JustifyContent="Center"
-            AlignItems="Center">
-            <components:PegSelectionView />
-            <Grid
-                FlexLayout.Basis="200"
-                FlexLayout.Grow="1"
-                ColumnDefinitions="*, auto"
-                Padding="0,10"
-                MinimumWidthRequest="250">
-                <Button
-                    Grid.Column="0"
-                    Text="Move"
-                    MinimumWidthRequest="150"
-                    IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Cancelable}"
-                    Command="{Binding SetMoveCommand, Mode=OneTime}" />
-                <ActivityIndicator
-                    Grid.Column="1"
-                    Margin="15,0,0,0"
-                    IsVisible="{Binding InProgress, Mode=OneWay}"
-                    IsRunning="True"
-                    VerticalOptions="Center" />
-            </Grid>
-        </FlexLayout>
-
-        <ScrollView Grid.Row="2" Padding="0,0,0,15" x:Name="pegScrollView" HorizontalOptions="CenterAndExpand">
+            IsVisible="{Binding GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibleConverter}, ConverterParameter=Cancelable}"/>
+        
+        <ScrollView Grid.Row="2" Padding="0,15,0,15" x:Name="pegScrollView" HorizontalOptions="CenterAndExpand">
             <ListView
                 x:Name="test"
                 HorizontalOptions="FillAndExpand"