all repos — caroster @ 6d0ac3d26b6ba4c0980e7571cba5c01f8475d765

[Octree] Group carpool to your event https://caroster.io

🐛 Fixes after UX review
Tim Izzo tim@octree.ch
Wed, 08 Jan 2025 10:23:09 +0100
commit

6d0ac3d26b6ba4c0980e7571cba5c01f8475d765

parent

7aa17436c75503123cefb51191e8a757883333e9

M frontend/containers/AddToMyEventDialog/index.tsxfrontend/containers/AddToMyEventDialog/index.tsx

@@ -64,13 +64,6 @@ onClick={() => onRedirect(`/auth/login`)}

> {t('event.add_to_my_events.login')} </Button> - <Button - id="AddToMyEventRegister" - onClick={() => onRedirect(`/auth/register`)} - color="primary" - > - {t('event.add_to_my_events.register')} - </Button> </DialogActions> </Dialog> );
M frontend/containers/Alerts/index.tsxfrontend/containers/Alerts/index.tsx

@@ -25,7 +25,10 @@ tripAlertEntity?.attributes.enabled || false

); return ( - <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: isMobile ? 2 : 4}}> + <Container + maxWidth="sm" + sx={{mt: isMobile ? 15 : 11, mx: 0, px: isMobile ? 2 : 4}} + > {!canSetAlert() && ( <Box sx={{width: '480px', maxWidth: '100%', position: 'relative'}}> <LoginToAttend title={t('event.loginToSetAlert')} />
M frontend/containers/EventBar/useActions.tsfrontend/containers/EventBar/useActions.ts

@@ -24,8 +24,8 @@ onClick: () => {

onAdd(true); }, id: 'AddToMyEventsTab', + icon: 'library_add', }, - {divider: true}, { label: t('event.actions.share'), onClick: () =>

@@ -33,27 +33,16 @@ share({

title: `Caroster ${event.name}`, }), id: 'ShareEvent', + icon: 'share', }, - {divider: true}, { label: t('menu.login'), onClick: () => { router.push(`/auth/login?redirectPath=${router.asPath}`); }, id: 'SignInTab', - }, - { - label: t('menu.register'), - onClick: () => { - router.push({ - pathname: `/auth/register`, - query: {redirectPath: router.asPath}, - state: {event: eventId}, - }); - }, - id: 'SignUpTab', + icon: 'login', }, - {divider: true}, ]; const loggedMenuActions = [

@@ -78,7 +67,6 @@ }),

id: 'ShareEvent', icon: 'share', }, - {divider: true}, ]; return connected ? loggedMenuActions : noUserMenuActions;
M frontend/containers/GenericMenu/index.tsxfrontend/containers/GenericMenu/index.tsx

@@ -81,10 +81,10 @@ };

const validActions = [ ...actions, - supportItem, languageMenuItem, logoutMenuItem, {divider: true}, + supportItem, aboutMenuItem, sourceCodeItem, ].filter(Boolean);
M frontend/containers/GenericToolbar/index.tsxfrontend/containers/GenericToolbar/index.tsx

@@ -105,7 +105,7 @@

<GenericMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} - actions={[...actions, {divider: true}]} + actions={actions} /> </> )}
M frontend/containers/Map/Map.tsxfrontend/containers/Map/Map.tsx

@@ -3,7 +3,6 @@ import MapController from './MapController';

import MapWrapper from './MapWrapper'; import useMapStore from '../../stores/useMapStore'; import Bounds from './Bounds'; -import MapActions from './MapActions'; const TOKEN_FREE_TILES_URL = process.env.TOKEN_FREE_TILES_URL ||

@@ -27,7 +26,6 @@ attribution={TOKEN_FREE_TILES_LAYER_ATTRIBUTION}

/> <MapController /> {markers} - <MapActions /> </MapContainer> </MapWrapper> );
M frontend/containers/Map/MapActions.tsxfrontend/containers/MapActions/index.tsx

@@ -9,13 +9,14 @@ const theme = useTheme();

const isMobile = useMediaQuery(theme.breakpoints.down('md')); return ( <Box + id="map-actions" zIndex={400} - position="relative" - top={isMobile ? 120 : 100} - left={25} - right={25} + position="absolute" + top={isMobile ? 95 : 64} + left={isMobile ? 0 : 25} + right={isMobile ? 0 : 25} > - <Box component={Paper} p={1} maxWidth={`calc(100vw - 50px)`} width={350}> + <Box component={Paper} p={1} width={isMobile ? '100%' : 350}> <SearchField /> </Box> </Box>
M frontend/containers/Map/MapWrapper.tsxfrontend/containers/Map/MapWrapper.tsx

@@ -5,14 +5,14 @@ import theme from '../../theme';

import useMediaQuery from '@mui/material/useMediaQuery'; const MapWrapper = ({children}: PropsWithChildren) => { - const mobile = useMediaQuery(theme.breakpoints.down('md')); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); return ( <ThemeProvider theme={theme}> <Box id="map" width="100%" - height={mobile ? '60vh' : '50vh'} - sx={{position: 'relative'}} + height={isMobile ? '60vh' : '50vh'} + pt={isMobile ? 12 : 0} > {children} </Box>
M frontend/containers/Map/index.tsxfrontend/containers/Map/index.tsx

@@ -6,7 +6,9 @@ const ClientMap = dynamic(() => import('./Map'), {

ssr: false, loading: () => ( <MapWrapper> - <CircularProgress sx={{position: 'absolute', margin: '0 auto', top: '50%'}}/> + <CircularProgress + sx={{position: 'absolute', margin: '0 auto', top: '50%'}} + /> </MapWrapper> ), });
M frontend/containers/TravelColumns/index.tsxfrontend/containers/TravelColumns/index.tsx

@@ -21,6 +21,7 @@ import FilterByDate from './FilterByDate';

import {Button, Icon, useMediaQuery} from '@mui/material'; import useTravelsStore from '../../stores/useTravelsStore'; import AddTravelButton from '../AddTravelButton'; +import MapActions from '../MapActions'; interface Props {}

@@ -96,10 +97,11 @@

return ( <> {showMap && <Map />} + <MapActions /> <Box px={3} pb={2} - pt={showMap ? 2 : isMobile ? 15 : 10} + pt={showMap ? 2 : isMobile ? 22 : 18} display="flex" gap={2} maxWidth="100%"
M frontend/containers/TripAlertsList/index.tsxfrontend/containers/TripAlertsList/index.tsx

@@ -86,7 +86,7 @@ };

if (!tripAlerts || tripAlerts.length === 0) return ( - <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: mobile ? 2 : 4}}> + <Container maxWidth="sm" sx={{mt: 15, mx: 0, px: mobile ? 2 : 4}}> <Paper sx={{width: '480px', maxWidth: '100%'}}> <ListHeader /> <Box p={2} textAlign="center">
M frontend/containers/WaitingList/index.tsxfrontend/containers/WaitingList/index.tsx

@@ -82,7 +82,10 @@ }

}; return ( - <Container maxWidth="sm" sx={{mt: 11, mx: 0, px: mobile ? 2 : 4}}> + <Container + maxWidth="sm" + sx={{mt: mobile ? 15 : 11, mx: 0, px: mobile ? 2 : 4}} + > <Paper sx={{width: '480px', maxWidth: '100%', position: 'relative'}}> <Box p={2}> <IconButton
M frontend/locales/de.jsonfrontend/locales/de.json

@@ -33,10 +33,8 @@ "event.actions.add_to_my_events": "Zu meinen Veranstaltungen hinzufügen",

"event.actions.noShareCapability": "Ihr Browser kann die Seite weder freigeben noch in die Zwischenablage kopieren. Bitte kopieren Sie stattdessen die URL der Seite.", "event.actions.share": "Den Caroster teilen", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", "event.add_to_my_events.title": "Sie müssen eingeloggt sein", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Ihre E-Mail", "event.creation.date": "Datum der Veranstaltung", "event.creation.description": "Beschreibung",

@@ -88,7 +86,6 @@ "menu.language": "Sprache ändern",

"menu.login": "Anmeldung", "menu.logout": "Abmeldung", "menu.profile": "Mein Profil", - "menu.register": "Registrierung", "notification.type.ContactTripCreator.content": "Wenden Sie sich an den Fahrer, um Ihre Fahrt zu organisieren.", "notification.type.DeletedFromTrip.content": "Sie wurden von einer Fahrt entfernt.", "notification.type.DeletedTrip.content": "Eine Fahrt wurde entfernt.",
M frontend/locales/en.jsonfrontend/locales/en.json

@@ -34,13 +34,11 @@ "event.actions.copied": "The link has been copied to your clipboard",

"event.actions.noShareCapability": "Your browser cannot share nor copy to clipboard, please copy the page's URL instead.", "event.actions.share": "Share the Caroster", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", - "event.add_to_my_events.text": "To add <bold>{{eventName}}</bold> to your carosters you must be logged in or create an account.", + "event.add_to_my_events.text": "To add <bold>{{eventName}}</bold> to your carosters you must be logged in.", "event.add_to_my_events.title": "You must be logged in", "event.linked.goEvent": "Go", "event.linked.returnEvent": "Return", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Your e-mail", "event.creation.date": "Date of the event", "event.creation.description": "Description",

@@ -110,7 +108,6 @@ "menu.login": "Login",

"menu.logout": "Logout", "menu.new_event": "Create a Caroster", "menu.profile": "My profile", - "menu.register": "Sign-Up", "notification.type.AddedAsAdmin.content": "You have been promoted as administrator to the event.", "notification.type.ContactTripCreator.content": "Contact the driver to organize your trip.", "notification.type.DeletedFromTrip.content": "You have been removed from a trip.",

@@ -205,7 +202,6 @@ "signin.sendLink": "Send login link",

"signin.check_email": "A login link has been sent to your email. Please check your email to complete the login.", "signin.or": "OR", "signin.password": "Password", - "signin.register": "$t(menu.register)", "signin.title": "Sign in", "signin.withGoogle": "Use a Google account", "signup.create": "Create an account",
M frontend/locales/fr.jsonfrontend/locales/fr.json

@@ -30,13 +30,11 @@ "event.actions.copied": "Le lien a été copié dans votre presse-papier",

"event.actions.noShareCapability": "Votre navigateur ne permet pas de partager ou de copier dans le presse papier, veuillez copier l'URL de la page.", "event.actions.share": "Partager le Caroster", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", - "event.add_to_my_events.text": "Pour ajouter <bold>{{eventName}}</bold> à vos carosters vous devez être connecté ou créer un compte.", + "event.add_to_my_events.text": "Pour ajouter <bold>{{eventName}}</bold> à vos carosters vous devez être connecté.", "event.add_to_my_events.title": "Vous devez être connecté", "event.linked.goEvent": "Aller", "event.linked.returnEvent": "Retour", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Votre e-mail", "event.creation.date": "Date de l'événement", "event.creation.description": "Description",

@@ -107,7 +105,6 @@ "menu.login": "Se connecter",

"menu.logout": "Se déconnecter", "menu.new_event": "Créer un caroster", "menu.profile": "Mon profil", - "menu.register": "Créer un compte", "notification.type.AddedAsAdmin.content": "Vous avez été promu administrateur.", "notification.type.ContactTripCreator.content": "Contactez la conductrice ou le conducteur pour organiser votre trajet.", "notification.type.DeletedFromTrip.content": "Vous avez été retiré(e) d'un trajet.",
M frontend/locales/it.jsonfrontend/locales/it.json

@@ -32,10 +32,8 @@ "event.actions.add_to_my_events": "Aggiungi ai miei eventi",

"event.actions.copied": "Il link è stato copiato nella clipboard", "event.actions.noShareCapability": "La funzione di copia o condivisione non è disponibile sul tuo browser. Puoi però copiare l'URL della pagina.", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", "event.add_to_my_events.title": "Devi effettuare l'accesso", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.address": "Indirizzo dell'evento", "event.creation.creator_email": "Il tuo indirizzo email", "event.creation.date": "Data dell'evento",

@@ -155,7 +153,6 @@ "menu.login": "Accedi",

"menu.logout": "Esci", "menu.new_event": "Crea un Caroster", "menu.profile": "Il mio profilo", - "menu.register": "Registrati", "notification.type.ContactTripCreator.content": "Contatta il conducente per accordarti sul tuo passaggio.", "notification.type.DeletedFromTrip.content": "Sei stato/a rimosso/a da un passaggio.", "notification.type.DeletedTrip.content": "Un passaggio è stato rimosso.",
M frontend/locales/nl.jsonfrontend/locales/nl.json

@@ -34,11 +34,9 @@ "event.actions.copied": "De link is gekopieerd naar het klembord",

"event.actions.noShareCapability": "Uw browser heeft geen klembordondersteuning - kopieer de pagina-url.", "event.actions.share": "Delen het Caroster", "event.add_to_my_events.login": "$t(menu.login)", - "event.add_to_my_events.register": "$t(menu.register)", - "event.add_to_my_events.text": "U kunt <bold>{{eventName}}</bold> alleen toevoegen aan uw carosters als u bent ingelogd.", + "event.add_to_my_events.text": "U kunt <bold>{{eventName}}</bold> alleen toevoegen aan uw carosters als.", "event.add_to_my_events.title": "U dient ingelogd te zijn", "event.creation.addFromAccount.actions.login": "$t(menu.login)", - "event.creation.addFromAccount.actions.register": "$t(menu.register)", "event.creation.creator_email": "Mijn e-mailadres", "event.creation.date": "Afspraakdatum", "event.creation.description": "Beschrijving",

@@ -98,7 +96,6 @@ "menu.login": "Inloggen",

"menu.logout": "Uitloggen", "menu.new_event": "Caroster aanmaken", "menu.profile": "Mijn profiel", - "menu.register": "Registreren", "notification.type.AddedAsAdmin.content": "U bent toegevoegd als beheerder van de afspraak.", "notification.type.ContactTripCreator.content": "Neem contact op met de bestuurder om de reis te organiseren.", "notification.type.DeletedFromTrip.content": "U bent verwijderd uit een reis.",
M frontend/pages/dashboard.tsxfrontend/pages/dashboard.tsx

@@ -56,7 +56,6 @@ onClick: () => router.push('/profile'),

id: 'ProfileTabs', icon: 'account_circle', }, - {divider: true}, { label: t('menu.new_event'), onClick: () => router.push('/new'),
M frontend/pages/e/[uuid]/details.tsxfrontend/pages/e/[uuid]/details.tsx

@@ -128,6 +128,7 @@ mb: 11,

mx: 0, [theme.breakpoints.down('md')]: { p: 2, + mt: 13, }, }} >
M frontend/pages/e/[uuid]/options.tsxfrontend/pages/e/[uuid]/options.tsx

@@ -48,6 +48,7 @@ mb: 11,

mx: 0, [theme.breakpoints.down('md')]: { p: 2, + mt: 13, }, }} >
M frontend/pages/new/index.tsxfrontend/pages/new/index.tsx

@@ -103,11 +103,6 @@ textAlign: 'center',

}} > <NextLink href="/auth/login" passHref> - <Button variant="text"> - {t('event.creation.addFromAccount.actions.register')} - </Button> - </NextLink> - <NextLink href="/auth/login" passHref> <Button color="primary"> {t('event.creation.addFromAccount.actions.login')} </Button>