From 5365f0533c3ac9193e78fb2773bc9e3c2ca6b5d5 Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvain@mailo.com>
Date: Wed, 27 Mar 2024 22:18:12 +0100
Subject: [PATCH] fix: roomspage responsiveness

---
 android/.idea/.gitignore                   |  3 +
 android/.idea/compiler.xml                 |  6 ++
 android/.idea/deploymentTargetDropDown.xml | 10 +++
 android/.idea/migrations.xml               | 10 +++
 android/.idea/misc.xml                     | 10 +++
 src/views/RoomsPage.vue                    | 95 +++++++++++++---------
 6 files changed, 94 insertions(+), 40 deletions(-)
 create mode 100644 android/.idea/.gitignore
 create mode 100644 android/.idea/compiler.xml
 create mode 100644 android/.idea/deploymentTargetDropDown.xml
 create mode 100644 android/.idea/migrations.xml
 create mode 100644 android/.idea/misc.xml

diff --git a/android/.idea/.gitignore b/android/.idea/.gitignore
new file mode 100644
index 0000000..26d3352
--- /dev/null
+++ b/android/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/android/.idea/compiler.xml b/android/.idea/compiler.xml
new file mode 100644
index 0000000..b589d56
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/android/.idea/deploymentTargetDropDown.xml b/android/.idea/deploymentTargetDropDown.xml
new file mode 100644
index 0000000..0c0c338
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/android/.idea/migrations.xml b/android/.idea/migrations.xml
new file mode 100644
index 0000000..f8051a6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/android/.idea/misc.xml b/android/.idea/misc.xml
new file mode 100644
index 0000000..0ad17cb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/RoomsPage.vue b/src/views/RoomsPage.vue
index 7229315..3605aff 100644
--- a/src/views/RoomsPage.vue
+++ b/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,41 +23,40 @@ 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>
-        <h3>Venez découvrir les salles mises en place !</h3>
+    <PagesHeader />
+    <main>
+      <h2>Les salles</h2>
+      <h3>Venez découvrir les salles mises en place !</h3>
 
-        <swiper
-          :pagination="{
-            clickable: true,
-            el: '.swiper-pagination',
-            bulletClass: 'swiper-pagination-bullet-custom',
-            bulletActiveClass: 'swiper-pagination-bullet-active-custom',
-          }"
-          :modules="[Pagination]"
-          :space-between="50"
-        >
-          <swiper-slide v-for="element in data" :key="element.titre">
-            <section>
-              <h4>{{ element.fields.titre }}</h4>
-              <img :src="element.fields.image[0].url" alt="hallan" />
-              <audio controls :src="element.fields.audio[0].url"></audio>
-            </section>
-          </swiper-slide>
-        </swiper>
-        <div slot="pagination" class="swiper-pagination"></div>
-      </main>
-    </ion-content>
+      <swiper
+        :pagination="{
+          clickable: true,
+          el: '.swiper-pagination',
+          bulletClass: 'pagination-bullet',
+          bulletActiveClass: 'pagination-bullet-active',
+        }"
+        :modules="[Pagination]"
+        :space-between="250"
+        :auto-height="false"
+        class="mySwiper"
+      >
+        <swiper-slide v-for="element in data" :key="element.titre">
+          <section>
+            <h4>{{ element.fields.titre }}</h4>
+            <img :src="element.fields.image[0].url" alt="hallan" />
+            <audio controls :src="element.fields.audio[0].url"></audio>
+          </section>
+        </swiper-slide>
+      </swiper>
+      <div slot="pagination" class="swiper-pagination"></div>
+    </main>
   </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 {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
+.mySwiper {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
 }
+</style>
 
-.swiper-pagination-bullet-active-custom {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: red !important;
+<style>
+.pagination-bullet,
+.pagination-bullet-active {
+  width: 48px;
+  height: 4px;
+  background-color: var(--ion-color-medium);
+  border-radius: 8px;
+}
+
+.pagination-bullet-active {
+  background-color: var(--ion-color-dark);
 }
 </style>