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

Update Updates page

Browse source
This commit is contained in:
Justin Edmund 2023-01-31 04:42:34 -08:00
parent 71546791b3
commit 44e35d0505
3 changed files with 259 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
components/UpdatesPage/index.scss
View file

@ -1,41 +1,48 @@
.Updates.PageContent { .Updates.PageContent {
.version { padding-bottom: $unit-12x;
.Version {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit-2x; gap: $unit-2x;
&.content { h3,
.top h3 { li,
p {
}
&.Content {
.Header h3 {
color: var(--accent-yellow); color: var(--accent-yellow);
} }
.update { .Contents {
display: flex;
flex-direction: column;
gap: $unit-2x;
}
.characters,
.weapons,
.summons {
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-columns: 1fr 1fr;
gap: $unit;
& > h4 {
font-weight: $medium;
font-size: $font-regular;
}
}
.items {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: $unit-4x; gap: $unit-4x;
.characters,
.weapons,
.summons {
display: grid;
grid-template-rows: auto 1fr;
gap: $unit;
& > h4 {
font-weight: $medium;
font-size: $font-regular;
}
.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: $unit-4x;
}
}
} }
} }
.top { .Header {
align-items: baseline; align-items: baseline;
display: flex; display: flex;
gap: $unit-half; gap: $unit-half;
@ -54,32 +61,56 @@
} }
} }
.Notes { .Contents {
display: grid; display: flex;
grid-template-columns: repeat(3, minmax(200px, 1fr)); flex-direction: column;
gap: $unit-2x; gap: $unit-4x;
li { &.Bare {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit; color: var(--text-primary);
list-style-type: disc;
list-style-position: inside;
gap: $unit-half;
h3 { li {
font-weight: $bold;
font-size: $font-regular;
}
img {
aspect-ratio: 4 / 3;
background: var(--dialog-bg);
border-radius: $input-corner;
display: block;
width: 100%;
}
p {
color: var(--text-primary);
font-size: 14px; font-size: 14px;
}
}
section {
display: flex;
flex-direction: column;
gap: $unit-2x;
h2 {
margin: 0;
}
}
.Notes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: $unit-2x;
li {
display: flex;
flex-direction: column;
gap: $unit;
h3 {
font-weight: $bold;
margin-top: $unit-half;
}
img {
aspect-ratio: 4 / 3;
background: var(--dialog-bg);
border-radius: $input-corner;
display: block;
width: 100%;
}
code { code {
background: var(--button-bg); background: var(--button-bg);
@ -91,29 +122,14 @@
} }
} }
} }
}
.Bugs { .Bugs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style-type: disc; list-style-type: disc;
list-style-position: inside; gap: $unit-half;
gap: $unit; padding-left: $unit-2x;
li {
font-size: $font-regular;
} }
} }
} }
.notes {
color: var(--text-primary);
list-style-type: disc;
list-style-position: inside;
li {
margin-bottom: $unit-half;
font-size: $font-regular;
}
}
} }

325
components/UpdatesPage/index.tsx
View file

@ -32,151 +32,170 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
return ( return (
<div className="Updates PageContent"> <div className="Updates PageContent">
<h1>{common('about.segmented_control.updates')}</h1> <h1>{common('about.segmented_control.updates')}</h1>
<section className="version" data-version="1.1"> <section className="Version" data-version="1.1">
<div className="top"> <div className="Header">
<h3>1.1.0</h3> <h3>1.1.0</h3>
<time>2023/02/06</time> <time>2023/02/06</time>
</div> </div>
<section> <div className="Contents">
<h2>New features</h2> <section>
<ul className="Notes"> <h2>New features</h2>
<li> <ul className="Notes">
{image( <li>
'Remix parties', {image(
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, 'Remix parties',
'remix', `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
'jpg' 'remix',
)} 'jpg'
<h3>Remix parties</h3> )}
<p> <h3>Remix parties</h3>
See a team you want to try but don&apos;t have Yatima? Now you <p>
can remix teams from other users to showcase substitutes, swap See a team you want to try but don&apos;t have Yatima? Now you
for items you have, or just give it your own flavor. can remix teams from other users to showcase substitutes, swap
</p> for items you have, or just give it your own flavor.
</li> </p>
<li> </li>
{image( <li>
'Transcendence', {image(
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, 'Edit parties without an account',
'transcendence', `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
'jpg' 'unauth',
)} 'jpg'
<h3>Transcendence</h3> )}
<p> <h3>No account editing</h3>
Now you can set the transcendence stage for Eternals and select <p>
summons (namely, Bahamut). Now you can edit parties you create later on, even if you
</p> don&apos;t make an account. You still won&apos;t have a
</li> profile, so make sure to bookmark them!
<li> </p>
{image( </li>
'Shields and Manatura', <li>
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, {image(
'accessories', 'Transcendence',
'jpg' `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
)} 'transcendence',
<h3>Shields and Manatura</h3> 'jpg'
<p> )}
When using Paladin or Manadiver, you can set their respective <h3>Transcendence</h3>
Shield or Manatura from the button next to the main character. <p>
</p> Now you can set the transcendence stage for Eternals and
</li> select summons (namely, Bahamut).
<li> </p>
{image( </li>
'Character Mastery', <li>
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, {image(
'mastery', 'Shields and Manatura',
'jpg' `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
)} 'accessories',
<h3>Character Mastery</h3> 'jpg'
<p> )}
You can now add individual values for your character&apos;s <h3>Shields and Manatura</h3>
rings, earrings, and awakenings. Make sure to set your <p>
Perpetuity Rings! When using Paladin or Manadiver, you can set their respective
</p> Shield or Manatura from the button next to the main character.
</li> </p>
<li> </li>
{image( <li>
'Updated team mechanics', {image(
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, 'Character Mastery',
'mechanics', `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
'jpg' 'mastery',
)} 'jpg'
<h3>Updated team mechanics</h3> )}
<p>Sorry, each party is only big enough for one Beelzebub.</p> <h3>Character Mastery</h3>
</li> <p>
<li> You can now add individual values for your character&apos;s
{image( rings, earrings, and awakenings. Make sure to set your
'R Characters', Perpetuity Rings!
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, </p>
'rare', </li>
'jpg' <li>
)} {image(
<h3>R Characters</h3> 'Updated team mechanics',
<p> `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
R Characters have been added to the database for your 'mechanics',
mem—Proving Grounds compositions. 'jpg'
</p> )}
</li> <h3>Updated team mechanics</h3>
<li> <p>Sorry, each party is only big enough for one Beelzebub.</p>
{image( </li>
'Unique URLs for team tabs', <li>
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, {image(
'urls', 'R Characters',
'jpg' `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
)} 'rare',
<h3>Unique URLs for team tabs</h3> 'jpg'
<p> )}
You can now link to individual tabs directly. The site will do <h3>R Characters</h3>
it for you when you copy a URL, or you can append{' '} <p>
<code>/characters</code>, <code>/weapons</code> or{' '} R Characters have been added to the database for your
<code>/summons</code> manually. mem—Proving Grounds compositions.
</p> </p>
</li> </li>
<li> <li>
{image( {image(
'Redesigned navigation', 'Unique URLs for team tabs',
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
'nav', 'urls',
'jpg' 'jpg'
)} )}
<h3>Redesigned navigation</h3> <h3>Unique URLs for team tabs</h3>
<p> <p>
The top-navigation has been slightly redesigned. Click the party You can now link to individual tabs directly. The site will do
name to copy its URL! it for you when you copy a URL, or you can append{' '}
</p> <code>/characters</code>, <code>/weapons</code> or{' '}
</li> <code>/summons</code> manually.
<li> </p>
{image( </li>
'Update toasts', <li>
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`, {image(
'toasts', 'Redesigned navigation',
'jpg' `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
)} 'nav',
<h3>Update toasts</h3> 'jpg'
<p> )}
The site will now show an update in the bottom-right corner when <h3>Redesigned navigation</h3>
new features or content is added. <p>
</p> The top-navigation has been slightly redesigned. Click the
</li> party name to copy its URL!
</ul> </p>
</section> </li>
<section> <li>
<h2>Bug fixes</h2> {image(
<ul className="Bugs"> 'Update toasts',
<li> `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
Fixed a bug that caused users to be logged out whenever they 'toasts',
restarted their browser 'jpg'
</li> )}
<li>Fixed a bug that caused Dark Opus weapons to disappear</li> <h3>Update toasts</h3>
</ul> <p>
</section> The site will now show an update in the bottom-right corner
when new features or content is added.
</p>
</li>
</ul>
</section>
<section>
<h2>Bug fixes</h2>
<ul className="Bugs">
<li>
Fixed a bug that caused users to be logged out whenever they
restarted their browser
</li>
<li>
Fixed a bug that caused Dark Opus weapons to permanently
disappear when adding them to a party that already had one
</li>
</ul>
</section>
</div>
</section> </section>
<section className="content version" data-version="2022-12L"> <section className="Content Version" data-version="2022-12L">
<div className="top"> <div className="Header">
<h3>2023-01 Flash Gala</h3> <h3>2023-01 Flash Gala</h3>
<time>2023/01/19</time> <time>2023/01/19</time>
</div> </div>
<div className="update"> <div className="Contents">
<section className="characters"> <section className="characters">
<h4>New characters</h4> <h4>New characters</h4>
<div className="items"> <div className="items">
@ -205,12 +224,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
</section> </section>
</div> </div>
</section> </section>
<section className="content version" data-version="2023-01U"> <section className="Content Version" data-version="2023-01U">
<div className="top"> <div className="Header">
<h3>2023-01 Uncap</h3> <h3>2023-01 Uncap</h3>
<time>2023/01/06</time> <time>2023/01/06</time>
</div> </div>
<div className="update"> <div className="Contents">
<section className="characters"> <section className="characters">
<h4>Updated characters</h4> <h4>Updated characters</h4>
<div className="items"> <div className="items">
@ -224,24 +243,24 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
</section> </section>
</div> </div>
</section> </section>
<section className="version" data-version="1.0"> <section className="Version" data-version="1.0">
<div className="top"> <div className="Header">
<h3>1.0.1</h3> <h3>1.0.1</h3>
<time>2023/01/08</time> <time>2023/01/08</time>
</div> </div>
<ul className="notes"> <ul className="Bare Contents">
<li>Extra party fields: Full Auto, Clear Time, and more</li> <li>Extra party fields: Full Auto, Clear Time, and more</li>
<li>Support for Youtube short URLs</li> <li>Support for Youtube short URLs</li>
<li>Responsive grids and lots of other mobile fixes</li> <li>Responsive grids and lots of other mobile fixes</li>
<li>Many other bug fixes</li> <li>Many other bug fixes</li>
</ul> </ul>
</section> </section>
<section className="content version" data-version="2022-12L"> <section className="Content Version" data-version="2022-12L">
<div className="top"> <div className="Header">
<h3>2022-12 Legend Festival</h3> <h3>2022-12 Legend Festival</h3>
<time>2022/12/26</time> <time>2022/12/26</time>
</div> </div>
<div className="update"> <div className="Contents">
<section className="characters"> <section className="characters">
<h4>New characters</h4> <h4>New characters</h4>
<div className="items"> <div className="items">
@ -278,12 +297,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
</section> </section>
</div> </div>
</section> </section>
<section className="content version" data-version="2022-12F2"> <section className="Content Version" data-version="2022-12F2">
<div className="top"> <div className="Header">
<h3>2022-12 Flash Gala</h3> <h3>2022-12 Flash Gala</h3>
<time>2022/12/26</time> <time>2022/12/26</time>
</div> </div>
<div className="update"> <div className="Contents">
<section className="characters"> <section className="characters">
<h4>New characters</h4> <h4>New characters</h4>
<div className="items"> <div className="items">
@ -312,12 +331,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
</section> </section>
</div> </div>
</section> </section>
<section className="version" data-version="1.0"> <section className="Version" data-version="1.0">
<div className="top"> <div className="Header">
<h3>1.0.0</h3> <h3>1.0.0</h3>
<time>2022/12/26</time> <time>2022/12/26</time>
</div> </div>
<ul className="notes"> <ul className="Bare Contents">
<li>First release!</li> <li>First release!</li>
<li>You can embed Youtube videos now</li> <li>You can embed Youtube videos now</li>
<li>Better clicking - right-click and open in a new tab</li> <li>Better clicking - right-click and open in a new tab</li>

12
styles/globals.scss
View file

@ -138,15 +138,11 @@ select {
margin-bottom: $unit * 3; margin-bottom: $unit * 3;
} }
p { p,
color: var(--text-secondary); li {
font-size: $font-regular; color: var(--text-primary);
font-size: 14px;
line-height: 1.3; line-height: 1.3;
margin-bottom: $unit;
&:last-of-type {
margin-bottom: 0;
}
} }
.LinkItem { .LinkItem {