From a5c159681b6fd10706d72427d39e6ec475b640a6 Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Tue, 10 Apr 2018 15:40:49 +0200
Subject: [PATCH] Styling search form. What a pain...

---
 README.md             |  4 ++--
 src/html/members.html | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 32b4364..b525995 100644
--- a/README.md
+++ b/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`
diff --git a/src/html/members.html b/src/html/members.html
index f7182f8..b589d30 100644
--- a/src/html/members.html
+++ b/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>