Changeset 123026 in spip-zone


Ignore:
Timestamp:
Mar 21, 2020, 11:04:26 PM (3 weeks ago)
Author:
peetdu@…
Message:

Petite modernisation du code : le formulaire « Contenus par rubrique » désormais responsive.

Location:
_plugins_/lim/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/lim/trunk/css/lim.css

    r105382 r123026  
    1212  /* use !important to prevent issues with browser extensions that change fonts */
    1313  font-family: 'lim-font' !important;
    14   speak: none;
    1514  font-style: normal;
    1615  font-weight: normal;
  • _plugins_/lim/trunk/formulaires/inc-choisir-rubriques.html

    r105392 r123026  
    11[(#REM) Récupérer les objets sélectionnés. ex. spip_articles -> article ]
    22
    3 #SET{objets,#ARRAY}
    4 <BOUCLE_objets_selectionnes(DATA){liste #CONFIG{lim_objets}}>#SET{objets,#GET{objets}|push{#VALEUR}} #SET{nbre_col,#TOTAL_BOUCLE|moins{1}}</BOUCLE_objets_selectionnes>
    5 #SET{objets,#GET{objets}|array_flip}
     3#SET{objets, #ARRAY}
     4<BOUCLE_objets_selectionnes(DATA){liste #CONFIG{lim_objets}}>#SET{objets,#GET{objets}|push{#VALEUR}} #SET{nbre_objets,#TOTAL_BOUCLE|moins{1}}</BOUCLE_objets_selectionnes>
     5#SET{objets, #GET{objets}|array_flip}
    66
    7 [(#GET{nbre_col}|in_array{#ARRAY{0,1,1,2,2,3}}|oui)
    8         #SET{width_rub,450}
    9         #SET{width_obj,448}
    10 ]
    11 
    12 [(#GET{nbre_col}|>{3}|oui)
    13         #SET{width_rub,320}
    14         #SET{width_obj,580}
    15 ]
    167
    178[(#REM) multilinguisme : pour les objets sélectionnés, récupérer le nom traduit et les afficher dans l'ordre alphabétique ]
     
    2516[(#SET{type, #GET{traductions}|lim_type})]
    2617
    27 <style>
    28         .tab.rub {display:inline-block; width:#GET{width_rub}px; font-weight:bold; }
    29         .sousrub .tab.rub { width:[(#GET{width_rub}|moins{15})px]; font-weight:normal; }
    30         .sousrub .sousrub .tab.rub { width:[(#GET{width_rub}|moins{30})px]; }
    31         .sousrub .sousrub .sousrub .tab.rub { width:[(#GET{width_rub}|moins{45})px]; }
    32         .sousrub .sousrub .sousrub .sousrub .tab.rub { width:[(#GET{width_rub}|moins{60})px]; }
    33         .check { display:inline-block; width:[(#GET{width_obj}|div{#GET{nbre_col}})px]; text-align: center;}
    34         .check[rub_secteur=oui] {position:relative;}
    35         .check[rub_secteur=oui] label {position:absolute; top:-14px; left:30%; }
    36 </style>
    3718
    38 <div class="tab rub"></div>
    39 <BOUCLE_entete(DATA){source tableau,#GET{traductions}}{par cle}>
    40         #SET{type_obj, #CLE|objet_type}
    41         <div class="check entete center"><img src='#CHEMIN_IMAGE{#GET{type_obj}-24.png}'><br>#VALEUR</div>
    42 </BOUCLE_entete>
     19<div class="grid_rub">
     20        <div></div>
     21        <BOUCLE_entete2(DATA){source tableau,#GET{traductions}}{par cle}>
     22                #SET{type_obj, #CLE|objet_type}
     23                <div class="center"><img src='#CHEMIN_IMAGE{#GET{type_obj}-24.png}'><br>#VALEUR</div>
     24        </BOUCLE_entete2>
     25</div>
    4326
    4427<BOUCLE_titre_rubrique(RUBRIQUES){racine}{par num titre,titre}{tout}>
    4528        <div class='pin'><img src='#CHEMIN_IMAGE{rubrique-16.png}'></div>
    4629        <div class='secteur'>
    47                 <div class="tab rub"><a href="#URL_ECRIRE{rubrique,id_rubrique=#ID_RUBRIQUE}">#TITRE</a></div>
    48                 <BOUCLE_par_traduction1(DATA){source tableau,#GET{type}}{par cle}>
    49                         [(#INCLURE{fond=formulaires/inc-input-rub,env,name=#VALEUR}{#VALEUR=#ENV{#VALEUR}}{id_rubrique=#ID_RUBRIQUE}{secteur=oui})]
    50                 </BOUCLE_par_traduction1>
    51                 <B_enfants_rubriques>
    52                         <div class='sousrub'>
    53                         <BOUCLE_enfants_rubriques(RUBRIQUES){id_parent}{par num titre,titre}{tout}{si #JUSTE_SECTEUR|!={oui}}>
    54                                 <div class=''>
    55                                         <div class="tab rub">#TITRE</div><BOUCLE_par_traduction2(DATA){source tableau,#GET{type}}{par cle}>
    56                                         [(#INCLURE{fond=formulaires/inc-input-rub,env,name=#VALEUR}{#VALEUR=#ENV{#VALEUR}}{id_rubrique=#ID_RUBRIQUE})]
    57                                         </BOUCLE_par_traduction2><BOUCLE_rec(BOUCLE_enfants_rubriques)/>
    58                                 </div>
    59                         </BOUCLE_enfants_rubriques>
    60                         </div>
    61                 </B_enfants_rubriques>
     30                <div class="grid_rub">
     31                        <div class="tab rub"><b><a href="#URL_ECRIRE{rubrique,id_rubrique=#ID_RUBRIQUE}">#TITRE</a></b></div>
     32                        <BOUCLE_par_traduction1(DATA){source tableau,#GET{type}}{par cle}>
     33                                [(#INCLURE{fond=formulaires/inc-input-rub,env,name=#VALEUR}{#VALEUR=#ENV{#VALEUR}}{id_rubrique=#ID_RUBRIQUE}{secteur=oui})]
     34                        </BOUCLE_par_traduction1>
     35                </div>
     36                <BOUCLE_enfants_rubriques(RUBRIQUES){id_parent}{par num titre,titre}{tout}>
     37                        <div class='sousrub_#PROFONDEUR grid_rub'>
     38                        <div class="tab rub">#TITRE</div><BOUCLE_par_traduction2(DATA){source tableau,#GET{type}}{par cle}>
     39                        [(#INCLURE{fond=formulaires/inc-input-rub,env,name=#VALEUR}{#VALEUR=#ENV{#VALEUR}}{id_rubrique=#ID_RUBRIQUE})]
     40                        </BOUCLE_par_traduction2></div><BOUCLE_rec(BOUCLE_enfants_rubriques)/>
     41                </BOUCLE_enfants_rubriques>
    6242        </div>
    6343</BOUCLE_titre_rubrique>
     44
     45<style type="text/css">
     46        .grid_rub{
     47                display:grid;
     48                grid-template-columns: 320px repeat(#GET{nbre_objets}, 1fr);
     49                justify-items: center;
     50                align-items: center;
     51        }
     52
     53        .grid_rub .tab {
     54                justify-self: start;
     55        }
     56
     57        .grid_rub:hover {
     58                background-color: #ffffef;
     59        }
     60</style>
    6461
    6562<script type="text/javascript">
     
    6764        $(document).ready(function(){
    6865
    69                 jQuery("input:checkbox").change(function(){
     66                jQuery(".rub_secteur input:checkbox").change(function(){
    7067                        var type = $(this).attr('name').slice(0,-2);
    7168                        var $check = "div.check." + type;
    72                         console.log($check);
    7369                        if (jQuery(this).is(":checked")) {
    74                                 jQuery.each( jQuery(this).parent().parent().find($check), function(index,item) {
    75                                         console.log(item);
     70                                jQuery.each( jQuery(this).parent().parent().parent().find($check), function(index,item) {
    7671                                        jQuery(item).find('input').prop('checked',true);
    7772                                        jQuery(item).find('.lim_icon').removeClass('icon-on').addClass('icon-off');
    7873                                });
    7974                        } else {
    80                                 jQuery.each( jQuery(this).parent().parent().find($check), function(index,item) {
    81                                         console.log(item);
     75                                jQuery.each( jQuery(this).parent().parent().parent().find($check), function(index,item) {
    8276                                        jQuery(item).find('input').prop('checked',false);
    8377                                        jQuery(item).find('.lim_icon').removeClass('icon-off').addClass('icon-on');
     
    8579                        }
    8680                });
     81
     82                jQuery("input:checkbox").change(function(){
     83                        var type = $(this).attr('name').slice(0,-2);
     84                        var $check = "div.check." + type;
     85                        if (jQuery(this).is(":checked")) {
     86                                $(this).parent().find('.lim_icon').removeClass('icon-on').addClass('icon-off');
     87                        } else {
     88                                $(this).parent().find('.lim_icon').removeClass('icon-off').addClass('icon-on');
     89                        }
     90                });
    8791        });
    8892})(jQuery);
  • _plugins_/lim/trunk/formulaires/inc-input-rub.html

    r98118 r123026  
    1 <div class="check #NAME"[ (#SECTEUR|=={oui}|oui)rub_secteur='oui']>
     1<div class="check #NAME[ (#SECTEUR|=={oui}|oui)rub_secteur]">
    22        <label for="[(#NAME|concat{_rub#ID_RUBRIQUE})]">[(#ID_RUBRIQUE|in_any{#ENV{#NAME}}?{<span class="lim_icon icon-off"></span>,<span class="lim_icon icon-on"></span>})]</label>
    33        <input type="checkbox" name="#NAME\[\]" class='lim_hidden' value="#ID_RUBRIQUE" id='[(#NAME|concat{_rub#ID_RUBRIQUE})]' [(#ID_RUBRIQUE|in_any{#ENV{#NAME}}) checked='checked']>
  • _plugins_/lim/trunk/paquet.xml

    r119887 r123026  
    22        prefix="lim"
    33        categorie="maintenance"
    4         version="2.2.2"
     4        version="2.2.3"
    55        etat="stable"
    66        compatibilite="[3.2.0;3.3.*]"
  • _plugins_/lim/trunk/prive/style_prive_plugin_lim.html

    r105402 r123026  
    3030        -o-transition:          all .9s ease;
    3131        transition:             all .9s ease;
    32         font-size:25px;
     32        font-size:23px;
     33        line-height:28px !important;
    3334}
    3435.icon-on { color:[(#ENV{foncee})]; }
     
    3839input[type=checkbox].lim_hidden {display:none; }
    3940.formulaire_configurer_lim_logos,
     41
    4042.formulaire_configurer_lim_rubriques .pin                               { position:relative; top:10px; left:10px ;}
    41 .formulaire_configurer_lim_rubriques .secteur                   { margin:0px 0 10px 0; padding:10px 5px 5px 5px; border:1px solid #ddd; border-radius:5px; background-color:#fff; }
    42 .formulaire_configurer_lim_rubriques .sousrub                   { padding-left:15px; margin-bottom:5px; }
    43 .formulaire_configurer_lim_rubriques .sousrub .sousrub  { border-left:1px dotted #aaa; }
     43.formulaire_configurer_lim_rubriques .secteur                   { margin:0px 0 10px 0; padding:3px 0 3px 10px; border:1px solid #ddd; border-radius:5px; background-color:#fff; }
     44.formulaire_configurer_lim_rubriques .sousrub_1                 { padding-left:15px; margin-top:10px; }
     45.formulaire_configurer_lim_rubriques .sousrub_1  .tab   { font-weight:bold; }
     46.formulaire_configurer_lim_rubriques .sousrub_2                 { margin-left:15px; padding-left:15px; border-left:1px dotted #aaa; }
     47.formulaire_configurer_lim_rubriques .sousrub_3                 { margin-left:30px; padding-left:15px; border-left:1px dotted #aaa; }
    4448
    4549img.info_logo_site, img.forbidden       { vertical-align:middle; }
Note: See TracChangeset for help on using the changeset viewer.