add footer

seroanalytics · Sep 17, 2024 · 6806337 · 6806337
1 parent f102021
commit 6806337
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 50 deletions.
diff --git a/public/github.svg b/public/github.svg
diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="theme-color" content="#000000"/>
     <meta
-      name="description"
-      content="Explore and visualise serological data"
+            name="description"
+            content="Explore and visualise serological data"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png"/>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -25,19 +25,26 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>SeroViz</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+</head>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+    <symbol id="github" viewBox="0 0 24 24">
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+    </symbol>
+</svg>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<div class="container-fluid">
+    <footer class="row py-3 border-top bg-light d-flex flex-wrap justify-content-between align-items-center">
+        <div class="col-md-4 d-flex align-items-center small">Logo created with BioRender.com</div>
+        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
+            <li class="ms-3"><a class="text-body-secondary" href="https://github.com/seroanalytics/seroviz">
+                <svg class="bi" width="24" height="24">
+                    <use xlink:href="#github"></use>
+                </svg></a>
+            </li>
+        </ul>
+    </footer>
+</div>
+</body>
 </html>
diff --git a/src/components/ChooseOrUploadDataset.tsx b/src/components/ChooseOrUploadDataset.tsx
@@ -127,10 +127,10 @@ export function ChooseOrUploadDataset() {
                                     different value,
                                     e.g. time since last exposure, you can
                                     specify
-                                    that here.
+                                    that here. Numeric and date type values are
+                                    supported.
                                 </Form.Text>
-                                <Form.Label column sm={3}>Time column
-                                    header</Form.Label>
+                                <Form.Label column sm={3}>Time column</Form.Label>
                                 <Col sm={6}>
                                     <Form.Control type={"text"}
                                                   onChange={onSelectTimeColumnHeader}

diff --git a/src/index.css b/src/index.css
@@ -1,37 +1,47 @@
 :root, [data-bs-theme=light] {
-  --primary-color: #6a478f;
-  --primary-color-darken: #4f356b;
-  --secondary-color: #a35000;
-  --bs-secondary-bg: #b3b1da;
-  --bs-tertiary-bg: #b3b1da;
-  --bs-tertiary-bg-rgb: 79, 53, 107;
-  --bs-light-rgb: 248, 249, 250;
-  --white: #ffffff;
+    --primary-color: #6a478f;
+    --primary-color-darken: #4f356b;
+    --secondary-color: #a35000;
+    --bs-secondary-bg: #b3b1da;
+    --bs-tertiary-bg: #b3b1da;
+    --bs-tertiary-bg-rgb: 79, 53, 107;
+    --bs-light-rgb: 248, 249, 250;
+    --white: #ffffff;
+}
+
+#root {
+    flex: 1;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 [data-bs-theme=dark] {
-  --bs-light-rgb: 33,37,41;
+    --bs-light-rgb: 33, 37, 41;
 }
 
 [data-bs-theme="dark"] .plot-container {
-  filter: invert(75%) hue-rotate(180deg);
+    filter: invert(75%) hue-rotate(180deg);
 }
 
 .btn-primary, .btn-success {
-  background-color: var(--primary-color);
+    background-color: var(--primary-color);
 }
 
 .btn-success {
-  --bs-btn-font-weight: 600;
-  --bs-btn-color: var(--bs-white);
-  --bs-btn-bg: var(--primary-color);
-  --bs-btn-border-color: var(--primary-color);
-  --bs-btn-border-radius: .5rem;
-  --bs-btn-hover-color: var(--bs-white);
-  --bs-btn-hover-bg: var(--primary-color-darken);
-  --bs-btn-hover-border-color: var(--primary-color-darken);
-  --bs-btn-focus-shadow-rgb: var(--primary-color);
-  --bs-btn-active-color: var(--bs-btn-hover-color);
-  --bs-btn-active-bg: var(--primary-color-darken);
-  --bs-btn-active-border-color: var(--primary-color-darken);
+    --bs-btn-font-weight: 600;
+    --bs-btn-color: var(--bs-white);
+    --bs-btn-bg: var(--primary-color);
+    --bs-btn-border-color: var(--primary-color);
+    --bs-btn-border-radius: .5rem;
+    --bs-btn-hover-color: var(--bs-white);
+    --bs-btn-hover-bg: var(--primary-color-darken);
+    --bs-btn-hover-border-color: var(--primary-color-darken);
+    --bs-btn-focus-shadow-rgb: var(--primary-color);
+    --bs-btn-active-color: var(--bs-btn-hover-color);
+    --bs-btn-active-bg: var(--primary-color-darken);
+    --bs-btn-active-border-color: var(--primary-color-darken);
 }