laradb

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

commit 6c7f2bbd5b1887657c30fd92f3445e1e0c62ad9c
parent c0ec34306b1aadfc8c6ae92400571409103d5022
Auteurice: martlem <contact@martinlemaire.fr>
Date:   Tue, 12 Nov 2024 22:05:55 +0100

table scroll horizontal

Diffstat:
M
src/static/style.css
 | 
34
++++++++++++++++++++++++----------

1 file changed, 24 insertions(+), 10 deletions(-)
diff --git a/src/static/style.css b/src/static/style.css
@@ -46,23 +46,34 @@ thead td{text-align:left}
 #TABLEAU tr {
 	cursor:pointer;
 	display:flex;
-	border-bottom:0 solid var(--noir);
 	justify-content:flex-start;
+}
+
+#TABLEAU tr, #TABLEAU td {
 	background:var(--fond-B)
 }
-#TABLEAU tr:nth-of-type(2n+1):not(thead tr){
+#TABLEAU tr:nth-of-type(2n+1) td, #TABLEAU tr:nth-of-type(2n+1):not(thead tr){
     background:var(--fond-A);
 }
 #TABLEAU td { border-left:0px solid black;padding-left:0px}
-#TABLEAU tr {display:flex;flex-wrap:wrap;height:var(--interligne);overflow:hidden; column-gap:0px}
+#TABLEAU tr {display:flex;flex-wrap:nowrap;height:var(--interligne); column-gap:0px;}
 #TABLEAU tr.show {height:auto}
 #TABLEAU tr td{width:calc(var(--largeur) * 10)}
 #TABLEAU tr td.numeros{width:calc(var(--largeur) * 4)}
-#TABLEAU tr td:first-of-type{width:min(calc(var(--largeur) * 30), 100vw);}
+#TABLEAU tr td:first-of-type{width:min(calc(var(--largeur) * 30), 100vw); position:sticky;margin-left:calc(var(--indent) * -1);left:0;top:0; z-index:1000; border-right:1px solid var(--noir)}
+#TABLEAU tr {margin-left:min(0, calc(var(--largeur) * 30), 100vw); position:relative}
 #TABLEAU td.start-date, #TABLEAU td.end-date{width:11ch; content:attr('data-date')}
 #TABLEAU td.number-of-issues {width:5ch}
+#TIMELINE, #TABLEAU {
+display:grid;
+max-width:100vw;
+overflow:scroll;
+position:relative;
+height:calc(100vh - var(--interligne) * 3);
+}
 
-#TABLEAU tr.show {display:flex;flex-direction:column;flex-wrap:wrap;}
+#TABLEAU td.start-date {margin-left:4ch;}
+#TABLEAU tr.show {display:flex;flex-direction:column;flex-wrap:wrap;position:sticky;left:0; width:100vw}
 
 #TABLEAU tr.show td:not(:first-of-type){
     margin-left:var(--indent);
@@ -93,14 +104,13 @@ 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; overflow-x:hidden;min-height:100vh}
+body {margin: 0; min-height:100vh;overflow:hidden}
 tr{width:100%;padding:0}
-thead {position:sticky;top:0; z-index:1000000000000}
+thead {position:sticky;top:0; z-index:1000000000000; }
 #TIMELINE thead tr td:not(:first-of-type) {
 background:var(--fond-A) !important;
 }
 #TABLEAU thead tr td{
-background:var(--fond-A) !important;
 }
 
 /*
@@ -135,7 +145,7 @@ padding:var(--corps);
 sup{line-height:var(--interligne)}
 sup::before{content:' '}
 .unsure, sup  {opacity:var(--incertitude)}
-nav {width:100%;background:var(--fond-A);padding:0 var(--indent);
+nav {max-width:100%;background:var(--fond-A);margin:0 var(--indent);
 position:relative;
 z-index:1000}
 #map {display:block;height:100vh;
@@ -216,7 +226,10 @@ 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 tbody tr:hover{border-bottom:1px solid var(--noir);border-top:1px solid var(--noir)}
+#TIMELINE tbody tr:hover, #TABLEAU tr:not(:first-of-type):hover, #TABLEAU tbody tr:hover{
+	border-bottom:1px solid var(--noir) !important;
+	border-top:1px solid var(--noir) !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)}
@@ -264,3 +277,4 @@ footer p {margin:0}
 .large, #TABLEAU, #TIMELINE {
 	margin:0 var(--indent)
 }
+#TIMELINE {overflow-x:hidden}