Skip to content

Add mobile browser support for D3-Celestial #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mainnebula wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add mobile browser support for D3-Celestial #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 94 additions & 4 deletions celestial.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions demo/altstars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions demo/chinese.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions demo/language.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions demo/location.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions demo/map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions demo/planets-animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions demo/sky.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 Starry Sky Map</title>
<script type="text/javascript" src="../lib/d3.min.js"></script>
<script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demo/skyview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 Presets</title>
<script type="text/javascript" src="../lib/d3.min.js"></script>
<script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demo/snr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 Supernova Remnants</title>
<script type="text/javascript" src="../lib/d3.min.js"></script>
<script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demo/triangle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 Summer Triangle</title>
<script type="text/javascript" src="../lib/d3.min.js"></script>
<script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demo/viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions demo/wallmap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 Wall Map</title>
<script type="text/javascript" src="../lib/d3.min.js"></script>
<script type="text/javascript" src="../lib/d3.geo.projection.min.js"></script>
Expand Down