From 2619b874649702f596c3eba7dd1726d155fabb2b Mon Sep 17 00:00:00 2001 From: ayobi Date: Tue, 29 Oct 2024 19:18:00 -0300 Subject: [PATCH 01/22] converted side menu to new top menu --- .../templates/new_results_page.jinja2 | 105 +++++++++++++++--- 1 file changed, 88 insertions(+), 17 deletions(-) diff --git a/microsetta_interface/templates/new_results_page.jinja2 b/microsetta_interface/templates/new_results_page.jinja2 index 3654aacd..1bbb6d51 100644 --- a/microsetta_interface/templates/new_results_page.jinja2 +++ b/microsetta_interface/templates/new_results_page.jinja2 @@ -15,7 +15,9 @@ @@ -1262,6 +1312,20 @@ }) } + document.addEventListener('DOMContentLoaded', function () { + const tabs = document.querySelectorAll('.nav-tabs .nav-link'); + const highlightBar = document.querySelector('.highlight-bar'); + + tabs.forEach((tab, index) => { + tab.addEventListener('shown.bs.tab', function () { + const tabWidth = tab.offsetWidth; + const tabLeft = tab.offsetLeft; + highlightBar.style.width = `${tabWidth}px`; + highlightBar.style.transform = `translateX(${tabLeft}px)`; + }); + }); + }); + function setupAccordions() { let acc = document.getElementsByClassName("accordion-microbiome-map"); let i; @@ -1357,24 +1421,31 @@ {% endblock %} {% block content %} -
+
-
-
- -
+
+ +
-
-
-
+
+

{{ _('How do you compare?') }}

@@ -1406,7 +1477,7 @@

{{ _('Your Inner Zoo') }}

- {{ _('What particular kinds of microbes are in your sample? Wander through') }} {{ _('Your Inner Zoo') }}. + {{ _('What particular kinds of microbes are in your sample? Wander through') }} {{ _('Composition') }}.


From f11a6ef7bea4772bd437bcf03afc7042f320ed92 Mon Sep 17 00:00:00 2001 From: ayobi Date: Wed, 30 Oct 2024 14:56:47 -0300 Subject: [PATCH 02/22] added media for smaller screens, fixed font/colors --- .../templates/new_results_page.jinja2 | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/microsetta_interface/templates/new_results_page.jinja2 b/microsetta_interface/templates/new_results_page.jinja2 index 1bbb6d51..286a9c04 100644 --- a/microsetta_interface/templates/new_results_page.jinja2 +++ b/microsetta_interface/templates/new_results_page.jinja2 @@ -16,7 +16,7 @@ .nav-white-bg { background-color: #fff; width: 100%; - padding-left: 100px; + padding-left: 115px; padding-right: 100px; } .diversity-icon { @@ -233,15 +233,17 @@ .nav-tabs .nav-link { border: none; - padding: 12px 20px; - color: #555555; + padding: 12px 40px; + color: #747678; position: relative; text-align: center; width: 100%; + font-size: 1.5em; + font-weight: normal; } .nav-tabs .nav-link.active { - color: #000; + color: #222222; font-weight: bold; } @@ -260,6 +262,25 @@ padding: 2px; } + @media (max-width: 768px) { + .nav-tabs { + display: flex; + overflow-x: auto; + width: 100%; + padding: 0; + } + .nav-tabs .nav-item { + flex: 1; + } + .nav-tabs .nav-link { + font-size: 1em; + padding: 8px 16px; + } + .highlight-bar { + display: none; + } + } + From d8f16ebf0fed94585d1eb97389c76b5b5cb74ecc Mon Sep 17 00:00:00 2001 From: ayobi Date: Wed, 30 Oct 2024 15:15:17 -0300 Subject: [PATCH 03/22] increase thickness of bar --- microsetta_interface/templates/new_results_page.jinja2 | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/microsetta_interface/templates/new_results_page.jinja2 b/microsetta_interface/templates/new_results_page.jinja2 index 286a9c04..28a2de45 100644 --- a/microsetta_interface/templates/new_results_page.jinja2 +++ b/microsetta_interface/templates/new_results_page.jinja2 @@ -226,7 +226,7 @@ left: 50%; transform: translateX(-50%); width: 100%; - height: 6px; + height: 8px; background-color: #E5E5E5; border-radius: 10px; } @@ -249,9 +249,9 @@ .highlight-bar { position: relative; - top: -1px; + top: -3.5px; left: 2; - height: 5px; + height: 8px; width: 100px; background-color: #00C6D7; border-radius: 10px; From 85e08f3ed61da0f2f0205a72f38425d4258040d9 Mon Sep 17 00:00:00 2001 From: ayobi Date: Wed, 30 Oct 2024 16:16:25 -0300 Subject: [PATCH 04/22] change font weight from bold to normal --- microsetta_interface/templates/new_results_page.jinja2 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsetta_interface/templates/new_results_page.jinja2 b/microsetta_interface/templates/new_results_page.jinja2 index 28a2de45..644b055c 100644 --- a/microsetta_interface/templates/new_results_page.jinja2 +++ b/microsetta_interface/templates/new_results_page.jinja2 @@ -244,7 +244,7 @@ .nav-tabs .nav-link.active { color: #222222; - font-weight: bold; + font-weight: normal; } .highlight-bar { From 59250935e4a1cf67ea8d6feb1dd22067e5be2df1 Mon Sep 17 00:00:00 2001 From: ayobi Date: Mon, 4 Nov 2024 19:51:03 -0300 Subject: [PATCH 05/22] toward specs of figma design --- .../static/css/minimal_interface.css | 131 +++++++++++++++ .../templates/new_results_page.jinja2 | 152 ++++++------------ 2 files changed, 180 insertions(+), 103 deletions(-) diff --git a/microsetta_interface/static/css/minimal_interface.css b/microsetta_interface/static/css/minimal_interface.css index 5eb6c59f..df26af9b 100644 --- a/microsetta_interface/static/css/minimal_interface.css +++ b/microsetta_interface/static/css/minimal_interface.css @@ -1435,3 +1435,134 @@ input.barcode-checkbox[type=checkbox]:checked+label { .orange-text { color: var(--tmi-orange); } + +@media (min-width: 576px) { + .report-nav-container { + position: relative; + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } + + #profile-kebab-dropdown { + margin-top: 58px; + border: 1px solid var(--tmi-gray-70); + border-radius: 5px; + width: 40px; + height: 40px; + } +} + +@media (max-width: 1280px) { + .report-nav-container { + position: relative; + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } + + #profile-kebab-dropdown { + margin-top: 24px; + border: 1px solid var(--tmi-gray-70); + border-radius: 5px; + width: 40px; + height: 40px; + } +} + +.report-nav { + position: relative; +} + +.report-nav::before { + content: ''; + position: relative; + top: 56px; + bottom: 0; + left: 0; + right: 0; + width: 1280px; + flex-shrink: 0; + background: var(--tmi-gray-60); + height: 8px; + border-radius: 4px 4px 4px 4px; + z-index: 1; +} + +.report-nav > .nav-item { + width: 190px; + text-align: center; + font-size: 20px; + line-height: 40px; + background-color: white; +} + +@media (max-width: 575.98px) { + .report-nav > .nav-item { + text-align: left; + padding-left: 12px; + } +} + +.report-nav > .nav-item > a { + color: var(--tmi-gray-70); +} + +.report-nav > .nav-item > .active { + background-color: white; + color: var(--tmi-gray-80); + position: relative; +} + +.report-nav > .nav-item > .active:after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: var(--tmi-light-blue); + height: 8px; + border-radius: 4px 4px 4px 4px; + z-index: 2; + flex-direction: column; +} + +@media (max-width: 1080px) { + .report-nav-container .navbar-collapse .nav { + display: flex; + flex-direction: column; + width: 100%; + } + + .report-nav > .nav-item { + display: block; + width: 100%; + text-align: left; + } + + .report-nav::before { + display: none; + } + + .report-nav > .nav-item > .active:after { + max-width: 50%; + } + + .navbar-toggler.nav-toggle::after { + display: none; + } +} + +.report-text { + text-align: left; + max-width: 1280px; + margin-left: auto; + margin-right: auto; +} + +.breadcrumb-container { + width: 1280px; + margin-left: auto; + margin-right: auto; + display: flex; +} diff --git a/microsetta_interface/templates/new_results_page.jinja2 b/microsetta_interface/templates/new_results_page.jinja2 index 644b055c..5792b60d 100644 --- a/microsetta_interface/templates/new_results_page.jinja2 +++ b/microsetta_interface/templates/new_results_page.jinja2 @@ -1,6 +1,7 @@ {% extends "sitebase.jinja2" %} {% set page_title = _("Sample Report") %} -{% set show_breadcrumbs = show_breadcrumbs %} +{% set show_breadcrumbs = True %} + {% block head %} @@ -12,6 +13,7 @@ + @@ -1436,38 +1372,49 @@ {% endblock %} {% block breadcrumb %} -
  • {{ _('Dashboard') }}
    • -
  • {{source_name}}
    • -
  • {{ _('Report') }}
    • +
    +
  • {{ _('Dashboard') }}
    • +
  • {{source_name}}
    • +
  • {{ _('Report') }}
    • +
    {% endblock %} {% block content %} -
    -
    -
    - -
    -
    + +
    -
    +

    {{ _('How do you compare?') }}



    @@ -1512,7 +1459,7 @@
    -
    +

    {{ _('Diversity') }}


    @@ -1604,7 +1551,7 @@

    -
    +

    {{ _('Similarity') }}


    @@ -1714,7 +1661,7 @@

    -
    +

    {{ _('Your Inner Zoo (aka What\'s in your sample?)') }}


    @@ -1748,7 +1695,7 @@