laradb

git clone git://bebou.netlib.re/laradb
Log | Files | Refs |

commit ed86a34be22792f8f0b837e46d905cb3402a2e5c
parent 42b2d66e7bd4bdc603d378f53e64d8e073f96898
Auteurice: martlem <contact@martinlemaire.fr>
Date:   Mon, 11 Nov 2024 18:06:14 +0100

timeline, chiffre, ligne vertical + début index v2

Diffstat:
M
src/index.sh
 | 
2
+-
M
src/static/script.js
 | 
102
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
M
src/static/style.css
 | 
70
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------

3 files changed, 158 insertions(+), 16 deletions(-)
diff --git a/src/index.sh b/src/index.sh
@@ -7,7 +7,7 @@ DIST="dist/"
 cat << % > $DIST/index.html
 $(cat src/templates/head.html)
 $(cat src/templates/nav.html)
-<p>Le contenu du framacalc dans la syntax de ton choix s'affiche ici</p>
+$(curl https://mypads2.framapad.org/p/landing-d46eqk9qp/export/txt)
 $(cat src/templates/foot.html)
 %
 
diff --git a/src/static/script.js b/src/static/script.js
@@ -1,19 +1,26 @@
+const body = document.querySelector('body')
+
+
 const sortTimeline = () => {
 
 const rows = Array.from(document.querySelectorAll('#TIMELINE tbody tr'));
 
+
+
 rows.sort((a, b) => {
 	const rectA = a.querySelector('.rectangle div');
 	const rectB = b.querySelector('.rectangle div');
-	console.log(rectA, rectB)
+	//console.log(rectA, rectB)
 
 	if (!rectA || !rectB) {
 		return 0
 	}
 
+// sort by shortest to longest lifetime
 //	const widthA = parseFloat(window.getComputedStyle(rectA).width) || 0;
 //	const widthB = parseFloat(window.getComputedStyle(rectB).width) || 0;
 
+// sort by oldest to newest start date
 	const widthA = parseFloat(window.getComputedStyle(rectA).left) || 0;
 	const widthB = parseFloat(window.getComputedStyle(rectB).left) || 0;
 
@@ -27,6 +34,24 @@ rows.sort((a, b) => {
 
 const setFrequency = () => {
 const rows = Array.from(document.querySelectorAll('#TIMELINE tbody tr .rectangle div'));
+const verticalBar = document.createElement('div')
+verticalBar.setAttribute("id","vertical-bar")
+
+document.querySelector('#TIMELINE').addEventListener('mousemove', (event) => {
+    verticalBar.style.left = `${event.clientX}px`;
+});
+const graduation = document.createElement('div')
+graduation.setAttribute("id","graduation")
+const numbers = document.querySelector('#TIMELINE .numbers')
+for(let i = 1970; i < 1990; i++){
+    const number = document.createElement('div')
+	number.classList.add("number")
+    number.innerHTML = i
+    numbers.appendChild(number)
+}
+numbers.appendChild(graduation)
+body.appendChild(verticalBar)
+console.log(numbers)
 rows.forEach((r) => {
     const noi = r.getAttribute("data-number-of-issues")
     r.style.backgroundImage = `repeating-linear-gradient(90deg,
@@ -36,9 +61,59 @@ rows.forEach((r) => {
             var(--accent) ${100 / noi}%)`
 })
 
+function handleResize() {
+	console.log("Window resized or loaded.");
+
+let years = 20
+graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
+            transparent calc(${100 / years}% / 2 * -1),
+            transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+	
+	numbers
+	const width = window.innerWidth;
+	const height = window.innerHeight;
+	console.log(`Width: ${width}, Height: ${height}`);
+	if (width < 1200 && width > 770){
+years = 10
+graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
+            transparent calc(${100 / years}% / 2 * -1),
+            transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+	numbers.classList.add("numbers-1-of-2")
+	}
+	else if (width < 770){
+	numbers.classList.remove("numbers-1-of-2")
+	numbers.classList.add("numbers-1-of-4")
+years = 5
+graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
+            transparent calc(${100 / years}% / 2 * -1),
+            transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+
+	}
+	else if (width > 1200) {
+let years = 20
+graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
+            transparent calc(${100 / years}% / 2 * -1),
+            transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
+            var(--fond-B) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
+	numbers.classList.remove("numbers-1-of-2")
+	numbers.classList.remove("numbers-1-of-4")
+
+}
+
+}
+
+window.addEventListener('load', handleResize);
+
+window.addEventListener('resize', handleResize);
 }
 
-setFrequency()
 
 const onClickTable = () => {
 const rows = document.querySelectorAll('#TABLEAU tbody tr');
@@ -51,8 +126,8 @@ rows.forEach(row => {
 });
 }
 
-sortTimeline()
-onClickTable()
+
+
 
 // https://www.w3schools.com/howto/howto_js_sort_table.asp
 function sortTable(n) {
@@ -110,3 +185,22 @@ function sortTable(n) {
     }
   }
 }
+const path = window.location.pathname;
+
+switch (path) {
+  case '/table.html':
+	onClickTable()
+    break;
+
+  case '/timeline.html':
+	setFrequency()
+	sortTimeline()
+    break;
+
+  case 'map.html':
+    break;
+
+
+  default:
+    break;
+}
diff --git a/src/static/style.css b/src/static/style.css
@@ -12,7 +12,15 @@
    	--largeur:16px;
    	--arrondi:5px;
    	--incertitude:.5;
-    --noi-width:10px
+    --noi-width:10px;
+    --grad-width:1px
+}
+
+*{
+box-sizing:content-box;
+font-size:var(--corps);
+color:var(--noir);
+line-height:var(--interligne)
 }
 
 thead td{text-align:left}
@@ -35,7 +43,6 @@ thead td{text-align:left}
 #TABLEAU td.start-date, #TABLEAU td.end-date{width:11ch}
 #TABLEAU td.number-of-issues {width:5ch}
 
-#TABLEAU tr:hover{background:var(--accent) !important}
 #TABLEAU tr.show {display:flex;flex-direction:column;flex-wrap:wrap;}
 
 #TABLEAU tr.show td:not(:first-of-type){
@@ -65,16 +72,11 @@ tr.show td.sources::before {content:"sources : "}
 tr.show td.related-works::before {content:"related works : "}
 tr.show td.comments::before {content:"comments : "}
 
-*{
-font-size:var(--corps);
-color:var(--noir);
-line-height:var(--interligne)
-}
-body {margin: 0}
+body {margin: 0; overflow-x:hidden;}
 tr{width:100%;padding:0}
 thead {position:sticky;top:0; z-index:1000}
 thead tr {
-background:var(--fond-C) !important;
+background:var(--fond-A) !important;
 }
 
 /*
@@ -92,10 +94,10 @@ background:var(--fond-C) !important;
 .rectangle {
 }
 .rectangle div {
+z-index:1000;
 background-color: var(--accent); height:100%; min-height: var(--interligne); position: relative;
 scale:0.27 1;
 transform-origin:left;
---number-of-issues: attr(data-number-of-issues);
 }
 
 .legende {position:fixed;bottom:var(--interligne);right:var(--interligne); z-index:10; display:none;
@@ -106,7 +108,7 @@ padding:var(--corps);
 sup{line-height:var(--interligne)}
 sup::before{content:' '}
 .unsure, sup  {opacity:var(--incertitude)}
-nav {display:flex; width:100%; justify-content:space-around;background:var(--fond-C);padding:var(--corps) 0;margin-bottom:var(--corps)}
+nav {display:flex; width:100%; justify-content:space-around;background:var(--fond-C);padding:var(--corps) 0;margin-bottom:var(--corps);z-index:1000}
 #map {display:block;height:100vh;
     background: var(--fond-A);
     outline: 0;
@@ -114,7 +116,53 @@ nav {display:flex; width:100%; justify-content:space-around;background:var(--fon
 .leaflet-popup-content-wrapper {border-radius:0}
 .pin:hover span {background-color:var(--accent) !important}
 
+#TIMELINE tr td:first-of-type{
+    z-index:1000;
+background:var(--fond-A);
+
+
+}
 #TIMELINE tr {
     display:grid;
     grid-template-columns:1fr 3fr;
 }
+
+.numbers-1-of-2 .number:nth-of-type(2n),
+.numbers-1-of-4 .number:nth-of-type(4n-1),
+.numbers-1-of-4 .number:nth-of-type(4n-2),
+.numbers-1-of-4 .number:nth-of-type(4n-3) {display:none}
+
+.numbers-1-of-2 {justify-content:space-between !important}
+#TIMELINE .numbers {
+z-index:10000;
+position:relative;
+display:flex;
+justify-content:space-around;
+padding-bottom:calc(var(--interligne) / 2);
+text-align:center;
+}
+#TIMELINE .numbers div:not(#graduation) {
+
+transform:rotate(0deg);
+font-size:max(1vw, 6px) !important;
+font-size:var(--corps) !important;
+}
+#graduation{
+position:absolute;
+width:100%;
+border-top: 1px solid var(--fond-B);
+height:calc(var(--interligne) / 2);
+top:calc(var(--interligne) / 1);
+}
+#vertical-bar{
+pointer-events:none;
+    position:fixed;
+bottom:0;
+height:calc(100vh - var(--interligne) * 4);
+border-left:1px solid var(--fond-B);
+border-right:1px solid var(--fond-B);
+z-index:0;
+}
+#TIMELINE tr:hover, #TABLEAU tr:hover{background-color:var(--fond-C) !important}
+p {max-width:960px;margin:0;}
+p:not(:first-of-type){text-indent:var(--indent)};