fixed comparison page

UniversityOfHelsinkiCS · Oct 24, 2024 · 4551e8a · 4551e8a
1 parent 7dc8845
commit 4551e8a
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 41 deletions.
diff --git a/client/components/ComparisonPage/CompareByFaculty.js b/client/components/ComparisonPage/CompareByFaculty.js
@@ -77,15 +77,21 @@ const CompareByFaculty = ({ questionsList, usersProgrammes, allAnswers }) => {
     <div className="tab-pane">
       <Grid stackable doubling padded columns={isAdmin(user) ? 3 : 2}>
         <Grid.Row>
-          <Grid.Column width={16}>
-            <YearSelector size="small" />
+          <Grid.Column>
+            <YearSelector size="small" style={{ paddingBottom: '1em' }} />
+          </Grid.Column>
+          <Grid.Column>
             <FormFilter version="compareByFaculty" />
-            <LevelFilter comparison />
           </Grid.Column>
         </Grid.Row>
+        <Grid.Row>
+          <div style={{ paddingLeft: '1em' }}>
+            <LevelFilter comparison />
+          </div>
+        </Grid.Row>
         <Grid.Row className="row">
           <Grid.Column>
-            <div className="filter">
+            <div style={{ paddingTop: '2em' }}>
               <label>{t('comparison:chosenProgrammes')}</label>
               <Dropdown
                 fluid
@@ -100,13 +106,14 @@ const CompareByFaculty = ({ questionsList, usersProgrammes, allAnswers }) => {
             </div>
           </Grid.Column>
           <Grid.Column>
-            {filters.form !== formKeys.EVALUATION_FACULTIES && (
-              <FacultyFilter size="large" label={t('comparison:compareFaculties')} />
-            )}
-            <small>{t('comparison:noAccessToAll')}</small>
-            {faculty[0] !== 'allFaculties' && (level === 'doctoral' || level === 'master' || level === 'bachelor') && (
-              <CompanionFilter />
-            )}
+            <div className="filter">
+              {filters.form !== formKeys.EVALUATION_FACULTIES && (
+                <FacultyFilter size="large" label={t('comparison:compareFaculties')} />
+              )}
+              <small>{t('comparison:noAccessToAll')}</small>
+              {faculty[0] !== 'allFaculties' &&
+                (level === 'doctoral' || level === 'master' || level === 'bachelor') && <CompanionFilter />}
+            </div>
           </Grid.Column>
           <Grid.Column>
             <Radio

diff --git a/client/components/ComparisonPage/CompareByYear.js b/client/components/ComparisonPage/CompareByYear.js
@@ -147,16 +147,18 @@ const CompareByYear = ({
   if (!usersProgrammes || !allAnswers) return null
 
   return (
-    <div className="tab-pane">
+    <div>
+      <FilterTray filter={filter} setFilter={setFilter} />
       <Grid doubling columns={2} padded>
         <Grid.Row>
-          <Grid.Column width={10}>
-            <FilterTray filter={filter} setFilter={setFilter} />
+          <Grid.Column>
             <QuestionList label={t('comparison:selectQuestions')} questionsList={questionsList} onlyColoredQuestions />
             <LabelOptions unit={unit} setUnit={setUnit} />
           </Grid.Column>
-          <Grid.Column width={6}>
-            <ProgrammeList programmes={programmes} setPicked={setPicked} picked={picked} />
+          <Grid.Column>
+            <div style={{ paddingTop: '3em' }}>
+              <ProgrammeList programmes={programmes} setPicked={setPicked} picked={picked} />
+            </div>
           </Grid.Column>
         </Grid.Row>
         {data.length > 0 ? (

diff --git a/client/components/ComparisonPage/FilterTray.js b/client/components/ComparisonPage/FilterTray.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
+import { Menu } from 'semantic-ui-react'
 import { useTranslation } from 'react-i18next'
 
 import YearSelector from 'Components/Generic/YearSelector'
@@ -67,16 +68,22 @@ const FilterTray = ({ filter, setFilter }) => {
   }
   return (
     <>
-      <YearSelector multiple size="small" label={t('comparison:selectYears')} />
-      <FormFilter />
+      <Menu secondary>
+        <Menu.Item>
+          <YearSelector multiple size="small" label={t('comparison:selectYears')} />
+        </Menu.Item>
+        <Menu.Item>
+          <FormFilter comparison />
+        </Menu.Item>
+      </Menu>
       {usersProgrammes && (
-        <>
+        <div style={{ paddingLeft: '1em' }}>
           {getFacultyFilter({ form, t })}
           {getLevelFilter({ form })}
           {getCompanionFilter({ faculty, level })}
           {getDoctoralSchoolFilter({ faculty, level })}
           {getProgrammeFilter({ form, filter, t, handleSearch, setFilter })}
-        </>
+        </div>
       )}
     </>
   )

diff --git a/client/components/ComparisonPage/index.js b/client/components/ComparisonPage/index.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router'
 import { Link } from 'react-router-dom'
-import { Button, Icon, Grid, Tab } from 'semantic-ui-react'
+import { Button, Menu, Tab } from 'semantic-ui-react'
 import { useTranslation } from 'react-i18next'
 import NoPermissions from 'Components/Generic/NoPermissions'
 import { formKeys } from '@root/config/data'
@@ -195,15 +195,14 @@ export default () => {
   return (
     <div key={filters.form} className="comparison">
       <div className="info-header noprint" />
-      <Grid doubling columns={2} padded="vertically" className="comparison filter-container">
-        <Grid.Column width={10}>
-          <Button as={Link} to="/yearly" icon labelPosition="left" size="small" style={{ marginBottom: '3em' }}>
-            <Icon name="arrow left" />
-            {t('backToFrontPage')}
-          </Button>
+      <Menu secondary>
+        <Menu.Item>
+          <Button as={Link} to="/yearly" icon="arrow left" size="small" />
+        </Menu.Item>
+        <Menu.Item>
           <h1>{t('comparison:compare')}</h1>
-        </Grid.Column>
-      </Grid>
+        </Menu.Item>
+      </Menu>
       <Tab className="comparison tab" menu={{ secondary: true, pointing: true }} panes={panes} />
     </div>
   )

diff --git a/client/components/Generic/FormFilter.js b/client/components/Generic/FormFilter.js
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { setForm } from 'Utilities/redux/filterReducer'
 import './Generic.scss'
 
-const FormFilter = ({ version = null }) => {
+const FormFilter = ({ version = null, comparison = false }) => {
   const dispatch = useDispatch()
   const { t } = useTranslation()
   const [options, setOptions] = useState([
@@ -31,9 +31,26 @@ const FormFilter = ({ version = null }) => {
     dispatch(setForm(value))
   }
 
+  if (comparison)
+    return (
+      <div className="year-filter-small">
+        <label style={{ paddingRight: '1em' }}>{t('chooseForm')}</label>
+        <Select
+          className="button basic gray"
+          style={{ width: '280px' }}
+          data-cy="form-filter"
+          fluid
+          selection
+          options={options}
+          onChange={handleChange}
+          value={filterForm}
+        />
+      </div>
+    )
+
   return (
-    <div className="form-filter-small">
-      <label>{t('chooseForm')}</label>
+    <div className={filterForm !== 4 ? `form-filter-small` : `form-filter-small-${filterForm}`}>
+      <label style={{ paddingRight: '1em' }}>{t('chooseForm')}</label>
       <Select
         className="button basic gray"
         style={{ width: '280px' }}

diff --git a/client/components/Generic/Generic.scss b/client/components/Generic/Generic.scss
@@ -103,13 +103,12 @@
 }
 
 @mixin filter-basics {
-  // margin: 2em 0em 0.5em 0em;
-  //   > label {
-  //   font-size: 1.05em;
-  //   margin-bottom: 0.5em;
-     display: flex;
-     align-items: center;
-  // }
+  margin: 2em 0em 0.5em 0em;
+  > label {
+    font-size: 1.05em;
+    margin-bottom: 0.5em;
+    display: block;
+  }
 }
 
 @mixin filter-no-margin-top {
@@ -137,10 +136,12 @@
     width: 300px;
   }
   &-small {
-    @include filter-basics;
-    width: 300px;
+    display: flex;  
+    align-items: center;
   }
   &-large {
+    @include filter-basics;
+    width: 100%;
   }
 }