colin/colibre
1
0
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Releases 33 Activity

refactor: replace CSS grid layout with Dash Bootstrap Components grid

Browse Source 
Replace the custom CSS grid (`.wrapper`, `.org_*`, `.results_*` classes)
in acheteur, titulaire, and recherche pages with dbc.Row/dbc.Col.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Colin Maudry
2026-03-18 23:21:17 +01:00
parent 52958ccbaa
commit 6a6be51455
4 changed files with 163 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/style.css
-45
View File
@@ -94,12 +94,6 @@ button:hover:not([disabled]) {
padding: 28px 24px 0 24px; padding: 28px 24px 0 24px;
} }
.wrapper {
display: grid;
grid-gap: 10px;
margin-bottom: 50px;
justify-content: space-between;
}
#header > * { #header > * {
margin: 0 0 20px 0px; margin: 0 0 20px 0px;
@@ -180,15 +174,6 @@ p.version > a {
margin-right: 12px; margin-right: 12px;
} }
.results_acheteur {
grid-column: 1;
grid-row: 1;
}
.results_titulaire {
grid-column: 2;
grid-row: 1;
}
/* --- Dashboard inputs --- */ /* --- Dashboard inputs --- */
@@ -446,40 +431,10 @@ input[type="checkbox"] {
margin-bottom: 16px; margin-bottom: 16px;
} }
.org_title {
grid-column: 1 / 3;
grid-row: 1;
}
.org_year {
grid-column: 3;
grid-row: 1;
}
.org_infos {
grid-column: 1;
grid-row: 2;
}
.org_infos > p { .org_infos > p {
margin: 8px 0; margin: 8px 0;
} }
.org_stats {
grid-column: 2;
grid-row: 2;
}
.org_map {
grid-column: 3;
grid-row: 2;
}
.org_top {
grid-column: 1/3;
grid-row: 3;
}
/* --- About Page (A Propos) --- */ /* --- About Page (A Propos) --- */
.a-propos-container { .a-propos-container {
display: flex; display: flex;
src/pages/acheteur.py
+77 -51
View File
@@ -82,68 +82,94 @@ layout = [
html.Div( html.Div(
children=[ children=[
html.Div( html.Div(
className="wrapper", style={"marginBottom": "50px"},
children=[ children=[
html.H2( dbc.Row(
className="org_title", className="mb-2",
children=[ children=[
html.Span(id="acheteur_siret"), dbc.Col(
" - ", html.H2(
html.Span(id="acheteur_nom"), children=[
], html.Span(id="acheteur_siret"),
), " - ",
html.Div( html.Span(id="acheteur_nom"),
className="org_year", ],
children=dcc.Dropdown( ),
id="acheteur_year", width=8,
options=["Toutes les années"]
+ [
str(year)
for year in range(
2018, int(datetime.date.today().year) + 1
)
],
placeholder="Année",
),
),
html.Div(
className="org_infos",
children=[
# TODO: ajouter le type d'acheteur : commune, CD, CR, etc.
html.P(["Commune : ", html.Strong(id="acheteur_commune")]),
html.P(
[
"Département : ",
html.Strong(id="acheteur_departement"),
]
), ),
html.P(["Région : ", html.Strong(id="acheteur_region")]), dbc.Col(
html.A( dcc.Dropdown(
id="acheteur_lien_annuaire", id="acheteur_year",
children="Plus de détails sur l'Annuaire des entreprises", options=["Toutes les années"]
+ [
str(year)
for year in range(
2018, int(datetime.date.today().year) + 1
)
],
placeholder="Année",
),
width=4,
), ),
], ],
), ),
html.Div( dbc.Row(
className="org_stats", className="mb-2",
children=[ children=[
html.P(id="acheteur_titre_stats"), dbc.Col(
html.P(id="acheteur_marches_attribues"), html.Div(
html.P(id="acheteur_titulaires_differents"), className="org_infos",
html.Button( children=[
"Téléchargement au format Excel", # TODO: ajouter le type d'acheteur : commune, CD, CR, etc.
id="btn-download-data-acheteur", html.P(["Commune : ", html.Strong(id="acheteur_commune")]),
className="btn btn-primary", html.P(
[
"Département : ",
html.Strong(id="acheteur_departement"),
]
),
html.P(["Région : ", html.Strong(id="acheteur_region")]),
html.A(
id="acheteur_lien_annuaire",
children="Plus de détails sur l'Annuaire des entreprises",
),
],
),
width=4,
),
dbc.Col(
html.Div(
children=[
html.P(id="acheteur_titre_stats"),
html.P(id="acheteur_marches_attribues"),
html.P(id="acheteur_titulaires_differents"),
html.Button(
"Téléchargement au format Excel",
id="btn-download-data-acheteur",
className="btn btn-primary",
),
dcc.Download(id="download-data-acheteur"),
],
),
width=4,
),
dbc.Col(
html.Div(id="acheteur_map"),
width=4,
), ),
dcc.Download(id="download-data-acheteur"),
], ],
), ),
html.Div(className="org_map", id="acheteur_map"), dbc.Row(
html.Div(
className="org_top",
children=[ children=[
html.H3("Top titulaires"), dbc.Col(
html.Div(className="marches_table", id="top10_titulaires"), html.Div(
children=[
html.H3("Top titulaires"),
html.Div(className="marches_table", id="top10_titulaires"),
],
),
width=8,
),
], ],
), ),
html.Div(id="acheteur-distance-histogram"), html.Div(id="acheteur-distance-histogram"),
src/pages/recherche.py
+9 -9
View File
@@ -1,3 +1,4 @@
import dash_bootstrap_components as dbc
from dash import Input, Output, State, callback, dcc, html, register_page from dash import Input, Output, State, callback, dcc, html, register_page
from src.figures import DataTable from src.figures import DataTable
@@ -77,7 +78,7 @@ layout = html.Div(
# className="search_options", # className="search_options",
# children=[dcc.RadioItems(options=["Acheteur(s)"])], # children=[dcc.RadioItems(options=["Acheteur(s)"])],
# ), # ),
html.Div(id="search_results", className="wrapper"), html.Div(id="search_results"),
], ],
) )
@@ -92,7 +93,7 @@ layout = html.Div(
) )
def update_search_results(n_submit, n_clicks, query): def update_search_results(n_submit, n_clicks, query):
if query and len(query) >= 1: if query and len(query) >= 1:
content = [] cols = []
for org_type in ["acheteur", "titulaire"]: for org_type in ["acheteur", "titulaire"]:
if org_type == "acheteur": if org_type == "acheteur":
@@ -109,9 +110,8 @@ def update_search_results(n_submit, n_clicks, query):
# Format output # Format output
columns, tooltip = setup_table_columns(results, hideable=False) columns, tooltip = setup_table_columns(results, hideable=False)
org_content = [ col_content = (
html.Div( html.Div(
className=f"results_{org_type}",
children=[ children=[
html.H3(f"{org_type.title()}s : {count}"), html.H3(f"{org_type.title()}s : {count}"),
DataTable( DataTable(
@@ -125,10 +125,10 @@ def update_search_results(n_submit, n_clicks, query):
], ],
) )
if count > 0 if count > 0
else html.P(f"Aucun {org_type} trouvé."), else html.P(f"Aucun {org_type} trouvé.")
] )
content.extend(org_content) cols.append(dbc.Col(col_content, width=6))
style = {"textAlign": "center", "display": "none"}
return content, style style = {"textAlign": "center", "display": "none"}
return dbc.Row(cols), style
return html.P(""), {"textAlign": "center"} return html.P(""), {"textAlign": "center"}
src/pages/titulaire.py
+77 -51
View File
@@ -82,68 +82,94 @@ layout = [
html.Div( html.Div(
children=[ children=[
html.Div( html.Div(
className="wrapper", style={"marginBottom": "50px"},
children=[ children=[
html.H2( dbc.Row(
className="org_title", className="mb-2",
children=[ children=[
html.Span(id="titulaire_siret"), dbc.Col(
" - ", html.H2(
html.Span(id="titulaire_nom"), children=[
], html.Span(id="titulaire_siret"),
), " - ",
html.Div( html.Span(id="titulaire_nom"),
className="org_year", ],
children=dcc.Dropdown( ),
id="titulaire_year", width=8,
options=["Toutes les années"]
+ [
str(year)
for year in range(
2018, int(datetime.date.today().year) + 1
)
],
placeholder="Année",
),
),
html.Div(
className="org_infos",
children=[
# TODO: ajouter le type d'acheteur : commune, CD, CR, etc.
html.P(["Commune : ", html.Strong(id="titulaire_commune")]),
html.P(
[
"Département : ",
html.Strong(id="titulaire_departement"),
]
), ),
html.P(["Région : ", html.Strong(id="titulaire_region")]), dbc.Col(
html.A( dcc.Dropdown(
id="titulaire_lien_annuaire", id="titulaire_year",
children="Plus de détails sur l'Annuaire des entreprises", options=["Toutes les années"]
+ [
str(year)
for year in range(
2018, int(datetime.date.today().year) + 1
)
],
placeholder="Année",
),
width=4,
), ),
], ],
), ),
html.Div( dbc.Row(
className="org_stats", className="mb-2",
children=[ children=[
html.P(id="titulaire_titre_stats"), dbc.Col(
html.P(id="titulaire_marches_remportes"), html.Div(
html.P(id="titulaire_acheteurs_differents"), className="org_infos",
html.Button( children=[
"Téléchargement au format Excel", # TODO: ajouter le type d'acheteur : commune, CD, CR, etc.
id="btn-download-data-titulaire", html.P(["Commune : ", html.Strong(id="titulaire_commune")]),
className="btn btn-primary", html.P(
[
"Département : ",
html.Strong(id="titulaire_departement"),
]
),
html.P(["Région : ", html.Strong(id="titulaire_region")]),
html.A(
id="titulaire_lien_annuaire",
children="Plus de détails sur l'Annuaire des entreprises",
),
],
),
width=4,
),
dbc.Col(
html.Div(
children=[
html.P(id="titulaire_titre_stats"),
html.P(id="titulaire_marches_remportes"),
html.P(id="titulaire_acheteurs_differents"),
html.Button(
"Téléchargement au format Excel",
id="btn-download-data-titulaire",
className="btn btn-primary",
),
dcc.Download(id="download-data-titulaire"),
],
),
width=4,
),
dbc.Col(
html.Div(id="titulaire_map"),
width=4,
), ),
dcc.Download(id="download-data-titulaire"),
], ],
), ),
html.Div(className="org_map", id="titulaire_map"), dbc.Row(
html.Div(
className="org_top",
children=[ children=[
html.H3("Top acheteurs"), dbc.Col(
html.Div(className="marches_table", id="top10_acheteurs"), html.Div(
children=[
html.H3("Top acheteurs"),
html.Div(className="marches_table", id="top10_acheteurs"),
],
),
width=8,
),
], ],
), ),
html.Div(id="titulaire-distance-histogram"), html.Div(id="titulaire-distance-histogram"),