From ee4444e42e75c824ee44c73cf5fe2d12df81295f Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 16 Feb 2016 20:27:57 +0100 Subject: [PATCH] - [x] [container.scss] Gestion de l'affichage responsive - [x] [container.scss] Gestion de l'affichage retour a la ligne - [x] [container.scss] Gestion de l'affichage info ne depassent plus - [x] [view/js/users] Recherche instantanee --- css/container.css | 2 +- css/container.scss | 18 +++++++++++++++--- todo.md | 7 ++++--- view/js/users.js | 46 +++++++++++++++++++++++++++++++++++++++++----- view/users.php | 2 +- 5 files changed, 62 insertions(+), 13 deletions(-) diff --git a/css/container.css b/css/container.css index 6dfc4e0..3a8678c 100755 --- a/css/container.css +++ b/css/container.css @@ -1,2 +1,2 @@ -#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:0 0 1}#WRAPPER>#CONTAINER>section.active.list .searchbar{display:inline-block;position:relative;width:calc( 100% - 2*1em - 2*1em );margin:1em;padding:.5em 1em;padding-left:2em;border-radius:3px;border:1px solid #b1b1b1;background:#fff url("/f/svg/search/st/sub-menu-side") 0.5em center no-repeat;background-size:1em;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section.active.list .searchbar:hover,#WRAPPER>#CONTAINER>section.active.list .searchbar:focus{border-color:#5630ed}#WRAPPER>#CONTAINER>section.active.list .error{display:inline-block;position:relative;width:calc( 100% - 2*1em - 2*1em );height:1em;margin:1em;padding:1em;border-radius:3px;border:1px solid #d52918;background:#d52918;color:#fff;text-shadow:1px 1px #a82013}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;width:calc( 50% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold;color:#bf2515}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code,#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .code svg path,#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>.inline-box .link_edit,#WRAPPER>#CONTAINER>section>.inline-box .link_remove{display:inline-block;position:relative;width:1em;height:1em;margin-left:1em;cursor:pointer}#WRAPPER>#CONTAINER>section>.inline-box .link_edit>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove>svg{width:100%;height:100%;fill:#ddd !important;transition:fill .4s ease-in-out;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .link_edit:hover>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#2193e6 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d52918 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d52918;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password],#WRAPPER>#CONTAINER>section>form.invalid>input[type=text],#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail],#WRAPPER>#CONTAINER>section>form.invalid>input[type=password],#WRAPPER>#CONTAINER>section>form input.invalid[type=text],#WRAPPER>#CONTAINER>section>form input.invalid[type=mail],#WRAPPER>#CONTAINER>section>form input.invalid[type=password]{display:inline-block;margin:1em 0;padding:.7em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=text]:hover,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:hover{border-color:#d52918}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:hover{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:hover{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=password]:hover{border-color:#5630ed}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.7em 1em;border-radius:3px;border:1px solid #d52918;background-color:#d52918;color:#fff;transition:background .4s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button:focus,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus{background-color:#fff;color:#d52918}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#27a560;background-color:#27a560}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus{background-color:#fff;color:#27a560}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;background-color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form button.neutral:focus,#WRAPPER>#CONTAINER>section>form.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus{background-color:#fff;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.search,#WRAPPER>#CONTAINER>section>form.search>button{border-color:#5630ed;background-color:#5630ed}#WRAPPER>#CONTAINER>section>form button.search:hover,#WRAPPER>#CONTAINER>section>form button.search:focus,#WRAPPER>#CONTAINER>section>form.search>button:hover,#WRAPPER>#CONTAINER>section>form.search>button:focus{background-color:#fff;color:#5630ed}#WRAPPER>#CONTAINER>section>form hr.OR{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d52918}#WRAPPER>#CONTAINER>section>form hr.OR:before{content:'OU';display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d52918;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #27a560}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#27a560}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.neutral{border-bottom:1px dashed #2193e6}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.neutral:before{color:#2193e6}#WRAPPER>#CONTAINER>section>form .search>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.search{border-bottom:1px dashed #5630ed}#WRAPPER>#CONTAINER>section>form .search>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.search:before{color:#5630ed} +#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:0 0 1}#WRAPPER>#CONTAINER>section.active.list .searchbar{display:inline-block;position:relative;flex:calc( 100% - 2*1em - 2*1em );height:1em;margin:1em;padding:.5em 1em;padding-left:2em;border-radius:3px;border:1px solid #b1b1b1;background:#fff url("/f/svg/search/st/sub-menu-side") 0.5em center no-repeat;background-size:1em;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section.active.list .searchbar:hover,#WRAPPER>#CONTAINER>section.active.list .searchbar:focus{border-color:#5630ed}#WRAPPER>#CONTAINER>section.active.list .error{display:inline-block;position:relative;width:calc( 100% - 2*1em - 2*1em );height:1em;margin:1em;padding:1em;border-radius:3px;border:1px solid #d52918;background:#d52918;color:#fff;text-shadow:1px 1px #a82013}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;flex:calc( 50% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box.hidden{display:none}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold;color:#bf2515;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code,#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .code svg path,#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333;white-space:nowrap}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>.inline-box .link_edit,#WRAPPER>#CONTAINER>section>.inline-box .link_remove{display:inline-block;position:relative;width:1em;height:1em;margin-left:1em;cursor:pointer}#WRAPPER>#CONTAINER>section>.inline-box .link_edit>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove>svg{width:100%;height:100%;fill:#ddd !important;transition:fill .4s ease-in-out;pointer-events:none}#WRAPPER>#CONTAINER>section>.inline-box .link_edit:hover>svg,#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#2193e6 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d52918 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;left:50%;margin:.3em 0;padding:1em;border-radius:3px;border-color:#d52918;box-shadow:0 0 1px #b7b7b7;background-color:#fff;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form.valid{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password],#WRAPPER>#CONTAINER>section>form.invalid>input[type=text],#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail],#WRAPPER>#CONTAINER>section>form.invalid>input[type=password],#WRAPPER>#CONTAINER>section>form input.invalid[type=text],#WRAPPER>#CONTAINER>section>form input.invalid[type=mail],#WRAPPER>#CONTAINER>section>form input.invalid[type=password]{display:inline-block;margin:1em 0;padding:.7em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033;transition:border .4s ease-in-out}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=text]:hover,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:hover{border-color:#d52918}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:hover{border-color:#27a560}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:hover{border-color:#2193e6}#WRAPPER>#CONTAINER>section>form.search>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=text]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=mail]:hover,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.search>input[type=password]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=text]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=mail]:hover,#WRAPPER>#CONTAINER>section>form input.search[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.search[type=password]:hover{border-color:#5630ed}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid,#WRAPPER>#CONTAINER>section>form.invalid>button{display:inline-block;position:relative;left:50%;padding:.7em 1em;border-radius:3px;border:1px solid #d52918;background-color:#d52918;color:#fff;transition:background .4s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button:focus,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form button.invalid:focus,#WRAPPER>#CONTAINER>section>form.invalid>button:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:focus{background-color:#fff;color:#d52918}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#27a560;background-color:#27a560}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form button.valid:focus,#WRAPPER>#CONTAINER>section>form.valid>button:hover,#WRAPPER>#CONTAINER>section>form.valid>button:focus{background-color:#fff;color:#27a560}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;background-color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form button.neutral:focus,#WRAPPER>#CONTAINER>section>form.neutral>button:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:focus{background-color:#fff;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.search,#WRAPPER>#CONTAINER>section>form.search>button{border-color:#5630ed;background-color:#5630ed}#WRAPPER>#CONTAINER>section>form button.search:hover,#WRAPPER>#CONTAINER>section>form button.search:focus,#WRAPPER>#CONTAINER>section>form.search>button:hover,#WRAPPER>#CONTAINER>section>form.search>button:focus{background-color:#fff;color:#5630ed}#WRAPPER>#CONTAINER>section>form hr.OR{display:block;position:relative;width:100%;height:0;border:0;border-bottom:1px dashed #d52918}#WRAPPER>#CONTAINER>section>form hr.OR:before{content:'OU';display:inline-block;position:relative;top:50%;left:50%;padding:0 1em;background-color:#fff;color:#d52918;transform:translateX(-50%) translatey(-50%)}#WRAPPER>#CONTAINER>section>form .valid>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.valid{border-bottom:1px dashed #27a560}#WRAPPER>#CONTAINER>section>form .valid>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.valid:before{color:#27a560}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.neutral{border-bottom:1px dashed #2193e6}#WRAPPER>#CONTAINER>section>form .neutral>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.neutral:before{color:#2193e6}#WRAPPER>#CONTAINER>section>form .search>hr.OR,#WRAPPER>#CONTAINER>section>form hr.OR.search{border-bottom:1px dashed #5630ed}#WRAPPER>#CONTAINER>section>form .search>hr.OR:before,#WRAPPER>#CONTAINER>section>form hr.OR.search:before{color:#5630ed} /*# sourceMappingURL=container.css.map */ diff --git a/css/container.scss b/css/container.scss index 3ae6f7c..a2e809a 100755 --- a/css/container.scss +++ b/css/container.scss @@ -18,7 +18,8 @@ & > section.active.list{ display: flex; flex-direction: row; - justify-content: space-around; + align-items: flex-start; + justify-content: flex-start; flex-wrap: wrap; .inline-box{ @@ -29,7 +30,9 @@ .searchbar{ display: inline-block; position: relative; - width: calc( 100% - 2*1em - 2*1em ); + // width: calc( 100% - 2*1em - 2*1em ); + flex: calc( 100% - 2*1em - 2*1em ); + height: 1em; margin: 1em; padding: .5em 1em; padding-left: 2em; @@ -75,7 +78,8 @@ & > section > .inline-box{ display: inline-block; position: relative; - width: calc( 50% - 2*1em - 2*1em ); + // width: calc( 50% - 2*1em - 2*1em ); + flex: calc( 50% - 2*1em - 2*1em ); margin: 1em; padding: 1em; @@ -84,6 +88,11 @@ background-color: #fff; + // Lors de la recherche, quand on veut en masquer + &.hidden{ + display: none; + } + a{ text-decoration: none; color: inherit; @@ -97,6 +106,7 @@ font-weight: bold; color: darken($theme-color, 10); + white-space: nowrap; & > span{ font-size: .8em; @@ -111,6 +121,7 @@ display: block; margin: 1em; color: #333; + white-space: nowrap; // svg (icone) svg{ @@ -140,6 +151,7 @@ display: block; margin: 1em; color: #333; + white-space: nowrap; // svg (icone) svg{ diff --git a/todo.md b/todo.md index d53cfff..03642aa 100755 --- a/todo.md +++ b/todo.md @@ -7,16 +7,17 @@ ############ # EN COURS # ############ - - - [ ] [view/js/machines] Recherche instantanee -- [ ] [view/js/users] Recherche instantanee ######## # FAIT # ######## +- [x] [container.scss] Gestion de l'affichage responsive +- [x] [container.scss] Gestion de l'affichage retour a la ligne +- [x] [container.scss] Gestion de l'affichage info ne depassent plus +- [x] [view/js/users] Recherche instantanee - [x] [machineDefaut][machineRepo] Gestion des parametres optionnels pour la modification - [x] [userDefault][userRepo] Gestion des parametres optionnels pour la modification - [x] [machines.js][machineDefault][machineRepo] Gestion de la nouvelle modification (avec recherche) diff --git a/view/js/users.js b/view/js/users.js index ff727ec..09c8895 100644 --- a/view/js/users.js +++ b/view/js/users.js @@ -2,7 +2,8 @@ var section = { view: { text: '#CONTAINER > section[data-sublink="view"] ', - element: document.querySelector('#CONTAINER > section[data-sublink="view"]') + element: document.querySelector('#CONTAINER > section[data-sublink="view"]'), + searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar') }, create: { @@ -29,16 +30,51 @@ var section = { /* [1] view -> AFFICHAGE DES UTILISATEURS =========================================================*/ - if( section.view.element != null ){ - // On recupere tous les liens + /* (1) On recupere tous les liens */ section.view.link = { edit: document.querySelectorAll(section.view.text + '.link_edit[data-user]'), remove: document.querySelectorAll(section.view.text + '.link_remove[data-user]') }; - // On gere la "redirection" vers la modification + + /* (2) Gestion de la recherche instantannee */ + section.view.searchbar.addEventListener('keyup', function(e){ + + var search = { + path: 'userDefault/search', + data: [section.view.searchbar.value] + }; + + // On envoie la requete + api.send(search, function(result){ + if( result.ModuleError == 0 && result.users.length > 0 ){ // si on a trouve qqch + + // On enregistre tous les UID dans un tableau + var uid_list = []; + for( var i = 0 ; i < result.users.length ; i++ ) + uid_list.push( result.users[i].id_user); + + // On recupere la liste des elements correspondants aux utilisateurs + var user_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]'); + + for( var i = 0 ; i < user_list.length ; i++ ){ + console.log( user_list[i] instanceof Element ); + // Si doit etre visible + if( uid_list.indexOf(user_list[i].id) > -1 ) + user_list[i].remClass('hidden'); + // Si ne doit pas etre visible + else + user_list[i].addClass('hidden'); + } + } + }); + + }, false); + + + /* (3) On gere la "redirection" vers la modification */ for( var i = 0 ; i < section.view.link.edit.length ; i++ ){ section.view.link.edit[i].addEventListener('click', function(e){ @@ -49,7 +85,7 @@ if( section.view.element != null ){ } - // On gere la "redirection" vers la suppression + /* (4) On gere la "redirection" vers la suppression */ for( var i = 0 ; i < section.view.link.remove.length ; i++ ){ section.view.link.remove[i].addEventListener('click', function(e){ diff --git a/view/users.php b/view/users.php index 6fa8085..35a25f1 100755 --- a/view/users.php +++ b/view/users.php @@ -80,7 +80,7 @@ $clusters = new Repo('user/getClusters', array($user['id_user'])); $clusters = $clusters->answer(); - echo "
"; + echo "
"; // Prenom Nom echo "".$user['firstname']." ".$user['lastname']." #".$user['username']."";