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>
);
};

27
src/components/Menu.scss
View File

@@ -1,21 +1,14 @@
table {
width: 100%;
@import '../colors.scss';
.Menu {
h1 {
font-size: 4rem;
}
table,
td,
th {
border-bottom: 1px solid black;
h2 {
font-size: 2rem;
color: $green-text;
margin-left: 3rem;
margin-right: 3rem;
}
th {
height: 10vh;
}
tr {
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';
export const Menu = () => {
return (
<section>
<h1>Menu</h1>
<article>
<h2>Starters</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>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 className='Menu'>
<h1>
<FormattedMessage id='main.menu' />
</h1>
<h2>
<FormattedMessage id='main.toBeDecided' />
</h2>
</section>
);
};

1
src/components/NavBar.scss
View File

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

15
src/components/NavBar.tsx
View File

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

27
src/components/Program.scss
View File

@@ -1,21 +1,14 @@
table {
width: 100%;
@import '../colors.scss';
.Program {
h1 {
font-size: 4rem;
}
table,
td,
th {
border-bottom: 1px solid black;
h2 {
font-size: 2rem;
color: $green-text;
margin-left: 3rem;
margin-right: 3rem;
}
th {
height: 10vh;
}
tr {
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 './Program.scss';
export const Program = () => {
return (
<section>
<h1>Program</h1>
<article>
<h2>12:00</h2>
<h3>Speech</h3>
<p>Boring BS. Lorem ipsum dolor sit amet.</p>
<h3>Lunch</h3>
<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 className='Program'>
<h1>
<FormattedMessage id='main.program' />
</h1>
<h2>
<FormattedMessage id='main.toBeDecided' />
</h2>
</section>
);
};

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

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

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

@@ -1,9 +1,11 @@
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> = {
...common,
...registration
...registration,
...main
}
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;
}
h1 {
.Main-title {
line-height: 4rem;
font-family: 'Montserrat-Light';
color: $green-text !important;
@@ -29,7 +29,7 @@
margin-bottom: 0px;
}
h2 {
.Main-and {
color: $brown-text;
font-size: 3rem;
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 { FormattedMessage } from 'react-intl';
import { DateAndPlace } from '../components/DateAndPlace';
import { Info } from '../components/Info';
interface MainParams {
page: string;
@@ -19,17 +20,19 @@ export const Main = () => {
return (
<div className='Main'>
<LanguagePicker />
<p className='extraText'>Save the link</p>
<p className='extraText'>
<FormattedMessage id='main.saveTheLink' />
</p>
<section className='Main-container'>
<article className='logo-container'>
<Link to='/'>
<h1>
<h1 className='Main-title'>
<FormattedMessage id='common.lintu' />
</h1>
<h2>
<h2 className='Main-and'>
<span> &amp; </span>
</h2>
<h1>
<h1 className='Main-title'>
<FormattedMessage id='common.maslo' />
</h1>
</Link>
@@ -43,6 +46,8 @@ export const Main = () => {
<Menu />
) : page === 'program' ? (
<Program />
) : page === 'info' ? (
<Info />
) : (
<NotFound />
)}
@@ -53,7 +58,9 @@ export const Main = () => {
</article>
)}
</section>
<p className='extraText'>Attend the party</p>
<p className='extraText'>
<FormattedMessage id='main.welcome' />
</p>
</div>
);
};