Better Acknowledgements

app.py

@@ -102,27 +102,67 @@ app.layout = html.Div(
         ),
         html.Footer(
             [
-                html.P(
+                html.Div(
                     [
-                        "Built with ",
-                        html.A(
-                            "mp-components",
-                            href="https://github.com/materialsproject/mp-react-components",
-                        ),
-                        " and ",
-                        html.A(
-                            "Crystal Toolkit", href="https://docs.crystaltoolkit.org/"
-                        ),
+                        html.P(
+                            [
+                                "This web app is powered by ",
+                                html.A(
+                                    "Crystal Toolkit",
+                                    href="https://github.com/materialsproject/crystaltoolkit",
+                                ),
+                                ", ",
+                                html.A(
+                                    "MP Dash Components",
+                                    href="https://github.com/materialsproject/dash-mp-components",
+                                ),
+                                " and ",
+                                html.A("Pymatgen", href="https://pymatgen.org/"),
+                                ". All tools made by the ",
+                                html.A(
+                                    "Materials Project",
+                                    href="https://next-gen.materialsproject.org/",
+                                ),
+                                ". We are grateful for their open source software packages. The apps are purely meant for exploring the data in LeMat-Bulk. We are not endorsed by or affiliated with the Materials Project.",
+                                html.Br(),
+                                html.B("CC-BY-4.0"),
+                                " requires proper acknowledgement. Thus, if you use materials data which include (”mp-”) in the immutable_id, please cite the ",
+                                html.A(
+                                    "Materials Project",
+                                    href="https://pubs.aip.org/aip/apm/article/1/1/011002/119685/Commentary-The-Materials-Project-A-materials",
+                                ),
+                                ". If you use materials data which include (”agm-”) in the immutable_id, please cite ",
+                                html.A(
+                                    "Alexandria, PBE",
+                                    href="https://www.science.org/doi/10.1126/sciadv.abi7948",
+                                ),
+                                " or ",
+                                html.A(
+                                    "Alexandria PBESol, SCAN",
+                                    href="https://hdl.handle.net/10.1038/s41597-022-01177-w",
+                                ),
+                                ". If you use materials data which include (”oqmd-”) in the immutable_id, please cite ",
+                                html.A(
+                                    "OQMD",
+                                    href="https://link.springer.com/article/10.1007/s11837-013-0755-4",
+                                ),
+                                ". If you use the Phase Diagram or Crystal Viewer please acknowledge ",
+                                html.A(
+                                    "Crystal Toolkit",
+                                    href="https://github.com/materialsproject/crystaltoolkit",
+                                ),
+                                ".",
+                            ],
+                            style={"textAlign": "center"},
+                        )
                     ],
-                    style={"textAlign": "center"},
-                )
+                    className="footer-content",
+                ),
             ],
+            className="footer",
         ),
     ],
-    style={
-        "margin-left": "10px",
-        "margin-right": "10px",
-    },
+    className="main-div",
 )
 
 

assets/styles.css

@@ -29,14 +29,13 @@ h1 {
 }
 
 .container-visu {
-  width: 45%;
+  width: 70%;
   align-items: center;
 }
 
 .container-table {
-  width: 50%;
   align-items: center;
-  overflow: auto;
+  overflow-x: auto;
 }
 
 /* remove background in periodical table */
@@ -77,7 +76,44 @@ body {
   font-size: 16px;
 }
 
+.footer {
+  background-color: transparent;
+  font-family: "Arial", sans-serif;
+  padding: 20px;
+  border-top: 1px solid #e0e0e0;
+  text-align: center;
+}
+
+.footer-content p {
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.footer-content a {
+  color: #0073e6;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.footer-content a:hover {
+  text-decoration: underline;
+}
+
+.footer-content strong {
+  color: #555;
+}
+
+.main-div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 @media (max-width: 800px) {
+  .main-div {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
   .container {
     width: 100%;
     margin: 5px;
@@ -96,29 +132,10 @@ body {
   .container-visu {
     width: 100%;
   }
-
-  .container-table {
-    width: 100%;
-  }
 }
 
 @media (max-width: 1000px) and (min-width: 800px) {
   .container-visu {
-    width: 60%;
-  }
-
-  .container-table {
-    width: 39%;
+    width: 100%;
   }
 }
-
-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-top: 40px;
-  background-color: #ffffff;
-  border-top: "1px solid #ddd";
-  width: 100%;
-}