Nombreuses améliorations esthétiques et texte (font, couleurs, etc.)

src/assets/style.css

@@ -1,12 +1,41 @@
+@import url(https://fonts.bunny.net/css?family=fira-code:400|inter:300,500|inter-tight:400);
+
+:root {
+  --bs-font-monospace: "Fira Code";
+}
+
+body {
+  font-family: "Inter";
+  font-weight: 300;
+  background-color: rgb(255 240 240 / 40%);
+}
+
+button {
+  font-weight: 300;
+  background-color: #fff;
+  border-radius: 3px;
+  appearance: auto;
+  border: solid rgb(179, 56, 33) 1px; /* couleur thème foncée */
+}
+
+button[disabled] {
+  border-color: #ccc;
+  color: #666;
+}
+
+button:hover:not([disabled]) {
+  background-color: #fee;
+}
+
 /* Change la marge bout d'export  */
 .table-menu {
   font-size: 16px;
-  margin: 12px;
+  margin: 12px 0 12px 0;
   height: 36px;
 }
 
 .table-menu > * {
-  margin: 8px;
+  margin: 8px 16px 8px 0;
   float: left;
 }
 
@@ -49,6 +78,10 @@ p.version > a {
   margin-right: 2px;
 }
 
+.navbar-nav .nav-link.active {
+  font-weight: 500;
+}
+
 /* Réduire la taille du texte de la colonne Objet */
 
 /*
@@ -68,19 +101,27 @@ td[data-dash-column="objet"],td[data-dash-column="titulaire_nom"],td[data-dash-c
   th.dash-header {
   background-color: #b33821;
   color: white;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Inter", sans-serif;
   text-align: left;
+  font-weight: 500;
 }
 
 .dash-table-container
   .dash-spreadsheet-container
   .dash-spreadsheet-inner
-  th.dash-filter
-  input,
-dash-table-container .dash-spreadsheet-container *:focus {
-  outline-color: #ccc;
-  outline-style: auto;
-  outline-width: thin;
+  .dash-filter
+  input[type="text"] {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 2px;
+  height: 28px;
+  font-family: "Fira Code";
+  caret-color: #000;
+
+  text-align: left !important;
+  padding: 1px 2px 0 2px;
+  vertical-align: center;
 }
 
 .dash-table-container .dash-spreadsheet-container *:focus {
@@ -94,6 +135,14 @@ dash-table-container .dash-spreadsheet-container *:focus {
   margin-bottom: 0;
 }
 
+.dash-table-container
+  .dash-spreadsheet-container
+  .dash-spreadsheet-inner
+  td
+  div.dash-cell-value.cell-markdown {
+  font-family: "Inter Tight";
+}
+
 .dash-filter--case {
   display: none;
 }
@@ -113,7 +162,7 @@ dash-table-container .dash-spreadsheet-container *:focus {
   overflow: hidden;
   height: 150px;
   text-wrap: wrap;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 /* Menu de masquage des colonnes */
@@ -128,7 +177,7 @@ dash-table-container .dash-spreadsheet-container *:focus {
 .show-hide {
   position: relative;
   width: 180px;
-  margin: 0 0 10px 10px;
+  margin: 0 0 10px 0;
 }
 
 .show-hide::before {
@@ -146,7 +195,7 @@ dash-table-container .dash-spreadsheet-container *:focus {
 /* Alternance des couleurs pour les lignes */
 .marches_table table td,
 .marches_table table th {
-  font-family: "Open Sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .marches_table.stuck {
@@ -156,12 +205,11 @@ dash-table-container .dash-spreadsheet-container *:focus {
 
 .marches_table .cell-table tr:nth-child(even) td {
   background-color: #feeeee;
-  font-family: "Open Sans", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
-#header > *,
-.dash-spreadsheet-menu button.export {
-  margin: 0 0 20px 20px;
+#header > * {
+  margin: 0 0 20px 0px;
 }
 
 /* Annonces */
@@ -207,13 +255,11 @@ dash-table-container .dash-spreadsheet-container *:focus {
   grid-row: 1;
 }
 
-/* Menu de navigation */
-
 h3 {
   margin: 36px 0 20px 0;
 }
 
-summary > h3 {
+summary > h4 {
   margin: 0;
   display: inline;
 }

src/figures.py

@@ -295,7 +295,7 @@ class DataTable(dash_table.DataTable):
             page_action=page_action,
             filter_options={
                 "case": "insensitive",
-                "placeholder_text": "Tapez le filtre ici...",
+                "placeholder_text": "",
             },
             sort_action=sort_action,
             sort_mode="multi",

src/pages/tableau.py

@@ -108,13 +108,14 @@ layout = [
         ],
     ),
     dcc.Markdown(
-        f"Ce tableau vous permet d'appliquer un filtre sur une ou plusieurs colonnes, et ainsi produire la liste de marchés dont vous avez besoin ([exemple de filtre](https://decp.info/tableau?filtres=%7Bmontant%7D+i%3C+40000+%26%26+%7BdateNotification%7D+icontains+2025%2A+%26%26+%7Bacheteur_id%7D+24350013900189+%26%26+%7Bobjet%7D+icontains+voirie&colonnes=uid%2Cacheteur_id%2Cacheteur_nom%2Ctitulaire_id%2Ctitulaire_nom%2Cobjet%2Cmontant%2CdureeMois%2CdateNotification%2Cacheteur_departement_code%2CsourceDataset)). Par défaut seules quelques colonnes sont affichées, mais vous pouvez en afficher jusqu'à {str(df.width)} en cliquant sur le bouton **Colonnes affichées**. Pour le reste, tout est dans le mode d'emploi."
+        f"Ce tableau vous permet d'appliquer un filtre sur une ou plusieurs colonnes, et ainsi produire la liste de marchés dont vous avez besoin ([exemple de filtre](https://decp.info/tableau?filtres=%7Bmontant%7D+i%3C+40000+%26%26+%7BdateNotification%7D+icontains+2025%2A+%26%26+%7Bacheteur_id%7D+24350013900189+%26%26+%7Bobjet%7D+icontains+voirie&colonnes=uid%2Cacheteur_id%2Cacheteur_nom%2Ctitulaire_id%2Ctitulaire_nom%2Cobjet%2Cmontant%2CdureeMois%2CdateNotification%2Cacheteur_departement_code%2CsourceDataset)). Par défaut seules quelques colonnes sont affichées, mais vous pouvez en afficher jusqu'à {str(df.width)} en cliquant sur le bouton **Colonnes affichées**. Cet outil est assez puissant, je vous recommande de lire le mode d'emploi pour en tirer pleinement partie.",
+        style={"maxWidth": "1000px"},
     ),
     html.Div(
         html.Details(
             children=[
                 html.Summary(
-                    html.H3("Mode d'emploi", style={"textDecoration": "underline"}),
+                    html.H4("Mode d'emploi", style={"textDecoration": "underline"}),
                 ),
                 dcc.Markdown(
                     dangerously_allow_html=True,
@@ -147,9 +148,10 @@ layout = [
     ##### Trier les données
 
     Pour trier une colonne, utilisez les flèches grises à côté des noms de colonnes. Chaque clic change le tri dans cet ordre :
-        1. tri croissant
-        2. tri décroissant
-        3. pas de tri
+
+    1. tri croissant
+    2. tri décroissant
+    3. pas de tri
 
     ##### Afficher plus de colonnes
 

src/utils.py

@@ -656,7 +656,7 @@ def get_button_properties(height):
     if height > 65000:
         download_disabled = True
         download_text = "Téléchargement désactivé au-delà de 65 000 lignes"
-        download_title = "Excel ne supporte pas d'avoir plus de 65 000 URLs dans une même feuille de calcul. Contactez-moi pour me présenter votre besoin en téléchargement afin que je puisse adapter la solution."
+        download_title = " Ajoutez des filtres pour réduire le nombre de lignes, Excel ne supporte pas d'avoir plus de 65 000 URLs dans une même feuille de calcul."
     elif height == 0:
         download_disabled = True
         download_text = "Pas de données à télécharger"