diff --git a/css/constants.scss b/css/constants.scss index d34c4fe..e533062 100755 --- a/css/constants.scss +++ b/css/constants.scss @@ -3,6 +3,6 @@ $theme-color: #e63321; $sub-menu-color: #5b5e63; /* FORMULAIRES */ -$form-valid-color: #2193e6; -$form-invalid-color: #e63321; -$form-neutral-color: #7f7f7f; +$form-valid-color: #19C566; +$form-neutral-color: #2193e6; +$form-invalid-color: #d44f18; diff --git a/css/container.css b/css/container.css index 36c330c..c0b44df 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:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;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}#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:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.8em;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 .mail{display:inline-block;color:#333}#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 .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:absolute;top:0;left:calc( 100% - 1.2em - 2*1em );width:1.2em;height:1.2em;margin: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 .2s 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:#3c89e8 !important}#WRAPPER>#CONTAINER>section>.inline-box .link_remove{top:calc( 100% - 1.2em - 2*1em )}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d44f18 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password]{display:inline-block;margin:1em 0;padding:.3em .5em;border-radius:0;border:none;border-bottom:1px solid transparent;color:#000}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus{border-color:#e63321}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid{display:inline-block;position:relative;left:50%;padding:.5em 1em;border-radius:2px;border:1px solid #e63321;background-color:#fff;color:#e63321;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover{background-color:#e63321;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.valid:hover{background-color:#2193e6;color:#fff} +#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;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}#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:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg,#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.8em;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 .mail{display:inline-block;color:#333}#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 .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:absolute;top:0;left:calc( 100% - 1.2em - 2*1em );width:1.2em;height:1.2em;margin: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 .2s 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{top:calc( 100% - 1.2em - 2*1em )}#WRAPPER>#CONTAINER>section>.inline-box .link_remove:hover>svg{fill:#d44f18 !important}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#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:.5em 1em;border-radius:3px;border:1px solid #d7dde8;color:#2f3033}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.invalid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.invalid[type=password]:focus{border-color:#d44f18}#WRAPPER>#CONTAINER>section>form.valid>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.valid>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.valid[type=password]:focus{border-color:#19C566}#WRAPPER>#CONTAINER>section>form.neutral>input[type=text]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form.neutral>input[type=password]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=text]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input.neutral[type=password]:focus{border-color:#2193e6}#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:.5em 1em;border-radius:2px;border:1px solid #d44f18;background-color:#fff;color:#d44f18;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover,#WRAPPER>#CONTAINER>section>form.invalid>button:hover{background-color:#d44f18;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid,#WRAPPER>#CONTAINER>section>form.valid>button{border-color:#19C566;color:#19C566}#WRAPPER>#CONTAINER>section>form button.valid:hover,#WRAPPER>#CONTAINER>section>form.valid>button:hover{background-color:#19C566;color:#fff}#WRAPPER>#CONTAINER>section>form button.neutral,#WRAPPER>#CONTAINER>section>form.neutral>button{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.neutral:hover,#WRAPPER>#CONTAINER>section>form.neutral>button:hover{background-color:#2193e6;color:#fff} /*# sourceMappingURL=container.css.map */ diff --git a/css/container.scss b/css/container.scss index 416cd1b..21b48b6 100755 --- a/css/container.scss +++ b/css/container.scss @@ -182,7 +182,7 @@ &:hover{ & > svg{ - fill: #3c89e8 !important; + fill: $form-neutral-color !important; } } } @@ -193,7 +193,7 @@ &:hover{ & > svg{ - fill: #d44f18 !important; + fill: $form-invalid-color !important; } } } @@ -218,24 +218,58 @@ /* (1) Champs de texte */ input[type=text], input[type=mail], - input[type=password]{ + input[type=password], + &.invalid > input[type=text], + &.invalid > input[type=mail], + &.invalid > input[type=password], + input.invalid[type=text], + input.invalid[type=mail], + input.invalid[type=password]{ display: inline-block; margin: 1em 0; - padding: .3em .5em; + padding: .5em 1em; - border-radius: 0; - border: none; - border-bottom: 1px solid transparent; + border-radius: 3px; + border: 1px solid #d7dde8; - color: #000; + + color: #2f3033; &:focus{ - border-color: $theme-color; + border-color: $form-invalid-color; } } + // Champs valides + &.valid > input[type=text], + &.valid > input[type=mail], + &.valid > input[type=password], + input.valid[type=text], + input.valid[type=mail], + input.valid[type=password]{ + &:focus{ + border-color: $form-valid-color; + } + } + + // Champs neutres + &.neutral > input[type=text], + &.neutral > input[type=mail], + &.neutral > input[type=password], + input.neutral[type=text], + input.neutral[type=mail], + input.neutral[type=password]{ + &:focus{ + border-color: $form-neutral-color; + } + } + + + /* (2) Boutons */ - button, button.invalid{ + button, + button.invalid, + &.invalid > button{ display: inline-block; position: relative; left: 50%; @@ -260,8 +294,9 @@ } - - button.valid{ + // Boutons valides + button.valid, + &.valid > button{ border-color: $form-valid-color; color: $form-valid-color; @@ -271,6 +306,19 @@ color: #fff; } } + + // Boutons neutres + button.neutral, + &.neutral > button{ + border-color: $form-neutral-color; + + color: $form-neutral-color; + + &:hover{ + background-color: $form-neutral-color; + color: #fff; + } + } } } \ No newline at end of file diff --git a/todo.md b/todo.md index 05f16c6..54c9b43 100755 --- a/todo.md +++ b/todo.md @@ -1,6 +1,8 @@ ########### # A FAIRE # ########### +- [ ] Prendre en compte au lieu de SERVER['HTTP_HOST'] l'hote et son dossier source +- [ ] Gestion de l'erreur de chargement ou erreur de nav (page-manager) ############ # EN COURS # @@ -11,13 +13,12 @@ - [ ] [view/machine] Prise en compte de pageManager.vars[2] pour la modification - [ ] [view/machine] Prise en compte de pageManager.vars[2] pour la suppression -- [ ] Prendre en compte au lieu de SERVER['HTTP_HOST'] l'hote et son dossier source -- [ ] Gestion de l'erreur de chargement ou erreur de nav (page-manager) ######## # FAIT # ######## +- [x] [container.scss] Refonte mineure formulaires, charte graphique en cours - [x] Creation de la base des managers et de l'API - [x] Conception des managers et de l'API - [x] Definir graphiquement le #CONTAINER diff --git a/view/machines.php b/view/machines.php index e3b2b5a..660f6bb 100755 --- a/view/machines.php +++ b/view/machines.php @@ -52,10 +52,8 @@ $sublink = $post[0]; - - // On recupere toutes les machines - debug(); - + /* [1] Affichage des machines + =========================================================*/ $request = new ModuleRequest('machineDefault/getAll'); // On utilise la methode 'getAll' du module 'machineDefault' $answer = $request->dispatch(); // On recupere la reponse @@ -128,7 +126,53 @@ =========================================================*/ echo "
"; - echo "
"; + echo ""; + echo "
"; + echo "
"; + echo ""; + echo "
"; + + echo '
'; + + + + + + + + + + + + + /* [3] Suppression de machine + =========================================================*/ + echo "
"; + + echo "
"; + echo "
"; + echo "
"; + echo ""; + echo "
"; + + echo '
'; + + + + + + + + + + + + + /* [4] Modification de machine + =========================================================*/ + echo "
"; + + echo "
"; echo "
"; echo "
"; echo ""; diff --git a/view/users.php b/view/users.php index 6a1df58..5e76628 100755 --- a/view/users.php +++ b/view/users.php @@ -136,7 +136,7 @@ =========================================================*/ echo "
"; - echo ""; + echo ""; echo "
"; echo "
"; echo "
";