Meilleur affichage sur petit écran #63

src/app.py

@@ -78,13 +78,29 @@ app.index_string = """
 
 navbar = dbc.Navbar(
     dbc.Container(
-        [
-            dbc.NavbarBrand(
-                [
-                    html.H1("decp.info", className="d-inline-block align-top me-2"),
-                    html.Span(version, className="fs-6 text-muted align-bottom"),
+        fluid=True,
+        children=[
+            dbc.NavItem(
+                children=[
+                    dcc.Link(html.H1("decp.info"), href="/", className="logo"),
+                    html.P(
+                        [
+                            html.A(
+                                version,
+                                href="https://github.com/ColinMaudry/decp.info/blob/main/CHANGELOG.md",
+                            )
+                        ],
+                        className="version",
+                    ),
                 ],
-                href="/",
+                style={"min-width": "230px"},
+            ),
+            dbc.NavItem(
+                [dcc.Markdown(os.getenv("ANNOUNCEMENTS"), id="announcements")],
+                style={
+                    "max-width": "1200px",
+                    "display": "inline-block",
+                },
             ),
             dbc.NavbarToggler(id="navbar-toggler"),
             dbc.Collapse(
@@ -92,7 +108,7 @@ navbar = dbc.Navbar(
                     [
                         dbc.NavItem(
                             dbc.NavLink(
-                                page["name"],
+                                page["name"].replace(" ", " "),
                                 href=page["relative_path"],
                                 active="exact",
                             )
@@ -106,21 +122,18 @@ navbar = dbc.Navbar(
                 id="navbar-collapse",
                 navbar=True,
             ),
-        ]
+        ],
     ),
     color="light",
     dark=False,
     className="mb-4",
+    expand="md",
 )
 
 app.layout = html.Div(
     [
         dcc.Location(id="url-tracker"),
         navbar,
-        html.Div(
-            id="announcements",
-            children=dbc.Container(dcc.Markdown(os.getenv("ANNOUNCEMENTS"))),
-        ),
         dbc.Container(
             page_container,
             id="page-content-container",

src/assets/style.css

@@ -28,8 +28,10 @@ details > div {
 
 /* Logo et version */
 
-div.logo {
-  width: 230px;
+a.logo {
+  color: black;
+  text-decoration: none;
+  float: left;
 }
 
 p.version {
@@ -40,15 +42,11 @@ p.version {
 
 p.version > a {
   text-decoration: none;
+  margin-top: 10px;
 }
 
-div.logo h1 {
-  float: left;
-}
-
-div.logo > a {
-  text-decoration: none;
-  color: black;
+.navbar-brand {
+  margin-right: 2px;
 }
 
 /* Réduire la taille du texte de la colonne Objet */
@@ -152,9 +150,9 @@ td[data-dash-column="objet"],td[data-dash-column="titulaire_nom"],td[data-dash-c
 
 /* Annonces */
 #announcements {
-  margin-top: 25px;
-  max-width: 30%;
+  margin: 25px 40px 0 60px;
   font-size: 90%;
+  max-width: 900px;
 }
 
 /* Page de recherche */
@@ -195,22 +193,6 @@ td[data-dash-column="objet"],td[data-dash-column="titulaire_nom"],td[data-dash-c
 
 /* Menu de navigation */
 
-/*
-.navbar {
-  width: 100%;
-  height: 100px;
-  padding: 0 10px;
-  border: 0;
-  border-bottom: solid 1px black;
-}
-
-a.nav {
-  float: left;
-  margin-right: 40px;
-  font-size: 120%;
-}
-*/
-
 h3 {
   margin: 36px 0 20px 0;
 }