diff --git a/README.md b/README.md index d9394e5..462f3d7 100644 --- a/README.md +++ b/README.md @@ -16,9 +16,13 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev champcsv="search", delimitercsv=";", namecsv="souscripteurs.csv", + url_sort_asc="#CHEMIN{...}" + url_sort_desc="#CHEMIN{...}" env }> ``` +>url_sort_asc et url_sort_desc => surcharge possible des icones de tri de colonnes + 1. Surcharger `json_gamutable.json.html` en suivant son modele * pour le header c'est de la forme : "champ":"label" * **IMPORTANT** pour le content du json, il que le cle de la KEY de la table soit "id" et non pas "id_souscription" diff --git a/css/gamutable.css b/css/gamutable.css index ca6f414..447fe8b 100644 --- a/css/gamutable.css +++ b/css/gamutable.css @@ -1,49 +1,65 @@ .gamutable--sousTable { - display: flex; - justify-content: space-between; -} -.gamutable--pagination { - display: flex; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; } -.iconeTri { - float: right; - position: relative; +.gamutable--pagination { + display: -ms-flexbox; + display: flex; } -.iconeTri .fa-sort-asc { - position: absolute; - color: #cecece; - cursor: pointer; + +.gamutable table th > div { + display: -ms-flexbox; + display: flex; } -.iconeTri .fa-sort-desc { - color: #cecece; - cursor: pointer; + +.gamutable table .label_tete_colonne { + -ms-flex-positive: 1; + flex-grow: 1; } -.iconeTri > .active { - color: #000; + +.gamutable table .iconeTri { + float: right; + width: 1rem; } + +.gamutable table .tri_col { + cursor: pointer; + fill: #cecece; +} + +.gamutable table .iconeTri > .active { + fill: #000; +} + #app .select { - background-color: rgba(179, 209, 67, 0.47); + background-color: rgba(179, 209, 67, 0.47); } td.id { - cursor: pointer; + cursor: pointer; } th.icone { - width: 30px; - text-align: center; + width: 30px; + text-align: center; } + td.icone { - /*padding: 0;*/ + /*padding: 0;*/ } td.icone > * { - width: 100%; - display: block; - padding: 0.5rem; - text-align: center; + width: 100%; + display: block; + padding: 0.5rem; + text-align: center; } + td.icone i { - font-size: 1.8rem; + font-size: 1.8rem; } + +/*# sourceMappingURL=gamutable.css.map */ diff --git a/css/gamutable.css.map b/css/gamutable.css.map new file mode 100644 index 0000000..8cbf688 --- /dev/null +++ b/css/gamutable.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EAEE,oBAAa;EAAb,aAAa;ACCf;;ADHA;EAKE,oBAAY;MAAZ,YAAY;ACEd;;ADPA;EAQE,YAAY;EACZ,WAAW;ACGb;;ADZA;EAaE,eAAe;EACf,aAAa;ACGf;;ADjBA;EAiBE,UAAU;ACIZ;;ADDA;EACC,0CAA0C;ACI3C;;ADDA;EACC,eAAe;ACIhB;;ADDA;EACC,WAAW;EACX,kBAAkB;ACInB;;ADFA;EACC,cAAA;ACKD;;ADFA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACKnB;;ADHA;EACC,iBAAiB;ACMlB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\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}\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}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\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#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\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n"]} \ No newline at end of file diff --git a/css/gamutable.scss b/css/gamutable.scss new file mode 100644 index 0000000..f4d9417 --- /dev/null +++ b/css/gamutable.scss @@ -0,0 +1,53 @@ +.gamutable--sousTable { + display: flex; + justify-content: space-between; +} +.gamutable--pagination { + display: flex; +} + +.gamutable table { + th > div { + display: flex; + } + .label_tete_colonne { + flex-grow: 1; + } + .iconeTri { + float: right; + width: 1rem; + //position: relative; + } + .tri_col { + cursor: pointer; + fill: #cecece; + } + .iconeTri > .active { + fill: #000; + } +} +#app .select { + background-color: rgba(179, 209, 67, 0.47); +} + +td.id { + cursor: pointer; +} + +th.icone { + width: 30px; + text-align: center; +} +td.icone { + /*padding: 0;*/ +} + +td.icone > * { + width: 100%; + display: block; + padding: 0.5rem; + text-align: center; +} +td.icone i { + font-size: 1.8rem; +} diff --git a/css/table_knacss.css b/css/table_knacss.css new file mode 100644 index 0000000..7ae58a6 --- /dev/null +++ b/css/table_knacss.css @@ -0,0 +1,49 @@ +/* ----------------------------- */ +/* ==Tables */ +/* ----------------------------- */ +table, +.table { + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; + margin-bottom: 2rem; +} + +.table { + display: table; + border: 1px solid #acb3c2; + background: transparent; +} + +.table--zebra tbody tr:nth-child(odd) { + background: #e7e9ed; +} + +.table caption { + caption-side: bottom; + padding: 1rem; + color: #333; + font-style: italic; + text-align: right; +} + +.table td, +.table th { + padding: 0.3rem 0.6rem; + min-width: 2rem; + vertical-align: top; + border: 1px #acb3c2 dotted; + text-align: left; + cursor: default; +} + +.table thead { + color: #212529; + background: transparent; +} + +.table--auto { + table-layout: auto; +} diff --git a/img/sprite_gamutable.svg b/img/sprite_gamutable.svg new file mode 100644 index 0000000..5fedb54 --- /dev/null +++ b/img/sprite_gamutable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inclure/gamutable.html b/inclure/gamutable.html index 7deea2f..727c418 100644 --- a/inclure/gamutable.html +++ b/inclure/gamutable.html @@ -1,5 +1,6 @@ - +[(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})] +[(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t | \n\t\t\t\t
---|
\n\t\t\t\t\t | \n\t\t\t\t
\n\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t | \n\t\t\t\t
---|
\n\t\t\t\t\t | \n\t\t\t\t