Skip to content

fix: mobile responsive fixes 2 #329

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
wants to merge 8 commits into
base: feat/clevercloud
Choose a base branch
from
Open

fix: mobile responsive fixes 2 #329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cf40fe9
fix: user request button mobile cols hidden + buttons position
dan1M Apr 23, 2025
e24923d
fix: account page fields and buttons
dan1M Apr 23, 2025
cef180e
fix: product pages spacings + correct heading size
dan1M Apr 23, 2025
e8aeb40
fix: product buttons page mobile adaptation (+ empty state responsive)
dan1M Apr 23, 2025
e25d6a6
fix: product access page buttons + description style fix
dan1M Apr 23, 2025
31f735a
fix: product access page card spacings
dan1M Apr 24, 2025
05af49c
fix: product api keys page
dan1M Apr 24, 2025
f1cfa5f
fix: reviews page
dan1M Apr 24, 2025
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
26 changes: 19 additions & 7 deletions webapp-backoffice/src/components/dashboard/AccessRight/AccessRightCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ const ProductAccessCard = (props: Props) => {
)}
>
<div className={cx(fr.cx('fr-grid-row', 'fr-grid-row--middle'))}>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-4')}>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-4', 'fr-mb-4v', 'fr-mb-md-0')}>
<span className={fr.cx('fr-text--bold')}>
{accessRight.user
? `${accessRight.user?.firstName} ${accessRight.user?.lastName}`
: '-'}
</span>
</div>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-4')}>
<div className={fr.cx('fr-col', 'fr-col-12', 'fr-col-md-4', 'fr-mb-4v', 'fr-mb-md-0')}>
<span className={cx(classes.userEmail)}>
{accessRight?.user_email
? accessRight?.user_email
Expand All @@ -62,7 +62,7 @@ const ProductAccessCard = (props: Props) => {
{!accessRight.user_email ? (
<div
className={cx(
fr.cx('fr-col', 'fr-col-12', 'fr-col-md-2'),
fr.cx('fr-col', 'fr-col-12', 'fr-col-md-2', 'fr-mb-4v', 'fr-mb-md-0'),
classes.badgeStatusInvited
)}
>
Expand All @@ -88,7 +88,7 @@ const ProductAccessCard = (props: Props) => {
aria-haspopup="true"
aria-expanded={menuOpen ? 'true' : undefined}
priority={'secondary'}
className={menuOpen ? classes.buttonOptionsOpen : ''}
className={cx(classes.button, (menuOpen ? classes.buttonOptionsOpen : ''))}
onClick={handleClick}
disabled={ownRight !== 'carrier_admin'}
iconId={
Expand Down Expand Up @@ -127,7 +127,10 @@ const useStyles = tss.create({
},
badgeStatusInvited: {
display: 'flex',
justifyContent: 'flex-end'
justifyContent: 'flex-end',
[fr.breakpoints.down('md')]: {
justifyContent: 'flex-start',
}
},
badgeStatusRemoved: {
color: fr.colors.decisions.background.flat.purpleGlycine.default,
Expand All @@ -143,8 +146,17 @@ const useStyles = tss.create({
},
optionsDropdown: {
display: 'flex',
justifyContent: 'flex-end'
}
justifyContent: 'flex-end',
[fr.breakpoints.down('md')]: {
flexDirection: 'column',
}
},
button: {
[fr.breakpoints.down('md')]: {
width: '100%',
justifyContent: 'center',
}
},
});

export default ProductAccessCard;
23 changes: 17 additions & 6 deletions webapp-backoffice/src/components/dashboard/Account/Informations/credentialsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,10 @@ const CredentialsCard = (props: Props) => {
<div className={fr.cx('fr-col-12', 'fr-text--bold')}>
Adresse e-mail
</div>
<div className={fr.cx('fr-col-12', 'fr-pt-0', 'fr-mb-4v')}>
<div
className={fr.cx('fr-col-12', 'fr-pt-0', 'fr-mb-4v')}
style={{ wordBreak: 'break-all' }}
>
{user.email}
</div>
</div>
Expand Down Expand Up @@ -224,7 +227,7 @@ const CredentialsCard = (props: Props) => {
'fr-grid-row--middle'
)}
>
<div className={fr.cx('fr-col-md-6')}>
<div className={cx(fr.cx('fr-col-md-6'), classes.formContainer)}>
<form id="credentials-form">
<div className={fr.cx('fr-input-group')}>
<Input
Expand Down Expand Up @@ -308,7 +311,7 @@ const CredentialsCard = (props: Props) => {
<div className={fr.cx('fr-col-md-12', 'fr-text--bold')}>
Mot de passe
</div>
<div className={fr.cx('fr-col-md-12', 'fr-pt-0')}>
<div className={cx(fr.cx('fr-col-md-12', 'fr-pt-0'), classes.buttonContainer)}>
<Button
priority="secondary"
onClick={() => {
Expand All @@ -320,6 +323,7 @@ const CredentialsCard = (props: Props) => {
`Credentials-Modal-Open`
]);
}}
className={classes.buttonContainer}
>
Réinitialiser le mot de passe
</Button>
Expand All @@ -333,9 +337,16 @@ const CredentialsCard = (props: Props) => {
};

const useStyles = tss.withName(CredentialsCard.name).create(() => ({
actionContainer: {
display: 'flex',
justifyContent: 'flex-end'
formContainer: {
[fr.breakpoints.down('md')]: {
width: '100%'
}
},
buttonContainer: {
[fr.breakpoints.down('md')]: {
width: '100%',
justifyContent: 'center',
}
}
}));

Expand Down
28 changes: 23 additions & 5 deletions webapp-backoffice/src/components/dashboard/Account/Informations/genericCardAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const GenericCardInfos = (props: Props) => {
setModifying(true);
push(['trackEvent', 'BO - Account', `Modify-${title}`]);
}}
className={classes.button}
>
Modifier
</Button>
Expand All @@ -73,13 +74,14 @@ const GenericCardInfos = (props: Props) => {
`Cancel-Changes-${title}`
]);
}}
className={cx(classes.button)}
>
Annuler
</Button>
<Button
priority="primary"
iconId="fr-icon-save-line"
className={cx(fr.cx('fr-ml-4v'))}
className={cx(fr.cx('fr-ml-md-4v'), classes.button)}
onClick={async () => {
const isFormValid = await onSubmit?.();
push([
Expand All @@ -97,12 +99,12 @@ const GenericCardInfos = (props: Props) => {
</>
)}
</div>
{smallScreenShowHr && (
{smallScreenShowHr || modifying && (
<div className={cx(fr.cx('fr-col-md-12', 'fr-pb-0'))}>
<hr />
</div>
)}
<div className={cx(fr.cx(smallScreenShowHr? 'fr-col-md-12' : 'fr-col-12', 'fr-pb-6v'))}>
<div className={cx(fr.cx(smallScreenShowHr || modifying ? 'fr-col-md-12' : 'fr-col-12', 'fr-pb-6v'), (smallScreenShowHr || modifying ? classes.mobileFullWidth : '') )}>
{modifying ? editModeContent : viewModeContent}
</div>
</div>
Expand All @@ -114,9 +116,25 @@ const GenericCardInfos = (props: Props) => {
const useStyles = tss.withName(GenericCardInfos.name).create(() => ({
actionContainer: {
display: 'flex',
justifyContent: 'flex-end'
justifyContent: 'flex-end',
[fr.breakpoints.down('md')]: {
flexDirection: 'column',
gap: fr.spacing('4v'),
marginBottom: fr.spacing('2v'),
}
},
tag: {}
mobileFullWidth: {
[fr.breakpoints.down('md')]: {
width: '100%'
}
},
tag: {},
button: {
[fr.breakpoints.down('md')]: {
width: '100%',
justifyContent: 'center',
}
}
}));

export default GenericCardInfos;
12 changes: 11 additions & 1 deletion webapp-backoffice/src/components/dashboard/Account/Informations/identityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Input from '@codegouvfr/react-dsfr/Input';
import { trpc } from '@/src/utils/trpc';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { tss } from 'tss-react/dsfr';

interface Props {
user: User;
Expand All @@ -16,6 +17,7 @@ type FormValues = Omit<User, 'id' | 'created_at' | 'updated_at'>;

const IdentityCard = (props: Props) => {
const { user } = props;
const { cx, classes } = useStyles();
const utils = trpc.useUtils();
const { update: refetchSession } = useSession();
const router = useRouter();
Expand Down Expand Up @@ -99,7 +101,7 @@ const IdentityCard = (props: Props) => {
'fr-grid-row--middle'
)}
>
<div className={fr.cx('fr-col-md-6')}>
<div className={cx(fr.cx('fr-col-md-6'), classes.formContainer)}>
<form id="identity-form">
<div className={fr.cx('fr-input-group')}>
<Controller
Expand Down Expand Up @@ -166,4 +168,12 @@ const IdentityCard = (props: Props) => {
);
};

const useStyles = tss.withName(IdentityCard.name).create(() => ({
formContainer: {
[fr.breakpoints.down('md')]: {
width: '100%'
}
}
}));

export default IdentityCard;
9 changes: 9 additions & 0 deletions webapp-backoffice/src/components/dashboard/ApiKey/ApiKeyHandler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,15 @@ const useStyles = tss.withName(ApiKeyHandler.name).create({
justifyContent: 'end',
button: {
marginLeft: '1rem'
},
[fr.breakpoints.down('md')]: {
flexDirection: 'column',
gap: fr.spacing('4v'),
button: {
marginLeft: 0,
width: '100%',
justifyContent: 'center'
}
}
},
iconError: {
Expand Down
30 changes: 21 additions & 9 deletions webapp-backoffice/src/components/dashboard/Pannels/NoButtonsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const NoButtonsPanel = (props: Props) => {
};

return (
<div className={cx(classes.container, fr.cx('fr-container', 'fr-p-12v'))}>
<div className={cx(classes.container, fr.cx('fr-container', 'fr-p-8v', 'fr-p-md-12v'))}>
{getTitle()}
<div
className={cx(
Expand All @@ -35,7 +35,7 @@ const NoButtonsPanel = (props: Props) => {
classes.maxWidth
)}
>
<div className={fr.cx('fr-col-12', 'fr-col-md-3')}>
<div className={fr.cx('fr-col-3')}>
<Image
src="/assets/chat_picto.svg"
alt="C'est quoi un bouton JDMA ?"
Expand All @@ -46,7 +46,7 @@ const NoButtonsPanel = (props: Props) => {
</div>
<div
className={cx(
fr.cx('fr-col-12', 'fr-col-md-9'),
fr.cx('fr-col-9', 'fr-pl-2v', 'fr-pl-md-0'),
classes.textContainer
)}
>
Expand All @@ -57,7 +57,7 @@ const NoButtonsPanel = (props: Props) => {
</div>
</div>
<div className={fr.cx('fr-grid-row', 'fr-grid-row--left', 'fr-pb-3v')}>
<div className={fr.cx('fr-col-12', 'fr-col-md-3')}>
<div className={fr.cx('fr-col-3')}>
<Image
src="/assets/install_picto.svg"
alt="C'est quoi un bouton JDMA ?"
Expand All @@ -68,7 +68,7 @@ const NoButtonsPanel = (props: Props) => {
</div>
<div
className={cx(
fr.cx('fr-col-12', 'fr-col-md-9'),
fr.cx('fr-col-9', 'fr-pl-2v', 'fr-pl-md-0'),
classes.textContainer
)}
>
Expand Down Expand Up @@ -111,7 +111,10 @@ const useStyles = tss.create({
title: {
fontWeight: 'bold',
fontSize: '28px',
color: fr.colors.decisions.text.title.blueFrance.default
color: fr.colors.decisions.text.title.blueFrance.default,
[fr.breakpoints.down('sm')]: {
marginBottom: fr.spacing('4v'),
}
},
smallTitle: {
fontWeight: 'bold',
Expand All @@ -130,16 +133,25 @@ const useStyles = tss.create({
paddingBottom: '12px'
},
text: {
fontSize: '18px'
fontSize: '18px',
[fr.breakpoints.down('sm')]: {
fontSize: '16px'
}
},
button: {
alignSelf: 'center'
alignSelf: 'center',
marginTop: fr.spacing('4v'),
[fr.breakpoints.down('md')]: {
width: '100%',
justifyContent: 'center'
}
},
image: {
[fr.breakpoints.down('md')]: {
alignSelf: 'center',
display: 'block',
margin: '0 auto'
margin: '0 auto',
width: '100%',
}
}
});
Expand Down
15 changes: 14 additions & 1 deletion webapp-backoffice/src/components/dashboard/ProductButton/ProductButtonCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const ProductButtonCard = (props: Props) => {
menuOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
}
iconPosition="right"
className={classes.button}
>
Options
</Button>
Expand Down Expand Up @@ -147,7 +148,19 @@ const useStyles = tss
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'flex-end',
paddingLeft: fr.spacing('11v')
paddingLeft: fr.spacing('11v'),
[fr.breakpoints.down('md')]: {
paddingLeft: 0,
flexDirection: 'column',
justifyContent: 'flex-start',
gap: fr.spacing('4v')
}
},
button: {
[fr.breakpoints.down('md')]: {
width: '100%',
justifyContent: 'center',
}
},
tag: {}
}));
Expand Down
2 changes: 1 addition & 1 deletion webapp-backoffice/src/components/dashboard/Reviews/ReviewFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const ReviewFilters = (props: Props) => {

return (
<thead className={cx(classes.lineContainer)}>
<tr className={cx(classes.trContainer)}>
<tr className={cx(classes.trContainer, fr.cx('fr-hidden', 'fr-unhidden-lg'))}>
{sortList.map((sort, index) => (
<th
className={cx(
Expand Down
Loading
Loading