feat : Multipage responsive

Android/app/src/main/java/com/example/mathseduc/MultiActivity.kt

@@ -3,25 +3,14 @@ package com.example.mathseduc
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.tooling.preview.Preview
 import com.example.mathseduc.ui.MultiPage
-import com.example.mathseduc.ui.theme.MathsEducTheme
 
 
 class MultiActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            MultiPage()
+            MultiPage(activity = this@MultiActivity)
         }
     }
 }
-
-@Preview(showBackground = true)
-@Composable
-fun MultiPreview() {
-    MathsEducTheme {
-        MultiPage()
-    }
-}

Android/app/src/main/java/com/example/mathseduc/ui/activity_multi.kt

@@ -2,29 +2,34 @@ package com.example.mathseduc.ui
 
 import android.content.Context
 import android.content.Intent
+import android.content.res.Configuration
 import android.util.Log
 import android.widget.Toast
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.ArrowBack
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
@@ -36,13 +41,18 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
 import com.example.mathseduc.CreateLobbyActivity
 import com.example.mathseduc.MainActivity
+import com.example.mathseduc.MultiActivity
 import com.example.mathseduc.ServerDetailsActivity
 import com.example.mathseduc.controllers.ControllerChapter
 import com.example.mathseduc.controllers.ControllerLobby
@@ -55,14 +65,26 @@ import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import okhttp3.MultipartBody
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun MultiPage() {
+fun MultiPage(activity: MultiActivity) {
     val context = LocalContext.current
     var selectedItem by rememberSaveable { mutableStateOf<Lobby?>(null) }
     var lobbyList by remember { mutableStateOf<List<Lobby>>(emptyList()) }
     val scope = rememberCoroutineScope()
     var refreshState by remember { mutableStateOf(true) }
 
+    val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
+
+    WindowCompat.setDecorFitsSystemWindows(activity.window, false)
+
+    val windowInsetsController = remember {
+        WindowCompat.getInsetsController(activity.window, activity.window.decorView)
+    }
+
+    // Hide the status bar
+    windowInsetsController?.hide(WindowInsetsCompat.Type.statusBars())
+
     // Fonction pour actualiser la liste des lobbies
     suspend fun refreshLobbyList() {
         val refreshedLobbyList = withContext(Dispatchers.IO) {
@@ -93,43 +115,43 @@ fun MultiPage() {
         }
     }
 
-    Box(
+    TopAppBar(
-        modifier = Modifier
+            colors = TopAppBarDefaults.topAppBarColors(
-                .fillMaxSize()
+                    containerColor = Color.Transparent,
-                .padding(16.dp)
+            ),
-    ) {
+            title = {},
+            navigationIcon = {
                 IconButton(
-            onClick = {
+                        onClick = { activity.finish() },
-                val intent = Intent(context, MainActivity::class.java)
+                        modifier = Modifier.size(60.dp)
-                context.startActivity(intent)
-            },
-            modifier = Modifier
-                .align(Alignment.TopStart)
                 ) {
                     Icon(
-                Icons.Rounded.ArrowBack,
+                            imageVector = Icons.Filled.ArrowBack,
-                "arrow_back",
+                            contentDescription = "Retour",
-                tint = Colors.White
+                            modifier = Modifier.size(36.dp),
+                            tint = Color.White
                     )
                 }
-
+            },
+    )
         Column(
             modifier = Modifier
                     .fillMaxSize()
-                    .padding(top = 48.dp)
+                    .padding(start = 16.dp, top = 62.dp, end = 16.dp)
         ) {
             Row(
                 modifier = Modifier
                         .fillMaxWidth()
-                        .padding(vertical = 10.dp),
+                        .padding(bottom = 10.dp),
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 Text(
                     text = "Liste des lobbies",
                     color = Colors.White,
+                        fontSize = 17.sp,
                     modifier = Modifier
-                            .weight(1f)
+                            .weight(if (isPortrait) 1f else 0.6f)
-                            .padding(start = 20.dp)
+                            .padding(start = 25.dp)
                 )
                 Button(
                     onClick = {
@@ -139,7 +161,7 @@ fun MultiPage() {
                     },
                     shape = RoundedCornerShape(15),
                     modifier = Modifier
-                            .weight(1f)
+                            .weight(if (isPortrait) 1f else 0.4f)
                             .padding(end = 20.dp),
                     colors = ButtonDefaults.buttonColors(Colors.Blue)
                 ) {
@@ -150,7 +172,8 @@ fun MultiPage() {
             LazyColumn(
                 modifier = Modifier
                         .fillMaxSize()
-                        .weight(0.85f)
+                        .border(2.dp, Color.White,shape = RoundedCornerShape(3))
+                        .weight(0.85f),
             ) {
                 items(lobbyList) { lobby ->
                     LobbyItem(lobby, selectedItem == lobby) {
@@ -176,7 +199,6 @@ fun MultiPage() {
             }
         }
     }
-}
 
 // Fonction pour créer un Utiliser pour le lobby sélectionné
 private suspend fun createUtiliserForLobby(context: Context, lobby: Lobby) {
@@ -211,9 +233,9 @@ fun LobbyItem(lobby: Lobby, isSelected: Boolean, onItemClick: (Lobby) -> Unit) {
                         onItemClick(lobby)
                     }
                 }
+                .clip(RoundedCornerShape(8.dp))
                 .background(if (isSelected) Colors.Orange else Colors.Grey)
                 .padding(16.dp)
-                .clip(RoundedCornerShape(8.dp))
     ) {
         Text(
             text = lobby.name,