From e29e0d477da6c5de03b736fabbce6cffc0ca78ac Mon Sep 17 00:00:00 2001 From: natharisa Date: Fri, 26 Jun 2026 09:14:17 -0300 Subject: [PATCH 1/5] Menu hamburguesa --- .../frontend/src/components/MainNavbar.tsx | 249 ++++++++---------- .../static/frontend/src/css/index.css | 19 ++ 2 files changed, 134 insertions(+), 134 deletions(-) diff --git a/src/frontend/static/frontend/src/components/MainNavbar.tsx b/src/frontend/static/frontend/src/components/MainNavbar.tsx index aa48b047..1636b194 100644 --- a/src/frontend/static/frontend/src/components/MainNavbar.tsx +++ b/src/frontend/static/frontend/src/components/MainNavbar.tsx @@ -169,160 +169,141 @@ const MainNavbar = (props: MainNavbarProps) => { const intl = useIntl() // Gets current user context const currentUser = useContext(CurrentUserContext) + const [menuOpen, setMenuOpen] = useState(false) const cBioPortalOption = ( ) - return ( - - {/* Logo */} - - {intl.formatMessage({ - - - {/* Loading spinners while user is fetch */} - {props.isLoadingUser && ( - - - - - - - - - - - - - - - )} - {/* Analysis menu */} + const renderNavbarItems = () => ( + <> {currentUser && !currentUser.is_anonymous && ( <> - - - - {/* GEM panel */} - - - {/* Survival Analysis panel */} - {/* TODO: discuss with team! Maybe this is the "Stats validation panel in Biomarkers page" */} - {/* */} - - {/* Biomarkers panel */} - - - {/* Differential Expression panel */} - - - - - - {/* Datasets menu */} - - - - {/* User's Datasets panel */} - - - {/* cBioPortal Datasets panel */} - {cBioPortalOption} - - - - - {/* Institutions */} - - - {intl.formatMessage({ id: 'mainNavbar.institutions' })} - - - - )} + + + - {/* Only admin options */} - {currentUser && (currentUser.is_superuser || currentUser.is_institution_admin) && ( - - + + + + + + + - {currentUser.is_superuser && ( - <> - {/* User's Datasets panel */} - - - )} + + + {cBioPortalOption} - + + + {intl.formatMessage({ id: 'mainNavbar.institutions' })} + + )} - {/* About us */} - - - {intl.formatMessage({ id: 'mainNavbar.aboutUs' })} - - - - - - {intl.formatMessage({ id: 'mainNavbar.faq' })} - - + {currentUser && (currentUser.is_superuser || currentUser.is_institution_admin) && ( + + + {currentUser.is_superuser && ( + + )} + + + )} + + + {intl.formatMessage({ id: 'mainNavbar.aboutUs' })} + - - - {intl.formatMessage({ id: 'mainNavbar.openSource' })} + + {intl.formatMessage({ id: 'mainNavbar.faq' })} + + + + {intl.formatMessage({ id: 'mainNavbar.openSource' })} + + + + + ) + + return ( + <> + + + {intl.formatMessage({ - - {/* LogIn/LogOut panel */} - - - - + + setMenuOpen(!menuOpen)} aria-label='Open menu'> + + + + + {props.isLoadingUser && ( + + + + + + + + + + + + + + + )} + + + {renderNavbarItems()} + + + + {menuOpen && ( + + {renderNavbarItems()} + + )} + ) } diff --git a/src/frontend/static/frontend/src/css/index.css b/src/frontend/static/frontend/src/css/index.css index fa4dd829..08a615db 100644 --- a/src/frontend/static/frontend/src/css/index.css +++ b/src/frontend/static/frontend/src/css/index.css @@ -36,3 +36,22 @@ #source-button { min-width: 30%; } +.mobile-navbar-toggle, +.mobile-navbar-menu { + display: none !important; +} + +@media only screen and (max-width: 767px) { + .desktop-navbar-items { + display: none !important; + } + + .mobile-navbar-toggle { + display: flex !important; + } + + .mobile-navbar-menu { + display: block !important; + margin-top: 0 !important; + } +} From 7a8e0f8d17262f2e21456b956061df926936ffb6 Mon Sep 17 00:00:00 2001 From: natharisa Date: Fri, 26 Jun 2026 11:22:02 -0300 Subject: [PATCH 2/5] Menu Hamburguesa listo --- .../static/frontend/src/css/index.css | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/src/frontend/static/frontend/src/css/index.css b/src/frontend/static/frontend/src/css/index.css index 08a615db..d7bdbfbd 100644 --- a/src/frontend/static/frontend/src/css/index.css +++ b/src/frontend/static/frontend/src/css/index.css @@ -41,6 +41,10 @@ display: none !important; } +.desktop-navbar-items { + display: flex !important; +} + @media only screen and (max-width: 767px) { .desktop-navbar-items { display: none !important; @@ -48,10 +52,92 @@ .mobile-navbar-toggle { display: flex !important; + margin-left: auto !important; + } + + .mobile-navbar-menu { + display: block !important; + margin-top: 0 !important; + } + + .mobile-navbar-toggle .item { + padding: 1rem 1.25rem !important; + } + + .mobile-navbar-toggle .icon { + font-size: 2rem !important; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 700px) { + .desktop-navbar-items { + display: none !important; + } + + .mobile-navbar-toggle { + display: flex !important; + margin-left: auto !important; } .mobile-navbar-menu { display: block !important; margin-top: 0 !important; } + + .mobile-navbar-toggle .item { + padding: 1rem 1.25rem !important; + } + + .mobile-navbar-toggle .icon { + font-size: 2rem !important; + } } + +@media only screen and (min-width: 900px) and (max-width: 1150px) and (max-height: 700px) { + .desktop-navbar-items { + flex: 1 !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + } + + .mobile-navbar-toggle, + .mobile-navbar-menu { + display: none !important; + } + + .desktop-navbar-items .item, + .desktop-navbar-items .dropdown { + font-size: 0.82rem !important; + padding-left: 0.45rem !important; + padding-right: 0.45rem !important; + } + + .ui.menu .header.item { + padding-right: 0.8rem !important; + } +} + +@media only screen and (min-width: 1151px) and (max-width: 1366px) { + .desktop-navbar-items { + flex: 1 !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + } + + .desktop-navbar-items .item, + .desktop-navbar-items .dropdown { + font-size: 0.90rem !important; + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; + } + + .ui.menu .header.item { + padding-right: 1.2rem !important; + } + + #homepage-heading { + text-align: center; + } +} \ No newline at end of file From 7c5c10a366da8e3bfe59a1f984bec65d9adb49f1 Mon Sep 17 00:00:00 2001 From: natharisa Date: Thu, 23 Jul 2026 15:21:50 -0300 Subject: [PATCH 3/5] Hamburger menu --- .../static/frontend/src/components/Base.tsx | 1 + .../frontend/src/components/MainNavbar.tsx | 2 +- .../static/frontend/src/css/index.css | 101 +----------------- .../static/frontend/src/css/responsive.css | 81 ++++++++++++++ src/frontend/templates/frontend/about-us.html | 6 +- src/frontend/templates/frontend/faq.html | 6 +- .../templates/frontend/open-source.html | 6 +- 7 files changed, 99 insertions(+), 104 deletions(-) create mode 100644 src/frontend/static/frontend/src/css/responsive.css diff --git a/src/frontend/static/frontend/src/components/Base.tsx b/src/frontend/static/frontend/src/components/Base.tsx index 282066ca..2ffa1855 100644 --- a/src/frontend/static/frontend/src/components/Base.tsx +++ b/src/frontend/static/frontend/src/components/Base.tsx @@ -13,6 +13,7 @@ import en from '../locales/en' // Common dependencies for all the pages import 'fomantic-ui-css/semantic.css' import '../css/base.css' +import '../css/responsive.css' const messages = { en, es } diff --git a/src/frontend/static/frontend/src/components/MainNavbar.tsx b/src/frontend/static/frontend/src/components/MainNavbar.tsx index 1636b194..678e304d 100644 --- a/src/frontend/static/frontend/src/components/MainNavbar.tsx +++ b/src/frontend/static/frontend/src/components/MainNavbar.tsx @@ -277,7 +277,7 @@ const MainNavbar = (props: MainNavbarProps) => { {props.isLoadingUser && ( - + diff --git a/src/frontend/static/frontend/src/css/index.css b/src/frontend/static/frontend/src/css/index.css index d7bdbfbd..7b1385f3 100644 --- a/src/frontend/static/frontend/src/css/index.css +++ b/src/frontend/static/frontend/src/css/index.css @@ -36,108 +36,9 @@ #source-button { min-width: 30%; } -.mobile-navbar-toggle, -.mobile-navbar-menu { - display: none !important; -} - -.desktop-navbar-items { - display: flex !important; -} - -@media only screen and (max-width: 767px) { - .desktop-navbar-items { - display: none !important; - } - - .mobile-navbar-toggle { - display: flex !important; - margin-left: auto !important; - } - - .mobile-navbar-menu { - display: block !important; - margin-top: 0 !important; - } - - .mobile-navbar-toggle .item { - padding: 1rem 1.25rem !important; - } - - .mobile-navbar-toggle .icon { - font-size: 2rem !important; - } -} - -@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 700px) { - .desktop-navbar-items { - display: none !important; - } - - .mobile-navbar-toggle { - display: flex !important; - margin-left: auto !important; - } - - .mobile-navbar-menu { - display: block !important; - margin-top: 0 !important; - } - - .mobile-navbar-toggle .item { - padding: 1rem 1.25rem !important; - } - - .mobile-navbar-toggle .icon { - font-size: 2rem !important; - } -} - -@media only screen and (min-width: 900px) and (max-width: 1150px) and (max-height: 700px) { - .desktop-navbar-items { - flex: 1 !important; - display: flex !important; - justify-content: center !important; - align-items: center !important; - } - - .mobile-navbar-toggle, - .mobile-navbar-menu { - display: none !important; - } - - .desktop-navbar-items .item, - .desktop-navbar-items .dropdown { - font-size: 0.82rem !important; - padding-left: 0.45rem !important; - padding-right: 0.45rem !important; - } - - .ui.menu .header.item { - padding-right: 0.8rem !important; - } -} @media only screen and (min-width: 1151px) and (max-width: 1366px) { - .desktop-navbar-items { - flex: 1 !important; - display: flex !important; - justify-content: center !important; - align-items: center !important; - } - - .desktop-navbar-items .item, - .desktop-navbar-items .dropdown { - font-size: 0.90rem !important; - padding-left: 0.75rem !important; - padding-right: 0.75rem !important; - } - - .ui.menu .header.item { - padding-right: 1.2rem !important; - } - #homepage-heading { text-align: center; } -} \ No newline at end of file +} diff --git a/src/frontend/static/frontend/src/css/responsive.css b/src/frontend/static/frontend/src/css/responsive.css new file mode 100644 index 00000000..0bdcde47 --- /dev/null +++ b/src/frontend/static/frontend/src/css/responsive.css @@ -0,0 +1,81 @@ +.ui.menu:not(.vertical) .right.menu.mobile-navbar-toggle, +.ui.vertical.menu.mobile-navbar-menu { + display: none !important; +} + +.ui.menu:not(.vertical) .menu.desktop-navbar-items { + display: flex !important; +} + +@media only screen and (max-width: 1024px) { + .ui.menu:not(.vertical) .menu.desktop-navbar-items { + display: none !important; + } + + .ui.menu:not(.vertical) .right.menu.mobile-navbar-toggle { + display: flex !important; + margin-left: auto !important; + } + + .ui.vertical.menu.mobile-navbar-menu { + display: block !important; + margin-top: 0 !important; + } + + .navbar-loading-placeholders { + display: none !important; + } + + .mobile-navbar-toggle .item { + padding: 1rem 1.25rem !important; + } + + .mobile-navbar-toggle .icon { + font-size: 2rem !important; + } +} + +@media only screen and (min-width: 1025px) and (max-width: 1150px) { + .ui.menu:not(.vertical) .menu.desktop-navbar-items { + flex: 1 !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + } + + .ui.menu:not(.vertical) .right.menu.mobile-navbar-toggle, + .ui.vertical.menu.mobile-navbar-menu { + display: none !important; + } + + .desktop-navbar-items .item, + .desktop-navbar-items .dropdown { + font-size: 0.82rem !important; + padding-left: 0.45rem !important; + padding-right: 0.45rem !important; + } + + .ui.menu .header.item { + padding-right: 0.8rem !important; + } +} + +@media only screen and (min-width: 1151px) and (max-width: 1366px) { + .ui.menu:not(.vertical) .menu.desktop-navbar-items { + flex: 1 !important; + display: flex !important; + justify-content: center !important; + align-items: center !important; + } + + .desktop-navbar-items .item, + .desktop-navbar-items .dropdown { + font-size: 0.90rem !important; + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; + } + + .ui.menu .header.item { + padding-right: 1.2rem !important; + } +} diff --git a/src/frontend/templates/frontend/about-us.html b/src/frontend/templates/frontend/about-us.html index 8e264027..04b06f28 100644 --- a/src/frontend/templates/frontend/about-us.html +++ b/src/frontend/templates/frontend/about-us.html @@ -6,10 +6,14 @@ {% block meta_description %}Omicsdatascience brings together experts in genomics, epigenomics, and data science to develop open-source tools, foster collaboration, and drive innovation in cancer research..{% endblock %} +{% block css %} + {% render_bundle 'aboutUs' 'css' %} +{% endblock %} + {% block content %}
{% endblock %} {% block js %} {% render_bundle 'aboutUs' 'js' %} -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/src/frontend/templates/frontend/faq.html b/src/frontend/templates/frontend/faq.html index 29c94675..7d7d377e 100644 --- a/src/frontend/templates/frontend/faq.html +++ b/src/frontend/templates/frontend/faq.html @@ -7,10 +7,14 @@ Frequently Asked Questions about Multiomix and our platform. {% endblock %} +{% block css %} + {% render_bundle 'faq' 'css' %} +{% endblock %} + {% block content %}
{% endblock %} {% block js %} {% render_bundle 'faq' 'js' %} -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/src/frontend/templates/frontend/open-source.html b/src/frontend/templates/frontend/open-source.html index bff6e881..d13fcb56 100644 --- a/src/frontend/templates/frontend/open-source.html +++ b/src/frontend/templates/frontend/open-source.html @@ -5,10 +5,14 @@ {% block title %} | Open source{% endblock %} {% block meta_description %}Discover and contribute to Omicsdatascience’s open-source initiatives on GitHub—powerful tools and libraries for multi-omics and cancer research, freely available for the community.{% endblock %} +{% block css %} + {% render_bundle 'openSource' 'css' %} +{% endblock %} + {% block content %}
{% endblock %} {% block js %} {% render_bundle 'openSource' 'js' %} -{% endblock %} \ No newline at end of file +{% endblock %} From e4c1e1cce865c1f593042716731efff3300047e3 Mon Sep 17 00:00:00 2001 From: natharisa Date: Wed, 29 Jul 2026 13:13:39 -0300 Subject: [PATCH 4/5] Menu update --- src/frontend/static/frontend/src/css/responsive.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/frontend/static/frontend/src/css/responsive.css b/src/frontend/static/frontend/src/css/responsive.css index 0bdcde47..a04fe8f0 100644 --- a/src/frontend/static/frontend/src/css/responsive.css +++ b/src/frontend/static/frontend/src/css/responsive.css @@ -22,6 +22,17 @@ margin-top: 0 !important; } + + .ui.vertical.menu.mobile-navbar-menu .dropdown.item > .menu { + position: static; + width: 100%; + min-width: 100%; + max-width: 100%; + margin-top: 0.75rem; + box-shadow: none; + border-radius: 0.28571429rem; + } + .navbar-loading-placeholders { display: none !important; } From a2e5e2e1875816ac6e3e05ddf2d71adb363453a9 Mon Sep 17 00:00:00 2001 From: natharisa Date: Fri, 11 Sep 2026 01:37:22 -0300 Subject: [PATCH 5/5] Statics ready --- .../src/components/common/PaginatedTable.tsx | 104 ++++++----- .../src/components/pipeline/MiRNAPipeline.tsx | 9 +- .../AllExperimentsView.tsx | 9 +- .../src/components/site-policy/SitePolicy.tsx | 138 +++++++------- src/frontend/static/frontend/src/css/gem.css | 174 +++++++++++++++++- .../static/frontend/src/css/index.css | 4 + .../static/frontend/src/css/site-policy.css | 6 +- .../static/frontend/src/locales/en.ts | 7 + .../static/frontend/src/locales/es.ts | 7 + 9 files changed, 344 insertions(+), 114 deletions(-) diff --git a/src/frontend/static/frontend/src/components/common/PaginatedTable.tsx b/src/frontend/static/frontend/src/components/common/PaginatedTable.tsx index c91ee9aa..314be36c 100644 --- a/src/frontend/static/frontend/src/components/common/PaginatedTable.tsx +++ b/src/frontend/static/frontend/src/components/common/PaginatedTable.tsx @@ -1,6 +1,6 @@ import ky from 'ky' import React, { ReactElement } from 'react' -import { Checkbox, DropdownItemProps, Form, Grid, Header, Icon, Pagination, SemanticWIDTHS, SemanticWIDTHSNUMBER, Table } from 'semantic-ui-react' +import { Accordion, Checkbox, DropdownItemProps, Form, Grid, Header, Icon, Pagination, SemanticWIDTHS, SemanticWIDTHSNUMBER, Table } from 'semantic-ui-react' import { RowHeader } from '../../utils/django_interfaces' import { GeneralTableControl, Nullable, ResponseRequestWithPagination, WebsocketConfig } from '../../utils/interfaces' import { getDefaultGeneralTableControl, getDefaultPageSizeOption, alertGeneralError, generatesOrderingQuery } from '../../utils/util_functions' @@ -112,6 +112,7 @@ interface PaginatedTableProps { infoPopupContent?: string, /** `width` prop of Form.Item of the _Entries_ select. */ entriesSelectWidth?: SemanticWIDTHS, + mobileFiltersLabel?: string, /** Callback to render custom components applied to data retrieved from backend API */ mapFunction: (elem: T) => ReactElement intl: IntlShape @@ -131,7 +132,8 @@ interface PaginatedTableState { } }, elements: T[], - gettingData: boolean + gettingData: boolean, + mobileFiltersOpen: boolean } /** @@ -176,7 +178,8 @@ class PaginatedTable extends React.Component, Paginate elements: [], tableControl: generalTableControl, retrievedOptions: {}, - gettingData: false + gettingData: false, + mobileFiltersOpen: false } } @@ -481,6 +484,43 @@ class PaginatedTable extends React.Component, Paginate ) : tableBody + const filtersForm = ( +
+ + {this.props.customElements} + + {this.props.showSearchInput && ( + { + this.handleTableControlChanges(name, value) + }} + /> + )} + {customFilters} + { + this.handleTableControlChanges(name, value) + }} + /> + +
+ ) + return ( @@ -501,48 +541,30 @@ class PaginatedTable extends React.Component, Paginate )} -
- - {this.props.customElements} - - {/* Search input */} - {this.props.showSearchInput && ( - { - this.handleTableControlChanges(name, value) - }} - /> - )} - {customFilters} - {/* Page size */} - { - this.handleTableControlChanges(name, value) - }} - /> - -
+ {this.props.mobileFiltersLabel + ? ( + + } + onClick={() => this.setState((prevState) => ({ mobileFiltersOpen: !prevState.mobileFiltersOpen }))} + > + {this.props.mobileFiltersLabel} + + + + {filtersForm} + + + ) + : filtersForm} - + {/* Table */} - +
{/* Header */} diff --git a/src/frontend/static/frontend/src/components/pipeline/MiRNAPipeline.tsx b/src/frontend/static/frontend/src/components/pipeline/MiRNAPipeline.tsx index 6cac2445..f344cb6f 100644 --- a/src/frontend/static/frontend/src/components/pipeline/MiRNAPipeline.tsx +++ b/src/frontend/static/frontend/src/components/pipeline/MiRNAPipeline.tsx @@ -913,7 +913,14 @@ class MiRNAPipeline extends React.Component - + {this.state.activeTab === 'all-experiments' && ( + + +
GEM
+ + + )} + - - headerTitle='GEM' - updateWSKey='update_experiments' +
+ + headerTitle='GEM' + mobileFiltersLabel={intl.formatMessage({ id: 'allExperimentsView.filters.title' })} + updateWSKey='update_experiments' defaultSortProp={{ sortField: 'submit_date', sortOrderAscendant: false }} headers={[ { name: intl.formatMessage({ id: 'common.name' }), serverCodeToSort: 'name' }, diff --git a/src/frontend/static/frontend/src/components/site-policy/SitePolicy.tsx b/src/frontend/static/frontend/src/components/site-policy/SitePolicy.tsx index e126b6ab..141976cf 100644 --- a/src/frontend/static/frontend/src/components/site-policy/SitePolicy.tsx +++ b/src/frontend/static/frontend/src/components/site-policy/SitePolicy.tsx @@ -4,80 +4,86 @@ import { Base } from '../Base' import { ExternalLink } from '../common/ExternalLink' import { useIntl } from 'react-intl' +const SitePolicyContent = () => { + const intl = useIntl() + return ( + + + {/* Image */} + + + + + + + {/* Text */} + + +
+ {intl.formatMessage({ id: 'sitePolicy.header' })} +
+ +

+ {intl.formatMessage({ id: 'sitePolicy.authentication' })} + +
+ + {intl.formatMessage({ id: 'sitePolicy.dataTransfer' })} + +
+ + {intl.formatMessage( + { id: 'sitePolicy.firewall' }, + { multiomixLink: 'www.multiomix.org' } + )} + +
+ + {intl.formatMessage({ id: 'sitePolicy.containerized' })} + +
+ + {intl.formatMessage({ id: 'sitePolicy.securityMeasures' })} + +
+ + {intl.formatMessage( + { id: 'sitePolicy.piiRestriction' }, + { multiomixLink: 'www.multiomix.org' } + )} + +
+ + {intl.formatMessage( + { id: 'sitePolicy.localInstance' }, + { multiomixLink: 'www.multiomix.org' } + )}{' '} + {intl.formatMessage({ id: 'sitePolicy.localInstanceInstructions' })}{' '} + + https://github.com/omics-datascience/multiomix/blob/main/DEPLOYING.md + +

+ + + + + ) +} + /** * Site policy (terms and privacy policy) page * @returns Component */ export const SitePolicy = () => { - const intl = useIntl() return (
- - - {/* Image */} - - - - - - - {/* Text */} - - -
- {intl.formatMessage({ id: 'sitePolicy.header' })} -
- -

- {intl.formatMessage({ id: 'sitePolicy.authentication' })} - -
- - {intl.formatMessage({ id: 'sitePolicy.dataTransfer' })} - -
- - {intl.formatMessage( - { id: 'sitePolicy.firewall' }, - { multiomixLink: 'www.multiomix.org' } - )} - -
- - {intl.formatMessage({ id: 'sitePolicy.containerized' })} - -
- - {intl.formatMessage({ id: 'sitePolicy.securityMeasures' })} - -
- - {intl.formatMessage( - { id: 'sitePolicy.piiRestriction' }, - { multiomixLink: 'www.multiomix.org' } - )} - -
- - {intl.formatMessage( - { id: 'sitePolicy.localInstance' }, - { multiomixLink: 'www.multiomix.org' } - )}{' '} - {intl.formatMessage({ id: 'sitePolicy.localInstanceInstructions' })}{' '} - - https://github.com/omics-datascience/multiomix/blob/main/DEPLOYING.md - -

- - - - +
) diff --git a/src/frontend/static/frontend/src/css/gem.css b/src/frontend/static/frontend/src/css/gem.css index 449355f9..411e0125 100644 --- a/src/frontend/static/frontend/src/css/gem.css +++ b/src/frontend/static/frontend/src/css/gem.css @@ -67,6 +67,178 @@ border-color: #2185d0 !important; } +.gem-all-experiments-view .mobile-filters-toggle { + display: none !important; +} + +.gem-all-experiments-view .mobile-filters-content { + display: block !important; +} + +.gem-mobile-title-row { + display: none !important; +} + +@media only screen and (max-width: 767px) { + .gem-all-experiments-view .mobile-filters-accordion { + position: relative; + left: 1rem; + } + + .gem-mobile-title-row { + display: flex !important; + padding-bottom: 0 !important; + } + + .gem-mobile-title-row .ui.header { + margin: 0; + width: 100%; + } + + .gem-all-experiments-view .mobile-filters-toggle { + align-items: center; + background: #2185d0; + color: #fff; + display: flex !important; + justify-content: center; + padding: 0.78571429em 1em !important; + position: relative; + } + + .gem-all-experiments-view .mobile-filters-toggle > span { + text-align: center; + width: 100%; + } + + .gem-all-experiments-view .mobile-filters-toggle > .icon { + margin: 0 !important; + position: absolute; + right: 1em; + } + + .gem-all-experiments-view .mobile-filters-content { + display: none !important; + } + + .gem-all-experiments-view .mobile-filters-content.active { + display: block !important; + } + + .gem-all-experiments-view > .ui.padded.stackable.grid > .row:first-child { + margin-left: 1rem; + margin-right: 1rem; + width: calc(100% - 2rem) !important; + } + + .experiments-tabs-header { + flex-wrap: nowrap !important; + margin-left: 1rem; + margin-right: 1rem; + width: calc(100% - 2rem) !important; + } + + .experiments-tabs-header > .column { + padding-left: 0 !important; + padding-right: 0 !important; + } + + .experiments-tabs-header > .column:first-child { + flex: 1 1 auto !important; + min-width: 0 !important; + width: auto !important; + } + + .experiments-tabs-header > .column:last-child { + flex: 0 0 44px !important; + width: 44px !important; + } + + .experiments-tabs-header .menu-with-bolder-border { + max-width: 100%; + min-width: 0; + } + + .gem-all-experiments-view { + max-width: 100%; + min-width: 0; + } + + .gem-all-experiments-view h4.ui.header.margin-bottom-1 { + display: none; + } + + .gem-all-experiments-view .custom-form { + display: block; + } + + .gem-all-experiments-view .custom-form > .field { + margin: 0 0 1em !important; + width: 100% !important; + } + + .gem-all-experiments-view .custom-form > .field:last-child { + margin-bottom: 0 !important; + } + + .gem-all-experiments-view .paginated-table-scroll { + left: 1rem; + max-width: 100%; + min-width: 0; + width: 100%; + -webkit-overflow-scrolling: touch; + } + + .gem-all-experiments-view .paginated-table-scroll .ui.sortable.table > thead > tr > th { + white-space: normal; + } +} + +@media only screen and (min-width: 768px) and (max-width: 1024px) { + .experiments-tabs-header { + flex-wrap: nowrap !important; + margin-left: 1rem; + margin-right: 1rem; + width: calc(100% - 2rem) !important; + } + + .experiments-tabs-header > .column { + padding-left: 0 !important; + padding-right: 0 !important; + } + + .experiments-tabs-header > .column:first-child { + flex: 1 1 auto !important; + min-width: 0 !important; + width: auto !important; + } + + .experiments-tabs-header > .column:last-child { + flex: 0 0 44px !important; + width: 44px !important; + } + + .experiments-tabs-header .menu-with-bolder-border { + max-width: 100%; + min-width: 0; + } + + .gem-all-experiments-view { + max-width: 100%; + min-width: 0; + } + + .gem-all-experiments-view .entries-select-table { + min-width: 75px; + } + + .gem-all-experiments-view .paginated-table-scroll { + max-width: 100%; + min-width: 0; + width: 100% !important; + -webkit-overflow-scrolling: touch; + } +} + #label-new-experiment-selected-tag { width: 70% } @@ -205,4 +377,4 @@ #huge-size-msg-link { opacity: 1; text-decoration: underline; -} \ No newline at end of file +} diff --git a/src/frontend/static/frontend/src/css/index.css b/src/frontend/static/frontend/src/css/index.css index 7b1385f3..623e0826 100644 --- a/src/frontend/static/frontend/src/css/index.css +++ b/src/frontend/static/frontend/src/css/index.css @@ -37,6 +37,10 @@ min-width: 30%; } +#main-app .ui.text.container { + max-width: min(100%, 700px); +} + @media only screen and (min-width: 1151px) and (max-width: 1366px) { #homepage-heading { text-align: center; diff --git a/src/frontend/static/frontend/src/css/site-policy.css b/src/frontend/static/frontend/src/css/site-policy.css index fb60111c..0ecbc1bf 100644 --- a/src/frontend/static/frontend/src/css/site-policy.css +++ b/src/frontend/static/frontend/src/css/site-policy.css @@ -5,4 +5,8 @@ #site-policy-content { text-align: justify; font-size: large; -} \ No newline at end of file +} + +#site-policy-content a { + overflow-wrap: anywhere; +} diff --git a/src/frontend/static/frontend/src/locales/en.ts b/src/frontend/static/frontend/src/locales/en.ts index dc134bc4..fdbe260a 100644 --- a/src/frontend/static/frontend/src/locales/en.ts +++ b/src/frontend/static/frontend/src/locales/en.ts @@ -812,6 +812,12 @@ export default { 'loginSignUpForm.validEmailMessage': 'Please provide a valid email address', 'loginSignUpForm.passwordMismatchMessage': 'This value is different to Password field', // 91.OpenSource + 'openSource.header.main': 'Explore the open-source projects from', + 'openSource.header.sub': 'These repositories represent some of our most prominent open-source initiatives, developed to empower the research community with accessible and cutting-edge bioinformatics tools.', + 'openSource.publications.sub': 'In addition to our open-source software, we regularly publish peer-reviewed scientific articles that document the methodologies, innovations, and findings behind our tools. We invite you to explore our publications to better understand the research impact of our work.', + 'openSource.publications.multiomix.description': 'A cloud-based platform to infer cancer genomic and epigenomic events associated with gene expression modulation', + 'openSource.publications.modulector.description': 'A platform as a service for access to microRNA databases', + 'openSource.intro.title': 'At Omicsdatascience, we believe in open science. Explore our open-source projects, freely available to the community to foster collaboration, transparency, and innovation in biomedical research. Available in our GitHub organization.', 'openSource.intro.description': 'These repositories represent some of our most prominent open-source initiatives, developed to empower the research community with accessible and cutting-edge bioinformatics tools.', @@ -830,6 +836,7 @@ export default { 'allExperimentsView.filters.selectTag': 'Select an existing Tag', 'allExperimentsView.filters.experimentType': 'Experiment type', 'allExperimentsView.filters.correlationMethod': 'Correlation method', + 'allExperimentsView.filters.title': 'Filters', 'allExperimentsView.table.name': 'Name', 'allExperimentsView.table.description': 'Description', diff --git a/src/frontend/static/frontend/src/locales/es.ts b/src/frontend/static/frontend/src/locales/es.ts index 8ca219d2..4c628a91 100644 --- a/src/frontend/static/frontend/src/locales/es.ts +++ b/src/frontend/static/frontend/src/locales/es.ts @@ -861,6 +861,12 @@ export default { 'loginSignUpForm.validEmailMessage': 'Por favor ingrese una dirección de correo válida', 'loginSignUpForm.passwordMismatchMessage': 'Este valor es diferente al campo Contraseña', // 91.OpenSource + 'openSource.header.main': 'Explora los proyectos de código abierto de', + 'openSource.header.sub': 'Estos repositorios representan algunas de nuestras iniciativas de código abierto más destacadas, desarrolladas para brindar a la comunidad científica herramientas bioinformáticas accesibles y de vanguardia.', + 'openSource.publications.sub': 'Además de nuestro software de código abierto, publicamos regularmente artículos científicos revisados por pares que documentan las metodologías, innovaciones y hallazgos detrás de nuestras herramientas. Te invitamos a explorar nuestras publicaciones para comprender mejor el impacto científico de nuestro trabajo.', + 'openSource.publications.multiomix.description': 'Una plataforma basada en la nube para inferir eventos genómicos y epigenómicos del cáncer asociados con la modulación de la expresión génica', + 'openSource.publications.modulector.description': 'Una plataforma como servicio para el acceso a bases de datos de microARNs', + 'openSource.intro.title': 'En Omicsdatascience creemos en la ciencia abierta. Explora nuestros proyectos de código abierto, disponibles libremente para la comunidad con el fin de fomentar la colaboración, la transparencia y la innovación en la investigación biomédica. Disponibles en nuestra organización de GitHub.', 'openSource.intro.description': 'Estos repositorios representan algunas de nuestras iniciativas de código abierto más destacadas, desarrolladas para brindar a la comunidad científica herramientas bioinformáticas accesibles y de vanguardia.', @@ -879,6 +885,7 @@ export default { 'allExperimentsView.filters.selectTag': 'Seleccionar una etiqueta existente', 'allExperimentsView.filters.experimentType': 'Tipo de experimento', 'allExperimentsView.filters.correlationMethod': 'Método de correlación', + 'allExperimentsView.filters.title': 'Filtros', 'allExperimentsView.table.name': 'Nombre', 'allExperimentsView.table.description': 'Descripción',