387 - Mobil - buttony seminarov (#441)

* unrelated: fix wrap of SemesterPicker on resolution somewhere between 900-940 * add seminar buttons - variant 1 * add seminar buttons - variant 2 * fix menu close button position - right side on mobile * fix menu button shrinking * fix menu button shrinking + make SeminarButtons wrap * SemesterPicker - align right also on wrap
ZdruzenieSTROM · Nov 22, 2024 · 4bb9454 · 4bb9454
1 parent 6948155
commit 4bb9454
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 36 deletions.
diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -99,7 +99,11 @@ export const MenuMain: FC = () => {
         }}
       >
         <Box flexGrow={1}>
-          <CloseButton size={iconSize} onClick={toggleMenu} sx={{position: 'absolute', top: 24, left: 24}} />
+          <CloseButton
+            size={iconSize}
+            onClick={toggleMenu}
+            sx={{position: 'absolute', top: 24, left: {xs: undefined, md: 24}, right: {xs: 24, md: undefined}}}
+          />
           {menuItemsIsLoading && (
             <Box sx={{position: 'absolute', top: '50%', left: 0, right: 0, color: 'white'}}>
               <Loading />

diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -11,6 +11,37 @@ import {useSeminarInfo} from '@/utils/useSeminarInfo'
 import {Banner} from '../Banner/Banner'
 import {MenuMain} from '../MenuMain/MenuMain'
 
+type SeminarButtonsProps = {
+  seminar: string
+}
+const SeminarButtons: FC<SeminarButtonsProps> = ({seminar}) => {
+  return (
+    <Stack sx={{flexDirection: 'row', gap: 1, justifyContent: 'end', flexWrap: 'wrap'}}>
+      <Link
+        href="/malynar"
+        variant="seminarButton"
+        sx={seminar === 'malynar' ? {color: 'white', backgroundColor: 'black'} : {}}
+      >
+        Malynár
+      </Link>
+      <Link
+        variant="seminarButton"
+        href="/matik"
+        sx={seminar === 'matik' ? {color: 'white', backgroundColor: 'black'} : {}}
+      >
+        Matik
+      </Link>
+      <Link
+        variant="seminarButton"
+        href="/strom"
+        sx={seminar === 'strom' ? {color: 'white', backgroundColor: 'black'} : {}}
+      >
+        Strom
+      </Link>
+    </Stack>
+  )
+}
+
 export const TopGrid: FC = () => {
   const {seminar} = useSeminarInfo()
 
@@ -33,48 +64,30 @@ export const TopGrid: FC = () => {
     <Stack sx={{position: 'sticky', top: 0, width: '100%', backgroundColor: 'white', zIndex: 3}}>
       <Grid container disableEqualOverflow spacing={1} p={3}>
         {/* first row */}
-        <Grid xs={12} md={3}>
-          <Stack sx={{alignItems: {xs: 'end', md: 'start'}}}>
+        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}}>
+          <Stack sx={{alignItems: 'start'}}>
             <MenuMain />
           </Stack>
         </Grid>
-        <Grid xs={0} md={6} sx={{display: {xs: 'none', md: 'block'}}} />
-        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}}>
-          <Stack sx={{flexDirection: 'row', spacing: 2, justifyContent: 'flex-end'}}>
-            <Link
-              href="/malynar"
-              variant="button1"
-              sx={seminar === 'malynar' ? {color: 'white', backgroundColor: 'black'} : {}}
-            >
-              Malynár
-            </Link>
-            <Link
-              variant="button1"
-              href="/matik"
-              sx={seminar === 'matik' ? {color: 'white', backgroundColor: 'black'} : {}}
-            >
-              Matik
-            </Link>
-            <Link
-              variant="button1"
-              href="/strom"
-              sx={seminar === 'strom' ? {color: 'white', backgroundColor: 'black'} : {}}
-            >
-              Strom
-            </Link>
+        <Grid xs={0} md={9} sx={{display: {xs: 'none', md: 'block'}}}>
+          <SeminarButtons seminar={seminar} />
+        </Grid>
+        <Grid xs={12} md={0} sx={{display: {xs: 'block', md: 'none'}}}>
+          <Stack sx={{flexDirection: 'row', gap: 2, justifyContent: 'end'}}>
+            <SeminarButtons seminar={seminar} />
+            <Stack sx={{flexShrink: 0}}>
+              <MenuMain />
+            </Stack>
           </Stack>
         </Grid>
 
         {/* second row */}
-        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}} />
-        <Grid xs={12} md={6}>
+        <Grid xs={12} md={6} mdOffset={3}>
           <Typography variant="h1">{pageTitle}</Typography>
         </Grid>
         {semesterPickerPage && (
           <Grid xs={12} md={3}>
-            <Stack sx={{alignItems: 'flex-end'}}>
-              <SemesterPicker page={semesterPickerPage} />
-            </Stack>
+            <SemesterPicker page={semesterPickerPage} />
           </Grid>
         )}
       </Grid>

diff --git a/src/components/SemesterPicker/SemesterPicker.tsx b/src/components/SemesterPicker/SemesterPicker.tsx
@@ -74,12 +74,13 @@ export const SemesterPicker: FC<{page: 'zadania' | 'vysledky' | 'admin/opravovan
       sx={{
         flexDirection: 'row',
         alignItems: 'center',
-        columnGap: 2,
-        // wrap na nizsich rozliseniach
-        flexWrap: 'wrap',
-        rowGap: 1,
+        // wrap na velmi nizkych rozliseniach
+        flexWrap: 'wrap-reverse',
+        rowGap: 0.5,
         zIndex: 1000,
         userSelect: 'none',
+        // pre pouzitie v TopGrid + pri wrapnuti
+        justifyContent: 'end',
       }}
     >
       {page !== 'admin/opravovanie' && <Dropdown title={'Séria'} options={dropdownSeriesList} />}

diff --git a/src/theme.ts b/src/theme.ts
@@ -8,6 +8,7 @@ declare module '@mui/material/styles' {
     button1: React.CSSProperties
     button2: React.CSSProperties
     button3: React.CSSProperties
+    seminarButton: React.CSSProperties
     postTitle: React.CSSProperties
     postBody: React.CSSProperties
     postDate: React.CSSProperties
@@ -19,6 +20,7 @@ declare module '@mui/material/styles' {
     button1?: React.CSSProperties
     button2?: React.CSSProperties
     button3?: React.CSSProperties
+    seminarButton?: React.CSSProperties
     postTitle?: React.CSSProperties
     postBody?: React.CSSProperties
     postDate?: React.CSSProperties
@@ -32,6 +34,7 @@ declare module '@mui/material/Typography' {
     button1: true
     button2: true
     button3: true
+    seminarButton: true
     postTitle: true
     postBody: true
     postDate: true
@@ -124,6 +127,12 @@ const _theme = createTheme({
       fontWeight: 800,
       fontStyle: 'italic',
     },
+    seminarButton: {
+      ...font.style,
+      textTransform: 'uppercase',
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
     postTitle: {
       ...font.style,
       fontWeight: 800,
@@ -148,6 +157,7 @@ const _theme = createTheme({
           button1: 'span',
           button2: 'span',
           button3: 'span',
+          seminarButton: 'span',
           postTitle: 'h1',
           postBody: 'span',
           postDate: 'span',
@@ -285,6 +295,16 @@ export const theme: Theme = {
       [xl]: {fontSize: pxToRem(14)},
       lineHeight: 1.5,
     },
+    seminarButton: {
+      ..._theme.typography.seminarButton,
+      // original Figma fontSize: 30px, mobile non-existent
+      fontSize: pxToRem(14),
+      [sm]: {fontSize: pxToRem(16)},
+      [md]: {fontSize: pxToRem(18)},
+      [lg]: {fontSize: pxToRem(22)},
+      [xl]: {fontSize: pxToRem(30)},
+      lineHeight: 1.5,
+    },
     postTitle: {
       ..._theme.typography.postTitle,
       // original Figma fontSize: 36px