Fix Mobile Styling & Add compatibility section to demo site

Hatchibombotar · Jul 7, 2023 · 3d082a8 · 3d082a8
1 parent c884f50
commit 3d082a8
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 12 deletions.
diff --git a/demos/src/App.tsx b/demos/src/App.tsx
@@ -9,6 +9,7 @@ import Markdown from 'solid-markdown';
 import readme from "../../readme.md?raw"
 
 import { FaBrandsNpm, FaBrandsGithub } from 'solid-icons/fa'
+import { CgAsterisk, CgCheck } from 'solid-icons/cg'
 
 const NPM_URL = "https://www.npmjs.com/package/@hatchibombotar/cubemap"
 const GITHUB_URL = "https://github.com/Hatchibombotar/cubemap"
@@ -29,19 +30,28 @@ const App: Component = () => {
         </a>
       </header>
       <hr class="mb-5" />
-      <main class="mx-4">
-        <h2 class="text-gray-800 mb-2">readme.md</h2>
-        <Markdown class="prose max-w-2xl">
-          {readme}
-        </Markdown>
+      <main class="max-w-[100vw]">
+        <div class="mx-4">
+          <h2 class="text-gray-800 mb-2">readme.md</h2>
+          <Markdown class="prose">
+            {readme}
+          </Markdown>
+        </div>
+
         <hr class="my-5" />
+        <div class="prose max-w-2xl mx-4">
+          <h2>browser compatibility</h2>
+        <Compatibility/>
 
-        <div class="prose max-w-2xl">
+        </div>
+        <hr class="my-5" />
+
+        <div class="prose max-w-2xl mx-4">
           <h2 class="">examples</h2>
           <h3>rotate_type: "drag"</h3>
-          <CubemapExample options={{ "rotate_type": "drag", width: "42rem", height: "42rem" }} />
+          <CubemapExample options={{ "rotate_type": "drag", width: "auto", height: "42rem" }} />
           <h3>rotate_type: "auto"</h3>
-          <CubemapExample options={{ "rotate_type": "auto", width: "42rem", height: "42rem" }} />
+          <CubemapExample options={{ "rotate_type": "auto", width: "auto", height: "42rem" }} />
         </div>
       </main>
       <hr class="my-5" />
@@ -80,4 +90,35 @@ function CubemapExample({ options }: { options: CubemapOptions }) {
   return <div ref={container}></div>
 }
 
+function Compatibility() {
+  return <div class="">
+    <table class=" text-left overflow-x-scroll">
+      <thead>
+        <tr>
+          <th class=""></th>
+          <th class="">Browser</th>
+          <th class="">Notes</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <CgCheck class="my-auto"/>
+          <td class="">Chrome/Edge</td>
+          <td class=""></td>
+        </tr>
+        <tr>
+          <CgAsterisk/>
+          <td class="">iOS</td>
+          <td class="">Auto rotation does not work with iOS versions under 16.</td>
+        </tr>
+        <tr>
+          <CgAsterisk/>
+          <td class="">Firefox</td>
+          <td class="">"drag" rotation works fine, "auto" rotation is a <a href="https://github.com/Hatchibombotar/cubemap/issues/1"><span>bit choppy</span></a>.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+}
+
 export default App;
diff --git a/demos/src/index.css b/demos/src/index.css
@@ -14,4 +14,12 @@ code {
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.prose {
+ @apply prose-code:before:hidden prose-code:after:hidden
+}
+
+.prose h1 {
+  line-break: anywhere;
+}
diff --git a/demos/tailwind.config.js b/demos/tailwind.config.js
@@ -3,9 +3,7 @@ module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
-  theme: {
-    extend: {},
-  },
+  theme: {},
   plugins: [
     require('@tailwindcss/typography'),
   ],