Skip to content
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

frontend: Fix visibility of Sidebar Elements and Navigation Tabs #1720

Closed
wants to merge 4 commits into from
Closed

frontend: Fix visibility of Sidebar Elements and Navigation Tabs #1720

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
63c60b4
Fixed sidebar and navigation tabs visibility on mobile devices
tazo90 Feb 15, 2024
958c596
Merge remote-tracking branch 'origin/main' into fix/1719-sidebar-and-…
tazo90 Feb 19, 2024
bba6366
Update snapshots
tazo90 Feb 19, 2024
e500d42
Add missing translation files and fix test related to i18n
tazo90 Feb 21, 2024
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
12 changes: 6 additions & 6 deletions frontend/src/components/App/Home/__snapshots__/RecentClusters.stories.storyshot
View file
Open in desktop
joaquimrocha marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ exports[`Storyshots home/RecentClusters More Than Three Clusters 1`] = `
<span />
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
title="cluster3"
title="cluster0"
>
cluster3
cluster0
</p>
</div>
</div>
Expand All @@ -51,9 +51,9 @@ exports[`Storyshots home/RecentClusters More Than Three Clusters 1`] = `
<span />
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
title="cluster2"
title="cluster1"
>
cluster2
cluster1
</p>
</div>
</div>
Expand All @@ -79,9 +79,9 @@ exports[`Storyshots home/RecentClusters More Than Three Clusters 1`] = `
<span />
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom css-qscjxq-MuiTypography-root"
title="cluster1"
title="cluster2"
>
cluster1
cluster2
</p>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/App/__snapshots__/TopBar.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`Storyshots TopBar No Token 1`] = `
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-xx4di6-MuiPaper-root-MuiAppBar-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-vugeqf-MuiPaper-root-MuiAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular makeStyles-toolbar css-hyum1k-MuiToolbar-root"
Expand Down Expand Up @@ -59,7 +59,7 @@ exports[`Storyshots TopBar One Cluster 1`] = `
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-xx4di6-MuiPaper-root-MuiAppBar-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-vugeqf-MuiPaper-root-MuiAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular makeStyles-toolbar css-hyum1k-MuiToolbar-root"
Expand Down Expand Up @@ -127,7 +127,7 @@ exports[`Storyshots TopBar Processor Action 1`] = `
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-xx4di6-MuiPaper-root-MuiAppBar-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-vugeqf-MuiPaper-root-MuiAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular makeStyles-toolbar css-hyum1k-MuiToolbar-root"
Expand Down Expand Up @@ -185,7 +185,7 @@ exports[`Storyshots TopBar Token 1`] = `
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-xx4di6-MuiPaper-root-MuiAppBar-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-vugeqf-MuiPaper-root-MuiAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular makeStyles-toolbar css-hyum1k-MuiToolbar-root"
Expand Down Expand Up @@ -240,7 +240,7 @@ exports[`Storyshots TopBar Two Cluster 1`] = `
<div>
<nav
aria-label="Appbar Tools"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-xx4di6-MuiPaper-root-MuiAppBar-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed makeStyles-appbar mui-fixed css-vugeqf-MuiPaper-root-MuiAppBar-root"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular makeStyles-toolbar css-hyum1k-MuiToolbar-root"
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/components/Sidebar/NavigationTabs.tsx
View file
Open in desktop
joaquimrocha marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,12 @@ export default function NavigationTabs() {
tabChangeHandler(index);
}}
defaultIndex={defaultIndex}
sx={{ maxWidth: '85vw' }}
sx={{
maxWidth: '85vw',
[theme.breakpoints.down('sm')]: {
paddingTop: '10px',
},
}}
ariaLabel={t('translation|Navigation Tabs')}
/>
<Divider />
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import VersionButton from './VersionButton';
export const drawerWidth = 240;
export const mobileDrawerWidth = 320;
export const drawerWidthClosed = 64;
export const topBarHeight = 64;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is that the sidebar is set from the top of the screen, without having the toolbar before it.
A more future-proof way of fixing this issue is to see what the normal case is doing: Adding a Box with the toolbar style mixin (look for the use of the toolbar class).


// exported for backwards compatibility for plugins
export { DefaultSidebars };
Expand All @@ -48,6 +49,9 @@ const useStyle = makeStyles(theme => ({
duration: theme.transitions.duration.enteringScreen,
}),
background: theme.palette.sidebarBg,
[theme.breakpoints.down('sm')]: {
paddingTop: `${topBarHeight}px`,
},
},
drawerClose: {
transition: theme.transitions.create('width', {
Expand Down
4 changes: 2 additions & 2 deletions ...tend/src/components/common/Chart.stories/__snapshots__/PercentageCircle.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ exports[`Storyshots Charts/PercentageCircle Percent 50 1`] = `
<desc />
<defs>
<clippath
id="recharts15-clip"
id="recharts11-clip"
>
<rect
height="150"
Expand Down Expand Up @@ -151,7 +151,7 @@ exports[`Storyshots Charts/PercentageCircle Percent 100 1`] = `
<desc />
<defs>
<clippath
id="recharts13-clip"
id="recharts9-clip"
>
<rect
height="150"
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/components/configmap/__snapshots__/Details.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,13 +541,13 @@ exports[`Storyshots ConfigMap/DetailsView With Base 1`] = `
style="display: flex; position: relative; text-align: initial; width: 100%; height: 100%;"
>
<div
data-keybinding-context="8"
data-keybinding-context="5"
data-mode-id="plaintext"
style="width: 100%;"
>
<div
class="monaco-editor showUnused showDeprecated vs"
data-uri="inmemory://model/8"
data-uri="inmemory://model/5"
role="code"
style="width: 5px; height: 3vh;"
>
Expand Down Expand Up @@ -788,13 +788,13 @@ exports[`Storyshots ConfigMap/DetailsView With Base 1`] = `
style="display: flex; position: relative; text-align: initial; width: 100%; height: 100%;"
>
<div
data-keybinding-context="9"
data-keybinding-context="6"
data-mode-id="plaintext"
style="width: 100%;"
>
<div
class="monaco-editor showUnused showDeprecated vs"
data-uri="inmemory://model/9"
data-uri="inmemory://model/6"
role="code"
style="width: 5px; height: 3vh;"
>
Expand Down Expand Up @@ -1035,13 +1035,13 @@ exports[`Storyshots ConfigMap/DetailsView With Base 1`] = `
style="display: flex; position: relative; text-align: initial; width: 100%; height: 100%;"
>
<div
data-keybinding-context="10"
data-keybinding-context="7"
data-mode-id="plaintext"
style="width: 100%;"
>
<div
class="monaco-editor showUnused showDeprecated vs"
data-uri="inmemory://model/10"
data-uri="inmemory://model/7"
role="code"
style="width: 5px; height: 5px;"
>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/i18n/allowlist.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"de": [],
"en": [],
"es": [],
"fr": [],
"pt": []
"de": ["Cancel"],
"en": ["Cancel"],
"es": ["Cancel"],
"fr": ["Cancel"],
"pt": ["Cancel"]
}
2 changes: 1 addition & 1 deletion frontend/src/i18n/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ async function checkKeys() {
* Allowlist function scans the json and return if the word is within the allowlist
*/
function allowlistScan(word: string, lang: string) {
return allowlist[lang].some((item: any) => item.wordKey === word);
return allowlist[lang].some((item: any) => item === word);
}

/*
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/i18n/locales/de/frequent.json
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We no longer have the frequent namespace. Only glossary + translation (default).

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"Cancel": ""
}
2 changes: 1 addition & 1 deletion frontend/src/i18n/locales/de/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@
"Are you sure?": "Sind Sie sicher?",
"This will discard your changes in the editor. Do you want to proceed?": "Dadurch werden Ihre Änderungen im Editor verworfen. Möchten Sie fortfahren?",
"Undo Changes": "Änderungen rückgängig machen",
"Loading resource data": "Lade Ressourcendaten",
"Creation": "Erstellung",
"Labels": "Labels",
"Annotations": "Annotations",
Expand All @@ -190,7 +191,6 @@
"Forward port": "Port weiterleiten",
"Delete port forward": "Portweiterleitung löschen",
"Stop port forward": "Portweiterleitung stoppen",
"Loading resource data": "Lade Ressourcendaten",
"Mount Path": "Mount Path",
"from": "von",
"I/O": "I/O",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/i18n/locales/en/frequent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"Cancel": "Cancel"
}
2 changes: 1 addition & 1 deletion frontend/src/i18n/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@
"Are you sure?": "Are you sure?",
"This will discard your changes in the editor. Do you want to proceed?": "This will discard your changes in the editor. Do you want to proceed?",
"Undo Changes": "Undo Changes",
"Loading resource data": "Loading resource data",
"Creation": "Creation",
"Labels": "Labels",
"Annotations": "Annotations",
Expand All @@ -190,7 +191,6 @@
"Forward port": "Forward port",
"Delete port forward": "Delete port forward",
"Stop port forward": "Stop port forward",
"Loading resource data": "Loading resource data",
"Mount Path": "Mount Path",
"from": "from",
"I/O": "I/O",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/i18n/locales/es/frequent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"Cancel": ""
}
2 changes: 1 addition & 1 deletion frontend/src/i18n/locales/es/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@
"Are you sure?": "¿Está seguro?",
"This will discard your changes in the editor. Do you want to proceed?": "Esto descartará sus cambios en el editor. ¿Desea avanzar?",
"Undo Changes": "Deshacer cambios",
"Loading resource data": "Cargando datos del recurso",
"Creation": "Creación",
"Labels": "Etiquetas",
"Annotations": "Anotaciones",
Expand All @@ -190,7 +191,6 @@
"Forward port": "Redireccionar puerto",
"Delete port forward": "Eliminar redireccionamiento de puerto",
"Stop port forward": "Parar redireccionamiento de puerto",
"Loading resource data": "Cargando datos del recurso",
"Mount Path": "Camino de montaje",
"from": "desde",
"I/O": "I/O",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/i18n/locales/fr/frequent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"Cancel": ""
}
2 changes: 1 addition & 1 deletion frontend/src/i18n/locales/fr/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@
"Are you sure?": "Êtes-vous sûr ?",
"This will discard your changes in the editor. Do you want to proceed?": "Vos modifications seront perdues. Voulez-vous continuer ?",
"Undo Changes": "Annuler les modifications",
"Loading resource data": "Chargement des données sur les ressources",
"Creation": "Création",
"Labels": "Étiquettes",
"Annotations": "Annotations",
Expand All @@ -190,7 +191,6 @@
"Forward port": "Transférer le port",
"Delete port forward": "Supprimer le transfert de port",
"Stop port forward": "Arrêter le transfert de port",
"Loading resource data": "Chargement des données sur les ressources",
"Mount Path": "Chemin de montage",
"from": "de",
"I/O": "Entrées/Sorties",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/i18n/locales/pt/frequent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"Cancel": ""
}
2 changes: 1 addition & 1 deletion frontend/src/i18n/locales/pt/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@
"Are you sure?": "Tem a certeza?",
"This will discard your changes in the editor. Do you want to proceed?": "Irá descartar as suas modificações no editor. Deseja prosseguir?",
"Undo Changes": "Desfazer modificações",
"Loading resource data": "A carregar dados do recurso",
"Creation": "Criação",
"Labels": "Etiquetas",
"Annotations": "Anotações",
Expand All @@ -190,7 +191,6 @@
"Forward port": "Redir. porta",
"Delete port forward": "Eliminar redir. de porta",
"Stop port forward": "Parar redir. de porta",
"Loading resource data": "A carregar dados do recurso",
"Mount Path": "Cam. de montagem",
"from": "desde",
"I/O": "I/O",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/lib/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,9 @@ const commonRules = {
},
MuiAppBar: {
styleOverrides: {
root: {
height: '64px',
},
colorPrimary: {
backgroundColor: '#f5f5f5',
},
Expand Down