Add a special class to the app container when the player page is active

src/components/player/player.css

@@ -1,3 +1,7 @@
+.app.play {
+  height: 100%;
+}
+
 .ifplayer {
   height: 100%;
   display: flex;

src/index.js

@@ -1,7 +1,10 @@
 import { h, render } from 'preact'
 import { Route, Router, Switch } from 'wouter-preact'
 
-import { useHashLocation } from '~/src/utils/utils.routing'
+import {
+  useHashLocation,
+  extractView
+} from '~/src/utils/utils.routing'
 import {
   useThemeEngine
 } from '~/src/themes/themes'
@@ -14,10 +17,15 @@ import '~/src/style/base.css'
 
 function App () {
   const themeEngine = useThemeEngine()
+  const [location] = useHashLocation()
 
   return (
     <Router hook={useHashLocation}>
-      <div className={['app', themeEngine.currentTheme].join(' ')}>
+      <div className={[
+        'app',
+        extractView(location),
+        themeEngine.currentTheme].join(' ')}>
+
         <Switch>
           <Route path='/'>
             <HomeView {...{
@@ -37,6 +45,7 @@ function App () {
             404
           </Route>
         </Switch>
+
       </div>
     </Router>
   )

src/style/base.css

@@ -11,7 +11,7 @@ html, body {
 }
 
 .app {
-  height: 100%;
+  min-height: 100%;
   box-sizing: border-box;
 
   display: flex;
@@ -66,14 +66,14 @@ ul {
 
 /* Home */
 
-.app > main.home {
+.app > .view.home {
   padding: var(--inner-padding);
   max-height: unset;
   height: 200%;
 }
 
-.home input,
-.home select {
+.view.home input,
+.view.view.home select {
   padding: 4px 8px;
   color: var(--main-color);
   background-color: var(--bg-color);
@@ -82,20 +82,20 @@ ul {
   font: inherit;
 }
 
-.home summary {
+.view.home summary {
   display: inline-block;
   padding-right: 4px;
   cursor: pointer;
 }
 
-.home .play label {
+.view.home .play label {
   display: inline-block;
   margin-bottom: 16px;
   width: 100%;
   max-width: 400px;
 }
 
-.home .play input {
+.view.home .play input {
   box-sizing: border-box;
   width: 100%;
 }

src/utils/utils.routing.js

@@ -22,3 +22,8 @@ export const useHashLocation = () => {
 
 export const buildPlayLinkHref = (url, theme) =>
   `/#/play/${theme}/${encodeURIComponent(url)}`
+
+export const extractView = location => {
+  const currentView = location.split('/').filter(Boolean)[0]
+  return currentView || ''
+}

src/views/HomeView.jsx

@@ -28,10 +28,10 @@ export default function ({ themeEngine }) {
         <p>
           Interactive Fiction interpreter
           that runs right in your browser.
-          <br/>
+          <br />
           Source code can be found in this <a
-            target="_blank"
-            href="https://github.com/He4eT/ifplayer">
+            target='_blank'
+            href='https://github.com/He4eT/ifplayer'>
             repository
           </a>.
         </p>

src/views/PlayerView.jsx

@@ -15,7 +15,7 @@ export default function ({ setTheme, theme, encodedUrl }) {
   }, [encodedUrl])
 
   return (
-    <main className='view playerView'>
+    <main>
       <UrlPlayer url={targetUrl} />
     </main>
   )