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

Improving main page.

Browse Source
This commit is contained in:
codevictory
2021-12-19 21:12:54 +02:00
parent ad913d951e
commit 25b1699991
9 changed files with 198 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.scss
View File

@@ -1,15 +1 @@
@import 'antd/dist/antd.variable.min.css'; @import 'antd/dist/antd.variable.min.css';
@import './colors.scss';
.App {
text-align: center;
}
.App .App-content {
display: flex;
justify-content: center;
}
article {
margin: 2em;
}

25
src/App.tsx
View File

@@ -1,39 +1,32 @@
import "./App.scss"; import './App.scss';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { currentLanguage } from './atoms/language'; import { currentLanguage } from './atoms/language';
import { Main } from './pages/Main'; import { Main } from './pages/Main';
import { Registration } from './pages/Registration'; import { Registration } from './pages/Registration';
import { IntlProvider } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { localization } from './constants/localization'; import { localization } from './constants/localization';
import { Header } from './components/Header';
import { ConfigProvider } from 'antd'; import { ConfigProvider } from 'antd';
import { LanguagePicker } from './components/LanguagePicker';
export default function App() { export default function App() {
const language = useRecoilValue(currentLanguage) const language = useRecoilValue(currentLanguage);
ConfigProvider.config({ ConfigProvider.config({
theme: { theme: {
primaryColor: '#a7ab81', primaryColor: '#a7ab81',
} },
}); });
return ( return (
<IntlProvider locale={language} messages={localization[language]}> <IntlProvider locale={language} messages={localization[language]}>
<Header />
<LanguagePicker />
<Router> <Router>
<Switch> <Switch>
<Route exact path="/:page"> <Route path='/' exact component={Main} />
<div className="App"> <Route path='/:page' exact component={Main} />
<Main /> <Route path='/registration/:id' component={Registration} />
</div>
</Route>
<Route path="/registration/:id" component={Registration} />
<Redirect from="/" to="/program" />
</Switch> </Switch>
</Router > </Router>
</IntlProvider> </IntlProvider>
); );
} }

88
src/components/Menu.tsx
View File

@@ -1,56 +1,42 @@
import "./Menu.scss"; import './Menu.scss';
export const Menu = () => { export const Menu = () => {
return ( return (
<article> <section>
<h1>Menu</h1> <h1>Menu</h1>
<table> <article>
<tr> <h2>Starters</h2>
<th></th>
<th>Starters</th> <h3>Chrumky</h3>
<th></th> <p>Very good yummy yummy. Lorem ipsum dolor sit amet.</p>
</tr> <p>Nuts</p>
<tr>
<td>Chrumky</td> <h3>Halusky</h3>
<td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td> <p>Fatty fat stuff.</p>
<td>Nuts</td> <p>Meat, fat</p>
</tr>
<tr>
<td>Halusky</td>
<td>Fatty fat stuff.</td>
<td>Meat, fat</td>
</tr>
<tr>
<th></th>
<th>Main dish</th>
<th></th>
</tr>
<tr>
<td>Chrumky</td>
<td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
<td>Nuts</td>
</tr>
<tr>
<td>Halusky</td>
<td>Fatty fat stuff.</td>
<td>Meat, fat</td>
</tr>
<tr>
<th></th>
<th>Dessert</th>
<th></th>
</tr>
<tr>
<td>Chrumky</td>
<td>Very good yummy yummy. Lorem ipsum dolor sit amet.</td>
<td>Nuts</td>
</tr>
<tr>
<td>Halusky</td>
<td>Fatty fat stuff.</td>
<td>Meat, fat</td>
</tr>
</table>
</article> </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>
);
};

7
src/components/NavBar.scss
View File

@@ -1,5 +1,12 @@
.NavBar { .NavBar {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center;
margin-bottom: 1em; margin-bottom: 1em;
font-size: 2rem;
.Diamond {
margin-right: 1rem;
margin-left: 1rem;
}
} }

23
src/components/NavBar.tsx
View File

@@ -1,18 +1,17 @@
import "./NavBar.scss"; import './NavBar.scss';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { LanguagePicker } from './LanguagePicker'; import { LanguagePicker } from './LanguagePicker';
import { Button, Menu } from 'antd'; import { Button, Menu } from 'antd';
import { Diamond } from './Diamond';
export const NavBar = () => { export const NavBar = () => {
return ( return (
<Menu className="NavBar" mode="horizontal"> <div className='NavBar'>
<Menu.Item><Link to="/menu">Menu</Link></Menu.Item> <Link to='/menu'>Menu</Link>
<Menu.Item><Link to="/program">Program</Link></Menu.Item> <Diamond />
<Menu.Item><Link to="/program">Info</Link></Menu.Item> <Link to='/program'>Program</Link>
<Menu.Item><Button type="primary">asd</Button></Menu.Item> <Diamond />
<Menu.Item> <Link to='/program'>Info</Link>
<LanguagePicker /> </div>
</Menu.Item> );
</Menu> };
)
}

BIN
src/img/main-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 705 KiB

41
src/pages/Main.scss
View File

@@ -1,5 +1,46 @@
@import '../colors.scss';
.Main { .Main {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
.Main-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 2px solid;
border-color: $brown-text;
border-radius: 300px;
width: 48rem;
.logo-container {
margin-top: 3rem;
}
h1 {
line-height: 4rem;
font-family: 'Montserrat-Light';
color: $green-text !important;
font-size: 5rem;
text-transform: uppercase;
margin-bottom: 0px;
}
h2 {
color: $brown-text;
font-size: 3rem;
margin-top: 0em;
margin-bottom: 0em;
}
}
.extraText {
color: $brown-text;
font-size: 1.1rem;
text-transform: uppercase;
margin-bottom: 8px;
letter-spacing: 2px;
}
} }

53
src/pages/Main.tsx
View File

@@ -1,22 +1,59 @@
import "./Main.scss"; import './Main.scss';
import { useParams } from "react-router-dom"; import { Link, useParams } from 'react-router-dom';
import { Menu } from '../components/Menu'; import { Menu } from '../components/Menu';
import { NavBar } from '../components/NavBar'; import { NavBar } from '../components/NavBar';
import { Program } from '../components/Program'; import { Program } from '../components/Program';
import { NotFound } from '../components/NotFound'; import { NotFound } from '../components/NotFound';
import { LanguagePicker } from '../components/LanguagePicker';
import { FormattedMessage } from 'react-intl';
import { DateAndPlace } from '../components/DateAndPlace';
interface MainParams { interface MainParams {
page: string page: string;
} }
export const Main = () => { export const Main = () => {
const { page } = useParams<MainParams>() const { page } = useParams<MainParams>();
return ( return (
<section className="Main"> <div className='Main'>
<LanguagePicker />
<p className='extraText'>Save the link</p>
<section className='Main-container'>
<article className='logo-container'>
<Link to='/'>
<h1>
<FormattedMessage id='common.lintu' />
</h1>
<h2>
<span> &amp; </span>
</h2>
<h1>
<FormattedMessage id='common.maslo' />
</h1>
</Link>
</article>
<article>
<NavBar /> <NavBar />
{page === "menu" ? <Menu /> : page === "program" ? <Program /> : <NotFound />} </article>
{page ? (
<article className='content'>
{page === 'menu' ? (
<Menu />
) : page === 'program' ? (
<Program />
) : (
<NotFound />
)}
</article>
) : (
<article>
<DateAndPlace />
</article>
)}
</section> </section>
) <p className='extraText'>Attend the party</p>
} </div>
);
};

54
src/pages/Registration.tsx
View File

@@ -1,32 +1,44 @@
import "./Registration.scss"; import './Registration.scss';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { RegForm } from '../components/RegForm' import { RegForm } from '../components/RegForm';
import { RegistrationHeader } from '../components/RegistrationHeader';
import { LanguagePicker } from '../components/LanguagePicker';
export const Registration = () => { export const Registration = () => {
return ( return (
<main className="Registration"> <>
<div className="Registration-main"> <RegistrationHeader />
<h1><FormattedMessage id="registration.welcome" /><br /><FormattedMessage id="common.datetime" /></h1> <LanguagePicker />
<h2><FormattedMessage id="common.place" /></h2> <main className='Registration'>
</div> <div className='Registration-main'>
<div className="Registration-desc"> <h1>
<FormattedMessage id='registration.welcome' />
<br />
<FormattedMessage id='common.datetime' />
</h1>
<h2> <h2>
<FormattedMessage id="registration.questions" /> <FormattedMessage id='common.place' />
</h2>
<h2>
<FormattedMessage id="registration.about" />
</h2>
<h2>
<FormattedMessage id="registration.saveTheLink" />
</h2>
<h2>
<FormattedMessage id="registration.fillInBefore" />
</h2> </h2>
</div> </div>
<div className="Registration-form"> <div className='Registration-desc'>
<h2>
<FormattedMessage id='registration.questions' />
</h2>
<h2>
<FormattedMessage id='registration.about' />
</h2>
<h2>
<FormattedMessage id='registration.saveTheLink' />
</h2>
<h2>
<FormattedMessage id='registration.fillInBefore' />
</h2>
</div>
<div className='Registration-form'>
<RegForm /> <RegForm />
</div> </div>
</main> </main>
) </>
} );
};