Styling search form. What a pain...

README.md

@@ -1,11 +1,11 @@
 HD app is the magic tool that allows the Happy Dev network to thrive in a decentralized way.
 
-##Install (Ubuntu)
+## Install (Ubuntu)
   * `git clone --recurse-submodules https://git.happy-dev.fr/happy-dev/hd-app.git`
   * `cd hd-app`
   * `apt install npm`
   * `npm install -g grunt-cli`
   * `npm install`
 
-##Compile SASS
+## Compile SASS
   * `grunt watch`

src/html/members.html

@@ -1,6 +1,6 @@
 <div id="members" style="display: none">
   <div class="page-header">
-    <h1>Membres</h1>
+    <h1 class="h2 mt-2">Membres</h1>
   </div>
 
   <ldp-display 
@@ -15,4 +15,34 @@
     search-fields="firstname, lastname"
     next="member"
   ></ldp-display>
+
+  <script>// Bootstrap compliance
+    const addBootstrapClassesToMembers = function() {
+      window.setTimeout(function() {
+        const FORM = document.querySelector("ldp-display > ldp-form");
+        
+        if (FORM) {
+          FORM.classList.add("mt-4");
+          FORM.classList.add("mb-4");
+          FORM.classList.add("d-block");
+          FORM.querySelectorAll("ldp-form-text").forEach(function(el) {
+            el.classList.add("form-group");
+            el.classList.add("d-block");
+          });
+          FORM.querySelectorAll('input[type="text"]').forEach(function(el) {
+            el.classList.add("form-control");
+          });
+          FORM.querySelectorAll('label').forEach(function(el) {
+            el.classList.add("text-capitalize");
+          });
+          FORM.querySelector('input[type="submit"]').classList.add("btn", "btn-primary");
+        }
+        else {
+          addBootstrapClassesToMembers();
+        }
+      }, 100)
+    };
+
+    window.onload = addBootstrapClassesToMembers();
+  </script>
 </div>