Claude/mobile UI improvements 01 pc t6 x1 kr5 h9y ev6i f yidf u

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

celestial.css

@@ -1,6 +1,6 @@
 /* Copyright 2015-16 Olaf Frohn https://github.com/ofrohn, see LICENSE */
 
-#celestial-map { width: 100%; height: auto; margin: 0; padding: 0; display: inline-block; position: relative; min-width:720px; overflow: visible; }
+#celestial-map { width: 100%; height: auto; margin: 0; padding: 0; display: inline-block; position: relative; min-width: 320px; overflow: visible; }
 #celestial-map canvas { display: inline-block; position:relative; z-index:0; cursor:hand; cursor:grab; cursor:-moz-grab; cursor:-webkit-grab; }
 #celestial-map canvas:active { cursor:move; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; }
 #d3-celestial-footer { text-align:center; color:#666; font:10pt/1 'Arial Unicode MS', Arial, Helvetica, sans-serif; }
@@ -69,9 +69,9 @@ input[type="number"]::-webkit-outer-spin-button { height: auto; }
 #celestial-form br + label { margin-left:0; }
 
 /* Zoom controls */
-#celestial-zoomin, 
-#celestial-zoomout { width:32px; height:32px; left:8px; top:12px; background: rgba(255,255,255,0.5); border:1px solid #000; border-radius:3px; position:absolute; font: normal bold 24px/1 Consolas, Courier, 'Courier New', monospace; cursor:pointer; }
-#celestial-zoomout { top: 48px; }
+#celestial-zoomin,
+#celestial-zoomout { width:44px; height:44px; left:8px; top:12px; background: rgba(255,255,255,0.5); border:1px solid #000; border-radius:3px; position:absolute; font: normal bold 24px/1 Consolas, Courier, 'Courier New', monospace; cursor:pointer; display: flex; align-items: center; justify-content: center; }
+#celestial-zoomout { top: 60px; }
 #celestial-zoomin:hover, 
 #celestial-zoomout:hover { background: rgba(255,255,255,0.7); }
 #celestial-zoomin:disabled, 
@@ -103,6 +103,96 @@ input[type="number"]::-webkit-outer-spin-button { height: auto; }
   #celestial-zoomin, #celestial-zoomout, #celestial-form { display: none; }
 }
 
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  /* Stack map and form vertically on tablets and mobile */
+  #celestial-map {
+    display: block;
+    width: 100%;
+    min-width: 320px;
+  }
+
+  #celestial-form {
+    display: block;
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  /* Make form inputs responsive */
+  #celestial-form input[type='text'] {
+    width: calc(100% - 10px);
+    max-width: 300px;
+  }
+
+  #celestial-form .col {
+    white-space: normal;
+  }
+
+  /* Ensure zoom controls are accessible */
+  #celestial-zoomin,
+  #celestial-zoomout {
+    width: 48px;
+    height: 48px;
+    font-size: 28px;
+  }
+
+  #celestial-zoomout {
+    top: 64px;
+  }
+}
+
+@media (max-width: 480px) {
+  /* Phone-specific adjustments */
+  #celestial-map {
+    min-width: 100%;
+  }
+
+  /* Adjust footer for small screens */
+  #d3-celestial-footer {
+    font-size: 9pt;
+    padding: 5px;
+  }
+
+  /* Make form elements more touch-friendly */
+  #celestial-form input[type='button'],
+  #celestial-form select {
+    height: 32px;
+    font-size: 14px;
+  }
+
+  #celestial-form input#download-png,
+  #celestial-form input#download-svg {
+    width: 100%;
+    max-width: 200px;
+    height: 32px;
+  }
+
+  /* Date picker adjustments */
+  #celestial-date {
+    width: 95%;
+    max-width: 300px;
+  }
+}
+
+/* Touch device improvements */
+@media (hover: none) and (pointer: coarse) {
+  /* Increase tap target sizes for touch devices */
+  #celestial-form input[type='checkbox'] {
+    width: 20px;
+    height: 20px;
+  }
+
+  #celestial-form input[type='button'] {
+    min-height: 44px;
+    padding: 8px 12px;
+  }
+
+  /* Disable hover effects on touch devices */
+  #celestial-map canvas {
+    cursor: default;
+  }
+}
+
 /* SVG styles
 
 svg .constname {

demo/altstars.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Alternative Stars</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>

demo/chinese.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Traditional Chinese Constellations</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>

demo/language.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Language Options</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>

demo/location.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Starmap</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>

demo/map.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
   <title>D3-Celestial Star Map</title>
   <script type="text/javascript" src="../lib/d3.min.js"></script>
   <script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>