Utilisation des dbc pour /marche #63

src/app.py

@@ -14,6 +14,9 @@ app = Dash(
     title="decp.info",
     use_pages=True,
     compress=True,
+    meta_tags=[
+        {"name": "viewport", "content": "width=device-width, initial-scale=1"},
+    ],
 )
 # COSMO (belle font, blue),
 # UNITED (rouge, ubuntu font),

src/assets/style.css

@@ -263,31 +263,3 @@ summary > h3 {
   grid-column: 1/3;
   grid-row: 3;
 }
-
-/* Vue marché */
-
-.marche_infos p {
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
-.marche_title {
-  grid-column: 1/3;
-  grid-row: 1;
-}
-
-.marche_map {
-  grid-column: 3;
-  grid-row: 2;
-  width: 400px;
-}
-
-.marche_infos_1 {
-  grid-column: 1;
-  grid-row: 2;
-}
-
-.marche_infos_2 {
-  grid-column: 2;
-  grid-row: 2;
-}

src/pages/marche.py

@@ -1,5 +1,6 @@
 from datetime import datetime
 
+import dash_bootstrap_components as dbc
 import polars as pl
 from dash import Input, Output, callback, dcc, html, register_page
 from polars import selectors as cs
@@ -20,10 +21,15 @@ layout = [
     dcc.Store(id="marche_data"),
     dcc.Store(id="titulaires_data"),
     dcc.Location(id="url", refresh="callback-nav"),
-    html.Div(
+    dbc.Container(
-        className="container marche_infos",
+        className="marche_infos",
         children=[
-            html.P("Vous consultez un résumé des données de ce marché public"),
+            dbc.Row(
+                dbc.Col(
+                    [
+                        html.P(
+                            "Vous consultez un résumé des données de ce marché public"
+                        ),
                         html.Ul(
                             [
                                 html.Li(
@@ -37,20 +43,22 @@ layout = [
                         html.P(
                             "Le montant total payé aux titulaires, la durée du marché et la liste des titulaires peuvent cependant encore évoluer jusqu'à la fin de l'exécution du marché."
                         ),
-            html.Div(
+                    ]
-                className="wrapper",
+                )
-                children=[
+            ),
-                    html.Div(
+            dbc.Row(
-                        className="marche_map",
+                [
-                        id="marche_map",
+                    dbc.Col(id="marche_infos_1", width=12, md=4),
+                    dbc.Col(id="marche_infos_2", width=12, md=4),
+                    dbc.Col(
+                        width=12,
+                        md=4,
                         children=[
                             html.H4("Titulaires"),
                             html.Ul(id="marche_infos_titulaires"),
                         ],
                     ),
-                    html.Div(className="marche_infos_1", id="marche_infos_1"),
+                ]
-                    html.Div(className="marche_infos_2", id="marche_infos_2"),
-                ],
             ),
         ],
     ),