diff --git a/public/img/FilterMenus.PNG b/public/img/FilterMenus.PNG new file mode 100644 index 0000000000000000000000000000000000000000..0a83d71b99cd8f58352dd588523d5d60ddc89aed Binary files /dev/null and b/public/img/FilterMenus.PNG differ diff --git a/public/img/FilterOptions.PNG b/public/img/FilterOptions.PNG new file mode 100644 index 0000000000000000000000000000000000000000..61d33e661bb28ef457094f7f301d2ba68e85f6c8 Binary files /dev/null and b/public/img/FilterOptions.PNG differ diff --git a/public/img/SortMenu.PNG b/public/img/SortMenu.PNG new file mode 100644 index 0000000000000000000000000000000000000000..8b7c8cb3b47f22ae10656bcacd80c6ebea3f7ade Binary files /dev/null and b/public/img/SortMenu.PNG differ diff --git a/public/styles.css b/public/styles.css index 2c5b51d2161ff7b54a9eb3aa4bc2e364f7f646f0..ecd2241d06a5f7e0519bd1d8d10418ee219e3046 100644 --- a/public/styles.css +++ b/public/styles.css @@ -29,6 +29,12 @@ body { font-weight: 500; color: #000000; } +.heading-tertiary { + font-size: 2.5rem; + font-family: "Baloo Paaji 2", cursive; + font-weight: 500; + color: #000000; } + .heading-third { font-family: "Baloo Paaji 2", cursive; font-size: 3.2rem; @@ -306,3 +312,43 @@ body { .test { height: 0; overflow: hidden; } + +.container-instructions { + display: grid; + grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 16rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end]; + grid-template-rows: 7.5rem 50vh min-content min-content min-content; } + +.section-instructions { + font-family: "Baloo Paaji 2", cursive; + font-weight: 500; + padding: 8rem 12rem; + position: relative; + justify-content: center; + display: flex; + grid-column: center-start / center-end; } + .section-instructions__boxes { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + grid-column-gap: 12rem; + grid-row-gap: 8rem; + margin-bottom: 10rem; } + .section-instructions__btn-box { + display: flex; + justify-content: center; } + +.FilterInstructionBox { + padding-bottom: 1rem; + height: 25rem; } + +.instructionHeader { + padding-bottom: 0.1rem !important; } + +.section-instructions ul { + margin-left: 6rem; } + +.section-instructions ol { + margin-left: 2rem; } + +.GuideImage { + width: 30rem; + float: right; } diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss index f8a4afde89998ccf47ab47d7c890d34331668016..0f6053070f12ce2c66ac12afc75cb3dedda7ca5e 100644 --- a/sass/base/_typography.scss +++ b/sass/base/_typography.scss @@ -18,6 +18,12 @@ body { color: $color-black; } +.heading-tertiary { + font-size: 2.5rem; + font-family: $font-secondary; + font-weight: 500; + color: $color-black; +} .heading-third { font-family: $font-secondary; font-size: 3.2rem; diff --git a/sass/main.scss b/sass/main.scss index 0bd595d2bf075dd73ba627d38a2a8aa73db04c7b..3dcfa79fef8824d53b65b229c385ad2ad0ad7e7d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -14,4 +14,5 @@ @import "layouts/navigation"; @import "pages/home"; -@import "pages/assignments"; \ No newline at end of file +@import "pages/assignments"; +@import "pages/instructions"; \ No newline at end of file diff --git a/src/components/App.js b/src/components/App.js index b7ce8c0f9b52c850e5c357420a96bb4dfa61846e..a3f9e0d3b7086767b3d858e79fa165fe41b21063 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -3,6 +3,7 @@ import { Router, Route } from 'react-router-dom'; import Home from './Home'; import Assignments from './Assignments'; +import Instructions from './Instructions'; import history from '../history'; const App = () => { @@ -11,6 +12,7 @@ const App = () => { <Router history={history}> <Route path="/" exact component={Home} /> <Route path="/assignments" exact component={Assignments} /> + <Route path="/instructions" exact component={Instructions} /> </Router> </div> ); diff --git a/src/components/Instructions/filterInstructions.js b/src/components/Instructions/filterInstructions.js new file mode 100644 index 0000000000000000000000000000000000000000..74b7909d715b8b6f61c9a232b82580264e67a14f --- /dev/null +++ b/src/components/Instructions/filterInstructions.js @@ -0,0 +1,36 @@ +import React, { Component } from 'react'; +import { withNamespaces } from 'react-i18next'; + + +class FilterInstructions extends Component { + render() { + const { t } = this.props; + + return ( + <div> + <h2 className="section-instructions heading-secondary instructionHeader ">{t('Lajittelu ja filtteröinti')}</h2> + <section className="section-instructions FilterInstructionBox" > + <div className="section-instructions__boxes"> + <div > + <img src='./img/SortMenu.PNG' className="GuideImage" alt="What the sort options look like"/> + </div> + <div> + <h3 className="heading-tertiary instructionHeader">{t('Lajittelu')}</h3> + <p className="introduction-text">{t("Voit järjestää toimeksianotha valitsemalla 'Järjestä tulokset' -valiksota haluamasi järjestys")}</p> + </div> + </div> + </section> + <section className="section-instructions"> + <div className="section-instructions__boxes"> + <div > + <img src='./img/FilterOptions.PNG' className="GuideImage" alt="Different filter options"/> + </div> + <div> + <h3 className="heading-tertiary instructionHeader">{t('Filtteröinti')}</h3> + <p className="introduction-text">{t("Voit filtteröidä toimeksiantoja mm.alan ja tiimiroolin mukaan, jolloin saat juuri sinulle sopivia/sinua kiinnostavia toimeksiantoja!")}</p> + </div> + </div> + </section> + </div> + )}} +export default withNamespaces()(FilterInstructions); \ No newline at end of file diff --git a/src/components/Instructions/index.js b/src/components/Instructions/index.js new file mode 100644 index 0000000000000000000000000000000000000000..1baa9624edbd442f7e1aa0d36721ed2adc7f0faa --- /dev/null +++ b/src/components/Instructions/index.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; +import { Helmet } from 'react-helmet'; +import { withNamespaces } from 'react-i18next'; + +import Navbar from '../Navbar'; +import Header from '../Header'; +import InstructionsContent from './instructionsContent'; +import Footer from '../Footer'; +import FilterInstructions from './filterInstructions'; + +class Instructions extends Component { + render() { + const { t } = this.props; + return ( + <div> + <Helmet>FF Marketplace - Instructions</Helmet> + <div className="container-instructions"> + <Navbar /> + <Header /> + <InstructionsContent /> + </div> + <FilterInstructions /> + <Footer /> + </div> + ) + } +} +export default withNamespaces()(Instructions); \ No newline at end of file diff --git a/src/components/Instructions/instructionsContent.js b/src/components/Instructions/instructionsContent.js new file mode 100644 index 0000000000000000000000000000000000000000..9bb0769f6b234617368f02cf619a296e43c9c18c --- /dev/null +++ b/src/components/Instructions/instructionsContent.js @@ -0,0 +1,33 @@ +import React, { Component } from 'react'; +import { withNamespaces } from 'react-i18next'; + + +class InstructionsContent extends Component { + render() { + const { t } = this.props; + return ( + <section className="section-instructions"> + <div> + <h3 className="heading-tertiary">{t('Kuinka palvelua käytetään')}:</h3> + <ol> + <li className="introduction-text">{t('Siirry selaamaan toimeksiantoja')}</li> + <li className="introduction-text">{t('Lajittele ja filtteröi toimeksiantoja kiinostuksesi ja osaamisesi mukaan')}</li> + <li className="introduction-text">{t('Näet toimeksiantotuloksia, jotka sopisivat sinulle parhaiten!')}</li> + <li className="introduction-text">{t('Toimeksiannoista näet seuraavat tiedot')}:</li> + <ul> + <li className="introduction-text">{t('Toimeksiannon nimi')}</li> + <li className="introduction-text">{t('Kuvaus')}</li> + <li className="introduction-text">{t('Rooleja/Ominaisuuksia, joita haetaan tiimiin')}</li> + </ul> + <li className="introduction-text">{t('Kiinnitä itsesi haluamaasi toimeksiannon rooliin painamalla "Valitsen paikan"')}</li> + <li className="introduction-text">{t('Kirjaudu sisään opiskelijatunnuksellasi. kirjauduttuasi olet vahvistanut paikan itsellesi')}</li> + <li className="introduction-text">{t('Saat vahvistusviestin koulun sähköpostiisi valinnastasi.')}</li> + <li className="introduction-text">{t('Odota, että tiimi täyttyy')}</li> + <li className="introduction-text">{t('Kun tiimi on täynnä, saat siitä ilmoituksen sähköpostiisi.')}</li> + </ol> + </div> + </section> + ) + } +} +export default withNamespaces() ( InstructionsContent); \ No newline at end of file diff --git a/src/translations/en/translation.json b/src/translations/en/translation.json index 33ef725f0be8c77841bb391bb6ad10da104aefe9..549a8d788263ccdf375b39f1f0400d1a99e71024 100644 --- a/src/translations/en/translation.json +++ b/src/translations/en/translation.json @@ -5,13 +5,33 @@ "Ota yhteyttä": "Contact us", "Mikä on Future Factory?": "What is Future Factory?", - "Jamk Future Factory on kansainvälisesti tunnustettu opintojakso, joka kerää vuosittain tuhansia opiskelijoita kehittämään omia projektityöskentelyn taitojaan!": "Englanniksi", - "Lue lisää Future Factorysta": "Englanniksi", - "Tietoa FF Marketplacesta": "Englanniksi", - "FF Marketplace on paikka, jossa opiskelijat voivat helposti selailla yritysten toimeksiantoja ja valita omien kriteeriensä perusteella mielenkiintoisimman projektin.": "Englanniksi", - "FF Marketplacen ohjeet": "Englanniksi", + "Jamk Future Factory on kansainvälisesti tunnustettu opintojakso, joka kerää vuosittain tuhansia opiskelijoita kehittämään omia projektityöskentelyn taitojaan!": "JAMK Future Factory is internationally recognised course which gets thousands of student annually to develop their own project working skills.", + "Lue lisää Future Factorysta": "Read more about Future Factory", + "Tietoa FF Marketplacesta": "Information about FF Marketplace", + "FF Marketplace on paikka, jossa opiskelijat voivat helposti selailla yritysten toimeksiantoja ja valita omien kriteeriensä perusteella mielenkiintoisimman projektin.": "FF Markeplace is a place where students are able to easily browse assignments given by companies and select the one that interests them the most.", + "FF Marketplacen ohjeet": "FF Marketplace instructions", - "Selaamaan toimeksiantoja": "Englanniksi", + "Selaamaan toimeksiantoja": "Browse assignments", - "Enää muutama paikka jäljellä!": "Englanniksi" + "Enää muutama paikka jäljellä!": "Only few places left!", + + "Kuinka palvelua käytetään": "How to use this service", + "Siirry selaamaan toimeksiantoja" : "Navigate to Assignments", + "Lajittele ja filtteröi toimeksiantoja kiinostuksesi ja osaamisesi mukaan" : "Sort and filter assignments based on your interests and skills", + "Näet toimeksiantotuloksia, jotka sopisivat sinulle parhaiten!" : "Page will show the available assignments that fit you the best", + "Toimeksiannoista näet seuraavat tiedot" : "Inside the assignments, you can find following information", + "Toimeksiannon nimi":"Name of assignment", + "Kuvaus": "Description", + "Rooleja/Ominaisuuksia, joita haetaan tiimiin":"Roles/Abilities that the team needs", + "Kiinnitä itsesi haluamaasi toimeksiannon rooliin painamalla 'Valitsen paikan'":"Reserve a role from a team in the assignment by clicking 'Choose Role'", + "Kirjaudu sisään opiskelijatunnuksellasi. kirjauduttuasi olet vahvistanut paikan itsellesi":"Log in using your student number to reserve the role for yourself", + "Saat vahvistusviestin koulun sähköpostiisi valinnastasi.": "You can choose to get a confirmation email from your choice", + "Odota, että tiimi täyttyy":"Wait for the team to fill up", + "Kun tiimi on täynnä, saat siitä ilmoituksen sähköpostiisi.":"When the team is full, you will get an email telling you about it", + + "Lajittelu ja filtteröinti":"Sorting and filtering", + "Lajittelu" : "Sorting", + "Voit järjestää toimeksianotha valitsemalla 'Järjestä tulokset' -valiksota haluamasi järjestys":"You can sort available assignments by selecting an option from the 'Sort assignments' dropdown menu.", + "Filtteröinti":"Filtering", + "Voit filtteröidä toimeksiantoja mm.alan ja tiimiroolin mukaan, jolloin saat juuri sinulle sopivia/sinua kiinnostavia toimeksiantoja!":"You can filter assignments, for example by field & role. Doing this, the page will only show the assignments with teams most fitting for you!" } \ No newline at end of file