veikko/lintujamaslo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Translations and styling improved on main page.

Browse Source
This commit is contained in:
codevictory
2021-12-23 00:51:02 +02:00
parent 65a810211a
commit 25f87eaa01
14 changed files with 118 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Info.scss Normal file
View File

@@ -0,0 +1,14 @@
@import '../colors.scss';
.Info {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2rem;
color: $green-text;
margin-left: 3rem;
margin-right: 3rem;
}
}

15
src/components/Info.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { FormattedMessage } from 'react-intl';
import './Info.scss';
export const Info = () => {
return (
<section className='Info'>
<h1>
<FormattedMessage id='main.info' />
</h1>
<h2>
<FormattedMessage id='main.toBeDecided' />
</h2>
</section>
);
};

29
src/components/Menu.scss
View File

@@ -1,21 +1,14 @@
table { @import '../colors.scss';
width: 100%;
}
table, .Menu {
td, h1 {
th { font-size: 4rem;
border-bottom: 1px solid black; }
}
th { h2 {
height: 10vh; font-size: 2rem;
} color: $green-text;
margin-left: 3rem;
tr { margin-right: 3rem;
line-break: auto; }
}
th,
td {
width: 33%;
} }

43
src/components/Menu.tsx
View File

@@ -1,42 +1,15 @@
import { FormattedMessage } from 'react-intl';
import './Menu.scss'; import './Menu.scss';
export const Menu = () => { export const Menu = () => {
return ( return (
<section> <section className='Menu'>
<h1>Menu</h1> <h1>
<article> <FormattedMessage id='main.menu' />
<h2>Starters</h2> </h1>
<h2>
<h3>Chrumky</h3> <FormattedMessage id='main.toBeDecided' />
<p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p> </h2>
<p>Nuts</p>
<h3>Halusky</h3>
<p>Fatty fat stuff.</p>
<p>Meat, fat</p>
</article>
<article>
<h2>Main dish</h2>
<h3>Chrumky</h3>
<p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
<p>Nuts</p>
<h3>Halusky</h3>
<p>Fatty fat stuff.</p>
<p>Meat, fat</p>
</article>
<article>
<h2>Dessert</h2>
<h3>Chrumky</h3>
<p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
<p>Nuts</p>
<h3>Halusky</h3>
<p>Fatty fat stuff.</p>
<p>Meat, fat</p>
</article>
</section> </section>
); );
}; };

1
src/components/NavBar.scss
View File

@@ -8,5 +8,6 @@
.Diamond { .Diamond {
margin-right: 1rem; margin-right: 1rem;
margin-left: 1rem; margin-left: 1rem;
margin-bottom: 0;
} }
} }

15
src/components/NavBar.tsx
View File

@@ -1,17 +1,22 @@
import './NavBar.scss'; import './NavBar.scss';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { LanguagePicker } from './LanguagePicker';
import { Button, Menu } from 'antd';
import { Diamond } from './Diamond'; import { Diamond } from './Diamond';
import { FormattedMessage } from 'react-intl';
export const NavBar = () => { export const NavBar = () => {
return ( return (
<div className='NavBar'> <div className='NavBar'>
<Link to='/menu'>Menu</Link> <Link to='/menu'>
<FormattedMessage id='main.menu' />
</Link>
<Diamond /> <Diamond />
<Link to='/program'>Program</Link> <Link to='/program'>
<FormattedMessage id='main.program' />
</Link>
<Diamond /> <Diamond />
<Link to='/program'>Info</Link> <Link to='/info'>
<FormattedMessage id='main.info' />
</Link>
</div> </div>
); );
}; };

29
src/components/Program.scss
View File

@@ -1,21 +1,14 @@
table { @import '../colors.scss';
width: 100%;
}
table, .Program {
td, h1 {
th { font-size: 4rem;
border-bottom: 1px solid black; }
}
th { h2 {
height: 10vh; font-size: 2rem;
} color: $green-text;
margin-left: 3rem;
tr { margin-right: 3rem;
line-break: auto; }
}
th,
td {
width: 33%;
} }

40
src/components/Program.tsx
View File

@@ -1,40 +1,16 @@
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import './Program.scss'; import './Program.scss';
export const Program = () => { export const Program = () => {
return ( return (
<section> <section className='Program'>
<h1>Program</h1> <h1>
<article> <FormattedMessage id='main.program' />
<h2>12:00</h2> </h1>
<h3>Speech</h3> <h2>
<p>Boring BS. Lorem ipsum dolor sit amet.</p> <FormattedMessage id='main.toBeDecided' />
<h3>Lunch</h3> </h2>
<p>
Eating yummy yum.
<i>
<Link to='/menu'>To menu</Link>
</i>
</p>
</article>
<article>
<h2>14:00</h2>
<h3>Games</h3>
<p>Activity lol.</p>
<p>Be active.</p>
<h3>More something</h3>
<p>Lorem ipsum dolor sit amet.</p>
<h3>More more more</h3>
</article>
<article>
<h2>23:00</h2>
<h3>More something</h3>
<p>Lorem ipsum dolor sit amet.</p>
<h3>More more more</h3>
<h3>More something</h3>
<p>Lorem ipsum dolor sit amet.</p>
<h3>More more more</h3>
</article>
</section> </section>
); );
}; };

4
src/constants/localization/en.ts
View File

@@ -1,9 +1,11 @@
import { common } from "./common/en"; import { common } from "./common/en";
import { registration } from './registration/en'; import { registration } from './registration/en';
import { main } from "./main/en";
const en: Record<string, string> = { const en: Record<string, string> = {
...common, ...common,
...registration ...registration,
...main
} }
export default en; export default en;

6
src/constants/localization/fi.ts
View File

@@ -1,9 +1,11 @@
import { common } from "./common/fi"; import { common } from "./common/fi";
import { registration } from './registration/fi'; import { registration } from "./registration/fi";
import { main } from "./main/fi";
const fi: Record<string, string> = { const fi: Record<string, string> = {
...common, ...common,
...registration ...registration,
...main
} }
export default fi; export default fi;

8
src/constants/localization/main/en.ts Normal file
View File

@@ -0,0 +1,8 @@
export const main: Record<string, string> = {
"main.program": "Program",
"main.menu": "Menu",
"main.info": "Info",
"main.saveTheLink": "Save the link",
"main.welcome": "Welcome!",
"main.toBeDecided": "To be specified"
}

8
src/constants/localization/main/fi.ts Normal file
View File

@@ -0,0 +1,8 @@
export const main: Record<string, string> = {
"main.program": "Ohjelma",
"main.menu": "Menu",
"main.info": "Info",
"main.saveTheLink": "Laita linkki talteen",
"main.welcome": "Tervetuloa!",
"main.toBeDecided": "Selviää myöhemmin"
}

4
src/pages/Main.scss
View File

@@ -20,7 +20,7 @@
margin-top: 3rem; margin-top: 3rem;
} }
h1 { .Main-title {
line-height: 4rem; line-height: 4rem;
font-family: 'Montserrat-Light'; font-family: 'Montserrat-Light';
color: $green-text !important; color: $green-text !important;
@@ -29,7 +29,7 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
h2 { .Main-and {
color: $brown-text; color: $brown-text;
font-size: 3rem; font-size: 3rem;
margin-top: 0em; margin-top: 0em;

17
src/pages/Main.tsx
View File

@@ -8,6 +8,7 @@ import { NotFound } from '../components/NotFound';
import { LanguagePicker } from '../components/LanguagePicker'; import { LanguagePicker } from '../components/LanguagePicker';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { DateAndPlace } from '../components/DateAndPlace'; import { DateAndPlace } from '../components/DateAndPlace';
import { Info } from '../components/Info';
interface MainParams { interface MainParams {
page: string; page: string;
@@ -19,17 +20,19 @@ export const Main = () => {
return ( return (
<div className='Main'> <div className='Main'>
<LanguagePicker /> <LanguagePicker />
<p className='extraText'>Save the link</p> <p className='extraText'>
<FormattedMessage id='main.saveTheLink' />
</p>
<section className='Main-container'> <section className='Main-container'>
<article className='logo-container'> <article className='logo-container'>
<Link to='/'> <Link to='/'>
<h1> <h1 className='Main-title'>
<FormattedMessage id='common.lintu' /> <FormattedMessage id='common.lintu' />
</h1> </h1>
<h2> <h2 className='Main-and'>
<span> &amp; </span> <span> &amp; </span>
</h2> </h2>
<h1> <h1 className='Main-title'>
<FormattedMessage id='common.maslo' /> <FormattedMessage id='common.maslo' />
</h1> </h1>
</Link> </Link>
@@ -43,6 +46,8 @@ export const Main = () => {
<Menu /> <Menu />
) : page === 'program' ? ( ) : page === 'program' ? (
<Program /> <Program />
) : page === 'info' ? (
<Info />
) : ( ) : (
<NotFound /> <NotFound />
)} )}
@@ -53,7 +58,9 @@ export const Main = () => {
</article> </article>
)} )}
</section> </section>
<p className='extraText'>Attend the party</p> <p className='extraText'>
<FormattedMessage id='main.welcome' />
</p>
</div> </div>
); );
}; };