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 32b4364d..b5259952 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 f7182f8a..b589d300 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>
--
GitLab