From 1c0fc35b4ab4a76955a510b190e85f32dcd26657 Mon Sep 17 00:00:00 2001
From: Corentin LEMAIRE <corentin.lemaire@etu.uca.fr>
Date: Fri, 21 Apr 2023 10:44:45 +0200
Subject: [PATCH] Finish the responsive on all pages except SongPage

---
 Sources/Linaris/AlbumPage.xaml               | 41 ++++----
 Sources/Linaris/Resources/Styles/Styles.xaml | 99 ++++++++++++++++++++
 2 files changed, 117 insertions(+), 23 deletions(-)

diff --git a/Sources/Linaris/AlbumPage.xaml b/Sources/Linaris/AlbumPage.xaml
index 5001f62..0cce3f9 100644
--- a/Sources/Linaris/AlbumPage.xaml
+++ b/Sources/Linaris/AlbumPage.xaml
@@ -24,14 +24,11 @@
                 
                 <SearchBar Style="{StaticResource SearchBar}"/>
 
-                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
+                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Style="{StaticResource InfosComplementairesGridTrigger}">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="6*"/>
                         <ColumnDefinition Width="*"/>
                     </Grid.ColumnDefinitions>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="1000*"/>
-                    </Grid.RowDefinitions>
                     <VerticalStackLayout Grid.Column="0">
                         <avatarview:SfAvatarView 
                             Style="{StaticResource pdp}"
@@ -92,32 +89,30 @@
                                    HorizontalTextAlignment="Center"/>
                         </Frame>
 
-
-                    </VerticalStackLayout>
-                    <ScrollView Grid.Column="1"
-                                VerticalOptions="Fill"
-                                BackgroundColor="gray">
-                        <FlexLayout Direction="Row"
-                            AlignItems="Start"
-                            JustifyContent="SpaceAround"
-                            Wrap="Wrap"
-                            VerticalOptions="Fill">
+                        <VerticalStackLayout VerticalOptions="Fill" BackgroundColor="grey" Style="{StaticResource InfosStackTrigger}" Padding="20" Margin="0,10,0,10">
                             <VerticalStackLayout HorizontalOptions="Fill">
-                                <Label Text="Informations complémentaires"
-                                       TextColor="White"
-                                       HorizontalOptions="Center">
+                                <Label Text="Informations complémentaires" TextColor="White" HorizontalOptions="Center">
                                 </Label>
-
-                                <Label
-                                       TextColor="White"
-                                       HorizontalOptions="Center"
-                                       VerticalOptions="End">
+                                <Label TextColor="White" HorizontalOptions="Center" VerticalOptions="End">
                                     <Label.Text>
                                         Plein d'informations sur ce bel album, plein de chiffres etc...
                                     </Label.Text>
                                 </Label>
                             </VerticalStackLayout>
-                        </FlexLayout>
+                        </VerticalStackLayout>
+
+
+                    </VerticalStackLayout>
+                    <ScrollView Grid.Column="1" VerticalOptions="Fill" BackgroundColor="gray">
+                        <VerticalStackLayout HorizontalOptions="Fill">
+                            <Label Text="Informations complémentaires" TextColor="White" HorizontalOptions="Center"/>
+
+                            <Label TextColor="White" HorizontalOptions="Center" VerticalOptions="End">
+                                <Label.Text>
+                                    Plein d'informations sur ce bel album, plein de chiffres etc...
+                                </Label.Text>
+                            </Label>
+                        </VerticalStackLayout>
                     </ScrollView>
                 </Grid>
 
diff --git a/Sources/Linaris/Resources/Styles/Styles.xaml b/Sources/Linaris/Resources/Styles/Styles.xaml
index 597fbae..3b2a38a 100644
--- a/Sources/Linaris/Resources/Styles/Styles.xaml
+++ b/Sources/Linaris/Resources/Styles/Styles.xaml
@@ -361,6 +361,105 @@
         </Setter>
     </Style>
 
+    <Style x:Key="InfosComplementairesGridTrigger" TargetType="Grid">
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <Setter.Value>
+                <VisualStateGroupList>
+                    <VisualStateGroup>
+
+                        <VisualState x:Name="Narrow">
+                            <VisualState.StateTriggers>
+                                <AdaptiveTrigger MinWindowWidth="0"/>
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="ColumnDefinitions">
+                                    <Setter.Value>
+                                        <ColumnDefinitionCollection>
+                                            <ColumnDefinition Width="*"/>
+                                            <ColumnDefinition Width="0"/>
+                                        </ColumnDefinitionCollection>
+                                    </Setter.Value>
+                                </Setter>
+                            </VisualState.Setters>
+                        </VisualState>
+
+                        <VisualState x:Name="Medium">
+                            <VisualState.StateTriggers>
+                                <AdaptiveTrigger MinWindowWidth="600"/>
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="ColumnDefinitions">
+                                    <Setter.Value>
+                                        <ColumnDefinitionCollection>
+                                            <ColumnDefinition Width="*"/>
+                                            <ColumnDefinition Width="0"/>
+                                        </ColumnDefinitionCollection>
+                                    </Setter.Value>
+                                </Setter>
+                            </VisualState.Setters>
+                        </VisualState>
+
+                        <VisualState x:Name="Wide">
+                            <VisualState.StateTriggers>
+                                <AdaptiveTrigger MinWindowWidth="1200"/>
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="ColumnDefinitions">
+                                    <Setter.Value>
+                                        <ColumnDefinitionCollection>
+                                            <ColumnDefinition Width="6*"/>
+                                            <ColumnDefinition Width="*"/>
+                                        </ColumnDefinitionCollection>
+                                    </Setter.Value>
+                                </Setter>
+                            </VisualState.Setters>
+                        </VisualState>
+
+                    </VisualStateGroup>
+                </VisualStateGroupList>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="InfosStackTrigger" TargetType="VerticalStackLayout">
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <Setter.Value>
+                <VisualStateGroupList>
+                    <VisualStateGroup>
+
+                        <VisualState x:Name="Narrow">
+                            <VisualState.StateTriggers>
+                                <AdaptiveTrigger MinWindowWidth="0"/>
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="IsVisible" Value="True"/>
+                            </VisualState.Setters>
+                        </VisualState>
+
+                        <VisualState x:Name="Medium">
+                            <VisualState.StateTriggers>
+                                <AdaptiveTrigger MinWindowWidth="600"/>
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="IsVisible" Value="True"/>
+                            </VisualState.Setters>
+                        </VisualState>
+
+                        <VisualState x:Name="Wide">
+                            <VisualState.StateTriggers>
+                                <AdaptiveTrigger MinWindowWidth="1200"/>
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="IsVisible" Value="False"/>
+                            </VisualState.Setters>
+                        </VisualState>
+
+                    </VisualStateGroup>
+                </VisualStateGroupList>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style TargetType="ActivityIndicator">
         <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
     </Style>