Commit cb9c8455 authored by Marek Veselý's avatar Marek Veselý
Browse files

Merge branch '1021-make-sure-the-title-screen-fits-on-the-page' into 'main' 

Title screen viewpoint

Closes #1021

See merge request inject/frontend!878
parents 6fca9851 d0162cb4

frontend/src/routes/_protected/_navbar/staff.tsx

+31 −10
Original line number Diff line number Diff line
@@ -15,7 +15,6 @@ import { UsersRoute } from './users' 


const buttonClass = css`

  display: flex;

  aspect-ratio: 1/1;

  height: 100%;

  flex-direction: column;

  align-items: center;
@@ -32,6 +31,34 @@ const buttonClass = css` 
  }

`



const pageClass = css`

  // height is calc(100vh - navbar height)

  height: calc(100vh - 5rem);

  display: flex;

  flex-direction: column;

  gap: 1rem;

`



const titleClass = css`

  margin: 0;

  margin-top: 0.5rem;

  height: 3rem;

  display: flex;

  align-items: center;

`



const gridClass = css`

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.5rem;

  grid-auto-rows: 1fr;

  // height is min of available viewport height and width based on 3:2 ratio

  height: min(

    calc(100vh - 9rem),

    calc((min(100vw - 2rem, 60rem) - 1rem) * 2 / 3)

  );

`



interface NavItem {

  icon: IconName

  heading: string
@@ -126,7 +153,7 @@ const RouteComponent = () => { 
  ]



  return (

    <Container>

    <Container className={pageClass}>

      <RightNavbar>

        <LinkButton

          link={{ to: ExercisePanelRoute.to }}
@@ -145,14 +172,8 @@ const RouteComponent = () => { 
          }}

        />

      </RightNavbar>

      <h1>{t('homePage.title')}</h1>

      <div

        className={css`

          display: grid;

          grid-template-columns: repeat(3, 1fr);

          gap: 0.5rem;

        `}

      >

      <h1 className={titleClass}>{t('homePage.title')}</h1>

      <div className={gridClass}>

        {navItems.map(navItem => (

          <LinkButton

            key={navItem.link.to}