diff --git a/frontend/src/AppRoutes.tsx b/frontend/src/AppRoutes.tsx index 2a735f5ff..f94ddb898 100644 --- a/frontend/src/AppRoutes.tsx +++ b/frontend/src/AppRoutes.tsx @@ -12,7 +12,8 @@ import { InformationListPage, InformationPage, LoginPage, - LychePage, + LycheAboutPage, + LycheHomePage, NotFoundPage, RecruitmentAdmissionFormPage, RecruitmentPage, @@ -217,7 +218,8 @@ export function AppRoutes() { SULTEN ROUTES */} }> - } /> + } /> + } /> {/* 404 NOT FOUND diff --git a/frontend/src/Components/Page/Page.module.scss b/frontend/src/Components/Page/Page.module.scss index b5d469626..9308cf45f 100644 --- a/frontend/src/Components/Page/Page.module.scss +++ b/frontend/src/Components/Page/Page.module.scss @@ -22,4 +22,3 @@ $side-padding: 1em; width: calc(100% - $side-padding * 2); } } - diff --git a/frontend/src/Components/SultenCard/SultenCard.module.scss b/frontend/src/Components/SultenCard/SultenCard.module.scss index f08966a28..698bff457 100644 --- a/frontend/src/Components/SultenCard/SultenCard.module.scss +++ b/frontend/src/Components/SultenCard/SultenCard.module.scss @@ -3,42 +3,70 @@ @import 'src/mixins'; .container { - display: flex; + @include flex-row; background-color: $black; + border-radius: 0.5em; + gap: 1em; + padding: 1.5em; @include for-mobile-down { - flex-direction: column; - justify-content: center; - align-items: center; - gap: 1em; + @include flex-column; padding-bottom: 2em; } } +.smallcard_container { + @include flex-row-center; + background-color: $black; + border-radius: 0.5em; + gap: 1em; + padding: 1.5em; + @include for-mobile-down { + @include flex-column; + } +} + .card_image { height: 30em; object-position: top; + object-fit: cover; width: 50%; + flex: 1; display: inline-block; border-radius: 0.5em; + + @include for-mobile-down { + width: 100%; + display: block; + max-height: 15em; + } +} + +.smallcard_image { + height: 15em; + width: 25%; + max-width: 15em; + display: inline-block; + flex: 1; + border-radius: 0.5em; + object-position: top; object-fit: cover; + @include for-mobile-down { width: 100%; + max-height: 5em; display: block; + object-position: center; } } .text_container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + @include flex-column-center; + flex: 1; text-align: center; - gap: 1em; - width: 50%; - padding: 0 4rem; + max-width: 30vw; + @include for-mobile-down { - width: 100%; - padding: 0 1rem; + max-width: 80vw; } } @@ -54,4 +82,5 @@ .card_button { width: fit-content; + margin: 1.5em; } diff --git a/frontend/src/Components/SultenCard/SultenCard.stories.tsx b/frontend/src/Components/SultenCard/SultenCard.stories.tsx index a4cacf1f5..10ee59654 100644 --- a/frontend/src/Components/SultenCard/SultenCard.stories.tsx +++ b/frontend/src/Components/SultenCard/SultenCard.stories.tsx @@ -16,4 +16,10 @@ const Template: ComponentStory = function (args) { }; export const Basic = Template.bind({}); -Basic.args = { image: front_lyche, header: 'Sulten', text: 'Sulten er en god ting', buttonText: 'Trykk her' }; +Basic.args = { + image: front_lyche, + header: 'Sulten', + text: 'Sulten er en god ting', + buttonText: 'Trykk her', + smallCard: false, +}; diff --git a/frontend/src/Components/SultenCard/SultenCard.tsx b/frontend/src/Components/SultenCard/SultenCard.tsx index a96a61c03..e2436943a 100644 --- a/frontend/src/Components/SultenCard/SultenCard.tsx +++ b/frontend/src/Components/SultenCard/SultenCard.tsx @@ -9,8 +9,12 @@ type SultenCardProps = { text?: string; buttonText?: string; imageAlignment?: 'left' | 'right'; + + leftAlignImg?: boolean; + onButtonClick?: () => void; link?: string; + smallCard?: boolean; }; export function SultenCard({ @@ -22,18 +26,19 @@ export function SultenCard({ onButtonClick, link, imageAlignment = 'left', + smallCard = false, }: SultenCardProps) { const alignImageLeft = imageAlignment === 'left'; const isMobile = useMobile(); // position image to the left, or top if mobile const leftAlignedImage = (alignImageLeft || isMobile) && ( - {imageAlt} + {imageAlt} ); // position image to the right, not at the bottom if mobile const rightAlignedImage = !alignImageLeft && !isMobile && ( - {imageAlt} + {imageAlt} ); const cardButton = buttonText && ( @@ -43,7 +48,7 @@ export function SultenCard({ ); return ( -
+
{leftAlignedImage}

{header}

diff --git a/frontend/src/Components/SultenNavbar/SultenNavbar.module.scss b/frontend/src/Components/SultenNavbar/SultenNavbar.module.scss index 645b27c5b..db0adf65c 100644 --- a/frontend/src/Components/SultenNavbar/SultenNavbar.module.scss +++ b/frontend/src/Components/SultenNavbar/SultenNavbar.module.scss @@ -3,7 +3,6 @@ @import 'src/constants'; $navbar-bg: #000000; -$navbar-height: 100px; .parent_container { display: flex; @@ -66,7 +65,7 @@ $navbar-height: 100px; background-size: contain; background-repeat: no-repeat; background-position: center; - height: $navbar-height; + height: $sulten-navbar-height; margin-top: 0.6em; transition: 0.5s; cursor: pointer; diff --git a/frontend/src/Pages/LycheAboutPage/LycheAboutPage.module.scss b/frontend/src/Pages/LycheAboutPage/LycheAboutPage.module.scss new file mode 100644 index 000000000..83b93e318 --- /dev/null +++ b/frontend/src/Pages/LycheAboutPage/LycheAboutPage.module.scss @@ -0,0 +1,18 @@ +@import 'src/mixins'; + +@import 'src/constants'; + +.container { + width: 100%; + height: 100%; + margin: $sulten-navbar-height/4 0 $sulten-navbar-height/4 0; //this looked the best + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 10; + @include flex-column-center; + @include for-mobile-down { + margin-top: $sulten-navbar-height; + } +} diff --git a/frontend/src/Pages/LycheAboutPage/LycheAboutPage.tsx b/frontend/src/Pages/LycheAboutPage/LycheAboutPage.tsx new file mode 100644 index 000000000..214f0757f --- /dev/null +++ b/frontend/src/Pages/LycheAboutPage/LycheAboutPage.tsx @@ -0,0 +1,55 @@ +import { useTranslation } from 'react-i18next'; +import { SultenPage } from '~/Components/SultenPage'; +import { useTextItem } from '~/hooks'; +import { KEY } from '~/i18n/constants'; +import styles from './LycheAboutPage.module.scss'; +import { TextItem } from '~/constants'; +import { SultenCard } from '~/Components'; +import { burger, soup, dessert } from '~/assets'; + +export function LycheAboutPage() { + const { t } = useTranslation(); + + const aboutCardWhatIsLyche = ( + + ); + const aboutCardLycheGoal = ( + + ); + const aboutCardLycheAboutMenu = ( + + ); + + return ( + <> + +
+ {aboutCardWhatIsLyche} + {aboutCardLycheGoal} + {aboutCardLycheAboutMenu} +
+
+ + ); +} diff --git a/frontend/src/Pages/LycheAboutPage/index.ts b/frontend/src/Pages/LycheAboutPage/index.ts new file mode 100644 index 000000000..b91ba6b30 --- /dev/null +++ b/frontend/src/Pages/LycheAboutPage/index.ts @@ -0,0 +1 @@ +export { LycheAboutPage } from './LycheAboutPage'; diff --git a/frontend/src/Pages/LychePage/LychePage.module.scss b/frontend/src/Pages/LycheHomePage/LycheHomePage.module.scss similarity index 100% rename from frontend/src/Pages/LychePage/LychePage.module.scss rename to frontend/src/Pages/LycheHomePage/LycheHomePage.module.scss diff --git a/frontend/src/Pages/LychePage/LychePage.tsx b/frontend/src/Pages/LycheHomePage/LycheHomePage.tsx similarity index 98% rename from frontend/src/Pages/LychePage/LychePage.tsx rename to frontend/src/Pages/LycheHomePage/LycheHomePage.tsx index 5d40bec82..ea703f935 100644 --- a/frontend/src/Pages/LychePage/LychePage.tsx +++ b/frontend/src/Pages/LycheHomePage/LycheHomePage.tsx @@ -10,10 +10,10 @@ import { VenueDto } from '~/dto'; import { useTextItem } from '~/hooks'; import { KEY } from '~/i18n/constants'; import { ROUTES } from '~/routes'; -import styles from './LychePage.module.scss'; +import styles from './LycheHomePage.module.scss'; import { getIsConsistentWeekdayOpeningHours, getIsConsistentWeekendHours } from './utils'; -export function LychePage() { +export function LycheHomePage() { const [lycheVenue, setLycheVenue] = useState(); const { t } = useTranslation(); const [isConsistentWeekdayHours, setIsConsistentWeekdayHours] = useState(false); diff --git a/frontend/src/Pages/LycheHomePage/index.ts b/frontend/src/Pages/LycheHomePage/index.ts new file mode 100644 index 000000000..8ad195285 --- /dev/null +++ b/frontend/src/Pages/LycheHomePage/index.ts @@ -0,0 +1 @@ +export { LycheHomePage } from './LycheHomePage'; diff --git a/frontend/src/Pages/LychePage/utils.ts b/frontend/src/Pages/LycheHomePage/utils.ts similarity index 100% rename from frontend/src/Pages/LychePage/utils.ts rename to frontend/src/Pages/LycheHomePage/utils.ts diff --git a/frontend/src/Pages/LychePage/index.ts b/frontend/src/Pages/LychePage/index.ts deleted file mode 100644 index 883a84dde..000000000 --- a/frontend/src/Pages/LychePage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { LychePage } from './LychePage'; diff --git a/frontend/src/Pages/index.ts b/frontend/src/Pages/index.ts index 0be139c90..00ad8fb77 100644 --- a/frontend/src/Pages/index.ts +++ b/frontend/src/Pages/index.ts @@ -10,7 +10,8 @@ export { HomePage } from './HomePage'; export { InformationListPage } from './InformationListPage'; export { InformationPage } from './InformationPage'; export { LoginPage } from './LoginPage'; -export { LychePage } from './LychePage'; +export { LycheAboutPage } from './LycheAboutPage'; +export { LycheHomePage } from './LycheHomePage'; export { NotFoundPage } from './NotFoundPage'; export { RecruitmentAdmissionFormPage } from './RecruitmentAdmissionFormPage'; export { RecruitmentPage } from './RecruitmentPage'; diff --git a/frontend/src/_constants.scss b/frontend/src/_constants.scss index 49c355d89..2f7e89dfb 100644 --- a/frontend/src/_constants.scss +++ b/frontend/src/_constants.scss @@ -64,6 +64,7 @@ $content-padding: calc((100vw - 1200px) / 2); // Navbar size $navbar-height: 60px; +$sulten-navbar-height: 100px; // Content size $primary-content-wide-padding: 2.5rem; diff --git a/frontend/src/_mixins.scss b/frontend/src/_mixins.scss index d2365d70b..6b5b443b3 100644 --- a/frontend/src/_mixins.scss +++ b/frontend/src/_mixins.scss @@ -172,3 +172,15 @@ Usage: @mixin shadow-light { box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.05); } + +@mixin flex-column { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} + +@mixin flex-column-center { + @include flex-column; + justify-content: center; +} diff --git a/frontend/src/assets/diggf4353.jpg b/frontend/src/assets/diggf4353.jpg new file mode 100644 index 000000000..947a3f018 Binary files /dev/null and b/frontend/src/assets/diggf4353.jpg differ diff --git a/frontend/src/assets/diggf5675.jpg b/frontend/src/assets/diggf5675.jpg new file mode 100644 index 000000000..6e2953b24 Binary files /dev/null and b/frontend/src/assets/diggf5675.jpg differ diff --git a/frontend/src/assets/diggf5743.jpg b/frontend/src/assets/diggf5743.jpg new file mode 100644 index 000000000..e6e4e4943 Binary files /dev/null and b/frontend/src/assets/diggf5743.jpg differ diff --git a/frontend/src/assets/index.ts b/frontend/src/assets/index.ts index 9f690cb97..0785e74eb 100644 --- a/frontend/src/assets/index.ts +++ b/frontend/src/assets/index.ts @@ -14,6 +14,9 @@ export { default as sulten_chef } from './sulten_chef.jpg'; export { default as sulten_crowded } from './sulten_crowded.jpg'; export { default as sulten_delivery } from './sulten_delivery.jpg'; export { default as sulten_inside } from './sulten_inside.jpg'; +export { default as soup } from './diggf5675.jpg'; +export { default as burger } from './diggf4353.jpg'; +export { default as dessert } from './diggf5743.jpg'; export { default as profileIcon } from './user.png'; // Medias diff --git a/frontend/src/constants/TextItems.ts b/frontend/src/constants/TextItems.ts index 55eb18d82..e50af7f18 100644 --- a/frontend/src/constants/TextItems.ts +++ b/frontend/src/constants/TextItems.ts @@ -13,4 +13,8 @@ export const TextItem = { sulten_menu_text: 'sulten_menu_text', sulten_about_us_text: 'sulten_about_us_text', sulten_contact_text: 'sulten_contact_text', + sulten_about_page_text: 'sulten_about_page_text', + sulten_what_is_lyche_text: 'sulten_what_is_lyche_text', + sulten_lyche_goal_text: 'sulten_lyche_goal_text', + sulten_lyche_about_menu_text: 'sulten_lyche_about_menu_text', } as const; diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts index cc47af356..7c29dc67c 100644 --- a/frontend/src/i18n/constants.ts +++ b/frontend/src/i18n/constants.ts @@ -142,9 +142,12 @@ export const KEY = { navbar_nybygg: 'navbar_nybygg', // Sulten / Lyche: + sulten_lyche_goal: 'sulten_lyche_goal', + sulten_what_is_lyche: 'sulten_what_is_lyche', sulten_page_see_menu: 'sulten_page_see_menu', sulten_page_about_us: 'sulten_page_about_us', sulten_page_book_table: 'sulten_page_book_table', + sulten_lyche_about_menu: 'sulten_lyche_about_menu', sulten_page_more_about_us: 'sulten_page_more_about_us', // Recruitment: diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts index 6c05d106e..bdc1c0839 100644 --- a/frontend/src/i18n/translations.ts +++ b/frontend/src/i18n/translations.ts @@ -208,12 +208,15 @@ export const nb: Record = { [KEY.form_confirm]: 'Er du sikker på at du vil', [KEY.we_use_cookies]: 'Vi bruker cookies for å gi deg en best mulig opplevelse på Samfundet.no. Les mer om cookies', [KEY.control_panel_faq]: 'Hjelp/spørsmål', + [KEY.sulten_lyche_goal]: 'Lyches mål', [KEY.control_panel_title]: 'Kontrollpanel', + [KEY.sulten_what_is_lyche]: 'Hva er Lyche?', [KEY.sulten_page_see_menu]: 'Se meny', [KEY.sulten_page_about_us]: 'Om Lyche', [KEY.information_page_short]: 'Side', [KEY.sulten_page_book_table]: 'Bestill bord', [KEY.inputfile_choose_a_file]: 'Velg en fil...', + [KEY.sulten_lyche_about_menu]: 'Om menyen', [KEY.sulten_page_more_about_us]: 'Mer om oss', [KEY.inputfile_no_file_selected]: 'Ingen fil er valgt', [KEY.notfoundpage_contact_prompt]: 'Hvis du tror dette er en feil, vennligst', @@ -421,9 +424,12 @@ export const en: Record = { [KEY.command_menu_shortcut_about_samfundet]: 'About Samfundet', // Sulten / Lyche: + [KEY.sulten_lyche_goal]: 'Lyches goal', + [KEY.sulten_what_is_lyche]: 'What is Lyche?', [KEY.sulten_page_see_menu]: 'See our menu', [KEY.sulten_page_about_us]: 'About Lyche', [KEY.sulten_page_book_table]: 'Book table', + [KEY.sulten_lyche_about_menu]: 'About the menu', [KEY.sulten_page_more_about_us]: 'More about us', // No category: