From ed6811266d9d4268da3024860da212f4c3fb1274 Mon Sep 17 00:00:00 2001 From: Colin Maudry Date: Thu, 29 Jan 2026 00:23:28 +0100 Subject: [PATCH] =?UTF-8?q?Nombreuses=20am=C3=A9liorations=20esth=C3=A9tiq?= =?UTF-8?q?ues=20et=20texte=20(font,=20couleurs,=20etc.)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style.css | 84 ++++++++++++++++++++++++++++++++++---------- src/figures.py | 2 +- src/pages/tableau.py | 12 ++++--- src/utils.py | 2 +- 4 files changed, 74 insertions(+), 26 deletions(-) diff --git a/src/assets/style.css b/src/assets/style.css index b6ea915..72410bf 100644 --- a/src/assets/style.css +++ b/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; } diff --git a/src/figures.py b/src/figures.py index 24c3374..7ff0274 100644 --- a/src/figures.py +++ b/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", diff --git a/src/pages/tableau.py b/src/pages/tableau.py index 75ece57..76ab35c 100644 --- a/src/pages/tableau.py +++ b/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 diff --git a/src/utils.py b/src/utils.py index 15e22a1..97e379d 100644 --- a/src/utils.py +++ b/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"