granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP About page updates

Browse source
This commit is contained in:
Justin Edmund 2023-01-31 04:48:55 -08:00
parent 44e35d0505
commit 607a10bfae
2 changed files with 96 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
components/AboutPage/index.scss
View file

@ -1,4 +1,50 @@
.About.PageContent {
$width: 520px;
padding-bottom: $unit-12x;
section {
display: flex;
flex-direction: column;
position: relative;
gap: $unit-2x;
.Hero {
position: absolute;
width: 40vw;
height: 80vh;
right: $unit-8x * -1;
top: $unit-4x * -1;
background-image: linear-gradient(
90deg,
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 50%,
rgba(245, 245, 245, 0) 70%,
rgba(245, 245, 245, 1) 100%
),
linear-gradient(
rgba(245, 245, 245, 1) 0%,
rgba(245, 245, 245, 0) 40%,
rgba(245, 245, 245, 0) 78%,
rgba(245, 245, 245, 1) 100%
),
url('https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/top/bg/bg_23.jpg');
}
p {
font-size: $font-medium;
max-width: $width;
line-height: 1.35;
z-index: 2;
}
h2 {
font-weight: $bold;
font-size: $font-medium;
margin: 0;
max-width: $width;
z-index: 2;
}
}
.Links {
display: grid;
gap: $unit;
@ -8,4 +54,9 @@
div.LinkItem {
margin-top: $unit-2x;
}
.LinkItem {
background: var(--dialog-bg);
max-width: calc($width / 3 * 2);
}
}

79
components/AboutPage/index.tsx
View file

@ -18,8 +18,8 @@ const AboutPage: React.FC<Props> = (props: Props) => {
<div className="About PageContent">
<h1>{common('about.segmented_control.about')}</h1>
<section>
<p>
Granblue.team is a tool to save and share team comps for{' '}
<h2>
Granblue.team is a tool to save and share team compositions for{' '}
<a
href="https://game.granbluefantasy.jp"
target="_blank"
@ -27,28 +27,29 @@ const AboutPage: React.FC<Props> = (props: Props) => {
>
Granblue Fantasy
</a>
.
</p>
, a social RPG from Cygames.
</h2>
<p>
Start adding to a team and a URL will be created for you to share
wherever you like, no account needed.
To get started, all you have to do is add an item to a team and a URL
will be created for you to share wherever you like, no account needed.
</p>
<p>
However, if you do make an account, you can save any teams you find
for future reference and keep all of your teams together in one place.
If you do make an account, you can save any teams you find for future
reference and keep all of your teams together in one place.
</p>
<div className="Hero" />
</section>
<section>
<h2>Feedback</h2>
<p>
This is an evolving project so feedback and suggestions are greatly
appreciated!
</p>
<p>
If you have a feature request, would like to report a bug, or are
enjoying the tool and want to say thanks, come hang out in Discord!
enjoying the tool and want to say thanks, come hang out in Discord.
</p>
<p>Feedback and suggestions are greatly appreciated!</p>
<div className="LinkItem">
<Link href="https://discord.gg/qyZ5hGdPC8">
<a
@ -69,15 +70,18 @@ const AboutPage: React.FC<Props> = (props: Props) => {
<section>
<h2>Credits</h2>
<p>
Granblue.team was built by{' '}
Granblue.team was built and is maintained by{' '}
<a
href="https://twitter.com/jedmund"
target="_blank"
rel="noreferrer"
>
@jedmund
</a>{' '}
with a lot of help from{' '}
</a>
.
</p>
<p>
Many thanks to{' '}
<a
href="https://twitter.com/lalalalinna"
target="_blank"
@ -93,11 +97,10 @@ const AboutPage: React.FC<Props> = (props: Props) => {
>
@tarngerine
</a>
.
, who both provided a lot of help and advice as I was ramping up.
</p>
<p>
Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind, and
everyone else in{' '}
Many thanks also go to everyone in{' '}
<a
href="https://game.granbluefantasy.jp/#guild/detail/1190185"
target="_blank"
@ -105,26 +108,15 @@ const AboutPage: React.FC<Props> = (props: Props) => {
>
Fireplace
</a>{' '}
that helped with bug testing and feature requests. (P.S. We&apos;re
recruiting!) And yoey, but he won&apos;t join our crew.
and the granblue-tools Discord for all of their help with with bug
testing, feature requests, and more support. (P.S. We&apos;re
recruiting!)
</p>
</section>
<section>
<h2>Contributing</h2>
<p>
This app is open source and licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
target="_blank"
rel="noreferrer"
>
GNU AGPLv3
</a>
. Plainly, that means you can download the source, modify it, and
redistribute it if you attribute this project, use the same license,
and keep it open source. You can contribute on Github.
</p>
<ul className="Links">
<li className="LinkItem">
<Link href="https://github.com/jedmund/hensei-api">
@ -158,6 +150,25 @@ const AboutPage: React.FC<Props> = (props: Props) => {
</li>
</ul>
</section>
<section>
<h2>License</h2>
<p>
This app is open source and licensed under{' '}
<a
href="https://choosealicense.com/licenses/agpl-3.0/"
target="_blank"
rel="noreferrer"
>
GNU AGPLv3
</a>
.
</p>
<p>
Plainly, that means you can download the source, modify it, and
redistribute it as long as you attribute this project, use the same
license, and keep your derivative work open source as well.
</p>
</section>
</div>
)
}