fix: roomspage responsiveness

android/.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

android/.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CompilerConfiguration">
+    <bytecodeTargetLevel target="17" />
+  </component>
+</project>

android/.idea/deploymentTargetDropDown.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetDropDown">
+    <value>
+      <entry key="app">
+        <State />
+      </entry>
+    </value>
+  </component>
+</project>

android/.idea/migrations.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectMigrations">
+    <option name="MigrateToGradleLocalJavaHome">
+      <set>
+        <option value="$PROJECT_DIR$" />
+      </set>
+    </option>
+  </component>
+</project>

android/.idea/misc.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/build/classes" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="Android" />
+  </component>
+</project>

src/views/RoomsPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IonPage, IonContent } from "@ionic/vue";
+import { IonPage } from "@ionic/vue";
 import PagesHeader from "@/components/PagesHeader.vue";
 import { onMounted, ref } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -11,7 +11,7 @@ import "swiper/css/pagination";
 
 const data = ref();
 
-const doGet = async () => {
+const getRooms = async () => {
   const options = {
     url: "https://api.airtable.com/v0/appjEyYgBdj0qnspK/salles?maxRecords=3&view=Grid%20view",
     headers: {
@@ -23,15 +23,13 @@ const doGet = async () => {
 };
 
 onMounted(async () => {
-  const response = await doGet();
+  const response = await getRooms();
   data.value = response.data?.records;
-  console.table(data.value[0].fields.audio);
 });
 </script>
 
 <template>
   <ion-page class="page">
-    <ion-content color="light">
     <PagesHeader />
     <main>
       <h2>Les salles</h2>
@@ -41,11 +39,13 @@ onMounted(async () => {
         :pagination="{
           clickable: true,
           el: '.swiper-pagination',
-            bulletClass: 'swiper-pagination-bullet-custom',
+          bulletClass: 'pagination-bullet',
-            bulletActiveClass: 'swiper-pagination-bullet-active-custom',
+          bulletActiveClass: 'pagination-bullet-active',
         }"
         :modules="[Pagination]"
-          :space-between="50"
+        :space-between="250"
+        :auto-height="false"
+        class="mySwiper"
       >
         <swiper-slide v-for="element in data" :key="element.titre">
           <section>
@@ -57,7 +57,6 @@ onMounted(async () => {
       </swiper>
       <div slot="pagination" class="swiper-pagination"></div>
     </main>
-    </ion-content>
   </ion-page>
 </template>
 
@@ -66,18 +65,26 @@ onMounted(async () => {
   background-color: var(--ion-color-light);
 
   justify-content: start;
+  height: 100vh;
 }
 
-ion-content {
+section {
   display: flex;
   flex-direction: column;
   gap: 8px;
 
   height: 100%;
+  min-height: 0;
 }
 
 main {
+  display: flex;
+  flex-direction: column;
+
   padding: 0 32px 32px 32px;
+
+  height: 100%;
+  min-height: 0;
 }
 
 h2 {
@@ -105,6 +112,7 @@ img {
   width: 100%;
   object-fit: cover;
   border-radius: 14px;
+  min-height: 0;
 }
 
 audio {
@@ -119,16 +127,23 @@ audio {
   margin-top: 16px;
 }
 
-.swiper-pagination-bullet-custom {
+.mySwiper {
-  width: 20px;
+  width: 100%;
-  height: 20px;
+  height: 100%;
-  border-radius: 50%;
+  min-height: 0;
 }
+</style>
 
-.swiper-pagination-bullet-active-custom {
+<style>
-  width: 20px;
+.pagination-bullet,
-  height: 20px;
+.pagination-bullet-active {
-  border-radius: 50%;
+  width: 48px;
-  background-color: red !important;
+  height: 4px;
+  background-color: var(--ion-color-medium);
+  border-radius: 8px;
+}
+
+.pagination-bullet-active {
+  background-color: var(--ion-color-dark);
 }
 </style>