Update Updates page
This commit is contained in:
parent
71546791b3
commit
44e35d0505
3 changed files with 259 additions and 228 deletions
|
|
@ -1,41 +1,48 @@
|
|||
.Updates.PageContent {
|
||||
.version {
|
||||
padding-bottom: $unit-12x;
|
||||
|
||||
.Version {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
|
||||
&.content {
|
||||
.top h3 {
|
||||
h3,
|
||||
li,
|
||||
p {
|
||||
}
|
||||
|
||||
&.Content {
|
||||
.Header h3 {
|
||||
color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
.update {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
}
|
||||
.Contents {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $unit-4x;
|
||||
|
||||
.characters,
|
||||
.weapons,
|
||||
.summons {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: $unit;
|
||||
|
||||
& > h4 {
|
||||
font-weight: $medium;
|
||||
font-size: $font-regular;
|
||||
}
|
||||
}
|
||||
|
||||
.items {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: $unit-4x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
.Header {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
gap: $unit-half;
|
||||
|
|
@ -54,9 +61,37 @@
|
|||
}
|
||||
}
|
||||
|
||||
.Contents {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-4x;
|
||||
|
||||
&.Bare {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--text-primary);
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
gap: $unit-half;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-2x;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Notes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: $unit-2x;
|
||||
|
||||
li {
|
||||
|
|
@ -66,7 +101,7 @@
|
|||
|
||||
h3 {
|
||||
font-weight: $bold;
|
||||
font-size: $font-regular;
|
||||
margin-top: $unit-half;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -77,10 +112,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
|
||||
code {
|
||||
background: var(--button-bg);
|
||||
border-radius: 2px;
|
||||
|
|
@ -91,29 +122,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Bugs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
gap: $unit;
|
||||
|
||||
li {
|
||||
font-size: $font-regular;
|
||||
gap: $unit-half;
|
||||
padding-left: $unit-2x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notes {
|
||||
color: var(--text-primary);
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
|
||||
li {
|
||||
margin-bottom: $unit-half;
|
||||
font-size: $font-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,11 +32,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
return (
|
||||
<div className="Updates PageContent">
|
||||
<h1>{common('about.segmented_control.updates')}</h1>
|
||||
<section className="version" data-version="1.1">
|
||||
<div className="top">
|
||||
<section className="Version" data-version="1.1">
|
||||
<div className="Header">
|
||||
<h3>1.1.0</h3>
|
||||
<time>2023/02/06</time>
|
||||
</div>
|
||||
<div className="Contents">
|
||||
<section>
|
||||
<h2>New features</h2>
|
||||
<ul className="Notes">
|
||||
|
|
@ -54,6 +55,20 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
for items you have, or just give it your own flavor.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Edit parties without an account',
|
||||
`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
|
||||
'unauth',
|
||||
'jpg'
|
||||
)}
|
||||
<h3>No account editing</h3>
|
||||
<p>
|
||||
Now you can edit parties you create later on, even if you
|
||||
don't make an account. You still won't have a
|
||||
profile, so make sure to bookmark them!
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
{image(
|
||||
'Transcendence',
|
||||
|
|
@ -63,8 +78,8 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
)}
|
||||
<h3>Transcendence</h3>
|
||||
<p>
|
||||
Now you can set the transcendence stage for Eternals and select
|
||||
summons (namely, Bahamut).
|
||||
Now you can set the transcendence stage for Eternals and
|
||||
select summons (namely, Bahamut).
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -141,8 +156,8 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
)}
|
||||
<h3>Redesigned navigation</h3>
|
||||
<p>
|
||||
The top-navigation has been slightly redesigned. Click the party
|
||||
name to copy its URL!
|
||||
The top-navigation has been slightly redesigned. Click the
|
||||
party name to copy its URL!
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -154,8 +169,8 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
)}
|
||||
<h3>Update toasts</h3>
|
||||
<p>
|
||||
The site will now show an update in the bottom-right corner when
|
||||
new features or content is added.
|
||||
The site will now show an update in the bottom-right corner
|
||||
when new features or content is added.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -167,16 +182,20 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
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 disappear</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 className="content version" data-version="2022-12L">
|
||||
<div className="top">
|
||||
<section className="Content Version" data-version="2022-12L">
|
||||
<div className="Header">
|
||||
<h3>2023-01 Flash Gala</h3>
|
||||
<time>2023/01/19</time>
|
||||
</div>
|
||||
<div className="update">
|
||||
<div className="Contents">
|
||||
<section className="characters">
|
||||
<h4>New characters</h4>
|
||||
<div className="items">
|
||||
|
|
@ -205,12 +224,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="content version" data-version="2023-01U">
|
||||
<div className="top">
|
||||
<section className="Content Version" data-version="2023-01U">
|
||||
<div className="Header">
|
||||
<h3>2023-01 Uncap</h3>
|
||||
<time>2023/01/06</time>
|
||||
</div>
|
||||
<div className="update">
|
||||
<div className="Contents">
|
||||
<section className="characters">
|
||||
<h4>Updated characters</h4>
|
||||
<div className="items">
|
||||
|
|
@ -224,24 +243,24 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="version" data-version="1.0">
|
||||
<div className="top">
|
||||
<section className="Version" data-version="1.0">
|
||||
<div className="Header">
|
||||
<h3>1.0.1</h3>
|
||||
<time>2023/01/08</time>
|
||||
</div>
|
||||
<ul className="notes">
|
||||
<ul className="Bare Contents">
|
||||
<li>Extra party fields: Full Auto, Clear Time, and more</li>
|
||||
<li>Support for Youtube short URLs</li>
|
||||
<li>Responsive grids and lots of other mobile fixes</li>
|
||||
<li>Many other bug fixes</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section className="content version" data-version="2022-12L">
|
||||
<div className="top">
|
||||
<section className="Content Version" data-version="2022-12L">
|
||||
<div className="Header">
|
||||
<h3>2022-12 Legend Festival</h3>
|
||||
<time>2022/12/26</time>
|
||||
</div>
|
||||
<div className="update">
|
||||
<div className="Contents">
|
||||
<section className="characters">
|
||||
<h4>New characters</h4>
|
||||
<div className="items">
|
||||
|
|
@ -278,12 +297,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="content version" data-version="2022-12F2">
|
||||
<div className="top">
|
||||
<section className="Content Version" data-version="2022-12F2">
|
||||
<div className="Header">
|
||||
<h3>2022-12 Flash Gala</h3>
|
||||
<time>2022/12/26</time>
|
||||
</div>
|
||||
<div className="update">
|
||||
<div className="Contents">
|
||||
<section className="characters">
|
||||
<h4>New characters</h4>
|
||||
<div className="items">
|
||||
|
|
@ -312,12 +331,12 @@ const UpdatesPage: React.FC<Props> = (props: Props) => {
|
|||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="version" data-version="1.0">
|
||||
<div className="top">
|
||||
<section className="Version" data-version="1.0">
|
||||
<div className="Header">
|
||||
<h3>1.0.0</h3>
|
||||
<time>2022/12/26</time>
|
||||
</div>
|
||||
<ul className="notes">
|
||||
<ul className="Bare Contents">
|
||||
<li>First release!</li>
|
||||
<li>You can embed Youtube videos now</li>
|
||||
<li>Better clicking - right-click and open in a new tab</li>
|
||||
|
|
|
|||
|
|
@ -138,15 +138,11 @@ select {
|
|||
margin-bottom: $unit * 3;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
font-size: $font-regular;
|
||||
p,
|
||||
li {
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
margin-bottom: $unit;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.LinkItem {
|
||||
|
|
|
|||
Loading…
Reference in a new issue