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

improved styling and layout on recruitmentapplicationformpage #1614

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

improved styling and layout on recruitmentapplicationformpage #1614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 7 additions & 1 deletion frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4em
padding: 4em;
}

.row {
Expand Down Expand Up @@ -71,3 +71,9 @@
.withdrawn_cext {
color: $red-samf;
}

.form_header {
display: flex;
align-items: center;
gap: 0.25rem;
}
12 changes: 8 additions & 4 deletions frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Icon } from '@iconify/react';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import { toast } from 'react-toastify';
import { Button, Link, Page, SamfundetLogoSpinner } from '~/Components';
import { Button, Link, Page, SamfundetLogoSpinner, ToolTip } from '~/Components';
import { Text } from '~/Components/Text/Text';
import { SamfForm } from '~/Forms/SamfForm';
import { SamfFormField } from '~/Forms/SamfFormField';
Expand Down Expand Up @@ -157,8 +158,6 @@ export function RecruitmentApplicationFormPage() {
</Link>
</h2>
<p className={styles.text}>{dbT(recruitmentPosition, 'long_description')}</p>
<h2 className={styles.sub_header}>{t(KEY.recruitment_applyfor)}</h2>
<p className={styles.text}>{t(KEY.recruitment_applyforhelp)}</p>
</div>
<div className={styles.other_positions}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Hadde vært nice om om div fra og med linje 162 til og med linje 187 rendrer under søknadsformet hvis man er på mobil. Altså, under "Send søkand" knappe.

Copy link
Contributor

@Snorre98 Snorre98 Nov 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Glemte å si det når jeg forklarte issuet muntlig. For å conditionaly rendre den nevnte diven kan du bruke useMobile hooken vår. Søk "isDesktop" eller "isMobile" i hele prosjekte, så finner du sikkert plasser hvor det er brukt.
Formålet er at man skal kunne skrive en søknad og trykke "Send søknad" uten å måtte scrolle på mobil.

<h2 className={styles.sub_header}>
Expand Down Expand Up @@ -207,7 +206,12 @@ export function RecruitmentApplicationFormPage() {
submitText={submitText}
Copy link
Contributor

Choose a reason for hiding this comment

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

Kan du erstatte Samf-form på denne siden med React hook form? Står ikke i issuet, men greit å gjøre siden det er så lite som skal gjøres her.

Copy link
Contributor

Choose a reason for hiding this comment

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

Blir veldig likt hvordan Simen har gjort det i denne PR-en: #1568

Men i din PR her skal det gjøres post/put request når søkeren trykker på knappen selvfølgelig.

devMode={false}
>
<h2 className={styles.label}>{t(KEY.recruitment_application)}:</h2>
<div className={styles.form_header}>
<h2 className={styles.label}>{t(KEY.recruitment_application)}</h2>
<ToolTip value={t(KEY.recruitment_applyforhelp)}>
<Icon icon="mingcute:question-fill" width="1.2em" height="1.2em" />
</ToolTip>
</div>
<SamfFormField field="application_text" type="text_long" />{' '}
</SamfForm>
) : (
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/i18n/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ export const nb = prepareTranslations({
[KEY.recruitment_gangmember]: 'Gjengmedlem',
[KEY.recruitment_applyfor]: 'Søk på dette vervet',
[KEY.recruitment_applyforhelp]:
'Klar til å søke? \n Skriv litt om deg selv, din motivasjon for å søke og dine kvalifikasjoner for vervet. Du trenger ikke legge inn full CV og referanser - en kort tekst er nok. Vi gleder oss til å høre fra deg! Etter at du er registrert som søker, kan du logge inn for å se status på dine søknader. Hvis du har søkt flere verv, må du også prioritere hvilket du ønsker mest. Du vil kun få tilbud om ett verv.',
'Klar til å søke? \n Skriv litt om deg selv, din motivasjon for å søke og dine kvalifikasjoner for vervet. Du trenger ikke legge inn full CV og referanser - en kort tekst er nok. Vi gleder oss til å høre fra deg!',
[KEY.recruitment_volunteerfor]: 'Verv som',
[KEY.recruitment_otherpositions]: 'Andre verv i',
[KEY.recruitment_visible_from]: 'Synlig fra',
Expand Down Expand Up @@ -770,7 +770,7 @@ export const en = prepareTranslations({
[KEY.recruitment_gangmember]: 'Gangmember',
[KEY.recruitment_applyfor]: 'Apply for this position',
[KEY.recruitment_applyforhelp]:
' Ready to apply? \nWrite a little bit about yourself, your motivation for applying and your qualifications for this job. You don’t have to send in a full CV or references from previous employers - a short text is enough. We look forward to hearing from you! When you have registered as an applicant, you can log in and check the status of your applications. If you apply for more than one job, you must prioritize which one you want the most. Note that you will only be offered one job.',
' Ready to apply? \nWrite a little bit about yourself, your motivation for applying and your qualifications for this job. You don’t have to send in a full CV or references from previous employers - a short text is enough. We look forward to hearing from you!',
[KEY.recruitment_volunteerfor]: 'Position as',
[KEY.recruitment_otherpositions]: 'Other positions in',
[KEY.recruitment_no_positions]: 'No positions',
Expand Down
Loading