Fix up viewer

This commit is contained in:
Mentor Palokaj 2021-10-21 18:06:23 +02:00
parent 8a48f5fc24
commit d18b8b003c
6 changed files with 13 additions and 10 deletions

View File

@ -61,7 +61,7 @@ a img {
position: absolute;
width: 120%;
min-width: 1920px;
opacity: .5;
opacity: .1;
z-index: -1;
}

View File

@ -1,6 +1,7 @@
import { Container, Loading } from './components/generic'
import { log, callApi, exportSvg } from './modules/helpers'
import download from 'downloadjs'
import DraftRocketeer from './assets/draft-rocketeer.png'
import './App.css'
import { useEffect, useState } from 'react'
@ -22,11 +23,11 @@ function App() {
// Get ID from url
useEffect( () => {
// Expecting /rocketeer/:id
const { pathname } = window.location
const { search } = window.location
const query = new URLSearchParams( search )
const id = Number( query.get( 'rocketeer' ) || 'none' )
// Remove '/rocketeer/'
const id = Number( pathname.replace( '/rocketeer/', '' ) )
log( 'Id found: ', id )
// Check if id is a number
if( isNaN( id ) ) return setError( 'No rocketeer selected' )
@ -105,15 +106,15 @@ function App() {
if( rocketeer ) return <Container>
<img src={ rocketeer.image } />
<img alt={ `Rocketeer ${ rocketeerId }` } src={ rocketeer.image || DraftRocketeer } />
<h1>{ rocketeer.name }</h1>
<p>{ rocketeer.description }</p>
<p>{ rocketeer.description || "This is a generic Rocketeer without a description. That should only happen during testing. Contact us on Discord if you see this." }</p>
<div>
<a href={ rocketeer.image } className="button">Download SVG</a>
<a onClick={ e => downloadJPEG( e, 500 ) } className="button">Download JPEG</a>
<a href='/#' onClick={ e => downloadJPEG( e, 500 ) } className="button">Download JPEG</a>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 196 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 16 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -1,4 +1,4 @@
// import ContainerBackground from '../assets/undraw_launch_day_4e04.svg'
import ContainerBackground from '../assets/undraw_connected_world_wuay.svg'
export const Container = ( { children } ) => <main>
@ -8,7 +8,7 @@ export const Container = ( { children } ) => <main>
</div>
{ /* <img className="stretchBackground" src={ ContainerBackground } alt="Launching rocket" /> */ }
<img className="stretchBackground" src={ ContainerBackground } alt="Launching rocket" />
</main>