diff --git a/css/style.css b/css/style.css index 45077aea3fcd97dd95436fa4309e6f6059f7e9b0..b4c4d84c662d993e258814f33c9f6148518cb8bc 100644 --- a/css/style.css +++ b/css/style.css @@ -24,6 +24,15 @@ body { outline : 0 ; } +#draw-left, +#draw-right, +#draw-up, +#draw-down { + padding-left : 7px ; + padding-right : 7px ; +} + + .collapse-marker:before { content: "\e097" ; } @@ -31,25 +40,64 @@ body { .collapsed>.collapse-marker:before { content: "\e096" ; } + +.collapse-marker { + margin-right : 10px ; +} -.collapsed>.collapse-hint-close { +.collapse-hint { display : none ; + margin-left : 10px ; } -.collapse-hint-open { - display : none ; +@media(min-width:767px) { + + .collapse-hint-close { + display : inline-block ; + } + + .collapsed>.collapse-hint-close { + display : none ; + } + + .collapse-hint-open { + display : none ; + } + + .collapsed>.collapse-hint-open { + display : inline-block ; + } + } -.collapsed>.collapse-hint-open { - display : inline-block ; +@media(max-width : 400px) { + .collapse-marker { + display : none ; + } } -.collapse-hint-close, .collapse-hint-open { - margin-left : 10px ; +@media(max-width : 370px) { + #draw-mv-buttons { + margin-top : 5px ; + clear : right ; + } } -.collapse-marker { - margin-right : 10px ; + +@media(max-width : 330px) { + #draw .panel-heading .btn, + #pgm .panel-heading .btn { + padding-left : 7px ; + padding-right : 7px ; + } +} + +@media(max-width : 992px) { + + #pgm-title .collapse-hint { + display : none ; + } + } #root-containet { @@ -412,6 +460,10 @@ body { border-bottom : 0 ; } +.nav-tabs a { + outline : 0 ; +} + @media(min-width:768px){ #tab_mv, #tab_var, @@ -488,6 +540,10 @@ body { border-bottom : 15px solid #ddd ; } +#pgm-container { + padding-left : 0px ; +} + #pgm { text-align : center ; box-sizing : content-box ; diff --git a/explorer.php b/explorer.php index d6789fea4200bf66eb128cd467526fb6cf21f9c7..d92e99290eb2f6447c56995859c750522f91595c 100644 --- a/explorer.php +++ b/explorer.php @@ -490,20 +490,25 @@ <a class="panel-toggle collapsed" href="#draw-container" data-toggle="collapse"> <span class="glyphicon collapse-marker"></span> Carte - <!-- - <span class="collapse-hint-open"><small>(cliquer pour ouvrir)</small></span> - <span class="collapse-hint-close"><small>(cliquer pour fermer)</small></span> - --> + <span class="collapse-hint collapse-hint-open"><small>(cliquer pour ouvrir)</small></span> + <span class="collapse-hint collapse-hint-close"><small>(cliquer pour fermer)</small></span> </a> </h3> - <div class="btn-group pull-right" role="group"> + <div class="btn-group pull-right" role="group" id="draw-paint-buttons"> <button class="btn btn-default" type="button" - id="draw-clear" + id="draw-clear-all" > <span class="glyphicon glyphicon-trash"></span> </button> + <button + class="btn btn-default" + type="button" + id="draw-clear" + > + <span class="glyphicon glyphicon-erase"></span> + </button> <button class="btn btn-default" type="button" @@ -512,7 +517,7 @@ <span class="glyphicon glyphicon-tint"></span> </button> </div> - <div class="btn-group pull-right" role="group"> + <div class="btn-group pull-right" role="group" id="draw-mv-buttons"> <button class="btn btn-default" type="button" @@ -593,6 +598,9 @@ <li> <a id="tab_var" class="glyphicon glyphicon-pencil" data-toggle="tab" href=#var_cmds></a> </li> + <li> + <a id="tab_draw" class="glyphicon glyphicon-picture" data-toggle="tab" href=#draw_cmds></a> + </li> <li> <a id="tab_ctrl" class="glyphicon glyphicon-random" data-toggle="tab" href=#ctrl_cmds></a> </li> @@ -743,6 +751,27 @@ </li> </ul> <!--}}}--> + <ul id="draw_cmds" class="list-group tab-pane fade library-group in active"> + <li class="list-group-item pgm-command pgm-type-void cmd-draw-mv"> + <span class="glyphicon glyphicon-record"></span> + déplacer le curseur vers + <ul class="pgm-recv pgm-recv-direction"> + <li class="placeholder">direction</li> + </ul> + </li> + <li class="list-group-item pgm-command pgm-type-void cmd-draw-stamp"> + <span class="glyphicon glyphicon-tint"></span> + reproduire la case + </li> + <li class="list-group-item pgm-command pgm-type-void cmd-draw-erase"> + <span class="glyphicon glyphicon-erase"></span> + effacer la carte sous le curseur + </li> + <li class="list-group-item pgm-command pgm-type-void cmd-draw-erase-all"> + <span class="glyphicon glyphicon-trash"></span> + effacer toute la carte + </li> + </ul> <!--{{{ control--> <ul id="ctrl_cmds" class="list-group tab-pane fade library-group"> <li class="list-group-item panel panel-default pgm-block pgm-type-void cmd-block-if"> @@ -961,7 +990,7 @@ </div> <!---}}}--> <!--{{{ program--> - <div class="col-xs-12 col-sm-7 col-md-8"> + <div class="col-xs-12 col-sm-7 col-md-8" id="pgm-container"> <div class="panel panel-default pgm" id="pgm"> <!--{{{ algorithm--> <div class="panel-heading"> @@ -969,10 +998,8 @@ <a class="panel-toggle" href="#pgm-main,#library-cmds,#phone-toolbar" data-toggle="collapse"> <span class="glyphicon collapse-marker"></span> Programme - <!-- - <span class="collapse-hint-open"><small>(cliquer pour ouvrir)</small></span> - <span class="collapse-hint-close"><small>(cliquer pour fermer)</small></span> - --> + <span class="collapse-hint collapse-hint-open"><small>(cliquer pour ouvrir)</small></span> + <span class="collapse-hint collapse-hint-close"><small>(cliquer pour fermer)</small></span> </a> </h3> <div class="btn-group pull-right" role="group"> diff --git a/js/bootstrap-native.js b/js/bootstrap-native.js index 05c45800bfb263e4c5b4aa6747cd2055548b295b..43c32312aa87633605d330997596c3f99053ede5 100644 --- a/js/bootstrap-native.js +++ b/js/bootstrap-native.js @@ -819,7 +819,6 @@ d = t.getAttribute('data-target') && ( t.getAttribute('data-target') ), cl = h || d, c = cl && document.querySelectorAll(cl); - console.log(c) ; return c; }, /*