Making my index page a bit modern

Dash Python
1

Hello guys,

I was thinking of updating my index site a bit,but I don’t have any clear ideas about it.
Do you guys have any ideas what do I update my code with so it looks a bit modern and better?
this is how my index page looks right now:

image
image1256×359 22.6 KB

This is my code:

mport dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app

content = html.Div(
    [
        html.Div(className="container", children=[
        html.H1("BDE Manufacturing Report CZ", className="my-4 text-center display-4"),
        dbc.Row(style={"margin-bottom":"25px"},
                children=[
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Downtime_and_Reasons", children=[
                                                        html.Div("Downtime and Reasons", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ]),
                ]),
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Production_history", children=[
                                                        html.Div("Production history", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Quantity_and_Scrap", children=[
                                                        html.Div("Quantity and Scrap", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/User_Log", children=[
                                                        html.Div("User Log", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
            ]),
        dbc.Row(children=[
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Error_Log", children=[
                                                        html.Div("Error Log", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Parameter_Log", children=[
                                                        html.Div("Parameter Log", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Downtime_Log", children=[
                                                        html.Div("Downtime Log", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
                html.Div(className="col-lg-3", children=[
                        html.Div(className="card h-100 shadow", children=[
                                html.Div(className="card-body", children=[
                                        html.H5(className="card-title", children=[
                                                html.A(href="/apps/Overall_equipment_effectiveness", children=[
                                                        html.Div("OEE", style={"text-align":"center"}),
                                                ],)
                                        ]),
                                ]),
                        ])
                ]),
        ]),
        ]),
    ],
    id="content"
)

layout = html.Div([content])
2

You could introduce some explanations and icons for each category, similar to what you see here on the landing page:

The code for this website can be found here: GitHub - snehilvj/dmc-docs: Documentation for Dash Mantine Components library.

2 Likes
3

Hi![quote=“yanboe, post:2, topic:67698, full:true”]
You could introduce some explanations and icons for each category, similar to what you see here on the landing page:

The code for this website can be found here: GitHub - snehilvj/dmc-docs: Documentation for Dash Mantine Components library.
[/quote]

Just one question. Would you recomend mantine components or dash-boostrap components?
Thank you very much!

4

I really like the simplicity and look of the Mantine components. It requires a lot less CSS related work and has a great variety of components. Here’s an app I developed using Dash Mantine Components (source code: GitHub - yanboe/flightexplorer):

And also the documentation I linked above is purely using Dash Mantine Components.

But to be fair: The Dash Bootstrap Components are awesome as well - I first started developing above app using DBC, but then switched to DMC because DBC was missing crucial components. In my case, the DatePicker was the main problem - there’s a Bootstrap V4 styling for the dcc.DatePickerSingle/dcc.DatePickerRange components (see here: GitHub - tcbegley/dash-bootstrap-css: Bootstrap CSS for use with Plotly Dash), but Bootstrap is already on V5, so I ended up with inconsistent styling.

On the other hand, DMC doesn’t really offer an easy way to have a collapsing menu/sidebar for mobile devices, whereas this can be achieved easily with DBC.

So to sum this up: It really depends on your needs. Both libaries have their advantages and disadvantages, but for me DMC solved more problems than DBC.

2 Likes