feat: popup accordion

main.js

@@ -54,7 +54,11 @@ function setAutocompleteParameters() {
  * Load the editor and add css
  */
 function loadEditor() {
-	editor = ace.edit("editor");
+	editor = ace.edit("editor", {
+		autoScrollEditorIntoView: true,
+        maxLines: 40,
+        minLines: 2
+	});
 	editor.setTheme("ace/theme/tomorrow_night_blue");
 	editor.session.setMode("ace/mode/css");
 	editor.getSession().setUseWorker(false); // Disable syntax checking, not working in chrome extension V3
@@ -501,3 +505,9 @@ $(document).tooltip({
 	placement: 'top left',
 	trigger: 'hover'
 });
+$(function () {
+	$("#accordion").accordion({
+		collapsible: true,
+		heightStyle: "content"
+	});
+});
\ No newline at end of file

popup.html

@@ -24,8 +24,9 @@
         <div class="audioI"></div>
       </div>
     </div>
-    <details open>
-      <summary>
+
+    <div id="accordion">
+      <h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="icon icon-tabler icon-tabler-code"
@@ -44,11 +45,13 @@
           <line x1="14" y1="4" x2="10" y2="20"></line>
         </svg>
         CSSLSD
-      </summary>
+      </h3>
+      <div>
         <div id="editor"></div>
-    </details>
-    <details open>
-      <summary>
+
+      </div>
+
+      <h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="icon icon-tabler icon-tabler-variable"
@@ -68,7 +71,8 @@
           <path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5"></path>
         </svg>
         PARAMETRES
-      </summary>
+      </h3>
+      <div>
         <table>
           <thead>
             <tr>
@@ -90,7 +94,8 @@
                 >
               </th>
               <th>
-              <a title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)"
+                <a
+                  title="r (aleatoire)&#13;d (decimal)&#13;i:1 (increment de 1)"
                   >Options</a
                 >
               </th>
@@ -110,9 +115,8 @@
           </thead>
           <tbody id="parameters"></tbody>
         </table>
-    </details>
-    <details>
-      <summary>
+      </div>
+      <h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="icon icon-tabler icon-tabler-repeat"
@@ -130,7 +134,8 @@
           <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
         </svg>
         BOUCLES
-      </summary>
+      </h3>
+      <div>
         <table width="100%">
           <thead>
             <tr>
@@ -143,9 +148,9 @@
           </thead>
           <tbody id="loopList"></tbody>
         </table>
-    </details>
-    <details>
-      <summary>
+      </div>
+
+      <h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="icon icon-tabler icon-tabler-file-text"
@@ -168,7 +173,8 @@
           <line x1="9" y1="17" x2="15" y2="17"></line>
         </svg>
         CHARGER / TELECHARGER
-      </summary>
+      </h3>
+      <div>
         <table>
           <tr>
             <td>
@@ -225,7 +231,9 @@
             </td>
           </tr>
         </table>
-    </details>
+      </div>
+    </div>
+
     <p style="text-align: center">
       &COPY; 2022 - Universite de Lille - <a id="doc">Voir la documentation</a>
     </p>

style.css

@@ -165,7 +165,9 @@ details[open] > *:not(summary) {
     transform: var(--details-translate, translateY(-0.5em));
   }
 }
-summary {
+h3 {
+  border-top: rgba(255, 255, 255, 0.3) solid 1px;
+  padding: 6px;
   font-size: 17px;
   cursor: pointer;
 }
@@ -199,16 +201,18 @@ tbody > tr {
 .icon-tabler-minus {
   cursor: pointer;
 }
-
-body::-webkit-scrollbar {
-  width: 6px;
+.ace_scrollbar {
+  right:4px;
+}
+body::-webkit-scrollbar, .ace_scrollbar::-webkit-scrollbar {
+  width: 10px;
 }
 
-body::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track, .ace_scrollbar::-webkit-scrollbar-track {
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
-body::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb, .ace_scrollbar::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 10px;
 }