Skip to content

Commit a46e59e

Browse files
ianrentonianrenton
committed
Split code up into separate files to improve maintainability
1 parent 63a0b91 commit a46e59e

26 files changed

+2015
-2007
lines changed

‎code.js

Lines changed: 0 additions & 1680 deletions
This file was deleted.

‎css/base.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
:root[color-mode="light"] {
2+
--background: white;
3+
--popup-background: white;
4+
--box-background: white;
5+
--text: black;
6+
--link-color: #0078a8;
7+
--band-col-spot: #f9f06b;
8+
--band-col-spot-old: lightgrey;
9+
--band-col-spot-selected: lightblue;
10+
--config-select-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black'><polygon points='0,0 100,0 50,50'/></svg>");
11+
}
12+
:root[color-mode="dark"] {
13+
--background: #111;
14+
--popup-background: #222;
15+
--box-background: #222;
16+
--text: #eee;
17+
--link-color: #5ed1ff;
18+
--band-col-spot: #3e3b1b;
19+
--band-col-spot-old: #1e1e1e;
20+
--band-col-spot-selected: #252562;
21+
--config-select-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>");
22+
}
23+
24+
/* Overall */
25+
html, body, div#map {
26+
width:100%;
27+
height:100%;
28+
margin:0;
29+
overflow: hidden;
30+
font-family: sans-serif;
31+
background-color: var(--background);
32+
color: var(--text);
33+
font-size: 16px;
34+
cursor: default;
35+
}
36+
html, body {
37+
background-color: var(--background);
38+
}

‎css/layout.css

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/* Main layout */
2+
button.slideOutButton {
3+
font-size: 1.5em;
4+
width: 2em;
5+
height: 2em;
6+
position: absolute;
7+
right: 0.5em;
8+
padding: 0;
9+
z-index: 1002;
10+
}
11+
button#infoButton {
12+
top: 0.5em;
13+
}
14+
button#configButton {
15+
top: 3em;
16+
}
17+
button#bandsButton {
18+
top: 5.5em;
19+
}
20+
button.slideOutButton i {
21+
padding: 0;
22+
margin: 0;
23+
position: relative;
24+
top: 0;
25+
left: 0;
26+
color: var(--text);
27+
}
28+
div#map {
29+
width:auto;
30+
height:100%;
31+
margin:0;
32+
overflow: hidden;
33+
}
34+
div.rightbox {
35+
width: 30em;
36+
height: 100%;
37+
position: absolute;
38+
top: 0px;
39+
right: 0px;
40+
margin: 0px;
41+
padding: 0px;
42+
z-index: 1001;
43+
display: none;
44+
overflow: auto;
45+
}
46+
div.rightboxInner {
47+
overflow-x: hidden;
48+
overflow-y: auto;
49+
margin-left: 1em;
50+
margin-right: 2em;
51+
}
52+
div.rightboxInner p:last-child {
53+
margin-bottom: 2em;
54+
}
55+
div#bandsPanel {
56+
overflow: hidden;
57+
}
58+
div#bandsPanelInner {
59+
height: 100%;
60+
margin: 0 4.5em 0 0;
61+
padding: 0px;
62+
overflow-x: auto;
63+
overflow-y: auto;
64+
white-space: nowrap;
65+
display: flex;
66+
overscroll-behavior-x: none;
67+
}
68+
69+
/* Bands panel inner layout */
70+
div.bandCol {
71+
display: inline-block;
72+
height: 100%;
73+
min-width: 8em;
74+
display: flex;
75+
flex-flow: column;
76+
overflow-y: clip;
77+
}
78+
div.bandColHeader {
79+
flex: 0 1 auto;
80+
}
81+
div.bandColMiddle {
82+
flex: 1 1 auto;
83+
overflow-y: auto;
84+
}
85+
.bandColMiddle {
86+
-ms-overflow-style: none;
87+
scrollbar-width: none;
88+
overscroll-behavior-y: none;
89+
}
90+
.bandColMiddle::-webkit-scrollbar {
91+
display: none;
92+
}
93+
div.bandColMiddle ul {
94+
display: table;
95+
table-layout: fixed;
96+
width: 100%;
97+
min-height: 100%;
98+
margin: 0;
99+
padding: 0;
100+
-moz-box-sizing: border-box;
101+
box-sizing: border-box;
102+
}
103+
div.bandColMiddle ul li {
104+
display: table-row;
105+
line-height: 0.5em;
106+
}
107+
div.bandColMiddle ul li.withSpots {
108+
line-height: 1em;
109+
}
110+
div.bandColMiddle ul li span {
111+
display: table-cell;
112+
vertical-align: middle;
113+
}

‎css/mobile.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* Mobile */
2+
@media only screen and (max-width: 800px) {
3+
span.hideonmobile {
4+
display: none;
5+
}
6+
div.rightbox {
7+
width: 100%;
8+
}
9+
.leaflet-container .leaflet-control-attribution {
10+
display: none;
11+
}
12+
}

‎css/style.css

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
2+
3+
4+
5+
6+
/* Button styles */
7+
button.slideOutButton {
8+
background-color: var(--background);
9+
border: 1px solid var(--text);
10+
border-radius: 3px;
11+
}
12+
.textFlipHorizontal {
13+
-moz-transform: scale(-1, 1);
14+
-webkit-transform: scale(-1, 1);
15+
-o-transform: scale(-1, 1);
16+
-ms-transform: scale(-1, 1);
17+
transform: scale(-1, 1);
18+
}
19+
20+
/* Right box styles */
21+
div.rightbox {
22+
background-color: var(--background);
23+
}
24+
div.rightbox p#subtitle {
25+
margin-right: 4em;
26+
font-weight: bold;
27+
}
28+
div.optionlist {
29+
line-height: 150%;
30+
}
31+
div.optionlist label {
32+
margin-right: 2em;
33+
}
34+
label.configLabel {
35+
display: inline-block;
36+
white-space: nowrap;
37+
}
38+
select.configSelect {
39+
font-size: 1em;
40+
border: 1px solid var(--text);
41+
border-radius: 3px;
42+
background: var(--config-select-bg) no-repeat;
43+
background-size: 12px;
44+
background-position: calc(100% + 1em - 20px) calc(50% + 3px);
45+
background-repeat: no-repeat;
46+
background-color: var(--box-background) !important;
47+
color: var(--text);
48+
}
49+
button.configButton {
50+
padding: 0.3em;
51+
font-size: 1em;
52+
background-color: var(--box-background);
53+
border: 1px solid var(--text);
54+
border-radius: 3px;
55+
color: var(--text);
56+
}
57+
button#updateNow {
58+
font-size: 1em;
59+
}
60+
input {
61+
font-size: 1em;
62+
font-family: sans-serif;
63+
}
64+
div.bandColMiddle ul {
65+
display: table;
66+
table-layout: fixed;
67+
width: 100%;
68+
height: 100%;
69+
margin: 0;
70+
padding: 0;
71+
-moz-box-sizing: border-box;
72+
box-sizing: border-box;
73+
border-left: 2px dotted;
74+
}
75+
76+
/* PWA install prompt hidden unless appropriate */
77+
p#installPrompt {
78+
display: none;
79+
}
80+
81+
/* Marker and popup styles */
82+
.leaflet-tooltip, .leaflet-popup-content-wrapper, .leaflet-popup-tip {
83+
background-color: var(--popup-background);
84+
color: var(--text);
85+
}
86+
.leaflet-tooltip {
87+
border: 1px solid var(--popup-background);
88+
}
89+
.leaflet-tooltip-top::before {
90+
border-top-color: var(--popup-background);
91+
}
92+
i.markerPopupIcon {
93+
display: inline-block;
94+
vertical-align: top;
95+
margin-top: 0.1em;
96+
width: 1.2em;
97+
}
98+
span.popupRefName {
99+
display:inline-block;
100+
white-space: normal;
101+
margin-right: 1em;
102+
}
103+
104+
/* Bands panel inner styles */
105+
div.bandColHeader {
106+
text-align: center;
107+
font-weight: bold;
108+
padding: 0.5em;
109+
}
110+
div.bandColMiddle {
111+
margin-left: 3px;
112+
border-left: 2px dotted --text;
113+
}
114+
p#bandPanelNoSpots {
115+
margin-left: 1em;
116+
margin-right: 1em;
117+
white-space: normal;
118+
}
119+
div.bandColSpot {
120+
display: block;
121+
border-radius: 3px;
122+
padding: 3px;
123+
}
124+
div.bandColSpotCurrent {
125+
background: var(--band-col-spot);
126+
}
127+
div.bandColSpotOld {
128+
background: var(--band-col-spot-old);
129+
}
130+
div.bandColSpotSelected {
131+
background: var(--band-col-spot-selected);
132+
}
133+
134+
/* Text/link styles */
135+
a, .leaflet-container a {
136+
color: var(--link-color);
137+
text-decoration: none;
138+
}
139+
140+
/* Leaflet.js mods */
141+
.leaflet-container .leaflet-control-attribution {
142+
background: none;
143+
color: var(--text);
144+
}

‎apple-touch-icon.png renamed to ‎img/apple-touch-icon.png

File renamed without changes.

‎banner.png renamed to ‎img/banner.png

File renamed without changes.

‎banner2.png renamed to ‎img/banner2.png

File renamed without changes.

‎favicon-192.png renamed to ‎img/favicon-192.png

File renamed without changes.

‎favicon-32.png renamed to ‎img/favicon-32.png

File renamed without changes.

‎favicon-512.png renamed to ‎img/favicon-512.png

File renamed without changes.

‎favicon.png renamed to ‎img/favicon.png

File renamed without changes.

‎favicon.svg renamed to ‎img/favicon.svg

File renamed without changes.

‎index.html

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,28 @@
99
<meta name="theme-color" content="white" />
1010
<meta name="mobile-web-app-capable" content="yes">
1111
<meta name="apple-mobile-web-app-capable" content="yes">
12-
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12+
<meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
1313

1414
<meta property="og:title" content="Field Spotter" />
1515
<meta property="twitter:title" content="Field Spotter" />
1616
<meta name="description" content="A mobile Amateur Radio spotting tool for POTA, SOTA, WWFF and similar programs" />
1717
<meta property="og:description" content="A mobile Amateur Radio spotting tool for POTA, SOTA, WWFF and similar programs" />
1818
<link rel="canonical" href="https://fieldspotter.radio/" />
1919
<meta property="og:url" content="https://fieldspotter.radio/" />
20-
<meta property="og:image" content="https://fieldspotter.radio/banner2.png" />
21-
<meta property="twitter:image" content="https://fieldspotter.radio/banner2.png" />
20+
<meta property="og:image" content="https://fieldspotter.radio/img/banner2.png" />
21+
<meta property="twitter:image" content="https://fieldspotter.radio/img/banner2.png" />
2222
<meta name="twitter:card" content="summary_large_image" />
2323
<meta name="author" content="Ian Renton" />
2424
<meta property="og:locale" content="en_GB" />
2525
<meta property="og:type" content="website" />
2626

2727
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
2828
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/dist/css/leaflet.extra-markers.min.css">
29-
<link rel="stylesheet" href="style.css" type="text/css">
29+
30+
<link rel="stylesheet" href="css/base.css" type="text/css">
31+
<link rel="stylesheet" href="css/layout.css" type="text/css">
32+
<link rel="stylesheet" href="css/style.css" type="text/css">
33+
<link rel="stylesheet" href="css/mobile.css" type="text/css">
3034

3135
<script src="https://kit.fontawesome.com/eb1770b90a.js" crossorigin="anonymous"></script>
3236
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
@@ -41,11 +45,11 @@
4145
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
4246
<script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
4347

44-
<link rel="icon" type="image/svg+xml" href="favicon.svg">
45-
<link rel="alternate icon" type="image/png" href="favicon.png">
46-
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
47-
<link rel="alternate icon" type="image/png" href="favicon-192.png">
48-
<link rel="alternate icon" type="image/png" href="favicon-512.png">
48+
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
49+
<link rel="alternate icon" type="image/png" href="img/favicon.png">
50+
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
51+
<link rel="alternate icon" type="image/png" href="img/favicon-192.png">
52+
<link rel="alternate icon" type="image/png" href="img/favicon-512.png">
4953
<link rel="manifest" href="manifest.webmanifest">
5054
</head>
5155
<body>
@@ -176,6 +180,14 @@ <h2>Updates</h2>
176180
<div class="rightboxInner" id="bandsPanelInner"></div>
177181
</div>
178182

179-
<script src="code.js"></script>
183+
<script src="js/globals.js"></script>
184+
<script src="js/api-funcs.js"></script>
185+
<script src="js/display-funcs.js"></script>
186+
<script src="js/utility-funcs.js"></script>
187+
<script src="js/map-setup-funcs.js"></script>
188+
<script src="js/ui-funcs.js"></script>
189+
<script src="js/local-storage-funcs.js"></script>
190+
<script src="js/pwa-funcs.js"></script>
191+
<script src="js/startup.js"></script>
180192
</body>
181193
</html>

0 commit comments

Comments
 (0)