mirror of
https://github.com/PeWu/topola-viewer.git
synced 2026-03-17 21:13:44 +00:00
Made intro page more mobile-friendly (#5)
This commit is contained in:
Przemek Wiech
@@ -122,3 +122,7 @@ div.ui.card.intro {
|
|||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
left: 25px;
|
left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content .ui.image.blockImage {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|||||||
223
src/intro.tsx
223
src/intro.tsx
@@ -1,7 +1,7 @@
|
|||||||
import * as queryString from 'query-string';
|
import * as queryString from 'query-string';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import logo from './topola.jpg';
|
import logo from './topola.jpg';
|
||||||
import {Card, Grid, Image} from 'semantic-ui-react';
|
import {Card, Grid, Image, Responsive} from 'semantic-ui-react';
|
||||||
import {FormattedMessage} from 'react-intl';
|
import {FormattedMessage} from 'react-intl';
|
||||||
import {Link} from 'react-router-dom';
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
@@ -22,127 +22,136 @@ function formatBuildDate(dateString: string) {
|
|||||||
|
|
||||||
/** The intro page. */
|
/** The intro page. */
|
||||||
export function Intro() {
|
export function Intro() {
|
||||||
|
const contents = (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id="intro.description"
|
||||||
|
defaultMessage={
|
||||||
|
'Topola Genealogy is a genealogy tree viewer that lets you' +
|
||||||
|
' browse the structure of the family.'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id="intro.instructions"
|
||||||
|
defaultMessage={
|
||||||
|
'Use the LOAD FROM URL or LOAD FROM FILE buttons above to load' +
|
||||||
|
' a GEDCOM file. You can export a GEDCOM file from most of the' +
|
||||||
|
' existing genealogy programs and web sites.'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id="intro.examples"
|
||||||
|
defaultMessage={
|
||||||
|
'Here are some examples from the web that you can view:'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<GedcomLink
|
||||||
|
url="http://genpol.com/module-Downloads-prep_hand_out-lid-32.html"
|
||||||
|
text="Karol Wojtyła"
|
||||||
|
/>{' '}
|
||||||
|
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||||
|
<a href="http://genpol.com/module-Downloads-display-lid-32.html">
|
||||||
|
GENPOL
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<GedcomLink
|
||||||
|
url="https://webtreeprint.com/tp_downloader.php?path=famous_gedcoms/shakespeare.ged"
|
||||||
|
text="Shakespeare"
|
||||||
|
/>{' '}
|
||||||
|
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||||
|
<a href="https://webtreeprint.com/tp_famous_gedcoms.php">
|
||||||
|
webtreeprint.com
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<GedcomLink
|
||||||
|
url="http://genealogyoflife.com/tng/gedcom/HarryPotter.ged"
|
||||||
|
text="Harry Potter"
|
||||||
|
/>{' '}
|
||||||
|
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
||||||
|
<a href="http://famousfamilytrees.blogspot.com/">
|
||||||
|
Famous Family Trees
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
<FormattedMessage id="intro.privacy" defaultMessage="Privacy" />
|
||||||
|
</b>
|
||||||
|
{': '}
|
||||||
|
<FormattedMessage
|
||||||
|
id="intro.privacy_note"
|
||||||
|
defaultMessage={
|
||||||
|
'When using the "load from file" option, this site does not' +
|
||||||
|
' send your data anywhere and files loaded from disk do not' +
|
||||||
|
' leave your computer. When using "load from URL", data is' +
|
||||||
|
' passed through the {link} service to deal with an issue with' +
|
||||||
|
' cross-site file loading in the browser (CORS).'
|
||||||
|
}
|
||||||
|
values={{
|
||||||
|
link: (
|
||||||
|
<a href="https://cors-anywhere.herokuapp.com/">cors-anywhere</a>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<p className="ui right aligned version">
|
||||||
|
version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (
|
||||||
|
<a
|
||||||
|
href={`https://github.com/PeWu/topola-viewer/commit/${
|
||||||
|
process.env.REACT_APP_GIT_SHA
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{process.env.REACT_APP_GIT_SHA}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<div className="backgroundImage" />
|
<div className="backgroundImage" />
|
||||||
<Card className="intro">
|
<Card className="intro">
|
||||||
<Card.Content>
|
<Responsive as={Card.Content} minWidth={768}>
|
||||||
<Card.Header>
|
<Card.Header>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id="intro.title"
|
id="intro.title"
|
||||||
defaultMessage="Topola Genealogy Viewer"
|
defaultMessage="Topola Genealogy Viewer"
|
||||||
/>
|
/>
|
||||||
</Card.Header>
|
</Card.Header>
|
||||||
</Card.Content>
|
</Responsive>
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
<Grid>
|
<Responsive as={Grid} minWidth={768}>
|
||||||
<Grid.Row>
|
<Grid.Row>
|
||||||
<Grid.Column width={5}>
|
<Grid.Column width={5}>
|
||||||
<Image src={logo} alt="Topola logo" />
|
<Image src={logo} alt="Topola logo" />
|
||||||
</Grid.Column>
|
</Grid.Column>
|
||||||
<Grid.Column width={11}>
|
<Grid.Column width={11}>{contents}</Grid.Column>
|
||||||
<p>
|
</Grid.Row>
|
||||||
<FormattedMessage
|
</Responsive>
|
||||||
id="intro.description"
|
<Responsive maxWidth={767}>
|
||||||
defaultMessage={
|
<Image
|
||||||
'Topola Genealogy is a genealogy tree viewer that lets you' +
|
src={logo}
|
||||||
' browse the structure of the family.'
|
alt="Topola logo"
|
||||||
}
|
centered={true}
|
||||||
/>
|
size="tiny"
|
||||||
</p>
|
className="blockImage"
|
||||||
<p>
|
/>
|
||||||
<FormattedMessage
|
{contents}
|
||||||
id="intro.instructions"
|
</Responsive>
|
||||||
defaultMessage={
|
|
||||||
'Use the LOAD FROM URL or LOAD FROM FILE buttons above to load' +
|
|
||||||
' a GEDCOM file. You can export a GEDCOM file from most of the' +
|
|
||||||
' existing genealogy programs and web sites.'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<FormattedMessage
|
|
||||||
id="intro.examples"
|
|
||||||
defaultMessage={
|
|
||||||
'Here are some examples from the web that you can view:'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<GedcomLink
|
|
||||||
url="http://genpol.com/module-Downloads-prep_hand_out-lid-32.html"
|
|
||||||
text="Karol Wojtyła"
|
|
||||||
/>{' '}
|
|
||||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
|
||||||
<a href="http://genpol.com/module-Downloads-display-lid-32.html">
|
|
||||||
GENPOL
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<GedcomLink
|
|
||||||
url="https://webtreeprint.com/tp_downloader.php?path=famous_gedcoms/shakespeare.ged"
|
|
||||||
text="Shakespeare"
|
|
||||||
/>{' '}
|
|
||||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
|
||||||
<a href="https://webtreeprint.com/tp_famous_gedcoms.php">
|
|
||||||
webtreeprint.com
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<GedcomLink
|
|
||||||
url="http://genealogyoflife.com/tng/gedcom/HarryPotter.ged"
|
|
||||||
text="Harry Potter"
|
|
||||||
/>{' '}
|
|
||||||
(<FormattedMessage id="intro.from" defaultMessage="from" />{' '}
|
|
||||||
<a href="http://famousfamilytrees.blogspot.com/">
|
|
||||||
Famous Family Trees
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p>
|
|
||||||
<b>
|
|
||||||
<FormattedMessage
|
|
||||||
id="intro.privacy"
|
|
||||||
defaultMessage="Privacy"
|
|
||||||
/>
|
|
||||||
</b>
|
|
||||||
{': '}
|
|
||||||
<FormattedMessage
|
|
||||||
id="intro.privacy_note"
|
|
||||||
defaultMessage={
|
|
||||||
'When using the "load from file" option, this site does not' +
|
|
||||||
' send your data anywhere and files loaded from disk do not' +
|
|
||||||
' leave your computer. When using "load from URL", data is' +
|
|
||||||
' passed through the {link} service to deal with an issue with' +
|
|
||||||
' cross-site file loading in the browser (CORS).'
|
|
||||||
}
|
|
||||||
values={{
|
|
||||||
link: (
|
|
||||||
<a href="https://cors-anywhere.herokuapp.com/">
|
|
||||||
cors-anywhere
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
<p className="ui right aligned version">
|
|
||||||
version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (
|
|
||||||
<a
|
|
||||||
href={`https://github.com/PeWu/topola-viewer/commit/${
|
|
||||||
process.env.REACT_APP_GIT_SHA
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{process.env.REACT_APP_GIT_SHA}
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
</p>
|
|
||||||
</Grid.Column>{' '}
|
|
||||||
</Grid.Row>{' '}
|
|
||||||
</Grid>
|
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user