Skip to content

Responsive #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
natharisa wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Responsive #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e29e0d4
Menu hamburguesa
natharisa Jun 26, 2026
7a8e0f8
Menu Hamburguesa listo
natharisa Jun 26, 2026
7c5c10a
Hamburger menu
natharisa Jul 23, 2026
e4c1e1c
Menu update
natharisa Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/frontend/static/frontend/src/components/Base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }

Expand Down
249 changes: 115 additions & 134 deletions src/frontend/static/frontend/src/components/MainNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.cbioportal' })}
icon='cloud'
as='a' href={urlCGDSPanel}
as='a'
href={urlCGDSPanel}
active={props.activeItem === 'cgds'}
/>
)

return (
<Menu className='margin-bottom-0' inverted borderless aria-label='Main navigation'>
{/* Logo */}
<Menu.Item as='a' header href={urlIndex}>
<Image size='tiny' src='/static/frontend/img/logo.png' alt={intl.formatMessage({ id: 'mainNavbar.logo.alt' })} />
</Menu.Item>

{/* Loading spinners while user is fetch */}
{props.isLoadingUser && (
<Menu.Item>
<Menu.Item style={{ padding: '0 1.72rem' }}>
<Loader active inline='centered' />
</Menu.Item>
<Menu.Item style={{ padding: '0 1.72rem' }}>
<Loader active inline='centered' />
</Menu.Item>
<Menu.Item style={{ padding: '0 1.7rem' }}>
<Loader active inline='centered' />
</Menu.Item>
<Menu.Item style={{ padding: '0 1.7rem' }}>
<Loader active inline='centered' />
</Menu.Item>
</Menu.Item>
)}
{/* Analysis menu */}
const renderNavbarItems = () => (
<>
{currentUser && !currentUser.is_anonymous && (
<>
<Menu.Menu>
<Dropdown item text={intl.formatMessage({ id: 'mainNavbar.analysis' })} className='link item' icon={null} aria-label='Analysis'>
<Dropdown.Menu>
{/* GEM panel */}
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.gem' })}
icon='lab'
as='a' href={urlPipeline}
active={props.activeItem === 'pipeline'}
/>

{/* Survival Analysis panel */}
{/* TODO: discuss with team! Maybe this is the "Stats validation panel in Biomarkers page" */}
{/* <Dropdown.Item
text='Survival'
icon='heart'
as='a' href={urlSurvival}
active={props.activeItem === 'survival'}
disabled
/> */}

{/* Biomarkers panel */}
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.biomarkers' })}
icon='list layout'
as='a' href={urlBiomarkers}
active={props.activeItem === 'biomarkers'}
/>

{/* Differential Expression panel */}
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.differentialExpression' })}
icon='buromobelexperte'
as='a' href={urlDifferentialExpression}
active={props.activeItem === 'differential-expression'}
/>
</Dropdown.Menu>
</Dropdown>
</Menu.Menu>

{/* Datasets menu */}
<Menu.Menu>
<Dropdown text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })} className='link item' icon={null} aria-label={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}>
<Dropdown.Menu>
{/* User's Datasets panel */}
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}
icon='database'
as='a' href={urlDatasets}
active={props.activeItem === 'files'}
/>

{/* cBioPortal Datasets panel */}
{cBioPortalOption}
</Dropdown.Menu>
</Dropdown>
</Menu.Menu>

{/* Institutions */}
<Menu.Menu>
<Menu.Item as='a' href={urlInstitutions} style={{ fontSize: '1rem' }}>
{intl.formatMessage({ id: 'mainNavbar.institutions' })}
</Menu.Item>
</Menu.Menu>
</>
)}
<Dropdown item text={intl.formatMessage({ id: 'mainNavbar.analysis' })} className='link item' icon={null} aria-label='Analysis'>
<Dropdown.Menu>
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.gem' })}
icon='lab'
as='a'
href={urlPipeline}
active={props.activeItem === 'pipeline'}
/>

{/* Only admin options */}
{currentUser && (currentUser.is_superuser || currentUser.is_institution_admin) && (
<Menu.Menu>
<Dropdown text={intl.formatMessage({ id: 'mainNavbar.admin' })} className='link item' icon={null} aria-label='Admin'>
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.biomarkers' })}
icon='list layout'
as='a'
href={urlBiomarkers}
active={props.activeItem === 'biomarkers'}
/>

<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.differentialExpression' })}
icon='buromobelexperte'
as='a'
href={urlDifferentialExpression}
active={props.activeItem === 'differential-expression'}
/>
</Dropdown.Menu>
</Dropdown>

<Dropdown item text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })} className='link item' icon={null} aria-label={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}>
<Dropdown.Menu>
{currentUser.is_superuser && (
<>
{/* User's Datasets panel */}
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.databaseGenes' })}
icon='dna'
// as='a' href={null}
disabled
/>
</>
)}
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}
icon='database'
as='a'
href={urlDatasets}
active={props.activeItem === 'files'}
/>

{cBioPortalOption}
</Dropdown.Menu>
</Dropdown>
</Menu.Menu>

<Menu.Item as='a' href={urlInstitutions} style={{ fontSize: '1rem' }}>
{intl.formatMessage({ id: 'mainNavbar.institutions' })}
</Menu.Item>
</>
)}

{/* About us */}
<Menu.Menu>
<Menu.Item as='a' href={urlAboutUs} style={{ fontSize: '1rem' }}>
{intl.formatMessage({ id: 'mainNavbar.aboutUs' })}
</Menu.Item>
</Menu.Menu>

<Menu.Menu>
<Menu.Item
as='a'
href='/faq'
style={{ fontSize: '1rem' }}
active={props.activeItem === 'faq'}
>
{intl.formatMessage({ id: 'mainNavbar.faq' })}
</Menu.Item>
</Menu.Menu>
{currentUser && (currentUser.is_superuser || currentUser.is_institution_admin) && (
<Dropdown item text={intl.formatMessage({ id: 'mainNavbar.admin' })} className='link item' icon={null} aria-label='Admin'>
<Dropdown.Menu>
{currentUser.is_superuser && (
<Dropdown.Item
text={intl.formatMessage({ id: 'mainNavbar.databaseGenes' })}
icon='dna'
disabled
/>
)}
</Dropdown.Menu>
</Dropdown>
)}

<Menu.Item as='a' href={urlAboutUs} style={{ fontSize: '1rem' }}>
{intl.formatMessage({ id: 'mainNavbar.aboutUs' })}
</Menu.Item>

<Menu.Menu>
<Menu.Item as='a' href={urlOpenSource} style={{ fontSize: '1rem' }}>
{intl.formatMessage({ id: 'mainNavbar.openSource' })}
<Menu.Item as='a' href='/faq' style={{ fontSize: '1rem' }} active={props.activeItem === 'faq'}>
{intl.formatMessage({ id: 'mainNavbar.faq' })}
</Menu.Item>

<Menu.Item as='a' href={urlOpenSource} style={{ fontSize: '1rem' }}>
{intl.formatMessage({ id: 'mainNavbar.openSource' })}
</Menu.Item>

<LogInLogOutPanel currentUser={currentUser} />
</>
)

return (
<>
<Menu className='margin-bottom-0' inverted borderless aria-label='Main navigation'>
<Menu.Item as='a' header href={urlIndex}>
<Image size='tiny' src='/static/frontend/img/logo.png' alt={intl.formatMessage({ id: 'mainNavbar.logo.alt' })} />
</Menu.Item>
</Menu.Menu>

{/* LogIn/LogOut panel */}
<Menu.Menu position='right'>
<LogInLogOutPanel currentUser={currentUser} />
</Menu.Menu>
</Menu>
<Menu.Menu position='right' className='mobile-navbar-toggle'>
<Menu.Item onClick={() => setMenuOpen(!menuOpen)} aria-label='Open menu'>
<Icon name={menuOpen ? 'close' : 'bars'} />
</Menu.Item>
</Menu.Menu>

{props.isLoadingUser && (
<Menu.Item className='navbar-loading-placeholders'>
<Menu.Item style={{ padding: '0 1.72rem' }}>
<Loader active inline='centered' />
</Menu.Item>
<Menu.Item style={{ padding: '0 1.72rem' }}>
<Loader active inline='centered' />
</Menu.Item>
<Menu.Item style={{ padding: '0 1.7rem' }}>
<Loader active inline='centered' />
</Menu.Item>
<Menu.Item style={{ padding: '0 1.7rem' }}>
<Loader active inline='centered' />
</Menu.Item>
</Menu.Item>
)}

<Menu.Menu className='desktop-navbar-items'>
{renderNavbarItems()}
</Menu.Menu>
</Menu>

{menuOpen && (
<Menu inverted vertical fluid className='mobile-navbar-menu'>
{renderNavbarItems()}
</Menu>
)}
</>
)
}

Expand Down
6 changes: 6 additions & 0 deletions src/frontend/static/frontend/src/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,9 @@
#source-button {
min-width: 30%;
}

@media only screen and (min-width: 1151px) and (max-width: 1366px) {
#homepage-heading {
text-align: center;
}
}
92 changes: 92 additions & 0 deletions src/frontend/static/frontend/src/css/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
.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;
}


.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;
}

.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;
}
}
Loading
Loading