script pour Ă©tablir une bdd ĂĂ partir d'un tsv avec diffĂ©rent format - retour accueil
git clone git://bebou.netlib.re/laradb
Log | Files | Refs |
commit 2c90e99f2383e2d8ed3810887250be997037ba45 parent 7c3ad36d58b47cf9513207ac70acef63046738e2 Auteurice: martlem <contact@martinlemaire.fr> Date: Sat, 16 Nov 2024 22:45:42 +0100 table sort icon fix + map marker captions Diffstat:
| M | main.sh | | | 3 | +-- |
| M | src/about.sh | | | 2 | -- |
| M | src/map.sh | | | 26 | ++++++++++++++++---------- |
| M | src/static/script.js | | | 8 | +++++++- |
| M | src/static/style.css | | | 109 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------- |
| M | src/templates/head.html | | | 2 | -- |
| M | src/templates/nav-main.html | | | 2 | +- |
7 files changed, 102 insertions(+), 50 deletions(-)
diff --git a/main.sh b/main.sh @@ -20,8 +20,7 @@ echo Converting dates... ./src/map.sh ./src/about.sh +# dangerous during developement, should rather diff dist/* and cp newest to oldest in both direction cp src/static/* dist/ -#echo "go to coloc.bebou.netlib.re/frise.html" - #rm -rf tmp diff --git a/src/about.sh b/src/about.sh @@ -7,9 +7,7 @@ DIST="dist/" cat << % > $DIST/about.html $(cat src/templates/head.html) $(cat src/templates/nav-main.html) -<section class="large"> $(curl https://mypads2.framapad.org/p/about-iz6esk9yi/export/txt) -</section> $(cat src/templates/foot.html) % diff --git a/src/map.sh b/src/map.sh @@ -27,10 +27,9 @@ cat << % > $DIST/$OUT <meta name="HandheldFriendly" content="true"> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> - <link rel="stylesheet" href="cssVarFilledCookies.css"> - <script src="cssVarFilledCookies.js" defer></script> <script src="script.js" defer></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script> </head> @@ -74,7 +73,7 @@ let allEvents = Array.from(document.querySelectorAll(".event")).map((element) => const entries = [ $(while IFS= read -r line; do cat <<- ENTRY - {title:"$(entree 2)",city:"$(entree 9)"} + {title:"$(entree 2)",city:"$(entree 9)",startDate:"$(entree 5)", endDate:"$(entree 6)", noi:"$(entree 7)"} , ENTRY LINE=$(($LINE + 1)) @@ -108,7 +107,7 @@ const icon = L.divIcon({ iconAnchor: [0, 24], labelAnchor: [-6, 0], popupAnchor: [0, -36], - html: \`<span style="${markerHtmlStyles}" />\` + html: \`<span style="\${markerHtmlStyles}" />\` }) const popupOptions = { @@ -138,29 +137,36 @@ function applyOffset(coord, index) { return [coord[0] + offsetLng, coord[1] + offsetLat]; } - let i = 0 +let spread = .1; coordsWithEntries.forEach((data, index) => { if(data.city != "" && data.lon != "" && data.lat != ""){ data.relatedEntries.forEach((entry) => { const dataOffset = applyOffset([parseFloat(data.lon),parseFloat(data.lat)], index); + let markerInnerHTML = \` + <p>\${entry.title}</p> + <p>\${entry.city}</p> + <p>\${entry.startDate.replaceAll('-','.')}–\${entry.endDate.replaceAll('-','.')}</p> + <p>№\${entry.noi}</p> + \` + console.log(dataOffset) if (Math.abs(dataOffset[0]) <= 180 && Math.abs(dataOffset[1]) <= 90) { const markerPin = document.createElement('div') const markerChild = document.createElement('section') - const markerTitle = document.createElement('p') markerPin.appendChild(markerChild) - markerChild.appendChild(markerTitle) - markerTitle.textContent=entry.title + markerChild.innerHTML=markerInnerHTML markerPin.classList.add('pin'); + let deltaX = Math.random() * spread - (spread / 2); + let deltaY = Math.random() * spread - (spread / 2); new mapboxgl.Marker(markerPin) - .setLngLat(data.relatedEntries.length == 1 ? [data.lon, data.lat] : dataOffset) + .setLngLat([parseFloat(data.lon) + deltaX, parseFloat(data.lat) + deltaY]) .addTo(map); + //.setLngLat(data.relatedEntries.length == 1 ? [parseFloat(data.lon), parseFloat(data.lat)] : dataOffset) } } - )} }); diff --git a/src/static/script.js b/src/static/script.js @@ -136,6 +136,11 @@ function sortTable(n) { const table = document.querySelector("table"); const rows = Array.from(table.rows).slice(1); + + const headers = document.querySelectorAll('table thead td') + headers.forEach((h) => { + h.classList.remove('asc','desc') + }) console.log(n); @@ -163,6 +168,7 @@ function sortTable(n) { }); sortDirection = sortDirection === "asc" ? "desc" : "asc"; + headers[n].classList.add(sortDirection) rows.forEach(row => table.appendChild(row)); } @@ -235,6 +241,6 @@ switch (path) { case '/map.html': break; - default: break; +} diff --git a/src/static/style.css b/src/static/style.css @@ -8,7 +8,7 @@ --corps-L:2rem; --indent:2rem; --interligne:1.4rem; - --marker-size:.5rem; + --marker-size:.75rem; --largeur-bordure-cellule:1px; --largeur:16px; --arrondi:5px; @@ -41,6 +41,7 @@ font-size:var(--corps); color:var(--noir); line-height:var(--interligne) } +#TABLEAU tr {box-sizing:border-box;} thead td{text-align:left} #TABLEAU tr { @@ -110,7 +111,7 @@ tr.show td.sources::before {content:"sources : "} tr.show td.related-works::before {content:"related works : "} tr.show td.comments::before {content:"comments : "} -body {margin: 0; min-height:100vh;overflow:hidden} +body {margin: 0; min-height:100vh;overflow-x:hidden} tr{width:100%;padding:0} thead {position:sticky;top:0; z-index:1000000000000; } #TIMELINE thead tr td:not(:first-of-type) { @@ -169,17 +170,25 @@ z-index:1000} display: block; position: relative; border-radius:100%; -position:relative + position:relative } .pin section { -left:-100px; -text-align:center; +left:50%; +transform:translateX(-50%); background:var(--fond-A); - width:200px; + width:fit-content; position:absolute; display:none; top:10px; +border-radius:5px; +} +.pin section p { +padding:0px 5px; +text-indent:0; +white-space:nowrap; } +.pin section p:nth-of-type(even){ +background:var(--fond-C)} .pin:hover section { border:1px solid var(--noir); display:inline @@ -213,7 +222,6 @@ text-align:center; #TIMELINE .numbers div:not(#graduation) { transform:rotate(0deg); -font-size:max(1vw, 6px) !important; font-size:var(--corps) !important; } #graduation{ @@ -231,43 +239,27 @@ height:calc(100vh); border-left:1px solid var(--noir); z-index:0; } -#TIMELINE tbody tr, #TABLEAU tbody tr{border-bottom:1px solid transparent;border-top:1px solid transparent} -#TIMELINE tbody tr:hover, #TABLEAU tr:not(first-of-type):hover, #TABLEAU tbody tr:hover{ +#TIMELINE tbody tr, #TABLEAU tbody tr{ +} +#TIMELINE tbody tr:hover, +#TABLEAU tr:hover +{ border-bottom:1px solid var(--noir) !important; border-top:1px solid var(--noir) !important } +#TABLEAU thead tr:hover{border-top:none !important} section.large * {max-width:960px;margin:0;font-size:var(--corps-L); line-height:calc(var(--corps-L) * 1.2)} section.large {margin:var(--interligne)} section.large a {color:var(--accent)} p:not(:first-of-type){text-indent:var(--indent)}; -a{color:var(--accent) !important} -.nav-main, .nav-sub {display:grid; grid-template-columns: 3fr 1fr 1fr 1fr; background:var(--fond-A)} -.nav-main a:first-of-type {grid-column:1} -.nav-main a:nth-of-type(2), .nav-sub a:nth-of-type(1) {grid-column:2} -.nav-main a:nth-of-type(3), .nav-sub a:nth-of-type(2) {grid-column:3} -.nav-main a:nth-of-type(4), .nav-sub a:nth-of-type(3) {grid-column:4} -nav a {color:var(--accent); width:fit-content;} -nav a:hover{opacity:1;} -.nav-sub #active {color:var(--fond-A);background:var(--noir)} -.nav-main a:not(:first-of-type), .nav-sub a {color:var(--noir)} - -nav:first-of-type{ - padding-top:calc(var(--interligne) / 2); -} -nav:last-of-type { - border-bottom:1px solid var(--accent); - padding-bottom:calc(var(--interligne) / 2); -} table {margin-bottom:var(--interligne);border-collapse:collapse} -footer { width: 100%; +footer { display:none; - bottom: 0; - clear: both; -position:fixed; background:var(--fond-B);width:100%;height:var(--interligne);} + footer p {margin:0} ::-moz-selection { /* Code for Firefox */ @@ -283,7 +275,60 @@ footer p {margin:0} .large, #TABLEAU, #TIMELINE { margin:0 var(--indent) } + #TIMELINE {overflow-x:hidden} .asc::after {content: "▲"} .desc::after {content: "▼"} -.asc::after,.desc::after {display:inline-block;font-size:calc(var(--corps) * .6);transform:translate(5px, calc(var(--corps) * -.15))} +.asc::after,.desc::after {display:inline-block;font-size:calc(var(--corps) * .6);transform:translate(5px, calc(var(--corps) * -.15)) +} + +.small { + display: flex; + flex-wrap:wrap; + gap:10px; + margin: 0 var(--interligne); + padding-bottom:calc(var(--interligne) * 2 ); +} +.small p { + min-width:min(400px, 100%); + max-width:min(500px, 100%); + list-style: none; + text-indent: 0; + margin:0; +} + +.small ul{ + list-style: none; +} + +.underline{ + text-decoration: underline; +} + +a, .small a {color:var(--accent)} + + +.nav-main, .nav-sub { + display:grid; + grid-template-columns: 3fr 1fr 1fr 1fr; + background:var(--fond-A); +} + +.nav-main a:first-of-type {grid-column:1} +.nav-main a:nth-of-type(2), .nav-sub a:nth-of-type(1) {grid-column:2} +.nav-main a:nth-of-type(3), .nav-sub a:nth-of-type(2) {grid-column:3} +.nav-main a:nth-of-type(4), .nav-sub a:nth-of-type(3) {grid-column:4} + +nav a {color:var(--accent); width:fit-content;} +nav a:hover{opacity:1;} +a#active {color:var(--fond-A);background:var(--noir)} +.nav-main a:not(:first-of-type), .nav-sub a {color:var(--noir)} + +nav:first-of-type{ + padding-top:calc(var(--interligne) / 2); +} +nav:last-of-type { + border-bottom:1px solid var(--accent); + padding-bottom:calc(var(--interligne) / 2); +} +.wip {pointer-events:none; text-decoration:line-through; color:gray !important} diff --git a/src/templates/head.html b/src/templates/head.html @@ -7,8 +7,6 @@ <meta name="HandheldFriendly" content="true"> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> - <link rel="stylesheet" href="cssVarFilledCookies.css"> - <script src="cssVarFilledCookies.js" defer></script> <script src="script.js" defer></script> </head> <body> diff --git a/src/templates/nav-main.html b/src/templates/nav-main.html @@ -1,6 +1,6 @@ <nav class="nav-main"> <a href="index.html">The Amateur Feminist Library</a> <a href="table.html">Index</a> -<a href="ressources.html">Ressources</a> +<a class="wip" href="ressources.html">Ressources</a> <a href="about.html">About</a> </nav>