Changeset 87367 in spip-zone


Ignore:
Timestamp:
Feb 5, 2015, 9:10:06 AM (4 years ago)
Author:
noemie-edith-so.bernard@…
Message:

MODULE Liste de boutons : arrangement du CSS pour les différents affichages

Location:
_squelettes_/galaxie_melusine/melusine/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/galaxie_melusine/melusine/trunk/css/style.css

    r87236 r87367  
    130130a.ong1{
    131131        border:0px solid!important;
     132        text-align: center;
    132133}
    133134
     
    177178
    178179.multibloc .item,
     180.multibloc .item123,
    179181.bloc_visible,
    180182/*.melusine-modules_articles_freres .module_content,*/
     
    519521}
    520522
    521 .en_lignedroite{float:right;padding:0px;display:table;}
    522 .en_lignedroite .item{display:table-cell;vertical-align: middle;height:100%;margin:0px;}
     523.en_lignedroite{float:right;padding:0px;display:inline-block;}
     524.en_lignedroite .item{vertical-align: middle;height:100%;margin:0px;}
    523525.en_lignedroite .item:hover{background-color:#CCC;}
    524526.en_lignedroite .item a{color:#FFF;}
    525 .en_lignedroite .item a {
    526         padding-left:10px;
    527         font-variant: small-caps;
    528         padding-right:10px;margin-left:10px;
    529        
    530         text-align:center;
    531         height:31px;
    532         font-size:18px;
    533         text-decoration:none
    534 }
    535527
    536528/*.en_lignedroite .item-logo a img{
    537529        height:90%;
    538530}*/
    539 .en_lignedroite .item-logo:hover {
    540         background-color:transparent!important;}
     531.en_lignedroite .item-logo:hover {background-color:transparent!important;}
    541532       
    542 .en_lignegauche{float:left;padding:0px;display:table;}
     533.en_lignegauche{float:left;padding-left: 10px;display:table;}
    543534.en_lignegauche .item{display:table-cell;vertical-align: middle;height:100%;margin:0px;}
    544535.en_lignegauche .item:hover{background-color:#CCC;}
     
    563554
    564555
    565 .bloc_visible .item{padding:5px;}
     556
    566557.melusine-modules_bouton {text-align:center}
    567558.melusine-modules_bouton .bloc_visible{padding:5px;}
     
    650641.alignedroite { text-align: right;}
    651642
    652 
    653643.module_melusine .info { margin-bottom:0px; }
    654644
    655645.pasdextra { display: none; }
     646
     647
     648/*----------------------------------------------------------------------------*/
     649/* ITEM123 pour le module LISTE DE BOUTONS -----------------------------------*/
     650/*----------------------------------------------------------------------------*/
     651
     652.row .item123 {text-align:center;width:100px;}
     653.row .item123-logo {height:100px;width:100px;vertical-align:middle;margin:0px;}
     654.multibloc .item123{padding:0px;}
     655.module_content.multibloc .item123{margin-bottom:0px;}
     656.module_content.multibloc .item123-logo
     657{margin-bottom:0px;vertical-align:middle;
     658}
     659.module-content.bloc_invisible .en_lignedroite{padding-right:15px!important;}
     660.module-content.bloc_invisible .en_lignegauche{padding-left:15px!important;}
     661/*.hauteur_de_100 {height: 100px;}*/
  • _squelettes_/galaxie_melusine/melusine/trunk/formulaires/melusine_boutons.html

    r87233 r87367  
    3232[(#GET{voir_images}|non)#SET{voir_images,"oui"}]
    3333[(#GET{voir_intitule}|non)#SET{voir_intitule,"oui"}]
    34 
    35 <!-- Ajout d'un saut de ligne pour améliorer l'affichage -->
    36 </br>
    37 <!-- -->
    3834
    3935<!-- *********************************************************************** -->
  • _squelettes_/galaxie_melusine/melusine/trunk/formulaires/melusine_boutons.php

    r87236 r87367  
    5757        $action=_request('ok2');
    5858        $position=_request('position');
    59         if (isset($_POST['ok']))
     59        if (isset($_POST['reset']))
     60        {       /* On initialise les valeurs du formulaire */
     61                $params['style']="multibloc";
     62                $params['voir_images']="oui";
     63                $params['voir_intitule']="oui";
     64                $params['col']="col-md-12";
     65        }
     66        else 
    6067        {       /* On récupère les valeurs du formulaire */
    6168                $params['style']=_request('style');
     
    6471                $params['col']=_request('col');
    6572        }
    66         elseif (isset($_POST['reset']))
    67         {       /* On initialise les valeurs du formulaire */
    68                 $params['style']="multibloc";
    69                 $params['voir_images']="oui";
    70                 $params['voir_intitule']="oui";
    71                 $params['col']="col-md-12";
    72         }
     73       
    7374
    7475        $params['boutons']=$boutons;
  • _squelettes_/galaxie_melusine/melusine/trunk/modules/liste_boutons.html

    r87233 r87367  
     1<!-- *********************************************************************** -->
     2<!-- *********************************************************************** -->
     3<!-- MODULE LISTE DE BOUTONS *********************************************** -->
     4<!-- *********************************************************************** -->
     5<!-- *********************************************************************** -->
     6
     7
     8<!-- *********************************************************************** -->
     9<!-- RECUPERATION DES DONNEES, INITIALISATION ET VERIFICATION ************** -->
     10<!-- *********************************************************************** -->
     11
    112<BOUCLE_noisette(NOISETTES){id_noisette =#ID_NOISETTE}>
    213        #SET{boutons,#PARAMETRES|unserialize|table_valeur{boutons}}
     
    718        #SET{params,#PARAMETRES}
    819</BOUCLE_noisette>
     20
     21<!-- *********************************************************************** -->
     22<!-- AVERTISSEMENT POUR L'AMDIN SI LE MODULE N'EST PAS CONFIGURE *********** -->
     23<!-- *********************************************************************** -->
    924
    1025<!-- Si aucun bouton n'a été créé, avertissement pour l'admin ************** -->
     
    1732]
    1833
     34<!-- *********************************************************************** -->
     35<!-- AFFICHAGE CONDITIONNE DE LA LISTE DES BOUTONS ************************* -->
     36<!-- *********************************************************************** -->
     37
     38<!-- On affiche suivant le style : monobloc, multiblocs, fond invisible -->
    1939<div class="module_content [(#GET{style})]">
    20         [(#GET{col}|=={en_lignedroite}|oui)<div class="module_content en_lignedroite">]
    21         [(#GET{col}|=={en_lignegauche}|oui)<div class="module_content en_lignegauche">]
     40
     41<!-- Si "alignement" au lieu du nombre de colonnes, on met des flottants -->
     42        [(#GET{col}|=={en_lignedroite}|oui)
     43                <div class="en_lignedroite">]
     44        [(#GET{col}|=={en_lignegauche}|oui)
     45                <div class="en_lignegauche">]
     46
     47        <!-- On crée une ligne -->
    2248        <div class="row">
     49                <!-- On cherche dans les boutons -->
    2350                <BOUCLE_test(POUR){tableau #GET{boutons}}>
    24                         [(#GET{col}|=={col-md-12}|non)
    25                                 <div class=" col-xs-6 col-sm-4 #GET{col}">]
     51                        <!-- Si choix autre que 1 colonne, on appelle la classe concernée
     52                        et on affecte une ligne de 130px de haut si on affiche les images
     53                        (100px pour l'image et 30px pour l'intitulé du bouton) -->
     54                        [(#GET{col}|=={col-md-12}|non)[(#GET{col}|match{^(en_lignedroite|en_lignegauche)$}|non)
     55                                <div class="col-xs-6 col-sm-4 #GET{col}">]]
     56                        [(#GET{col}|match{^(col-md-12|en_lignedroite|en_lignegauche)$}|oui)
     57                                <div class="#GET{col}" >]
     58                        <!-- Si on affiche les images, -->
    2659                        [(#GET{voir_images}|=={oui}|oui)
    27                                 [<div class="item item-logo">   
    28                                         <a id="onglet#CLE" class="ong1"
    29                                         href="[(#VALEUR|table_valeur{url})]"
    30                                         [       (#VALEUR|table_valeur{blank}|=={blank}|oui)target="_blank"]>   
    31                                                 (#VALEUR|table_valeur{image}|oui)
    32                                                 [(#CHEMIN{#VALEUR|table_valeur{image}}|image_reduire{100})
    33                                         ]                       
     60                                [       <div class="item123 item123-logo">     
     61                                        <a id="onglet#CLE"      class="ong1"
     62                                                                                href="[(#VALEUR|table_valeur{url})]"
     63                                        [(#VALEUR|table_valeur{blank}|=={blank}|oui)target="_blank"]
     64                                        >       
     65                                        (#VALEUR|table_valeur{image}|oui)
     66                                <!-- On retaille les images maximum 100px sur 100px -->
     67                                [(#CHEMIN{#VALEUR|table_valeur{image}}|image_reduire{100,100})]                 
    3468                                        </a>
    35                                 </div>
     69                                        </div>
    3670                                ]
    3771                        ]
     72                        <!-- Si on affiche les intitulés, -->
    3873                        [(#GET{voir_intitule}|=={oui}|oui)
    39                                 [<div class="item ">   
    40                                         <a id="onglet#CLE" class="ong1"
    41                                         href="[(#VALEUR|table_valeur{url})]"
    42                                                 [       (#VALEUR|table_valeur{blank}|=={blank}|oui)
    43                                                         target="_blank"] >     
    44                                                         <span class="img_onglet">
    45                                                                 (#VALEUR|table_valeur{intitule})
    46                                                         </span>
     74                                [<div class="item123 ">
     75                                        <a id="onglet#CLE"      class="ong1"
     76                                                                                href="[(#VALEUR|table_valeur{url})]"
     77                                        [(#VALEUR|table_valeur{blank}|=={blank}|oui)target="_blank"]
     78                                        >       
     79                                                <span class="img_onglet">
     80                                                        (#VALEUR|table_valeur{intitule})
     81                                                </span>
    4782                                        </a>
    4883                                </div>
    4984                                ]
    5085                        ]
    51                         [(#GET{col}|=={col-md-12}|non)</div>]
     86                        <!-- Fermeture du div, si choix autre que 1 colonne -->
     87                        </div>
    5288                </BOUCLE_test>
     89        <!-- Fermeture du div de création de ligne -->
    5390        </div>
     91
     92        <!-- Fermeture du div, si alignement au lieu d'un nombre de colonnes -->
    5493        [(#GET{col}|=={en_lignedroite}|oui)</div>]
    5594        [(#GET{col}|=={en_lignegauche}|oui)</div>]
     95
     96<!-- Fermeture du div de module_content avec le style des blocs -->
    5697</div>
Note: See TracChangeset for help on using the changeset viewer.