refactor: replace CSS grid layout with Dash Bootstrap Components grid

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
-45
View File
@@ -94,12 +94,6 @@ button:hover:not([disabled]) {
padding: 28px 24px 0 24px;
}
.wrapper {
display: grid;
grid-gap: 10px;
margin-bottom: 50px;
justify-content: space-between;
}
#header > * {
margin: 0 0 20px 0px;
@@ -180,15 +174,6 @@ p.version > a {
margin-right: 12px;
}
.results_acheteur {
grid-column: 1;
grid-row: 1;
}
.results_titulaire {
grid-column: 2;
grid-row: 1;
}
/* --- Dashboard inputs --- */
@@ -446,40 +431,10 @@ input[type="checkbox"] {
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 {
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) --- */
.a-propos-container {
display: flex;
+34 -8
View File
@@ -82,19 +82,23 @@ layout = [
html.Div(
children=[
html.Div(
className="wrapper",
style={"marginBottom": "50px"},
children=[
dbc.Row(
className="mb-2",
children=[
dbc.Col(
html.H2(
className="org_title",
children=[
html.Span(id="acheteur_siret"),
" - ",
html.Span(id="acheteur_nom"),
],
),
html.Div(
className="org_year",
children=dcc.Dropdown(
width=8,
),
dbc.Col(
dcc.Dropdown(
id="acheteur_year",
options=["Toutes les années"]
+ [
@@ -105,7 +109,14 @@ layout = [
],
placeholder="Année",
),
width=4,
),
],
),
dbc.Row(
className="mb-2",
children=[
dbc.Col(
html.Div(
className="org_infos",
children=[
@@ -124,8 +135,10 @@ layout = [
),
],
),
width=4,
),
dbc.Col(
html.Div(
className="org_stats",
children=[
html.P(id="acheteur_titre_stats"),
html.P(id="acheteur_marches_attribues"),
@@ -138,14 +151,27 @@ layout = [
dcc.Download(id="download-data-acheteur"),
],
),
html.Div(className="org_map", id="acheteur_map"),
width=4,
),
dbc.Col(
html.Div(id="acheteur_map"),
width=4,
),
],
),
dbc.Row(
children=[
dbc.Col(
html.Div(
className="org_top",
children=[
html.H3("Top titulaires"),
html.Div(className="marches_table", id="top10_titulaires"),
],
),
width=8,
),
],
),
html.Div(id="acheteur-distance-histogram"),
],
),
+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 src.figures import DataTable
@@ -77,7 +78,7 @@ layout = html.Div(
# className="search_options",
# 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):
if query and len(query) >= 1:
content = []
cols = []
for org_type in ["acheteur", "titulaire"]:
if org_type == "acheteur":
@@ -109,9 +110,8 @@ def update_search_results(n_submit, n_clicks, query):
# Format output
columns, tooltip = setup_table_columns(results, hideable=False)
org_content = [
col_content = (
html.Div(
className=f"results_{org_type}",
children=[
html.H3(f"{org_type.title()}s : {count}"),
DataTable(
@@ -125,10 +125,10 @@ def update_search_results(n_submit, n_clicks, query):
],
)
if count > 0
else html.P(f"Aucun {org_type} trouvé."),
]
content.extend(org_content)
style = {"textAlign": "center", "display": "none"}
else html.P(f"Aucun {org_type} trouvé.")
)
cols.append(dbc.Col(col_content, width=6))
return content, style
style = {"textAlign": "center", "display": "none"}
return dbc.Row(cols), style
return html.P(""), {"textAlign": "center"}
+34 -8
View File
@@ -82,19 +82,23 @@ layout = [
html.Div(
children=[
html.Div(
className="wrapper",
style={"marginBottom": "50px"},
children=[
dbc.Row(
className="mb-2",
children=[
dbc.Col(
html.H2(
className="org_title",
children=[
html.Span(id="titulaire_siret"),
" - ",
html.Span(id="titulaire_nom"),
],
),
html.Div(
className="org_year",
children=dcc.Dropdown(
width=8,
),
dbc.Col(
dcc.Dropdown(
id="titulaire_year",
options=["Toutes les années"]
+ [
@@ -105,7 +109,14 @@ layout = [
],
placeholder="Année",
),
width=4,
),
],
),
dbc.Row(
className="mb-2",
children=[
dbc.Col(
html.Div(
className="org_infos",
children=[
@@ -124,8 +135,10 @@ layout = [
),
],
),
width=4,
),
dbc.Col(
html.Div(
className="org_stats",
children=[
html.P(id="titulaire_titre_stats"),
html.P(id="titulaire_marches_remportes"),
@@ -138,14 +151,27 @@ layout = [
dcc.Download(id="download-data-titulaire"),
],
),
html.Div(className="org_map", id="titulaire_map"),
width=4,
),
dbc.Col(
html.Div(id="titulaire_map"),
width=4,
),
],
),
dbc.Row(
children=[
dbc.Col(
html.Div(
className="org_top",
children=[
html.H3("Top acheteurs"),
html.Div(className="marches_table", id="top10_acheteurs"),
],
),
width=8,
),
],
),
html.Div(id="titulaire-distance-histogram"),
],
),