fix(site): incorrect cart layout in iOS devices aduros#85

site/src/components/AspectRatio.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './AspectRatio.module.css';
+
+function processAspectRatioValue(value) {
+  return Number.isFinite(value) && value >= 0 ? value : 1;
+}
+
+/**
+ * @see https://stackoverflow.com/a/53245657
+ */
+export function AspectRatio({
+  width: widthRatio,
+  height: heightRatio,
+  children,
+  className,
+  ...otherProps
+}) {
+  const width = processAspectRatioValue(widthRatio);
+  const height = processAspectRatioValue(heightRatio);
+
+  return (
+    <div {...otherProps} className={clsx(className, styles.ratio)}>
+      <svg className={styles.innerSvg} viewBox={`0 0 ${width} ${height}`}></svg>
+      {children}
+    </div>
+  );
+}

site/src/components/AspectRatio.module.css

@@ -0,0 +1,12 @@
+.ratio {
+  display: grid;
+  padding: 0;
+}
+
+.ratio > * {
+  grid-area: 1/1;
+}
+
+.innerSvg {
+  visibility: hidden;
+}

site/src/components/PlayCart.js

@@ -1,31 +1,8 @@
 import React from 'react';
-import clsx from 'clsx';
 import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-
+import { AspectRatio } from './AspectRatio';
 import { Giscus } from "@giscus/react";
-// import styles from './index.module.css';
-// import HomepageFeatures from '../components/HomepageFeatures';
-
-// function HomepageHeader() {
-//   const {siteConfig} = useDocusaurusContext();
-//   return (
-//     <header className={clsx('hero hero--primary', styles.heroBanner)}>
-//       <div className="container">
-//         <h1 className="hero__title">{siteConfig.title}</h1>
-//         <p className="hero__subtitle">{siteConfig.tagline}</p>
-//         <div className={styles.buttons}>
-//           <Link
-//             className="button button--secondary button--lg"
-//             to="/docs/intro">
-//             Docusaurus Tutorial - 5min ⏱️
-//           </Link>
-//         </div>
-//       </div>
-//     </header>
-//   );
-// }
 
 function Embed ({ slug, title, author }) {
     let params = "?url="+encodeURIComponent(`/carts/${slug}.wasm`);
@@ -37,12 +14,14 @@ function Embed ({ slug, title, author }) {
         params += "&author="+encodeURIComponent(author);
     }
     return (
+        <AspectRatio width={1} height={1} className="game-embed-wrapper">
         <iframe
             src={`/embed/${params}`}
             allow="fullscreen"
             frameBorder="0"
             className="game-embed">
         </iframe>
+        </AspectRatio>
     );
 }
 

site/src/css/custom.css

@@ -73,9 +73,12 @@ html[data-theme='dark'] .header-github-link:before {
   text-align: center;
 }
 
-.game-embed {
-  aspect-ratio: 1 / 1;
+.game-embed-wrapper {
   width: calc(min(480px, 100%, 100vh - 200px));
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin: 2rem auto;
+}
+
+.game-embed {
+  width: 100%;
+  height: 100%;
 }