SPIP/gamutable
SPIP/gamutable
4
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

un hover sur le tr

Browse source
This commit is contained in:
Christophe 2021-04-26 09:08:05 +02:00
commit 50f6d38962
4 changed files with 32 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
css/gamutable.css
View file

@ -44,7 +44,12 @@
.gamutable table .iconeTri {
float: right;
width: 1rem;
width: calc(1rem + 4px);
}
.gamutable table .iconeTri .fa {
padding: 2px 5px;
cursor: pointer;
}
.gamutable table .tri_col {

2
css/gamutable.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADHA;EAME,iBAAiB;ACCnB;;ADEA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADAA;EACC,qBAAqB;ACGtB;;ADAA;EAOC,eAAe;EACf,kBAAkB;ACHnB;;ADLA;EAUE,yBAAoC;ACDtC;;ADTA;EAaE,oBAAa;EAAb,aAAa;ACAf;;ADbA;EAgBE,oBAAY;MAAZ,YAAY;ACCd;;ADjBA;EAmBE,YAAY;EACZ,WAAW;ACEb;;ADtBA;EAwBE,eAAe;EACf,aAAa;ACEf;;AD3BA;EA4BE,UAAU;ACGZ;;AD/BA;EA+BE,0CAA0C;ACI5C;;ADDA;EACC,0CAA0C;ACI3C;;ADDA;EACC,eAAe;ACIhB;;ADDA;EACC,WAAW;EACX,kBAAkB;ACInB;;ADDA;EACC,UAAU;ACIX;;ADLA;EAGE,SAAS;ACMX;;ADFA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACKnB;;ADHA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACMnB;;ADXA;EAOE,yBAAyB;ACQ3B;;ADJA;EACC,iBAAiB;ACOlB;;ADJA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACOhB;;ADLA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACQnB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n\t.gamutable-nbrMax {\n\t\tmargin-left: 2rem;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n.gamutable__input--rechercher {\n\tpadding: 0.25rem 1rem;\n}\n\n.gamutable table {\n\t// patch provisoire\n\t// .vue-dropdown-item > span {\n\t// \tdisplay: inline-block;\n\t// \tmin-height: 1rem;\n\t// }\n\n\tfont-size: 1rem;\n\ttable-layout: auto;\n\tthead {\n\t\tborder: 1px solid rgb(119, 119, 119);\n\t}\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n\ttr:hover {\n\t\tbackground-color: rgba(179, 209, 67, 0.27);\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\n\ntr.filtreColonne th {\n\tpadding: 0;\n\tselect {\n\t\tmargin: 0;\n\t}\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--surTable select,\n.gamutable--surTable input {\n margin-bottom: 0;\n}\n\n.gamutable--surTable .gamutable-nbrMax {\n margin-left: 2rem;\n}\n\n.gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable__input--rechercher {\n padding: 0.25rem 1rem;\n}\n\n.gamutable table {\n font-size: 1rem;\n table-layout: auto;\n}\n\n.gamutable table thead {\n border: 1px solid #777777;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n.gamutable table tr:hover {\n background-color: rgba(179, 209, 67, 0.27);\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntr.filtreColonne th {\n padding: 0;\n}\n\ntr.filtreColonne th select {\n margin: 0;\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ndiv.gamutable .url_action {\n padding: 0.2rem;\n display: inline-block;\n background-color: #f5f5f5;\n border: 1px solid #cecece;\n border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n background-color: #cecece;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n\n.vueBlocs {\n display: flex;\n flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n width: 23%;\n border: 1px solid #cecece;\n margin-bottom: 1rem;\n margin-right: 1rem;\n}\n"]}
{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;;EAGE,gBAAgB;ACAlB;;ADHA;EAME,iBAAiB;ACCnB;;ADEA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADAA;EACC,qBAAqB;ACGtB;;ADAA;EAOC,eAAe;EACf,kBAAkB;ACHnB;;ADLA;EAUE,yBAAoC;ACDtC;;ADTA;EAaE,oBAAa;EAAb,aAAa;ACAf;;ADbA;EAgBE,oBAAY;MAAZ,YAAY;ACCd;;ADjBA;EAmBE,YAAY;EACZ,uBAAuB;ACEzB;;ADtBA;EAuBG,gBAAgB;EAChB,eAAe;ACGlB;;AD3BA;EA4BE,eAAe;EACf,aAAa;ACGf;;ADhCA;EAgCE,UAAU;ACIZ;;ADpCA;EAmCE,0CAA0C;ACK5C;;ADFA;EACC,0CAA0C;ACK3C;;ADFA;EACC,eAAe;ACKhB;;ADFA;EACC,WAAW;EACX,kBAAkB;ACKnB;;ADFA;EACC,UAAU;ACKX;;ADNA;EAGE,SAAS;ACOX;;ADHA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACMnB;;ADJA;EACC,eAAe;EACf,qBAAqB;EACrB,yBAAyB;EACzB,yBAAyB;EACzB,kBAAkB;ACOnB;;ADZA;EAOE,yBAAyB;ACS3B;;ADLA;EACC,iBAAiB;ACQlB;;ADLA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACQhB;;ADNA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACSnB","file":"gamutable.css","sourcesContent":[".gamutable--surTable {\n\tselect,\n\tinput {\n\t\tmargin-bottom: 0;\n\t}\n\t.gamutable-nbrMax {\n\t\tmargin-left: 2rem;\n\t}\n}\n.gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n.gamutable__input--rechercher {\n\tpadding: 0.25rem 1rem;\n}\n\n.gamutable table {\n\t// patch provisoire\n\t// .vue-dropdown-item > span {\n\t// \tdisplay: inline-block;\n\t// \tmin-height: 1rem;\n\t// }\n\n\tfont-size: 1rem;\n\ttable-layout: auto;\n\tthead {\n\t\tborder: 1px solid rgb(119, 119, 119);\n\t}\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: calc(1rem + 4px);\n\t\t//position: relative;\n\t\t.fa {\n\t\t\tpadding: 2px 5px;\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n\ttr:hover {\n\t\tbackground-color: rgba(179, 209, 67, 0.27);\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\n\ntr.filtreColonne th {\n\tpadding: 0;\n\tselect {\n\t\tmargin: 0;\n\t}\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ndiv.gamutable .url_action {\n\tpadding: 0.2rem;\n\tdisplay: inline-block;\n\tbackground-color: #f5f5f5;\n\tborder: 1px solid #cecece;\n\tborder-radius: 5px;\n\t&:hover {\n\t\tbackground-color: #cecece;\n\t}\n}\n\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--surTable select,\n.gamutable--surTable input {\n margin-bottom: 0;\n}\n\n.gamutable--surTable .gamutable-nbrMax {\n margin-left: 2rem;\n}\n\n.gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable__input--rechercher {\n padding: 0.25rem 1rem;\n}\n\n.gamutable table {\n font-size: 1rem;\n table-layout: auto;\n}\n\n.gamutable table thead {\n border: 1px solid #777777;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: calc(1rem + 4px);\n}\n\n.gamutable table .iconeTri .fa {\n padding: 2px 5px;\n cursor: pointer;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n.gamutable table tr:hover {\n background-color: rgba(179, 209, 67, 0.27);\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntr.filtreColonne th {\n padding: 0;\n}\n\ntr.filtreColonne th select {\n margin: 0;\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ndiv.gamutable .url_action {\n padding: 0.2rem;\n display: inline-block;\n background-color: #f5f5f5;\n border: 1px solid #cecece;\n border-radius: 5px;\n}\n\ndiv.gamutable .url_action:hover {\n background-color: #cecece;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n\n.vueBlocs {\n display: flex;\n flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n width: 23%;\n border: 1px solid #cecece;\n margin-bottom: 1rem;\n margin-right: 1rem;\n}\n"]}

6
css/gamutable.scss
View file

@ -38,8 +38,12 @@
}
.iconeTri {
float: right;
width: 1rem;
width: calc(1rem + 4px);
//position: relative;
.fa {
padding: 2px 5px;
cursor: pointer;
}
}
.tri_col {
cursor: pointer;

71
json_gamutable.json.html
View file

@ -4,84 +4,53 @@
"header":{
"id": "_",
"titre": "titre",
"texte": "texte",
"date": "date",
"statut": "statut",
"genre": "genre",
"nom_souscripteur": "nom du souscripteur",
"prenom": "prénom",
"date_naissance": "ddn",
"lieu_naissance": "Lieu",
"representant_legal": "R.Légal",
"type": "type",
"email": "email",
"telephone": "téléphone",
"adresse": "Adresse"
"statut": "statut"
},
"crayons":{
"titre" : "souscription",
"prenom" : "souscription"
},
"filtreCol" : {
"statut" : "select",
"nom": "input"
"titre": "input"
}
"classes":{
"titre": "toto",
"email":"toto"
}
},
<BOUCLE_souscriptions(SOUSCRIPTIONS){id_souscription?}{!par id_souscription}{tout}{','}>
<BOUCLE_articles(ARTICLES){id_article?}{tout}{','}>
[(#SET{statut,
#SET{args,#ID_SOUSCRIPTION|concat{-}|concat{#STATUT}}
<a class="url_action" data-id="#ID_SOUSCRIPTION" href="[(#URL_ACTION_AUTEUR{changer_statut_souscription,#GET{args}})]">
#SET{args,#ID_ARTICLE|concat{-}|concat{#STATUT}}
<a class="url_action" data-id="#ID_ARTICLE" href="[(#URL_ACTION_AUTEUR{changer_statut_article,#GET{args}})]">
[(#STATUT|!={publie}|oui)
<i title="Souscription en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
<i title="Article en attente" class="fa fa-check fa-2x orange" aria-hidden="true"></i>
]
[(#STATUT|=={publie}|oui)
<i title="Souscription validée" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
<i title="Article validé" class="fa fa-check fa-2x verte" aria-hidden="true"></i>
]
</a>
})]
{
"html": {
"id": #ID_SOUSCRIPTION,
"modif" : [(#VAL{<a class="modalbox" href="[(#URL_PAGE{souscrire}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{redirect,gamutable})]"><i class="fa fa-pencil"></i></a>}|json_encode)],
"id": #ID_ARTICLE,
"titre" : [(#TITRE|json_encode)],
"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
"statut" : [(#GET{statut}|json_encode)],
"genre" : [(#GENRE|json_encode)],
"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
"prenom" : [(#PRENOM|json_encode)],
"qui": [(#VAL{<a class="mediabox" title="Détail du souscripteur" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,qui})]"><i class="fa fa-address-book"></i></a>}|json_encode)],
"nbr" : [(#NOMBRE)],
"montant_part" : [(#MONTANT_PART)],
"montant" : [(#MONTANT)],
"prix": [(#VAL{<a class="mediabox" title="Détail de la souscription" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,prix})]"><i class="fa fa-shopping-cart"></i></a>}|json_encode)],
"type" : [(#TYPE|json_encode)],
"email" : [(#VAL{<a href="mailto:#EMAIL" target="_blank">#EMAIL</a>}|json_encode)],
"telephone" : [(#TELEPHONE|json_encode)],
"ou": [(#VAL{<a class="mediabox" title="Détail des coordonnées" href="[(#URL_PAGE{detail_souscription}|parametre_url{id_souscription,#ID_SOUSCRIPTION}|parametre_url{detail,adresse})]"><i class="fa fa-address-card"></i></a>}|json_encode)]
"texte": [(#VAL{<a class="modalbox" title="Détail" href="[(#URL_PAGE{gamutable_texte}|parametre_url{id_article,#ID_ARTICLE})]">[(#TEXTE|couper{10})]</a>}|json_encode)],
"statut" : [(#GET{statut}|json_encode)]
},
"classes": {
"modif": [(#STATUT|concat{-}|concat{#ID_SOUSCRIPTION}|json_encode)]
"texte": [(#STATUT|concat{-}|concat{#ID_ARTICLE}|json_encode)]
},
search: {
"id": #ID_SOUSCRIPTION,
"modif" : "",
"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
"statut" : [(#GET{statut}|json_encode)],
"genre" : [(#GENRE|json_encode)],
"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
"prenom" : [(#PRENOM|json_encode)],
"qui": "",
"nbr" : [(#NOMBRE)],
"montant_part" : [(#MONTANT_PART)],
"montant" : [(#MONTANT)],
"prix": "",
"type" : [(#TYPE|json_encode)],
"email" : [(#EMAIL|json_encode)],
"telephone" : [(#TELEPHONE|json_encode)],
"ou": ""
"id": #ID_ARTICLE,
"titre" : [(#TITRE|json_encode)],
"date" : [(#DATE|affdate{U}|json_encode)],
"texte": [(#TEXTE|couper{10}|json_encode)],
"statut" : [(#STATUT|json_encode)]
}
}
</BOUCLE_souscriptions>
</BOUCLE_articles>
]