Changeset 107814 in spip-zone


Ignore:
Timestamp:
Dec 1, 2017, 8:20:18 AM (16 months ago)
Author:
arnaud.berard@…
Message:

style et un peut de js sur la page de gestion des stocks
on affiche sur chaque ligne

  • le titre du produit, avec un lien vers l'édition, au survol on prévisualise le LOGO_PRODUIT (ou un doc si on utilise logo_auto)
  • le titre de la rubrique parente avec lien
  • la ref
  • le formulaire de gestion de stock
File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/stocks/trunk/prive/squelettes/contenu/gerer_stocks.html

    r107806 r107814  
     1<style type="text/css">
     2table {
     3        position: relative;
     4}
     5.txt-right {
     6        text-align: right;
     7}
     8td.actions {
     9        padding:0;
     10}
     11.product-preview {
     12        position: absolute;
     13        max-width: 400px;
     14        height: auto;
     15        left: 15rem;
     16        margin-top: -15rem;
     17        z-index: 5000;
     18        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2)
     19}
     20.formulaire_changer_quantite {
     21        padding-bottom: 8px;
     22}
    123
     24.formulaire_changer_quantite .reponse_formulaire {
     25        position: absolute;
     26    display: block;
     27    z-index: 100;
     28    padding: 8px;
     29    border: 1px solid;
     30    margin-left: -50%;
     31       
     32        text-align: center;
     33}
     34
     35.formulaire_changer_quantite .reponse_formulaire_ok {
     36        border-color: #22ff5d;
     37        background-color: rgba(156, 237, 149, 0.4);
     38}
     39.formulaire_changer_quantite .reponse_formulaire_erreur {
     40        border-color: #fc2729;
     41        background-color: rgba(255, 15, 17, 0.4);
     42}
     43.formulaire_changer_quantite label {
     44        display: block;
     45        width: 100%;   
     46}
     47.new,.edit {
     48        border-right: 8px solid;
     49        padding-right: 8px;
     50}
     51.new {
     52        border-color: #6fd3ff;
     53}
     54.edit {
     55        border-color: #89ebb6;
     56}
     57</style>
    258
    359<h1 class="grostitre">Gestion du stock</h1>
    4 
    5 
    6 
    760
    861<table>
    962        <tr>
    1063                <th>Titre</th>
     64                <th>Parent</th>
    1165                <th>Ref.</th>
    12                 <th>Stock</th>
     66                <th class="txt-right">Stock</th>
    1367        </tr>
    1468<B_listProduits>
    15        
    16 <BOUCLE_listProduits(PRODUITS)>
     69<BOUCLE_listProduits(PRODUITS){!statut IN vendu}>
    1770        <tr>
    18         <td>#TITRE</td>
    19         <td>#REFERENCE</td>
    20 
    2171                <td>
     72                        <a href="#URL_ECRIRE{'produit',id_produit=#ID_PRODUIT}" class="js-product-preview" data-preview="[(#LOGO_PRODUIT|image_reduire{500,500}|extraire_attribut{src})]">#TITRE</a>
     73                </td>
     74                <td>
     75                        <a href="#URL_ECRIRE{'rubrique',id_rubrique=#ID_RUBRIQUE}">#INFO_TITRE{'rubrique',#ID_RUBRIQUE}</a>
     76                </td>
     77                <td>#REFERENCE</td>
     78                <td class="txt-right actions">
    2279                        <div class="ajax">
    23                                 #FORMULAIRE_EDITER_STOCK{'produit', #ID_PRODUIT}
    24                         </div>
    25                                
     80                                #FORMULAIRE_CHANGER_QUANTITE{'produit', #ID_PRODUIT}
     81                        </div> 
    2682                </td>
    27 
    28                 </tr>
     83        </tr>
    2984</BOUCLE_listProduits>
    30 
    3185</B_listProduits>
    3286<//B_listProduits>
    33 
    3487</table>
    3588
     89<script>
     90jQuery(function($){
     91       
     92        $('.js-product-preview').hover(
     93                function(){
     94                        var preview = $('<img class="product-preview" src="'+$(this).data('preview')+'" style="opacity:0" />');
     95                        $(this).append(preview);
     96                        preview.animate({
     97                                        opacity: 1
     98                                  }, 700 );
     99                },
     100                function(){
     101                        $(this).find('img').remove();
     102                }
     103        );
     104       
     105});
     106</script>
Note: See TracChangeset for help on using the changeset viewer.