From f2403d5cf3090c0485ecc4e92e262820a3891774 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20=C3=96man?= <tommy@oeman.se>
Date: Fri, 26 Sep 2025 10:07:59 +0200
Subject: [PATCH] =?UTF-8?q?Person=20inmatning=20=C3=A4ndrad?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 GreadyPoang/Resources/Styles/AppStyles.xaml |  28 +++-
 GreadyPoang/Views/ParticipantListView.xaml  |  61 +++++----
 GreadyPoang/Views/RoundRunningView.xaml     |   2 +-
 GreadyPoang/Views/RoundStartingView.xaml    | 137 +++++++++++---------
 GreadyPoang/Views/RoundStartingView.xaml.cs |  15 +++
 5 files changed, 146 insertions(+), 97 deletions(-)

diff --git a/GreadyPoang/Resources/Styles/AppStyles.xaml b/GreadyPoang/Resources/Styles/AppStyles.xaml
index d8471f9..e297278 100644
--- a/GreadyPoang/Resources/Styles/AppStyles.xaml
+++ b/GreadyPoang/Resources/Styles/AppStyles.xaml
@@ -4,6 +4,26 @@
         xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
+    <Style TargetType="StackLayout" x:Key="ResponsiveStackStyle">
+        <Setter Property="Orientation" Value="Horizontal"/>
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup x:Name="WidthStates">
+                    <VisualState x:Name="Wide">
+                        <VisualState.Setters>
+                            <Setter TargetName="ResponsiveStack" Property="StackLayout.Orientation" Value="Horizontal" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="Narrow">
+                        <VisualState.Setters>
+                            <Setter TargetName="ResponsiveStack" Property="StackLayout.Orientation" Value="Vertical" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
+
     <Style x:Key="StatusLabelStyle" TargetType="Label" >
         <Style.Triggers>
             <DataTrigger TargetType="Label" Binding="{Binding Status}" Value="New">
@@ -20,7 +40,7 @@
             </DataTrigger>
         </Style.Triggers>
     </Style>
-    
+
     <Style x:Key="StatusBorderStyle" TargetType="Border">
         <Style.Triggers>
             <DataTrigger TargetType="Border" Binding="{Binding Status}" Value="New">
@@ -85,11 +105,11 @@
     <Style TargetType="Label">
         <Setter Property="VerticalTextAlignment" Value="Center" />
     </Style>
-    
+
     <Style TargetType="HorizontalStackLayout">
         <Setter Property="Spacing" Value="5" />
     </Style>
-    
+
     <Style TargetType="Button">
         <Setter Property="WidthRequest" Value="150"/>
         <Setter Property="BackgroundColor" Value="Goldenrod"/>
@@ -173,5 +193,5 @@
                 </VisualStateGroup>
             </VisualStateGroupList>
         </Setter>
-    </Style>    
+    </Style>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/GreadyPoang/Views/ParticipantListView.xaml b/GreadyPoang/Views/ParticipantListView.xaml
index 80a3e73..121ef2e 100644
--- a/GreadyPoang/Views/ParticipantListView.xaml
+++ b/GreadyPoang/Views/ParticipantListView.xaml
@@ -21,37 +21,42 @@
                 ViewTitle="Deltagare"
                 ViewDescription="Lägg till deltagare här" />
             <Border  Stroke="Gold" StrokeThickness="2" BackgroundColor="LemonChiffon" Grid.Row="1">
-                <StackLayout Spacing="4"  >
-                    <FlexLayout  Wrap="Wrap" >
-                        <Label Style="{StaticResource Label}" 
-                        Text="Deltagare Förnamn:" 
-                        FontAttributes="Bold"/>
-                        <Entry 
-                        x:Name="ParticipantFirstNameEntry"
-                        Placeholder="Förnamn"
-                        Text="{Binding ParticipantObject.FirstName}" />
-
-                        <Label Style="{StaticResource Label}" 
-                        Text="Deltagare Efternamn:" 
-                        FontAttributes="Bold"/>
-                        <Entry 
-                        x:Name="ParticipantLastNameEntry"
-                        Placeholder="Efternamn"
-                        Text="{Binding ParticipantObject.LastName}" />
-
-                        <Label Style="{StaticResource Label}" 
-                        Text="Deltagare Email:" 
-                        FontAttributes="Bold"/>
-                        <Entry 
-                        x:Name="ParticipantEmailEntry"
-                        Placeholder="Mail adress"
-                        Text="{Binding ParticipantObject.Email}" />
-                        <Button Style="{StaticResource HoverButtonBlueStyle}"
+                <VerticalStackLayout Spacing="4"  >
+                    <Label Style="{StaticResource Label}" 
+                        Text="Deltagare " 
+                        FontAttributes="Bold" FontSize="Large"/>
+                    <Grid ColumnDefinitions="Auto,Auto,*" RowDefinitions="Auto,auto,auto,auto"
+                          Padding="10" RowSpacing="8">
+                        <Label Grid.Row="0" Grid.Column="0" Style="{StaticResource Label}" 
+                            Text="Förnamn:" 
+                            FontAttributes="Bold"/>
+                        <Entry Grid.Row="0" Grid.Column="1"
+                            x:Name="ParticipantFirstNameEntry"
+                            Placeholder="Förnamn"
+                                FontSize="15"
+                            Text="{Binding ParticipantObject.FirstName}" TextColor="Black"/>
+                        <Label Grid.Row="1" Grid.Column="0" Style="{StaticResource Label}" 
+                            Text="Efternamn:" 
+                            FontAttributes="Bold"/>
+                        <Entry Grid.Row="1" Grid.Column="1"
+                            x:Name="ParticipantLastNameEntry"
+                            Placeholder="Efternamn"
+                                FontSize="15"
+                            Text="{Binding ParticipantObject.LastName}" TextColor="Black"/>
+                        <Label Grid.Row="2" Grid.Column="0" Style="{StaticResource Label}" 
+                            Text="Email" 
+                            FontAttributes="Bold"/>
+                        <Entry Grid.Row="2" Grid.Column="1"
+                            x:Name="ParticipantEmailEntry"
+                            Placeholder="Mail adress"
+                                FontSize="15"
+                            Text="{Binding ParticipantObject.Email}" TextColor="Black"/>
+                        <Button Grid.Row="3" Grid.Column="1" Style="{StaticResource HoverButtonBlueStyle}"
                         Text="Lägg till"
                         HorizontalOptions="End"
                         Command="{Binding SaveCommand}" />
-                    </FlexLayout>
-                </StackLayout>
+                    </Grid>
+                </VerticalStackLayout>
             </Border>
             <Border Grid.Row="2" Stroke="Gold" BackgroundColor="Ivory" StrokeThickness="2" Padding="5">
                 <CollectionView 
diff --git a/GreadyPoang/Views/RoundRunningView.xaml b/GreadyPoang/Views/RoundRunningView.xaml
index 0d5c415..b13bda5 100644
--- a/GreadyPoang/Views/RoundRunningView.xaml
+++ b/GreadyPoang/Views/RoundRunningView.xaml
@@ -87,7 +87,7 @@
                             Command="{Binding StoreAndHandlePointsCommand}"/>
                 </HorizontalStackLayout>
             </Border>
-            <ScrollView Grid.Row="4">
+            <ScrollView Grid.Row="4" Orientation="Horizontal">
                 <Grid 
                   x:Name="ScoreGrid"
                   ColumnSpacing="5"
diff --git a/GreadyPoang/Views/RoundStartingView.xaml b/GreadyPoang/Views/RoundStartingView.xaml
index 17fb383..88b9b2e 100644
--- a/GreadyPoang/Views/RoundStartingView.xaml
+++ b/GreadyPoang/Views/RoundStartingView.xaml
@@ -9,6 +9,9 @@
              x:DataType="vm:RoundStartingViewModelCommands"
              x:Name="GameRoundStartingPage"
              Title="Starta ny Runda">
+
+
+
     <Border Style="{StaticResource Border.Page}" StrokeThickness="4">
         <Grid Style="{StaticResource Grid.Page}">
             <Grid.RowDefinitions>
@@ -21,30 +24,34 @@
                 ViewTitle="Starta en Spelrunda"
                 ViewDescription="Välj deltagare och initiera spel" />
             <Border Grid.Row="1" Stroke="Gold" StrokeThickness="2" BackgroundColor="LemonChiffon"   >
-                <HorizontalStackLayout>
-                    <Border     Stroke="Gray"
+                <ScrollView Orientation="Horizontal">
+                    <StackLayout x:Name="ResponsiveStack" Spacing="5" Style="{StaticResource ResponsiveStackStyle}" >
+                        <Border     Stroke="Gray"
                         StrokeThickness="2"
                         BackgroundColor="LightGray"
                         Padding="10"
                         Margin="2"
-                        HorizontalOptions="Center"
+                        HorizontalOptions="Start"
                         VerticalOptions="Center"
                         WidthRequest="250">
-                        <Picker ItemsSource="{Binding ParticipantList}"
+                            <Picker ItemsSource="{Binding ParticipantList}"
                                 ItemDisplayBinding="{Binding LastNameFirstName}"
                                 SelectedItem="{Binding SelectedItem}"
                                 TextColor="Black"
                                 Title="Välj deltagare"/>
-                    </Border>
-                    <Border Stroke="Gold" StrokeThickness="2" BackgroundColor="LightCyan"   >
-                        <CollectionView 
+                        </Border>
+                        <Border Stroke="Gold" 
+                            StrokeThickness="2" 
+                            BackgroundColor="LightCyan" >
+                            <!--WidthRequest="100">-->
+                            <CollectionView 
                             ItemsSource="{Binding RoundElements}"
                             ItemsLayout="HorizontalList"
                             x:Name="ParticipantList"
                             SelectionMode="None">
-                            <CollectionView.ItemTemplate>
-                                <DataTemplate x:DataType="model:RoundBuilderElement">
-                                    <Border
+                                <CollectionView.ItemTemplate>
+                                    <DataTemplate x:DataType="model:RoundBuilderElement">
+                                        <Border
                                         Padding="2"
                                         Margin="5"
                                         WidthRequest="150"
@@ -55,25 +62,25 @@
                                         StrokeShape="RoundRectangle 10"
                                         Style="{StaticResource StatusBorderStyle}"
                                         >
-                                        <Border.GestureRecognizers>
-                                            <TapGestureRecognizer
+                                            <Border.GestureRecognizers>
+                                                <TapGestureRecognizer
                                                 Command="{Binding BindingContext.ParticipantTappedCommand, Source={x:Reference Name=ParticipantList}}"
                                                 CommandParameter="{Binding .}" />
-                                        </Border.GestureRecognizers>
-                                        <Border Margin="1" Padding="2" StrokeThickness="3" >
-                                            <VerticalStackLayout>
-                                                <Label Text="{Binding ParticipantName}" FontAttributes="Bold" FontSize="14" Style="{StaticResource StatusLabelStyle}"/>
-                                                <Label Text="{Binding GameRoundStartDateString}" FontAttributes="Bold" FontSize="14" Style="{StaticResource StatusLabelStyle}"/>
-                                                <Label Text="{Binding StatusString}" FontSize="14" Style="{StaticResource StatusLabelStyle}" />
-                                            </VerticalStackLayout>
+                                            </Border.GestureRecognizers>
+                                            <Border Margin="1" Padding="2" StrokeThickness="3" >
+                                                <VerticalStackLayout>
+                                                    <Label Text="{Binding ParticipantName}" FontAttributes="Bold" FontSize="14" Style="{StaticResource StatusLabelStyle}"/>
+                                                    <Label Text="{Binding GameRoundStartDateString}" FontAttributes="Bold" FontSize="14" Style="{StaticResource StatusLabelStyle}"/>
+                                                    <Label Text="{Binding StatusString}" FontSize="14" Style="{StaticResource StatusLabelStyle}" />
+                                                </VerticalStackLayout>
+                                            </Border>
                                         </Border>
-                                    </Border>
-                                </DataTemplate>
-                            </CollectionView.ItemTemplate>
-                        </CollectionView>
-                    </Border>
-                    <Border  
-                        HorizontalOptions="End"
+                                    </DataTemplate>
+                                </CollectionView.ItemTemplate>
+                            </CollectionView>
+                        </Border>
+                        <Border  
+                        HorizontalOptions="Start"
                         Padding="2"
                         Margin="5"
                         WidthRequest="150"
@@ -83,62 +90,64 @@
                         x:Name="RoundElementBorder"
                         BackgroundColor="BlanchedAlmond"
                         StrokeShape="RoundRectangle 10">
-                        <VerticalStackLayout Spacing="5" Padding="4">
-                            <Button Text="Spara omgång" WidthRequest="130"
+                            <VerticalStackLayout Spacing="5" Padding="4">
+                                <Button Text="Spara omgång" WidthRequest="130"
                                 Style="{StaticResource HoverButtonBlueStyle}"
                                 Command="{Binding SaveCommand}" />
-                            <Button Text="Rensa" WidthRequest="130"
+                                <Button Text="Rensa" WidthRequest="130"
                                 Style="{StaticResource HoverButtonRedStyle}"
                                 Command="{Binding RensaCommand}" />
-                        </VerticalStackLayout>
-                    </Border>
-                </HorizontalStackLayout>
+                            </VerticalStackLayout>
+                        </Border>
+                    </StackLayout>
+                </ScrollView>
             </Border>
             <Border Grid.Row="2" Stroke="Gold" BackgroundColor="Ivory" StrokeThickness="2" Padding="5">
-                <CollectionView ItemsSource="{Binding GameRoundList}" x:Name="OuterList">
-                    <CollectionView.ItemTemplate>
-                        <DataTemplate  x:DataType="model:RoundBuilderGroup">
-                            <VerticalStackLayout Padding="10">
-                                <!-- Gruppens rubrik -->
-                                <HorizontalStackLayout>
-                                    <Label Text="{Binding GameRoundId, StringFormat='Runda: {0}'}" FontAttributes="Bold" FontSize="18"  />
-                                    <Label Text="{Binding GameRoundStartDate, StringFormat='Startdatum: {0}'}" FontAttributes="Bold" FontSize="18"/>
-                                    <Label Text="{Binding Status, StringFormat='Status: {0}'}" FontAttributes="Bold" FontSize="18" />
-                                </HorizontalStackLayout>
-                                <!-- Horisontell lista med deltagare -->
-                                <CollectionView ItemsSource="{Binding Elements}"
+                <ScrollView Orientation="Horizontal">
+                    <CollectionView ItemsSource="{Binding GameRoundList}" x:Name="OuterList">
+                        <CollectionView.ItemTemplate>
+                            <DataTemplate  x:DataType="model:RoundBuilderGroup">
+                                <VerticalStackLayout Padding="10">
+                                    <!-- Gruppens rubrik -->
+                                    <HorizontalStackLayout>
+                                        <Label Text="{Binding GameRoundId, StringFormat='Runda: {0}'}" FontAttributes="Bold" FontSize="18"  />
+                                        <Label Text="{Binding GameRoundStartDate, StringFormat='Startdatum: {0}'}" FontAttributes="Bold" FontSize="18"/>
+                                        <Label Text="{Binding Status, StringFormat='Status: {0}'}" FontAttributes="Bold" FontSize="18" />
+                                    </HorizontalStackLayout>
+                                    <!-- Horisontell lista med deltagare -->
+                                    <CollectionView ItemsSource="{Binding Elements}"
                                                 ItemsLayout="HorizontalList"
                                                 x:Name="InnerList" 
                                                 Margin="0,10,0,10"
                                                 ItemSizingStrategy="MeasureAllItems">
-                                    <CollectionView.ItemTemplate>
-                                        <DataTemplate x:DataType="model:RoundBuilderElement">
-                                            <Border 
+                                        <CollectionView.ItemTemplate>
+                                            <DataTemplate x:DataType="model:RoundBuilderElement">
+                                                <Border 
                                                 Stroke="Gray" 
                                                 Padding="5" 
                                                 Margin="5,0"
                                                 Style="{StaticResource StatusBorderStyle}" >
-                                                <Border.GestureRecognizers>
-                                                    <TapGestureRecognizer
+                                                    <Border.GestureRecognizers>
+                                                        <TapGestureRecognizer
                                                         Command="{Binding Path=BindingContext.ElementTappedCommand,Source={x:Reference OuterList}}"
                                                         CommandParameter="{Binding .}" />
-                                                </Border.GestureRecognizers>
-
-                                                <VerticalStackLayout>
-                                                    <Label Text="{Binding ParticipantName}" FontAttributes="Bold" Style="{StaticResource StatusLabelStyle}" />
-                                                    <Label Text="{Binding GameRegPoints, StringFormat='Poäng: {0}'}" Style="{StaticResource StatusLabelStyle}"/>
-                                                    <Label Text="{Binding  GameRoundRegNr, StringFormat='RegNr: {0}'}" Style="{StaticResource StatusLabelStyle}"/>
-                                                </VerticalStackLayout>
-                                            </Border>
-                                        </DataTemplate>
-                                    </CollectionView.ItemTemplate>
-                                </CollectionView>
-                            </VerticalStackLayout>
-                        </DataTemplate>
-                    </CollectionView.ItemTemplate>
-                </CollectionView>
+                                                    </Border.GestureRecognizers>
 
+                                                    <VerticalStackLayout>
+                                                        <Label Text="{Binding ParticipantName}" FontAttributes="Bold" Style="{StaticResource StatusLabelStyle}" />
+                                                        <Label Text="{Binding GameRegPoints, StringFormat='Poäng: {0}'}" Style="{StaticResource StatusLabelStyle}"/>
+                                                        <Label Text="{Binding  GameRoundRegNr, StringFormat='RegNr: {0}'}" Style="{StaticResource StatusLabelStyle}"/>
+                                                    </VerticalStackLayout>
+                                                </Border>
+                                            </DataTemplate>
+                                        </CollectionView.ItemTemplate>
+                                    </CollectionView>
+                                </VerticalStackLayout>
+                            </DataTemplate>
+                        </CollectionView.ItemTemplate>
+                    </CollectionView>
 
+                </ScrollView>
             </Border>
         </Grid>
     </Border>
diff --git a/GreadyPoang/Views/RoundStartingView.xaml.cs b/GreadyPoang/Views/RoundStartingView.xaml.cs
index c3cd261..7e13819 100644
--- a/GreadyPoang/Views/RoundStartingView.xaml.cs
+++ b/GreadyPoang/Views/RoundStartingView.xaml.cs
@@ -23,6 +23,21 @@ public partial class RoundStartingView : ContentPage
         ViewModel.GetParticipants();
     }
 
+    protected override void OnSizeAllocated(double width, double height)
+    {
+        base.OnSizeAllocated(width, height);
+
+        if (width < 500)
+        {
+            VisualStateManager.GoToState(ResponsiveStack, "Narrow");
+            System.Diagnostics.Debug.WriteLine($"width={width} ResponsiveStack=Narrow ");
+        }
+        else
+        {
+            VisualStateManager.GoToState(ResponsiveStack, "Wide");
+            System.Diagnostics.Debug.WriteLine($"width={width} ResponsiveStack=Wide ");
+        }
+    }
 
 
 }
\ No newline at end of file