diff --git a/dist/lib/ldp-display b/dist/lib/ldp-display index 45b3c7097a270319df06cf008a4413be461f6af0..cbba4db47150bcac8e86a364e2a4b20ad27fb387 160000 --- a/dist/lib/ldp-display +++ b/dist/lib/ldp-display @@ -1 +1 @@ -Subproject commit 45b3c7097a270319df06cf008a4413be461f6af0 +Subproject commit cbba4db47150bcac8e86a364e2a4b20ad27fb387 diff --git a/src/html/members.html b/src/html/members.html index 4675dfdd0913e8b415fc23c4395b1f786816efa2..5f8aa86f754c8c36b7a1153efbf0cd3feceb1d3e 100644 --- a/src/html/members.html +++ b/src/html/members.html @@ -11,35 +11,4 @@ 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"); - FORM.querySelector('input[type="reset"]').classList.add("btn", "btn-link"); - } - else { - addBootstrapClassesToMembers(); - } - }, 100) - }; - - window.onload = addBootstrapClassesToMembers(); - </script> </div> diff --git a/src/html/projects.html b/src/html/projects.html index cb011875ec599b45f575494f8ad83863fe027488..ee31df401c05413f2a2083c3e9d579f044442d71 100644 --- a/src/html/projects.html +++ b/src/html/projects.html @@ -1,19 +1,4 @@ <div id="projects" style="display: none"> - <div class="page-header"> - <h1>Projets</h1> - </div> - - <!--<div id="projectsTable">--> - <!--<ol>--> - <!--<li id="categorieNumber">Numéro</li>--> - <!--<li id="categorieNumberAlt">N°</li>--> - <!--<li id="categorieTitle">Titre</li>--> - <!--<li id="categorieAssociate">Associé</li>--> - <!--<li id="categorieIncome">CA</li>--> - <!--<li id="categorieState">Etat</li>--> - <!--</ol>--> - <!--</div>--> - <ldp-display id="projectsList" data-src="http://localhost:8000/projects/" diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss new file mode 100644 index 0000000000000000000000000000000000000000..a0f6eb44da5ed4f011db075f0a4b9011d4005299 --- /dev/null +++ b/src/scss/_forms.scss @@ -0,0 +1,56 @@ +ldp-display { + ldp-form { + display: block; + background-color: #F3F3F3; + padding: 15px; + box-sizing: content-box; + + form { + @extend %self-clear; + + ldp-form-text { + position: relative; + display: block; + margin-bottom: 1rem; + + &::before { + position: absolute; + top: 3px; + bottom: 0px; + left: 10px; + margin: auto; + font-family: FontAwesome; + content: "\f002"; + color: gray; + } + + label { + text-transform: capitalize; + display: none; + } + + input[type="text"] { + @extend %form-control; + @extend %form-control-sm; + + padding-left: 30px; + } + } + + input[type="submit"], + input[type="reset"] { + @extend %btn; + + float: right; + } + + input[type="submit"] { + @extend %btn-primary; + } + + input[type="reset"] { + @extend %btn-link; + } + } + } +} diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss new file mode 100644 index 0000000000000000000000000000000000000000..945504619ce4fefe644878ad6822d7ea0d73a30c --- /dev/null +++ b/src/scss/_mixins.scss @@ -0,0 +1,62 @@ +%btn { + display: inline-block; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid transparent; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: .25rem; + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + + &:not(:disabled):not(.disabled) { + cursor: pointer; + } +} + +%btn-primary { + color: #fff; + background-color: #007bff; + border-color: #007bff; +} + +%btn-link { + font-weight: 400; + color: #007bff; + background-color: transparent; +} + +%form-control { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: .25rem; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} + +%form-control-sm { + padding: .25rem .5rem; + font-size: .875rem; + line-height: 1.5; + border-radius: .2rem; +} + +%self-clear { + &::after { + content: ""; + clear: both; + display: table; + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index d67ceeed9dc86fb0f443169bd1793d8f2f4ca171..b2392ae043b08ab53396df3980871351c2c78590 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,6 +1,6 @@ $hd-color: rgb(253, 200, 21); $twitter-color: #1DA1F2; -$menu-height: 50px; +$menu-height: 46px; $menu-font-size: 17px; $vertical-menu-width: 50px; diff --git a/src/scss/main.scss b/src/scss/main.scss index c5166239f5d92f7d3b0127fef33b709ccc55cf2b..eae0543de1dbedafed6d092b4e6ae52532d7f5f9 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,6 +1,11 @@ +// Generic @import "variables"; +@import "mixins"; @import "fonts"; @import "styles"; +@import "forms"; + +// Specific @import "home"; @import "menu"; @import "members";