[ADD] media query for mobile displays

Author: HenraL

bonus/bootstrap/asperboard.bsdesign

@@ -46,6 +46,11 @@
         <article id="cookie_banner"></article>
         <article id="feedback_banner"></article>
     </section>
+    <section id="chatbot_instance">
+        <div class="chatBotAbstraction">
+            <div class="chatbotButton"><button><img src="../../../../assets/img/AB-logo.png" width="50" height="49"></button></div>
+        </div>
+    </section>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../../../../assets/js/modules/cookie_manager.mjs" type="module"></script>
     <script src="../../../../assets/js/modules/indexeddb_manager.mjs" type="module"></script>

html/api/v1/oauth/callback/index.html

@@ -6,8 +6,6 @@
 .forumFrame {
   display: flex;
   flex-direction: row;
-  width: 100%;
-  height: 500px;
   border: 1px solid black;
 }
 
@@ -33,13 +31,76 @@
   overflow-y: auto !important;
 }
 
-section.userInput {
+.userInput {
   gap: 10px;
   display: flex;
+  padding-top: 10px;
+  padding-left: 5px;
 }
 
 .message_button {
   border: 1px transparent;
   border-radius: 30px;
 }
 
+@media (max-width: 699px) {
+  .forumFrame {
+    width: 100%;
+    height: 100dvh;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 699px) {
+  .aside-right {
+    height: 30%;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+
+@media (max-width: 699px) {
+  .aside-left {
+    height: 40%;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+
+@media (max-width: 699px) {
+  .chat {
+    height: 88%;
+  }
+}
+
+@media (max-width: 699px) {
+  .search-form {
+    padding-right: 30px;
+  }
+}
+
+@media (max-width: 699px) {
+  .search-input {
+    width: 122px;
+  }
+}
+
+@media (min-width: 700px) {
+  .forumFrame {
+    width: 100%;
+    height: 500px;
+  }
+}
+
+@media (min-width: 700px) {
+  .search-form {
+    padding-right: 30px;
+  }
+}
+
+@media (min-width: 700px) {
+  .search-input {
+    width: 122px;
+  }
+}
+

html/assets/css/forum_frame.css

@@ -22,7 +22,6 @@
 .widget {
   display: flex;
   flex-direction: column;
-  width: 40%;
   height: 50%;
   border: black 1px groove;
 }
@@ -88,3 +87,15 @@
   text-align: left;
 }
 
+@media (max-width: 699px) {
+  .widget {
+    width: 100%;
+  }
+}
+
+@media (min-width: 700px) {
+  .widget {
+    width: 40%;
+  }
+}
+

html/assets/css/widget.css

@@ -46,6 +46,11 @@
         <article id="cookie_banner"></article>
         <article id="feedback_banner"></article>
     </section>
+    <section id="chatbot_instance">
+        <div class="chatBotAbstraction">
+            <div class="chatbotButton"><button><img src="../assets/img/AB-logo.png" width="50" height="49"></button></div>
+        </div>
+    </section>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../assets/js/modules/cookie_manager.mjs" type="module"></script>
     <script src="../assets/js/modules/indexeddb_manager.mjs" type="module"></script>

html/callback/index.html

@@ -157,6 +157,11 @@ <h2>About you</h2><input type="text" id="loginUsername" placeholder="Username" r
         <article id="cookie_banner"></article>
         <article id="feedback_banner"></article>
     </section>
+    <section id="chatbot_instance">
+        <div class="chatBotAbstraction">
+            <div class="chatbotButton"><button><img src="../assets/img/AB-logo.png" width="50" height="49"></button></div>
+        </div>
+    </section>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../assets/js/modules/cookie_manager.mjs" type="module"></script>
     <script src="../assets/js/modules/indexeddb_manager.mjs" type="module"></script>

html/password/index.html

@@ -149,6 +149,11 @@ <h2>Réanitialiser mon mot de passe</h2><input type="password" id="registerPassw
         <article id="cookie_banner"></article>
         <article id="feedback_banner"></article>
     </section>
+    <section id="chatbot_instance">
+        <div class="chatBotAbstraction">
+            <div class="chatbotButton"><button><img src="../assets/img/AB-logo.png" width="50" height="49"></button></div>
+        </div>
+    </section>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../assets/js/modules/cookie_manager.mjs" type="module"></script>
     <script src="../assets/js/modules/indexeddb_manager.mjs" type="module"></script>

html/reset-password/index.html

@@ -155,7 +155,7 @@
     <section class="forumFrame">
         <aside class="aside-left">
             <nav class="navbar_search">
-                <form class="search-form"><input type="text" class="search-input" placeholder="Rechercher.."><button class="search-button" type="submit">🔍</button></form><button class="btn btn-primary" type="button" style="background-color: steelblue;">Contacter patient</button>
+                <form class="search-form"><input type="text" class="search-input" placeholder="Rechercher.."><button class="button-primary message_button" type="button" style="background-color:steelblue;">Contacter patient</button></form>
             </nav>
             <ul class="buttonList">
                 <li class="active"><button class="active">Lucas Houilles</button></li>