Squelette pour une page avec le tableau des musiques
This commit is contained in:
parent
501bc68c81
commit
2e0224f432
57
squelettes/content/musiques.html
Normal file
57
squelettes/content/musiques.html
Normal file
@ -0,0 +1,57 @@
|
||||
[===============================================================(#REM)
|
||||
Déclaration du bloc destiné à recevoir le client
|
||||
]
|
||||
<article class="texte_content">
|
||||
|
||||
<BOUCLE_entete(ARTICLES){page=tableaumusiques}>
|
||||
<header class="cartouche">
|
||||
[<p class="#EDIT{surtitre} surtitre">#(#SURTITRE)</p>]
|
||||
<h1><span class="#EDIT{titre} article__titre">#TITRE</span>[
|
||||
<small class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</small>
|
||||
]</h1>
|
||||
</header>
|
||||
<div class="main">
|
||||
[<div class="#EDIT{chapo} article__chapo">(#CHAPO|adaptive_images{#CONST{_CONTENT_WIDTH},0})</div>]
|
||||
[<div class="#EDIT{texte} article__texte">(#TEXTE|adaptive_images{#CONST{_CONTENT_WIDTH},0})</div>]
|
||||
</div>
|
||||
</BOUCLE_entete>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<B_tableau>
|
||||
<h2>#TOTAL_BOUCLE morceaux diffusés dans les émissions de Libre à vous !</h2>
|
||||
<table id="musiques">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sorter="text" data-placeholder="Filtre sur le titre">Morceau</th>
|
||||
<th data-sorter="text" data-placeholder="Filtre sur l’artiste">Artiste</th>
|
||||
<th data-placeholder="Filtre sur le genre">Genre</th>
|
||||
<th data-placeholder="Filtre sur la licence">Licence</th>
|
||||
<th data-placeholder="Filtre sur l’émission">Émissions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<BOUCLE_tableau(DATA){source json, https://bases.fichotheque.net/exemole/libreavous/api/v1/site/fiche-array?sort=titre-asc&xml=%3Cfiche-query%3E%3Ccorpus%3Emorceau%3C%2Fcorpus%3E%3C%2Ffiche-query%3E}{datapath array}>
|
||||
<tr>
|
||||
<td><a href="#VALEUR{properties/urlorigin}" target="_blank">#VALEUR{properties/titre}</a></td>
|
||||
<td>#VALEUR{properties/artistes}</td>
|
||||
<td>#VALEUR{properties/genres}</td>
|
||||
<td>#VALEUR{properties/licence}</td>
|
||||
<td>
|
||||
<BOUCLE_emissions(DATA){source array, #VALEUR{properties/emissions}}>
|
||||
<a href="#VALEUR{idalpha}">#VALEUR{idalpha}</a>
|
||||
</BOUCLE_emissions>
|
||||
</td>
|
||||
</tr>
|
||||
</BOUCLE_tableau>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</B_tableau>
|
||||
</div>
|
||||
</article>
|
||||
|
10
squelettes/head_js/musiques.html
Normal file
10
squelettes/head_js/musiques.html
Normal file
@ -0,0 +1,10 @@
|
||||
[(#REM) ]
|
||||
[<script src="(#CHEMIN{javascript/tablesorter/jquery.tablesorter.js}|timestamp)"></script>]
|
||||
|
||||
[(#REM) ]
|
||||
[<script src="(#CHEMIN{javascript/tablesorter/jquery.tablesorter.widgets.js}|timestamp)"></script>]
|
||||
|
||||
[<link rel="stylesheet" href="(#CSS{javascript/tablesorter/minimal.css})" type="text/css" />]
|
||||
|
||||
[<script src="(#CHEMIN{javascript/musiques.js}|timestamp)"></script>]
|
||||
|
11
squelettes/javascript/musiques.js
Normal file
11
squelettes/javascript/musiques.js
Normal file
@ -0,0 +1,11 @@
|
||||
$(function () {
|
||||
|
||||
$("#musiques").tablesorter({
|
||||
theme: "minimal",
|
||||
widgets: ["zebra", "filter"],
|
||||
ignoreCase: true,
|
||||
sortLocaleCompare : true,
|
||||
emptyTo: 'emptyMin'
|
||||
});
|
||||
|
||||
});
|
229
squelettes/javascript/tablesorter/blue.css
Normal file
229
squelettes/javascript/tablesorter/blue.css
Normal file
@ -0,0 +1,229 @@
|
||||
/*************
|
||||
Blue Theme
|
||||
*************/
|
||||
/* overall */
|
||||
.tablesorter-blue {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin: 10px 0 15px;
|
||||
text-align: left;
|
||||
border-spacing: 0;
|
||||
border: #cdcdcd 1px solid;
|
||||
border-width: 1px 0 0 1px;
|
||||
}
|
||||
.tablesorter-blue th,
|
||||
.tablesorter-blue td {
|
||||
border: #cdcdcd 1px solid;
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
|
||||
/* header */
|
||||
.tablesorter-blue th,
|
||||
.tablesorter-blue thead td {
|
||||
font: 12px/18px Arial, Sans-serif;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background-color: #99bfe6;
|
||||
border-collapse: collapse;
|
||||
padding: 4px;
|
||||
text-shadow: 0 1px 0 rgba(204, 204, 204, 0.7);
|
||||
}
|
||||
.tablesorter-blue tbody td,
|
||||
.tablesorter-blue tfoot th,
|
||||
.tablesorter-blue tfoot td {
|
||||
padding: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tablesorter-blue .header,
|
||||
.tablesorter-blue .tablesorter-header {
|
||||
/* black (unsorted) double arrow */
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
|
||||
/* white (unsorted) double arrow */
|
||||
/* background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); */
|
||||
/* image */
|
||||
/* background-image: url(images/black-unsorted.gif); */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
padding: 4px 18px 4px 4px;
|
||||
white-space: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-blue .headerSortUp,
|
||||
.tablesorter-blue .tablesorter-headerSortUp,
|
||||
.tablesorter-blue .tablesorter-headerAsc {
|
||||
background-color: #9fbfdf;
|
||||
/* black asc arrow */
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
|
||||
/* white asc arrow */
|
||||
/* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); */
|
||||
/* image */
|
||||
/* background-image: url(images/black-asc.gif); */
|
||||
}
|
||||
.tablesorter-blue .headerSortDown,
|
||||
.tablesorter-blue .tablesorter-headerSortDown,
|
||||
.tablesorter-blue .tablesorter-headerDesc {
|
||||
background-color: #8cb3d9;
|
||||
/* black desc arrow */
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
|
||||
/* white desc arrow */
|
||||
/* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); */
|
||||
/* image */
|
||||
/* background-image: url(images/black-desc.gif); */
|
||||
}
|
||||
.tablesorter-blue thead .sorter-false {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* tfoot */
|
||||
.tablesorter-blue tfoot .tablesorter-headerSortUp,
|
||||
.tablesorter-blue tfoot .tablesorter-headerSortDown,
|
||||
.tablesorter-blue tfoot .tablesorter-headerAsc,
|
||||
.tablesorter-blue tfoot .tablesorter-headerDesc {
|
||||
/* remove sort arrows from footer */
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* tbody */
|
||||
.tablesorter-blue td {
|
||||
color: #3d3d3d;
|
||||
background-color: #fff;
|
||||
padding: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* hovered row colors
|
||||
you'll need to add additional lines for
|
||||
rows with more than 2 child rows
|
||||
*/
|
||||
.tablesorter-blue tbody > tr.hover > td,
|
||||
.tablesorter-blue tbody > tr:hover > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.even.hover > td,
|
||||
.tablesorter-blue tbody > tr.even:hover > td,
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-blue tbody > tr.odd.hover > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow > td,
|
||||
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
|
||||
background-color: #bfbfbf;
|
||||
}
|
||||
|
||||
/* table processing indicator */
|
||||
.tablesorter-blue .tablesorter-processing {
|
||||
background-position: center center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
/* background-image: url(images/loading.gif) !important; */
|
||||
background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
|
||||
}
|
||||
|
||||
/* Zebra Widget - row alternating colors */
|
||||
.tablesorter-blue tbody tr.odd > td {
|
||||
background-color: #ebf2fa;
|
||||
}
|
||||
.tablesorter-blue tbody tr.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
.tablesorter-blue td.primary,
|
||||
.tablesorter-blue tr.odd td.primary {
|
||||
background-color: #99b3e6;
|
||||
}
|
||||
.tablesorter-blue tr.even td.primary {
|
||||
background-color: #c2d1f0;
|
||||
}
|
||||
.tablesorter-blue td.secondary,
|
||||
.tablesorter-blue tr.odd td.secondary {
|
||||
background-color: #c2d1f0;
|
||||
}
|
||||
.tablesorter-blue tr.even td.secondary {
|
||||
background-color: #d6e0f5;
|
||||
}
|
||||
.tablesorter-blue td.tertiary,
|
||||
.tablesorter-blue tr.odd td.tertiary {
|
||||
background-color: #d6e0f5;
|
||||
}
|
||||
.tablesorter-blue tr.even td.tertiary {
|
||||
background-color: #ebf0fa;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
.tablesorter-blue > caption {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* filter widget */
|
||||
.tablesorter-blue .tablesorter-filter-row {
|
||||
background-color: #eee;
|
||||
}
|
||||
.tablesorter-blue .tablesorter-filter-row td {
|
||||
background-color: #eee;
|
||||
line-height: normal;
|
||||
text-align: center; /* center the input */
|
||||
-webkit-transition: line-height 0.1s ease;
|
||||
-moz-transition: line-height 0.1s ease;
|
||||
-o-transition: line-height 0.1s ease;
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* optional disabled input styling */
|
||||
.tablesorter-blue .tablesorter-filter-row .disabled {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* hidden filter row */
|
||||
.tablesorter-blue .tablesorter-filter-row.hideme td {
|
||||
/*** *********************************************** ***/
|
||||
/*** change this padding to modify the thickness ***/
|
||||
/*** of the closed filter row (height = padding x 2) ***/
|
||||
padding: 2px;
|
||||
/*** *********************************************** ***/
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-blue .tablesorter-filter-row.hideme * {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* filters */
|
||||
.tablesorter-blue input.tablesorter-filter,
|
||||
.tablesorter-blue select.tablesorter-filter {
|
||||
width: 98%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #bbb;
|
||||
color: #333;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: height 0.1s ease;
|
||||
-moz-transition: height 0.1s ease;
|
||||
-o-transition: height 0.1s ease;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
/* rows hidden by filtering (needed for child rows) */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ajax error row */
|
||||
.tablesorter .tablesorter-errorRow td {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #e6bf99;
|
||||
}
|
2916
squelettes/javascript/tablesorter/jquery.tablesorter.js
Normal file
2916
squelettes/javascript/tablesorter/jquery.tablesorter.js
Normal file
File diff suppressed because it is too large
Load Diff
3178
squelettes/javascript/tablesorter/jquery.tablesorter.widgets.js
Normal file
3178
squelettes/javascript/tablesorter/jquery.tablesorter.widgets.js
Normal file
File diff suppressed because it is too large
Load Diff
53
squelettes/javascript/tablesorter/minimal.css
Normal file
53
squelettes/javascript/tablesorter/minimal.css
Normal file
@ -0,0 +1,53 @@
|
||||
/*************
|
||||
CSS minimal
|
||||
*************/
|
||||
|
||||
.tablesorter-minimal .tablesorter-header {
|
||||
padding-right: 1.6em;
|
||||
white-space: normal;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.tablesorter-minimal .tablesorter-header::before {
|
||||
content: "◇";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.3em;
|
||||
transform: translate(0,-50%);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tablesorter-minimal .tablesorter-headerAsc::before {
|
||||
content: "⬙";
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tablesorter-minimal .tablesorter-headerDesc::before {
|
||||
content: "⬘";
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tablesorter-minimal .tablesorter-header.sorter-false {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tablesorter-minimal .tablesorter-header.sorter-false::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.tablesorter-minimal tbody tr.odd > td {
|
||||
background-color: #ffe9e0;
|
||||
}
|
||||
.tablesorter-minimal tbody tr.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tablesorter-minimal .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tablesorter-filter.disabled {
|
||||
display: none;
|
||||
}
|
Loading…
Reference in New Issue
Block a user