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

Merge branch... 

Merge branch '681-make-sure-to-fit-the-exercise-name-in-the-exercises-table-in-exercise-panel' into 'main'

Resolve "Make sure to fit the exercise name in the exercises table in exercise panel"

Closes #681

See merge request inject/frontend!609
parents 298e9c16 80e2a5bd

frontend/src/components/DefinitionList/DefinitionButtons.tsx

+5 −0
Original line number Diff line number Diff line
@@ -13,6 +13,11 @@ const buttonGroup = css` 
    /* appear under the table head */

    z-index: 0 !important;

  }

  display: grid;

  height: max-content;

  place-items: center;

  grid-template-columns: repeat(5, auto);

  width: fit-content;

`



interface DefinitionButtonsProps {

frontend/src/components/ExerciseList/index.tsx

+4 −4
Original line number Diff line number Diff line
@@ -75,14 +75,14 @@ const ExerciseList: FC<ExerciseListProps> = ({ 
      {

        id: 'name',

        name: 'Name',

        style: { textAlign: 'left' },

        style: { textAlign: 'left', width: '100%' },

        renderValue: exercise => exercise.name,

        className: verticallyCentered,

      },

      {

        id: 'definition',

        name: 'Definition',

        style: { textAlign: 'left' },

        style: { textAlign: 'left', width: '50%' },

        renderValue: exercise =>

          exercise.definition?.name || exercise.definition?.id,

        className: verticallyCentered,
@@ -112,7 +112,7 @@ const ExerciseList: FC<ExerciseListProps> = ({ 
      {

        id: 'finished',

        name: 'Finished',

        style: { textAlign: 'center', width: '10ch' },

        style: { textAlign: 'right', width: '10ch' },

        renderValue: exercise => <TickOrCross value={exercise.finished} />,

        className: cx(verticallyCentered, hideOnSmallScreen),

      },
@@ -120,8 +120,8 @@ const ExerciseList: FC<ExerciseListProps> = ({ 
        id: 'actions',

        name: 'Actions',

        style: {

          width: type === 'managing' ? '20ch' : '14ch',

          textAlign: 'right',

          width: type === 'selecting' ? '14ch' : '20ch',

        },

        renderValue: exercise => (

          <ExerciseButtons

frontend/src/pages/(navbar)/exercise-panel/_layout.tsx

+1 −1
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ const Layout = () => { 
  useSetPageTitle('Exercise Panel')



  return (

    <Container className={flexedPage}>

    <Container className={flexedPage} maxWidth={75}>

      <Outlet />

    </Container>

  )

shared/components/Container/index.tsx

+6 −5
Original line number Diff line number Diff line 
import { css, cx } from '@emotion/css'

import { forwardRef, type CSSProperties, type PropsWithChildren } from 'react'



const divContainer = css`

const divContainer = (maxWidth: number) => css`

  width: 100%;

  margin: 0 auto;

  max-width: 60rem;

  max-width: ${maxWidth}rem;



  @media (max-width: 60rem) {

  @media (max-width: ${maxWidth}rem) {

    padding-left: 1rem;

    padding-right: 1rem;

  }
@@ -18,13 +18,14 @@ interface ContainerProps extends PropsWithChildren { 
  style?: CSSProperties

  className?: string

  id?: string

  maxWidth?: number

}



export const Container = forwardRef<HTMLDivElement, ContainerProps>(

  function Container({ children, style, className, id }, ref) {

  function Container({ children, style, className, id, maxWidth = 60 }, ref) {

    return (

      <div

        className={cx(divContainer, className)}

        className={cx(divContainer(maxWidth), className)}

        style={style}

        ref={ref}

        id={id}