Changeset 76798 in spip-zone


Ignore:
Timestamp:
Sep 30, 2013, 8:25:49 PM (6 years ago)
Author:
eric@…
Message:

Report des améliorations d'Emmanuel sur la sémantique et les css des modèles

Location:
_plugins_/rainette/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/rainette/trunk/demo/rainette.html

    r66467 r76798  
    2121       
    2222        <div id="#ENV{ville, FRXX0076}">
    23                 <p style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_infos</strong></p>
     23                <p id='rainette_infos' style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_infos</strong></p>
    2424                [(#MODELE{rainette_infos,code=#ENV{ville, FRXX0076},sous_modele=infos_ville})]
    2525                <br clear="all"/><br /><br />
     
    3333                </ul>
    3434                <br clear="all"/><br /><br />
    35                 <p style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_conditions</strong></p>
     35                <p id='rainette_conditions' style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_conditions</strong></p>
    3636                [(#MODELE{rainette_conditions,code=#ENV{ville, FRXX0076},sous_modele=conditions_tempsreel})]
    3737                <br clear="all"/><br /><br />
     
    4040                [(#MODELE{rainette_previsions,code=#ENV{ville, FRXX0076},type=1_jour,jour=0,sous_modele=previsions_2x12h})]
    4141                <br clear="all"/><br /><br />
    42                 <p style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_previsions</strong>, pour le surlendemain (jour=2, type=1_jour, sous-modele=previsions_2x12h)</p>
     42                <p id='rainette_previsions_2x12' style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_previsions</strong>, pour le surlendemain (jour=2, type=1_jour, sous-modele=previsions_2x12h)</p>
    4343                [(#MODELE{rainette_previsions,code=#ENV{ville, FRXX0076},type=1_jour,jour=2,sous_modele=previsions_2x12h})]
    4444                <br clear="all"/><br /><br />
    45                 <p style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_previsions</strong>, pour les jours &agrave; venir (jour=3, type=x_jours, sous-modele=previsions_24h)</p>
     45                <p id='rainette_previsions_24' style="font-size: 12px">&gt;&gt;&nbsp;Utilisation du mod&eacute;le <strong>rainette_previsions</strong>, pour les jours &agrave; venir (jour=3, type=x_jours, sous-modele=previsions_24h)</p>
    4646                [(#MODELE{rainette_previsions,code=#ENV{ville, FRXX0076},type=x_jours,jour=5,sous_modele=previsions_24h})]
    4747        </div>
  • _plugins_/rainette/trunk/modeles/conditions_tempsreel.html

    r70857 r76798  
    1010                        <div class="t_reelle">[(#ENV{temperature_reelle}|rainette_afficher_unite{temperature})]</div>
    1111                        <div class="t_ressentie"><:rainette:temperature_ressentie:>&nbsp;:[&nbsp;(#ENV{temperature_ressentie}|rainette_afficher_unite{temperature})]<br/></div>
    12                         <br clear="all"/>
     12                        <br style="clear:both" />
    1313                        <div class="resume">[(#ENV{resume}|rainette_resume_meteo)]</div>
    1414                </div>
     
    1919        </div>
    2020
    21         <div class="details">
    22                 <span><:rainette:vent|ucfirst:></span><br/>
     21        <ul class="details">
     22                <li><span><:rainette:vent|ucfirst:></span>
    2323                [(#ENV{vitesse_vent}|rainette_afficher_unite{vitesse})]
    24                 [ - (#ENV{direction_vent}|rainette_afficher_direction)]<br/><br/>
    25                 <span><:rainette:humidite|ucfirst:></span><br/>
    26                 [(#ENV{humidite}|rainette_afficher_unite{pourcentage})]<br/><br/>
    27                 <span><:rainette:pression|ucfirst:></span><br/>
     24                [ - (#ENV{direction_vent}|rainette_afficher_direction)]</li>
     25                <li><span><:rainette:humidite|ucfirst:></span>
     26                [(#ENV{humidite}|rainette_afficher_unite{pourcentage})]</li>
     27                <li><span><:rainette:pression|ucfirst:></span>
    2828                [(#ENV{pression}|rainette_afficher_unite{pression})]
    29                 [ (#ENV{tendance_pression}|rainette_afficher_tendance{icone})]<br/><br/>
    30                 [<span><:rainette:point_rosee|ucfirst:></span><br/>
    31                 (#ENV{point_rosee}|rainette_afficher_unite{temperature})<br/><br/>]
    32                 [<span><:rainette:visibilite|ucfirst:></span><br/>
    33                 (#ENV{visibilite}|rainette_afficher_unite{distance})]
    34         </div>
     29                [ (#ENV{tendance_pression}|rainette_afficher_tendance{icone})]</li>
     30                [<li><span><:rainette:point_rosee|ucfirst:></span>
     31                (#ENV{point_rosee}|rainette_afficher_unite{temperature})</li>]
     32                [<li><span><:rainette:visibilite|ucfirst:></span>
     33                (#ENV{visibilite}|rainette_afficher_unite{distance})</li>]
     34        </ul>
    3535
    3636        #INCLURE{fond=modeles/inc-credits,
  • _plugins_/rainette/trunk/modeles/infos_ville.html

    r70857 r76798  
    77        <h2 class="ville">[(#ENV{ville})]</h2>
    88        <div class="coordonnees">
    9                 <:rainette:longitude|ucfirst:>&nbsp;:[&nbsp;(#ENV{longitude}|rainette_afficher_unite{angle, 2})<br/>]
    10                 <:rainette:latitude|ucfirst:>&nbsp;:[&nbsp;(#ENV{latitude}|rainette_afficher_unite{angle, 2})<br/>]
    11                 [<br/><:rainette:population|ucfirst:>&nbsp;:&nbsp;(#ENV{population}|rainette_afficher_unite{population})]
    12                 [<br/><:rainette:region|ucfirst:>&nbsp;:&nbsp;(#ENV{region})]
     9                <li><:rainette:longitude|ucfirst:>&nbsp;:[&nbsp;(#ENV{longitude}|rainette_afficher_unite{angle, 2})</li>]
     10                <li><:rainette:latitude|ucfirst:>&nbsp;:[&nbsp;(#ENV{latitude}|rainette_afficher_unite{angle, 2})</li>]
     11                [<li><:rainette:population|ucfirst:>&nbsp;:&nbsp;(#ENV{population}|rainette_afficher_unite{population})</li>]
     12                [<li><:rainette:region|ucfirst:>&nbsp;:&nbsp;(#ENV{region})</li>]
    1313        </div>
    1414
  • _plugins_/rainette/trunk/paquet.xml

    r70856 r76798  
    22        prefix="rainette"
    33        categorie="divers"
    4         version="2.0.16"
     4        version="2.0.17"
    55        etat="dev"
    66        compatibilite="[3.0.0;3.*]"
  • _plugins_/rainette/trunk/rainette.css

    r70855 r76798  
    11/* Styles generaux  */
    2 .rainette_titre {margin: 5px 0 5px 10px; padding:0 0 0 0;}
     2.rainette_titre {margin: 0.5em 0 0.5em 1em;     padding:0 0 0 0;}
    33.rainette_credits {margin: 0; text-align: center; clear:both; font-size: 10px;}
    4 .rainette_credits.infos {float: left; margin-left: 10px; margin-top: 10px;}
    5 .rainette_credits.condtr {padding-top: 10px;}
    6 .rainette_credits.prev24h {}
     4.rainette_credits.infos {float: left; margin-left: 0.85em; margin-bottom: 0.5em;}
     5.rainette_credits.condtr {}
     6.rainette_credits.prev24h {margin-bottom: 0.5em;}
    77.rainette_credits.prev2x12h {}
    88
     
    1010.rainette_infos {
    1111        float: left;
    12         width: 400px;
     12        width: 36em;
    1313        background: #ffffff;
    14         border: 2px solid #dddddd;
    15         margin: 4px 0 17px 0;
    16         padding: 0 0 5px 0;
     14        border: 0.2em solid #dddddd;
     15        margin: 0.5em 0 1em 0;
     16        padding: 0;
    1717}
    18 .rainette_infos .ville {margin: 5px 0 5px 10px; padding: 0 0 0 0;}
    19 .rainette_infos .coordonnees {float: left; line-height: 12px; padding: 0 0 0 10px;}
     18.rainette_infos .ville {margin: 0.5em 0 0 0.5em;}
     19.rainette_infos .coordonnees {
     20    margin: 0.5em 0 0.5em 0.85em;
     21    list-style-type: none;
     22    font-size: 0.85em;
     23    padding: 0;
     24}
    2025
    2126/* CONDITIONS: Styles utilises par le modele rainette_conditions */
    2227.rainette_conditions {
    2328        float: left;
    24         width: 400px;
     29        width: 36em;
    2530        background: #fcfcfc;
    26         border: 2px solid #dddddd;
    27         margin: 5px 0 20px 0;
    28         padding:0 0 5px 0;}
    29 .rainette_conditions .statut {float: left; width: 260px;}
     31        border: 0.15em solid #dddddd;
     32        margin: 0.5em 0 2em 0;
     33        padding:0 0 0.5em 0;}
     34.rainette_conditions .statut {float: left; width: 21em;}
    3035.rainette_conditions .cadre {
    3136        float: left;
    32         width: 234px;
    33         border: 1px solid #dddddd;
     37        width: 19em;
     38        border: 0.1em solid #dddddd;
    3439        background: #ffffff;
    35         margin: 11px 0 0 11px;
    36         padding:0 0 5px 0;}
    37 .rainette_conditions .icone {float: left; margin: 3px 0 -5px 7px; min-height: 110px; min-width: 110px;}
     40        margin: 1em 0 0 1em;
     41        padding: 0 0 0.5em 0;
     42}
     43.rainette_conditions .icone {float: left; margin: 0.3em 0 -0.5em 0.7em;}
    3844.rainette_conditions .t_reelle {
    3945        float: left;
    4046        color: #333333;
    41         font-size: 33px;
     47        font-size: 3em;
    4248        font-weight: bold;
    43         line-height: 1em;
    44         margin: 20px 0 0 15px;
     49        margin: 0.5em 0 0 0.25em;
    4550}
    46 .rainette_conditions .t_ressentie {float: left; width: 95px; color: #333333; margin: 0 0 0 15px;}
    47 .rainette_conditions .resume {text-align: center; font-weight: bold; padding-top: 5px;}
     51.rainette_conditions .t_ressentie {
     52        float: left; color: #333333; margin: 0 0 0 0.75em;
     53}
     54.rainette_conditions .resume {
     55        text-align: center; font-weight: bold; padding-top: 0.5em;
     56}
    4857.rainette_conditions .maj {
    4958        float: left;
    50         font-size: 10px;
     59        font-size: 0.85em;
    5160        color: #000000;
    52         width: 236px;
    53         padding: 6px 0 0 11px;
     61        padding: 0.5em 0 1.75em 1.25em;
    5462}
    55 .rainette_conditions .details {
     63.rainette_conditions ul li {
    5664        float: left;
    5765        color: #000000;
    58         line-height: 12px;
    59         width: 134px;
    60         padding: 12px 5px 5px 1px;
     66        width: 13em;
     67        padding: 0 0 0.7em 0.1em;
     68        list-style-type: none;
    6169}
    62 .rainette_conditions .details  span {color: #6E6E6E; font-weight: bold;}
     70.rainette_conditions li span {color: #6E6E6E; font-weight: bold; display: block;}
     71
     72.rainette_conditions li img { margin: -1em 0 0 0}
    6373
    6474/* PREVISIONS: Styles utilises par le modele rainette_previsions, sur 1 jour presente en 2x12h */
    6575.rainette_previsions_2x12h {
    6676        float: left;
    67         border: 2px solid #dddddd;
    68         border-right: 1px solid #dddddd;
    69         width: 596px;
    70         margin: 5px 0 20px 0;
     77        border: 0.2em solid #dddddd;
     78        border-right: 0.1em solid #dddddd;
     79        width: 54em;
     80        margin: 0.5em 0 0 0;
    7181}
    7282.rainette_previsions_2x12h .entete {
    7383        float: left;
    74         height: 19px;
    75         width: 297px;
     84        height: 1.8em;
     85        width: 26.9em;
     86        border-right: 0.1em solid #dddddd;
     87        border-bottom: 0.1em solid #dddddd;
     88        padding: 0.5em 0 0 0;
     89        text-align: center;
    7690        font-weight: bold;
    7791        background: #fcfcfc;
    78         border-bottom: 1px solid #dddddd;
    79         border-right: 1px solid #dddddd;
    80         padding: 5px 0 0 0;
    81         text-align: center;
    8292}
    8393.rainette_previsions_2x12h .cadre {float: left; background: #ffffff;}
    84 .rainette_previsions_2x12h .cellule {float: left; width: 297px; border-right: 1px solid #dddddd;}
    85 .rainette_previsions_2x12h .contenu {float: left; width: 277px; margin: 5px 10px 10px 10px;}
    86 .rainette_previsions_2x12h .icone {float: left; width: 110px; height:110px; padding: 0 10px 0 10px;}
     94.rainette_previsions_2x12h .cellule {
     95        float: left;
     96        width: 26.9em;
     97        border-style: solid;
     98        border-color: #dddddd;
     99        border-width: 0 0.1em 0.1em 0;
     100}
     101.rainette_previsions_2x12h .contenu {
     102        float: left; width: 24em; margin: 0.5em 1em 1em 1em;
     103}
     104.rainette_previsions_2x12h .icone {
     105        float: left; width: 11em; height:11em; padding: 0 1em 0 1em;
     106}
    87107.rainette_previsions_2x12h .t_reelle {
    88         width: 137px;
     108        width: 10em;
    89109        float: left;
    90110        font-weight: bold;
    91         font-size: 12px;
     111        font-size: 1em;
    92112        color: #333333;
    93         margin: 10px 0 0 10px;
     113        margin: 1em 0 0 1em;
    94114}
    95 .rainette_previsions_2x12h .t_reelle span {font-size: 33px;}
     115.rainette_previsions_2x12h .t_reelle span {font-size: 3em;}
    96116.rainette_previsions_2x12h .details {
    97117        float: left;
    98118        clear: both;
    99119        color: #6e6e6e;
    100         width: 267px;
    101         padding: 5px 10px 0;
     120        width: 26em;
     121        padding: 0.5em 0 0 0;
    102122}
    103 .rainette_previsions_2x12h .details ul {list-style-type: none; padding: 0; margin: 0;}
    104 .rainette_previsions_2x12h .details li {margin-left: 130px; clear:both;}
    105 .rainette_previsions_2x12h .details li span {margin-left:-130px; float:left; display:inline; font-weight: bold;}
     123.rainette_previsions_2x12h .details ul {
     124        list-style-type: none; padding: 0; margin: 0;
     125}
     126.rainette_previsions_2x12h .details li {margin-left: 12em; clear:both;}
     127.rainette_previsions_2x12h .details li span {margin-left:-12em; float:left; display:inline; font-weight: bold;}
    106128.rainette_previsions_2x12h .maj {
    107         border-top: 1px solid #dddddd;
    108         border-right: 1px solid #dddddd;
     129        float: left;
     130        width: inherit; /* sinon le text-align est inoperant */
     131        text-align: center;
    109132        color: #333333;
    110         float: left;
    111         font-size: 10px;
    112         padding: 4px 0;
    113         text-align: center;
    114         width: 595px;
     133        font-size: 0.9em;
     134        padding: 0.5em;
    115135}
    116136
     
    118138.rainette_previsions_24h {
    119139        float: left;
    120         border: 1px solid #dddddd;
    121         width: 120px;
    122         margin: 5px 5px 20px 0;
     140        border: 0.1em solid #dddddd;
     141        width: 11em;
     142        margin: 0.4em 0.4em 2em 0;
    123143}
    124144.rainette_previsions_24h .jour {
    125         height: 19px;
     145        height: 1.9em;
    126146        font-weight: bold;
    127147        background: #fcfcfc;
    128         width: 120px;
    129         border-bottom: 1px solid #dddddd;
    130         padding: 5px 0 0 0;
     148        width: 11em;
     149        border-bottom: 0.1em solid #dddddd;
     150        padding: 0.4em 0 0 0;
    131151        text-align: center;
    132152}
    133153.rainette_previsions_24h .date {
    134         height: 19px;
     154        height: 1.9em;
    135155        font-weight: bold;
    136156        background: #fcfcfc;
    137         width: 120px;
    138         border-bottom: 1px solid #dddddd;
    139         padding: 5px 0 0 0;
     157        width: 11em;
     158        border-bottom: 0.1em solid #dddddd;
     159        padding: 0.4em 0 0 0;
    140160        text-align: center;
    141161}
    142 .rainette_previsions_24h .contenu {width: 120px; border: 0; padding: 10px 0 10px 0; text-align: center; min-height: 20em;}
     162.rainette_previsions_24h .contenu {
     163        min-height: 20em;
     164        width: 11em;
     165        padding: 1em 0 1em 0;
     166        border: 0;
     167        text-align: center;
     168}
    143169* html .rainette_previsions_24h .contenu {height: 20em;}
    144 .rainette_previsions_24h .icone {margin-bottom: 10px;}
    145 .rainette_previsions_24h .t_reelle {font-weight: bold; margin: 0 5px 10px 5px; min-height: 35px}
    146 .rainette_previsions_24h .resume {font-weight: bold; margin: 0 5px 10px 5px; min-height: 45px}
    147 .rainette_previsions_24h .details {font-weight: normal; margin: 0 5px 10px 5px;}
     170.rainette_previsions_24h .icone {margin-bottom: 1em;}
     171.rainette_previsions_24h .t_reelle {font-weight: bold; margin: 0 0.4em 1em 0.4em; min-height: 3em}
     172.rainette_previsions_24h .resume {font-weight: bold; margin: 0 0.4em 1em 0.4em; min-height: 4em}
     173.rainette_previsions_24h .details {font-weight: normal; margin: 0 0.4em 1em 0.4em;}
    148174.rainette_previsions_24h .details ul {list-style-type: none; padding: 0; margin: 0;}
Note: See TracChangeset for help on using the changeset viewer.