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

Jump to bottom

Feat add read more button part II #701

Merged
merged 4 commits into from
Nov 4, 2024
Merged

Feat add read more button part II #701

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
bda182e
Add "read more" button to MatchingStudent and StudentGroup
MartinEichinger Oct 29, 2024
a510eaf
Add TruncatedText and ContentContainerWidth to Matching and Group for…
MartinEichinger Nov 1, 2024
432d92e
Merge branch 'main' into feat--add-read-more-button
MartinEichinger Nov 1, 2024
d9f11db
Merge branch 'main' into feat--add-read-more-button
MartinEichinger Nov 4, 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
10 changes: 7 additions & 3 deletions src/pages/pupil/Group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Text, Heading, useTheme, VStack, useBreakpointValue, Stack } from 'native-base';
import { Heading, useTheme, VStack, useBreakpointValue, Stack } from 'native-base';
import { useTranslation } from 'react-i18next';
import WithNavigation from '../../components/WithNavigation';
import NotificationAlert from '../../components/notifications/NotificationAlert';
Expand All @@ -16,6 +16,8 @@ import AllSubcourses from '../subcourse/AllSubcourses';
import { Course_Category_Enum } from '../../gql/graphql';
import SwitchLanguageButton from '../../components/SwitchLanguageButton';
import { Breadcrumb } from '@/components/Breadcrumb';
import TruncatedText from '@/components/TruncatedText';
import { Typography } from '@/components/Typography';

type Props = {};

Expand Down Expand Up @@ -247,9 +249,11 @@ const PupilGroup: React.FC<Props> = () => {
<VStack paddingX={space['1']} marginBottom={space['1']} marginX="auto" width="100%" maxWidth={ContainerWidth}>
<Breadcrumb />
<VStack space={space['1']}>
<VStack space={space['0.5']} maxWidth={ContentContainerWidth}>
<VStack space={space['0.5']} maxWidth={ContentContainerWidth} alignItems={'flex-start'} marginBottom={space['0.5']}>
<Heading>{t('matching.group.pupil.title')}</Heading>
<Text marginBottom={space['0.5']}>{t('matching.group.pupil.content')}</Text>
<TruncatedText asChild maxLines={2}>
<Typography>{t('matching.group.pupil.content')}</Typography>
</TruncatedText>
</VStack>

<VStack maxWidth={ContentContainerWidth} marginBottom={space['1']}>
Expand Down
31 changes: 19 additions & 12 deletions src/pages/pupil/Matching.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import DisableableButton from '../../components/DisablebleButton';
import { DEACTIVATE_PUPIL_MATCH_REQUESTS } from '../../config';
import ConfirmationModal from '@/modals/ConfirmationModal';
import { Breadcrumb } from '@/components/Breadcrumb';
import TruncatedText from '@/components/TruncatedText';
import { Typography } from '@/components/Typography';

type Props = {};

Expand Down Expand Up @@ -112,11 +114,6 @@ const Matching: React.FC<Props> = () => {
return data?.me?.pupil?.matches.filter((match) => match.dissolved === true);
}, [data?.me?.pupil?.matches]);

const ContainerWidth = useBreakpointValue({
base: '100%',
lg: sizes['containerWidth'],
});

const ContentContainerWidth = useBreakpointValue({
base: '100%',
lg: sizes['contentContainerWidth'],
Expand Down Expand Up @@ -148,15 +145,25 @@ const Matching: React.FC<Props> = () => {
</Stack>
}
>
<VStack space={space['0.5']} paddingX={space['1']} width="100%" maxWidth={ContainerWidth}>
<VStack
space={space['0.5']}
paddingX={space['1']}
width="100%"
maxWidth={ContentContainerWidth}
alignItems={'flex-start'}
paddingBottom={space['0.5']}
>
<Breadcrumb />
<Heading paddingBottom={space['0.5']}>{t('matching.request.check.title')}</Heading>
<Text maxWidth={ContentContainerWidth} paddingBottom={space['0.5']}>
{t('matching.blocker.firstContent')}{' '}
<Link style={{ color: colors.primary[900], textDecoration: 'underline' }} target="_blank" to="/hilfebereich">
{t('moreInfoButton')}
</Link>
</Text>
<TruncatedText asChild maxLines={2}>
<Typography>
{t('matching.blocker.firstContent')}
<br />
<Link style={{ color: colors.primary[900], textDecoration: 'underline' }} target="_blank" to="/hilfebereich">
{t('moreInfoButton')}
</Link>
</Typography>
</TruncatedText>
</VStack>
<NavigationTabs
tabs={[
Expand Down
3 changes: 2 additions & 1 deletion src/pages/student/MatchingStudent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ const MatchingStudent: React.FC<Props> = () => {
<VStack paddingX={space['1']} maxWidth={ContainerWidth} width="100%" marginX="auto">
<Breadcrumb />
<Heading paddingBottom={space['0.5']}>{t('matching.request.check.title')}</Heading>
<VStack space={space['0.5']} paddingBottom={space['0.5']} alignItems={'flex-start'}>
<VStack space={space['0.5']} paddingBottom={space['0.5']} alignItems={'flex-start'} maxWidth={ContentContainerWidth}>
<TruncatedText asChild maxLines={2}>
<Typography>{t('matching.request.check.content')}</Typography>
</TruncatedText>
Expand Down Expand Up @@ -199,6 +199,7 @@ const MatchingStudent: React.FC<Props> = () => {
state: { edit: true },
})
}
key={i}
/>
))) || <AlertMessage content={t('matching.request.check.noRequestsTutor')} />}
</Flex>
Expand Down
7 changes: 6 additions & 1 deletion src/pages/student/StudentGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,11 @@ const StudentGroup: React.FC = () => {
lg: sizes['containerWidth'],
});

const ContentContainerWidth = useBreakpointValue({
base: '100%',
lg: sizes['contentContainerWidth'],
});

const ButtonContainer = useBreakpointValue({
base: '100%',
lg: sizes['desktopbuttonWidth'],
Expand Down Expand Up @@ -203,7 +208,7 @@ const StudentGroup: React.FC = () => {

{!loading && (
<VStack space={space['1']}>
<VStack space={space['0.5']} alignItems={'flex-start'}>
<VStack space={space['0.5']} alignItems={'flex-start'} maxWidth={ContentContainerWidth}>
<Heading>{t('matching.group.helper.title')}</Heading>
<TruncatedText asChild maxLines={2}>
<Typography>{t('matching.group.helper.content')}</Typography>
Expand Down
Loading