[Noalyss-commit] [noalyss] 166/173: BootStrap : set up + move CSS and font to their own folders

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit 5956d4620c961f2e734c6090a03bf1c45ea29ef0
Merge: ea8a88b a29dfb5
Author: sparkyx <danydb@noalyss.eu>
AuthorDate: Thu Mar 18 10:53:00 2021 +0100

    BootStrap  : set up + move CSS and font to their own folders

 html/bootstrap/bootstrap-grid.css                  |  3899 +++++++
 html/bootstrap/bootstrap-grid.css.map              |     1 +
 html/bootstrap/bootstrap-grid.min.css              |     7 +
 html/bootstrap/bootstrap-grid.min.css.map          |     1 +
 html/bootstrap/bootstrap-reboot.css                |   327 +
 html/bootstrap/bootstrap-reboot.css.map            |     1 +
 html/bootstrap/bootstrap-reboot.min.css            |     8 +
 html/bootstrap/bootstrap-reboot.min.css.map        |     1 +
 html/bootstrap/bootstrap.css                       | 10224 +++++++++++++++++++
 html/bootstrap/bootstrap.css.map                   |     1 +
 html/bootstrap/bootstrap.min.css                   |     7 +
 html/bootstrap/bootstrap.min.css.map               |     1 +
 html/css/bootstrap-grid.min.css                    |     7 +
 html/css/bootstrap-grid.min.css.map                |     1 +
 html/css/bootstrap-reboot.min.css                  |     8 +
 html/css/bootstrap-reboot.min.css.map              |     1 +
 html/css/bootstrap.min.css                         |     7 +
 html/css/bootstrap.min.css.map                     |     1 +
 html/{ => css}/calendar-blue.css                   |     0
 html/css/font/OpenSansRegular-bg.png               |   Bin 0 -> 13140 bytes
 html/css/font/OpenSansRegular-thumb.png            |   Bin 0 -> 3327 bytes
 html/{image => css/font}/OpenSansRegular.eot       |   Bin
 html/css/font/OpenSansRegular.png                  |   Bin 0 -> 690 bytes
 html/{image => css/font}/OpenSansRegular.ttf       |   Bin
 html/{image => css/font}/OpenSansRegular.woff      |   Bin
 html/css/font/OpenSansRegular.zip                  |   Bin 0 -> 332831 bytes
 html/css/font/SansationLight/SansationLight-bg.png |   Bin 0 -> 12404 bytes
 .../font/SansationLight/SansationLight-thumb.png   |   Bin 0 -> 3269 bytes
 .../font}/SansationLight/SansationLight.eot        |   Bin
 html/css/font/SansationLight/SansationLight.png    |   Bin 0 -> 3260 bytes
 .../font}/SansationLight/SansationLight.ttf        |   Bin
 .../font}/SansationLight/SansationLight.woff       |   Bin
 html/css/font/SansationLight/font.css              |    11 +
 html/css/font/SansationLight/index.html            |    21 +
 html/{image => css/font}/SansationLight/readme.txt |     0
 html/css/font/fontello/.directory                  |     4 +
 html/css/font/fontello/LICENSE.txt                 |    84 +
 html/css/font/fontello/README.txt                  |    75 +
 html/css/font/fontello/config.json                 |  1602 +++
 .../{image => css/font}/fontello/css/animation.css |     0
 .../font}/fontello/css/fontello-codes.css          |     0
 .../font}/fontello/css/fontello-embedded.css       |     0
 .../font}/fontello/css/fontello-ie7-codes.css      |     0
 .../font}/fontello/css/fontello-ie7.css            |     0
 html/{image => css/font}/fontello/css/fontello.css |     0
 html/{image => css/font}/fontello/demo.html        |     0
 .../font/fontello/font}/fontello.eot               |   Bin
 .../font/fontello/font}/fontello.svg               |     0
 .../font/fontello/font}/fontello.ttf               |   Bin
 .../font/fontello/font}/fontello.woff              |   Bin
 .../font/fontello/font}/fontello.woff2             |   Bin
 html/{image => css/font}/fontello/fontello.eot     |   Bin
 html/{image => css/font}/fontello/fontello.svg     |     0
 html/{image => css/font}/fontello/fontello.ttf     |   Bin
 html/{image => css/font}/fontello/fontello.woff    |   Bin
 html/{image => css/font}/fontello/fontello.woff2   |   Bin
 html/css/index.css                                 |   110 +
 html/{ => css}/style-classic.css                   |     0
 html/{ => css}/style-classic7.css                  |   235 +-
 html/{ => css}/style-light.css                     |     0
 html/{ => css}/style-print.css                     |     0
 html/{ => css}/style-test.css                      |     0
 html/do.php                                        |    13 +-
 html/index.css                                     |   320 -
 html/index.php                                     |   250 +-
 html/install.php                                   |     2 +-
 html/js/managetable.js                             |    69 +-
 include/class/acc_plan_mtable.class.php            |     1 +
 include/constant.php                               |     2 +-
 include/lib/ac_common.php                          |    13 +-
 include/lib/icard.class.php                        |    12 +-
 include/lib/icon_action.class.php                  |     2 +-
 include/lib/manage_table_sql.class.php             |     4 +-
 73 files changed, 16809 insertions(+), 524 deletions(-)

diff --cc html/css/bootstrap-grid.min.css
index 0000000,0000000..6533f31
new file mode 100644
--- /dev/null
+++ b/html/css/bootstrap-grid.min.css
@@@ -1,0 -1,0 +1,7 @@@
++/*!
++ * Bootstrap Grid v4.4.1 (https://getbootstrap.com/)
++ * Copyright 2011-2019 The Bootstrap Authors
++ * Copyright 2011-2019 Twitter, Inc.
++ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
++ 
*/html{box-sizing:border-box;-ms-overflow-style:scrollbar}*,::after,::before{box-sizing:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media
 (min-width:576px){.container{max-width:540px}}@media 
(min-width:768px){.container{max-width:720px}}@media 
(min-width:992px){.container{max-width:960px}}@media 
(min-width:1200px){.container{max-width:1140px}}.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{width:100%;pa
 [...]
++/*# sourceMappingURL=bootstrap-grid.min.css.map */
diff --cc html/css/bootstrap-grid.min.css.map
index 0000000,0000000..1b393db
new file mode 100644
--- /dev/null
+++ b/html/css/bootstrap-grid.min.css.map
@@@ -1,0 -1,0 +1,1 @@@
++{"version":3,"sources":["../../scss/bootstrap-grid.scss","dist/css/bootstrap-grid.css","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../../scss/utilities/_display.scss","../../scss/utilities/_flex.scss","../../scss/utilities/_spacing.scss"],"names":[],"mappings":"AAAA;;;;;AAOA,KACE,WAAA,WACA,mBAAA,UAGF,ECCA,QADA,SDGE,WAAA,QETA,WCDA,MAAA,KACA,cAAA,KACA,aAAA,KACA,aAAA,KACA,YAAA,KCmDE,yBFtDF,WCWI,UAAA,
 [...]
diff --cc html/css/bootstrap-reboot.min.css
index 0000000,0000000..5308df6
new file mode 100644
--- /dev/null
+++ b/html/css/bootstrap-reboot.min.css
@@@ -1,0 -1,0 +1,8 @@@
++/*!
++ * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
++ * Copyright 2011-2019 The Bootstrap Authors
++ * Copyright 2011-2019 Twitter, Inc.
++ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
++ * Forked from Normalize.css, licensed MIT 
(https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
++ 
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe
 UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color 
Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color 
Emoji";font-size:1rem;font-weight:400;line-height:1.5;colo [...]
++/*# sourceMappingURL=bootstrap-reboot.min.css.map */
diff --cc html/css/bootstrap-reboot.min.css.map
index 0000000,0000000..b8551f7
new file mode 100644
--- /dev/null
+++ b/html/css/bootstrap-reboot.min.css.map
@@@ -1,0 -1,0 +1,1 @@@
++{"version":3,"sources":["../../scss/bootstrap-reboot.scss","../../scss/_reboot.scss","dist/css/bootstrap-reboot.css","../../scss/vendor/_rfs.scss","bootstrap-reboot.css","../../scss/mixins/_hover.scss"],"names":[],"mappings":"AAAA;;;;;;ACkBA,ECTA,QADA,SDaE,WAAA,WAGF,KACE,YAAA,WACA,YAAA,KACA,yBAAA,KACA,4BAAA,YAMF,QAAA,MAAA,WAAA,OAAA,OAAA,OAAA,OAAA,KAAA,IAAA,QACE,QAAA,MAUF,KACE,OAAA,EACA,YAAA,aAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,WAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,gBAA
 [...]
diff --cc html/css/bootstrap.min.css
index 0000000,0000000..86b6845
new file mode 100644
--- /dev/null
+++ b/html/css/bootstrap.min.css
@@@ -1,0 -1,0 +1,7 @@@
++/*!
++ * Bootstrap v4.4.1 (https://getbootstrap.com/)
++ * Copyright 2011-2019 The Bootstrap Authors
++ * Copyright 2011-2019 Twitter, Inc.
++ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
++ 
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-
 [...]
++/*# sourceMappingURL=bootstrap.min.css.map */
diff --cc html/css/bootstrap.min.css.map
index 0000000,0000000..b939eb6
new file mode 100644
--- /dev/null
+++ b/html/css/bootstrap.min.css.map
@@@ -1,0 -1,0 +1,1 @@@
++{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","../../scss/vendor/_rfs.scss","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mix
 [...]
diff --cc html/css/index.css
index 0000000,916d062..a689327
mode 000000,100644..100644
--- a/html/css/index.css
+++ b/html/css/index.css
@@@ -1,0 -1,110 +1,110 @@@
+ 
+ /***
+  * LOGO
+ *************************************/
+ #logo_id {
 -    width:19%;
 -    display:none;
++    width:70px;
++    display:block;
+ }
+ /** small **/
+ @media (min-width : 576px) {
+     #logo_id {
+ 
+         z-index:-1;
+        width: 140px;
+         left: 5px;
+         top: 22px;
+         height: 140px;
+ 
+         left:0px;
+         display:block;
+ 
+     }
+ }
+ /** medium**/
+ @media (min-width : 768px) {
+     #logo_id {
+         z-index:-1;
+        width: 140px;
+         left: 5px;
+         top: 22px;
+         height: 140px;
+         display:block;
+     }
+ }
+ /** large**/
+ @media (min-width : 992px) {
+     #logo_id {
+         z-index:-1;
+         width: 140px;
+         left: 5px;
+         top: 22px;
+         height: 140px;
+ 
+         display:block;
+     }      
+ }
+ /** XL **/
+ @media (min-width : 1200px) {
+     #logo_id {
+         z-index: -1;
+ 
+         width: 140px;
+         left: 5px;
+         top: 22px;
+         height: 140px;
+         display:block;
+     }
+ } 
+ 
+ #login_div {
+ 
+ }
+ @media (min-width : 576px) { 
+     #login_div{
+     }
+ 
+ } 
+ @media (min-width : 768px) { 
+     #login_div{
+         width:50%;
+     }
+ }
+ @media (min-width : 991px) {
+     #login_div{
+         width:50%;
+     }
+ }
+ @media (min-width : 1200px) {
+     #login_div {
+         width:50%;
+     }
+ }
+ #info_noalyss {
+     position:fixed;
+     bottom:15px;
+     width:100%;
+     display:block ;
+     text-align:center;
+ }
+ 
+ .input_text {
+     width:100%;
+ }
+ #recover_link {
+     position:absolute;
+     margin-bottom:30px;
+     width: 100%;
+ }
+ 
+ #recover_box {
+ 
+     display: none;
+     position: absolute;
+     top: 15%;
+     z-index: 1;
+     border: 2px solid darkblue;
+     margin-left: 1%;
+     background-color: whitesmoke;
+     padding : 15px;
+ }
diff --cc html/css/style-classic7.css
index 2935a2e,73e52f4..11edf3c
--- a/html/css/style-classic7.css
+++ b/html/css/style-classic7.css
@@@ -374,7 -375,7 +375,7 @@@ a.mtitle 
  a.mtitle:hover {
      text-decoration:none;
      display:inline;
--    pointer:cursor; 
++    cursor: pointer; 
      /*color: #00008B;*/
      /*background-color:#EFEBEB;*/
  
@@@ -907,6 -908,6 +908,10 @@@ box-shadow: 10px 10px 5px #888
  
  
  }
++/*******************************************************************************
++ * Inner_box on a smaller screen
++ 
*******************************************************************************/
++
  div.inner_box  {
      background-color: #DCE1EF;
      font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
@@@ -917,24 -918,24 +922,44 @@@
      overflow:hidden;
      z-index:3;
      position:absolute;
--    left:10%;
++    
      border:1px solid #00008B;
---moz-box-shadow: 10px 10px 5px #888;
--/*! -webkit-box-shadow: 10px 10px 5px #888; */
--box-shadow: 15px 15px 15px #888;
--font-size:14.4px;
--font-size:0.9rem;
++    -moz-box-shadow: 10px 10px 5px #888;
++    box-shadow: 15px 15px 15px #888;
++    font-size:14.4px;
++    font-size:0.9rem;
++    width: 100%;
  }
--div.inner_box  {
--    width: 85%;
++/* SM */
++@media (min-width: 576px) {
++    div.inner_box  {
++
      }
--@media only screen and (min-width: 1281px) {
--div.inner_box  {
--    width: 85%;
--     border-radius: 9px; 
--    /*! padding: 5px; */
++}
++/* MD */
++@media (min-width: 768px) {
++    div.inner_box  {
++
+     }
+ }
++/* LG */
++@media (min-width: 992px) {
++    div.inner_box  {
++        width: 90%;
++        left:5%;
++        border-radius: 7px;
 +    }
 +}
++/* XL */
++@media (min-width: 1200px) {
++    div.inner_box  {
++        width: 95%;
++        left:2%;
++        /*! margin-bottom: 2%; */
++        padding-bottom: 10px;
++        }
++}
++/***********************************************************************************/
  div.op_detail_title {
      background-color:#888;
      /*        width:500;*/
@@@ -1183,6 -1184,7 +1208,8 @@@ div.content a.nav:hover img,a.nav:hove
      text-align: center;
      font-variant:small-caps;
      font-weight: bolder;
+     position : absolute;
++    z-index:-1;
      }
  @media only screen and (min-width: 955px) {
  #dossier {
@@@ -1238,9 -1247,9 +1272,9 @@@ h2.title 
      padding-top: 9px;
      margin-top: 0px;
      padding-bottom: 2px;
--    background-color: #5681B7;
++    background-color: #023575;
      font-size: 1.1rem;
-     height: 25px;
+     height: 35px;
      vertical-align: middle;
      border-bottom: white;
      border-bottom-style: groove;
@@@ -1804,17 -1813,17 +1839,7 @@@ li.highlight a,tr.highlight a
  *|*:link {
      color: inherit;
  }
--/*******************************************************************************
-- * Inner_box on a smaller screen
-- 
*******************************************************************************/
--@media only screen and (min-width: 1280px) {
--    div.inner_box  {
--        width: 95%;
--        left:2%;
--        /*! margin-bottom: 2%; */
--        padding-bottom: 10px;
--        }
--}
++
  /*****************************************************************************
   * Table of one column to present menu 
   * as in CFGLED, FORECAST, REPORT
@@@ -1839,7 -1848,7 +1864,7 @@@ table.vert_mtitle td.first 
  table.vert_mtitle td {
      border : 1px solid #99B1DF;
       background-color:#EDEDED;
--     border-top-radius:20px;
++     border-radius:20px 20px 0px 0px;
       font-family: SansationLight;
  }
  table.vert_mtitle td a{
@@@ -2065,7 -2074,7 +2090,7 @@@ width: 85%
      cursor:pointer;
      margin:1px 2px 1px 2px;
      border-radius: 5px;
--    moz-border-radius:5px;
++    -moz-border-radius:5px;
      width:7em;
      width:7rem;
  }
@@@ -2221,9 -2230,9 +2246,34 @@@ div.content a.arrow 
   * Span or input-text to contain name of a card
   */
  .label_item {
--    width: 500px;
--    display:block;
++     display:none;
 +}
++/* SM */
++@media (min-width: 576px) {
++
++
++}
++/* MD */
++@media (min-width: 768px) {
++    .label_item {
++        display:inline;
++        width:300px;
++    }
++}
++/* LG */
++@media (min-width: 992px) {
++    .label_item {
++    }
++
+ }
++/* XL */
++@media (min-width: 1200px) {
++    .label_item {
++     width:405px;
++    }
++
++}
++/**========*/
  /*
   * Select box : list of actions
   */
@@@ -2304,8 -2313,8 +2354,8 @@@ div.bxbutton .ico
      cursor: pointer;
      border:0px;
      height: 18px;
--    color: #f0d19a;
--    font-size: 87%;
++    color: white;
++    font-size: 100%;
  }
  div.bxbutton .icon:hover
  {
@@@ -2316,11 -2325,11 +2366,10 @@@
   * progressBar
   */
  div.progressbar {
--    width:300px;
--    height:30px;
++    width:100%;
++    height:50px;
      position:fixed;
      top:5px;
--    left:40%;
      background-color: white;
      color:blue;
      z-index:800;
@@@ -2328,6 -2337,6 +2377,36 @@@
      border-width: 1px;
      border-style: solid;
  }
++/* SM */
++@media (min-width: 576px) {
++    div.progressbar {
++    }
++
++}
++/* MD */
++@media (min-width: 768px) {
++    div.progressbar {
++        width: 70%;
++        left: 15%;
++    }
++
++
++}
++/* LG */
++@media (min-width: 992px) {
++    div.progressbar {
++    }
++
++
++}
++/* XL */
++@media (min-width: 1200px) {
++    div.progressbar {
++    }
++
++
++}
++/**========*/
  #progressValue {
      display:block;
      width: 0px;
@@@ -2337,9 -2346,6 +2416,11 @@@
      background-color:darkblue;
      color:antiquewhite;
      font-weight: bolder;
++    font-size: 1.5rem;
++    text-align: center;
 +}
 +.nowrap td {
 +    white-space: nowrap;
  }
  /**
   * Warning
@@@ -2690,4 -2696,4 +2771,38 @@@ span.tagcell 
       border:1px dotted red !important;
       color:darkred !important;
  
+  }
++
++ 
/*************************************************************************************
++  * ICARD
++  
*************************************************************************************/
++ .icard {
++     display:inline;
++     width: 3rem;
++
++ }
++ /* SM */
++ @media (min-width: 576px) {
++     .icard {
++         display:inline;
++        width:5rem;
++     }
++    
++ }
++ /* MD */
++ @media (min-width: 768px) {
++ }
++ /* LG */
++ @media (min-width: 992px) {
++     
++ }
++ /* XL */
++ @media (min-width: 1200px) {
++     .icard {
++             width:10rem;
++     }
++ }
++ /**========*/
++ #sold_item {
++     width: 100%;
 + }
diff --cc html/index.php
index c8b8b65,006edeb..5a2f40d
--- a/html/index.php
+++ b/html/index.php
@@@ -186,103 -207,98 +207,98 @@@ if (defined("RECOVER")&&isset($_REQUEST
  }
  // reconnect , create a variable to reconnect properly in login.php
  $goto="";
- if (isset ($_REQUEST['reconnect']) && isset ($_REQUEST['backurl'])) {
+ if (isset($_REQUEST['reconnect'])&&isset($_REQUEST['backurl']))
+ {
      $goto='<input type="hidden" value="'.strip_tags($_REQUEST['backurl']).'" 
name="backurl">';
  }
- echo '
+ ?>
+ <div >
 -    <div class="d-sm-none d-md-block">
++    <div class="d-sm-block">
+         <IMG SRC="image/logo8100.png" id="logo_id" alt="NOALYSS">
  
- <IMG SRC="image/logo8100.png" id="logo_id" alt="NOALYSS">
- <form id="login_frm" action="login.php" method="post" name="loginform">'.
-         '<h1>Noalyss</h1>'.
-        $goto .
- '<TABLE><TR><TD>
- <TABLE  BORDER=0 CELLSPACING=0>
- <TR>
- <TD><input type="text" class="input_text" value="" id="p_user" name="p_user" 
autofocus tabindex="1" placeholder="User"></TD>
- </TR>
- <TR>
- <TD><INPUT TYPE="PASSWORD"  class="input_text" value=""  id="p_pass" 
NAME="p_pass"  tabindex="2" placeholder="*******"></TD>
- </TR>';
+     </div>    
+     <div class="container">
  
+         <div class="mx-auto" id="login_div">
+         <h1 style="text-align: center;color:darkblue">NOALYSS</h1>
 -            <form id="login_frm" action="login.php" method="post" 
name="loginform" >
++            <form id="login_frm" action="login.php" method="post" 
name="loginform" class="p-sm-3" >
+                 <?php echo $goto; ?>
  
- if ( $g_captcha == true )
-   {
-     echo '<tr ><td colspan="2" style="width:auto">';
-     echo "<table style=\"border:1px solid black\">";
-     echo '<tr>';
-     echo '<td colspan="2" 
style="with:auto;font-size:12px;text-align:center">';
-     echo "Indiquer le code que vous lisez dans l'image";
-     echo '</td>';
-     echo '</tr>';
-     echo '<tr>';
-     echo td('<img id="captcha" src="securimage/securimage_show.php" 
alt="CAPTCHA Image" border=1/>','colspan="2" 
style="width:auto;text-align:center"');
-     echo '</tr>';
-     echo '<tr>';
  
-     echo td('<input type="text" class="input_text" name="captcha_code" 
size="10" maxlength="6" autocomplete="off"/>'.
-           '<a href="#" onclick="document.getElementById(\'captcha\').src = 
\'securimage/securimage_show.php?\' + Math.random(); return false">Reload 
Image</a>','colspan="2" style="width:auto;text-align:center"');
-     echo '</tr>';
-     echo '</table>';
-     echo '</td>';
-     echo '<tr>';
-   }
- echo '
- <TR style="height:50px;vertical-align:bottom">
- <TD style="width:auto;text-align:center" colspan="2">
- <INPUT TYPE="SUBMIT"  
style="width:158px;height:34px;-moz-border-radius:10px;border-radius:10px" 
class="button" NAME="login" value="Se connecter">
- </TD>
- </TR>
- </table>
- </TD></TR>';
+                 <div class="form-group row ">
+                     <input type="text"  class="input_text " value="" 
id="p_user" name="p_user" autofocus tabindex="1" placeholder="User" >
+                 </div>
  
- ?>
- </table>
- </form>
- <?php if (defined("RECOVER")) : ?>
-     <a id="recover_link" href="#">Mot de passe oublié ? </a>
-     
- <div id="recover_box">
-     <span style="display:block;font-size:120%;padding:10px">Indiquez votre 
login ou votre email <span style="cursor: pointer;background-color: 
white;top:-5px;float: right;position:relative;right:-5px" id="close"><a ref="#" 
id="close_link"><?php echo SMALLX?></a></span></span>
-             <form method="POST">
-                 <input type="hidden" value="send_email" name="id">
-                 <input type="hidden" value="recover" name="recover" >
-                 <p>
-                 Login <input type="text"     class="input_text" name="login" 
nohistory>
-                 </p>
-                 <p>OU</p> 
-                 <p>
-                 Email <input type="text"  class="input_text" name="email" 
nohistory>
-                 </p>
-                 <input type="submit" class="button" name="send_email" 
value="Envoi email">
-                 <input type="button" class="button" id="close_link_bt" 
value="Annuler">
- </div>
-     <script>
-         document.getElementById('recover_link').onclick=function() {
-             document.getElementById('recover_box').style.display="block";
-         }
-         document.getElementById('close_link').onclick=function() {
-             document.getElementById('recover_box').style.display="none";
-         }
-         document.getElementById('close_link_bt').onclick=function() {
-             document.getElementById('recover_box').style.display="none";
-         }
-     </script>
- <?php endif; ?>
-     
-       <span id="info_noalyss">
- version  NOALYSS_VERSION - <?php echo $my_domain; ?>
- </span>  
- <!-- <div  id="alternate_browser">
-     <p>Nous conseillons d'utiliser Firefox ou chrome.</p>
-     <p>We recommend to use Firefox or Chrome.</p>
- <ul style="list-style:none;display:block">
-     <li style="display:inline"> <a 
href="https://www.mozilla.org/fr/firefox/new/";> <img border="0" width="128px" 
src="image/header-firefox.png"></a></li>
- <li style="display:inline"><a 
href="https://www.google.fr/chrome/browser/desktop/";> <img border="0" 
width="128px" src="image/chrome_logo_2x.png"></a></li>
- </ul>
- </div>
- -->
-  <script> SetFocus('p_user'); </script>
+                 <div class="form-group row">
+                     <INPUT TYPE="PASSWORD"  class="input_text" value=""  
id="p_pass" NAME="p_pass"  tabindex="2" placeholder="*******" >
+                 </div>
+ 
+                 <?php
+ // if captcha is used
+                 if ($g_captcha==true) :
+                     ?>
+                     Indiquer le code que vous lisez dans l'image
+                     <img id="captcha" src="securimage/securimage_show.php" 
alt="CAPTCHA Image" border=1/>';
+ 
+                     <input type="text" class="input_text" name="captcha_code" 
size="10" maxlength="6" autocomplete="off"/>
+                     <a href="#" 
onclick="document.getElementById('captcha').src = 
'securimage/securimage_show.php?\' + Math.random(); return false">Reload 
Image</a>
+ 
+                     <?php
+                 endif;
+                 ?>  
+                 <div class="form-group  row">
+                     <INPUT TYPE="SUBMIT"  class="button" NAME="login" 
value="Se connecter">
+                 </div>
+ 
+             </form>
+             <div>
+                 <?php if (defined("RECOVER")) : ?>
+                     <a id="recover_link" href="#">Mot de passe oublié ? </a>
+ 
+                     <div id="recover_box">
+                         <span 
style="display:block;font-size:120%;background-color: 
white;margin:0px">Recouvrement identifiant
+                             <span style="cursor: pointer;float: 
right;position:relative;right:0px" id="close">
+                                 <a ref="#" id="close_link"><?php echo SMALLX 
?></a></span>
+                         </span>
+                         Indiquez votre login ou votre email
+                         <form method="POST" style="padding:20px">
+                             <input type="hidden" value="send_email" name="id">
+                             <input type="hidden" value="recover" 
name="recover" >
+                             <div class="form-group row ">
+                                 <label for="login">Login</label>
+                                 <input type="text"  class="input_text " 
value="" name="login" placeholder="login" nohistory >
+                             </div>
+                            
+                             <div class="mx-auto info" 
style="background-color: darkgray;text-align: center;">OU </div>
+                             <div class="form-group row ">
+                                  <label for="email">e-mail</label>
+                                 
+                                  <input type="text"  class="input_text" 
name="email" nohistory placeholder="email@domain.eu">
+                             </div>
+                             <input type="submit" class="button" 
name="send_email" value="Envoi email">
+                             <input type="button" class="button" 
id="close_link_bt" value="Annuler">
+                             </div>
+                             </div>    
+                             <script>
+                                 
document.getElementById('recover_link').onclick = function () {
+                                     
document.getElementById('recover_box').style.display = "block";
+                                 }
+                                 document.getElementById('close_link').onclick 
= function () {
+                                     
document.getElementById('recover_box').style.display = "none";
+                                 }
+                                 
document.getElementById('close_link_bt').onclick = function () {
+                                     
document.getElementById('recover_box').style.display = "none";
+                                 }
+                             </script>
+                         <?php endif; ?>
+ 
+                         <span id="info_noalyss">
+                             version  NOALYSS_VERSION - <?php echo $my_domain; 
?>
+                         </SPAN>
+ 
+                 </div>
+                 <script> SetFocus('p_user');</script>
  
- </body>
- </html>
+                 </body>
+                 </html>
  
diff --cc html/js/managetable.js
index da5b860,da5b860..ab5914c
--- a/html/js/managetable.js
+++ b/html/js/managetable.js
@@@ -62,7 -62,7 +62,19 @@@
   - save
   - delete
   - input
-- 
++
++ How to call a function AFTER save ?
++ You set a function afterSaveFct like in the example, it will be trigger 
after you submit the FORM
++
++ Example :
++ @code
++ // the object_name is tbl6030ee4ee519e
++ tbl6030ee4ee519e.afterSaveFct=function(p_param) {
++  console.log(p_param);
++  console.log(this)
++}
++ @endcode
++
   */
  /**
   * @class ManageTable
@@@ -74,8 -74,8 +86,9 @@@ var ManageTable = function (p_table_nam
  {
      this.callback = "ajax.php"; //!< File to call
      this.control = "dtr"; //<! Prefix Id of dialog box, table, row
--    this.mt_style={position: "fixed", top:  '15%', width: "auto", 
"max-width":"60%","margin-left": "20%"};
++    this.mt_style={};
      this.sort_column=0;
++    this.afterSaveFct=undefined; // function to call after "save"
      this.param = {"table": p_table_name, "ctl_id": this.control}; //<! 
default value to pass
      this.set_style=function(p_json) {
          this.mt_style=p_json;
@@@ -190,10 -190,10 +203,30 @@@
      };
  
      /**
--     *@brief call the ajax with the action save 
--     *@details update or append
--     * As a hidden parameter the Manage_Table:object_name must be
--     * set
++     *Call the ajax with the action save , it is possible to call a function 
after the save by setting
++     * a function to afterSaveFct.As a hidden parameter the 
Manage_Table:object_name must be  set
++     * @param form_id string id of the FORM format 
("frm"+object_name+"_"+p_id)
++     *
++     *@example
++  tbl6030f6f8c336a.afterSaveFct=function() {
++    console.debug(this);
++    console.debug(this.param);
++    // if p_id == -1 then we are adding
++    if ( this.param.p_id != -1 ) { return;}
++    console.debug(this.new_row);
++    // retrive the id
++    var id=this.new_row.id.replace('tbl6030f6f8c336a_','');
++    console.debug(id);
++    // recall input ManageTable.input
++    this.input(id,'tbl6030f6f8c336a');
++
++}
++     <caption>when I introduce a new element I need to reopen it to complete 
the missing information. (this) contains
++     the current object
++     </caption>
++     *
++     *
++     *
       */
      this.save = function (form_id) {
          var param_form={};
@@@ -217,11 -217,11 +250,13 @@@
                  /// if p_ctl_row does not exist it means it is a new
                  /// row , otherwise an update
                  var answer=here.parseXML(req);
++                var new_row;
                  if (answer ['status'] == 'OK') {
                      if ($(answer['ctl_row'])) {
++                        new_row=$(answer['ctl_row']);
                          $(answer['ctl_row']).update(answer['html']);
                      } else {
--                        var new_row = new Element("tr");
++                         new_row = new Element("tr");
                          new_row.id = answer['ctl_row'];
                          new_row.innerHTML = answer['html'];
                          /**
@@@ -233,6 -233,6 +268,16 @@@
                      alternate_row_color("tb"+answer['ctl']);
                      remove_waiting_box();
                      $(here.control).hide();
++                    // if there is an afterSaveFct then call it
++                    if (here.afterSaveFct != undefined && typeof 
here.afterSaveFct  == "function") {
++                        try {
++                            here.afterSaveFct.call(here,new_row);
++                        } catch (e) {
++                            console.error("FAIL253 afterSaveFct ");
++                            console.error(e.message);
++                            console.error (here.afterSaveFct);
++                        }
++                    }
                      
                  } else {
                      remove_waiting_box();
@@@ -305,19 -305,19 +350,21 @@@
              parameters: this.param,
              method: "get",
              onSuccess: function (req) {
--                remove_waiting_box();
++                
                  try {
                      var x = here.parseXML(req);
                      var obj = {id: control, "cssclass": "inner_box", "html": 
loading()};
--                    add_div(obj);
--                    var pos = calcy(250);
++                    create_div(obj);
++                    var pos = calcy(3);
                      if (window.innerWidth < 1200) {
                          here.mt_style["margin-left"]="2%";
                          here.mt_style["max-width"]="80%";
                      }
--                    console.log(here.mt_style);
++                    here.mt_style['top']=pos+"px";
                      $(obj.id).setStyle(here.mt_style);
++                    remove_waiting_box();
                      $(obj.id).update(x['html']);
++                    
Effect.SlideDown(obj.id,{duration:0.3,scaleX:true,scaleY:true,scaleContent:false});
                  } catch (e) {
                      smoke.alert(content[48] + e.message);
                  }
diff --cc include/class/acc_plan_mtable.class.php
index b5537e9,b5537e9..f2a634a
--- a/include/class/acc_plan_mtable.class.php
+++ b/include/class/acc_plan_mtable.class.php
@@@ -67,6 -67,6 +67,7 @@@ class Acc_Plan_MTable extends Manage_Ta
          $this->set_col_type("pcm_val", "custom");
          $this->a_order = ["pcm_val", "pcm_lib", "parent_accounting", 
"pcm_direct_use", "pcm_type", "fiche_qcode"];
          $this->set_icon_mod("first");
++        $this->set_dialogbox_style(["width"=>"auto"]);
      }
  
      /**
diff --cc include/lib/icard.class.php
index e0c171d,e0c171d..70c9353
--- a/include/lib/icard.class.php
+++ b/include/lib/icard.class.php
@@@ -279,11 -279,11 +279,15 @@@ class ICard extends HtmlInpu
              $e=sprintf(' ondblclick="%s" ', $this->dblclick);
              $this->dblclick=$e;
          }
--        
$input=Icon_Action::clean_zone(uniqid("remove"),"$('{$this->id}').value=''");
++        
++        $input='<div class="d-none d-lg-inline">'.
++                
Icon_Action::clean_zone(uniqid("remove"),"$('{$this->id}').value=''").
++                "</div>";
++             
          $input.=sprintf('
--            <INPUT TYPE="Text"  class="input_text"  
--                 NAME="%s" ID="%s" VALUE="%s" SIZE="%d" %s %s  %s>',
--                $this->name, $this->id, $this->value, $this->size,
++            <INPUT TYPE="Text"  class="input_text icard"  
++                 NAME="%s" ID="%s" VALUE="%s"  %s %s  %s>',
++                $this->name, $this->id, $this->value, 
                  $this->dblclick, $this->javascript, $this->style
          );
          if ($this->autocomplete==1)
diff --cc include/lib/icon_action.class.php
index a1dab59,a1dab59..0eb4c22
--- a/include/lib/icon_action.class.php
+++ b/include/lib/icon_action.class.php
@@@ -68,7 -68,7 +68,7 @@@ class Icon_Actio
       */
      static function clean_zone($id, $p_javascript, $p_style="")
      {
--        $r=sprintf('<input class="smallbutton" onclick="%s" id="%s" value="X" 
%s type="button" style="">',
++        $r=sprintf('<input class="smallbutton " onclick="%s" id="%s" 
value="X" %s type="button" style="">',
                  $p_javascript, $id, $p_style
          );
          return $r;
diff --cc include/lib/manage_table_sql.class.php
index b42db73,2b56a3e..69df9f6
--- a/include/lib/manage_table_sql.class.php
+++ b/include/lib/manage_table_sql.class.php
@@@ -127,9 -127,9 +127,7 @@@ class Manage_Table_SQ
          // By default no js sort
          $this->sort_column="";
          $this->dialog_box="dtr";
--        $this->dialogbox_style=array("position"=> "fixed", "top"=>  
'15%',"width"=> "auto", 
--            "max-width"=>"60%",
--            "margin-left"=> "20%");
++        $this->dialogbox_style=array();
          $this->search_table=true;
          $this->button_add_top=true;
          $this->title=_("Donnée");