website

README.md

@@ -80,8 +80,6 @@ You can run `./host_manager.py --help` to see which options are available. Some
 
 #### styles, fonts, icons, compare tool - in separate [styles repo](https://github.com/hyperknot/openfreemap-styles)
 
-
-
 ## How to run?
 
 Use Python 3.10/3.11.
@@ -167,8 +165,6 @@ future
 - support tilemaker in addition to planetiler
 - automatic tile-gen and upload
 
-
-
 ## License
 
 The license of this project is [MIT](https://www.tldrlegal.com/license/mit-license). Map data is from [OpenStreetMap](https://www.openstreetmap.org/copyright). The licenses for included projects are listed in [LICENSE.md](https://github.com/hyperknot/openfreemap/blob/main/LICENSE.md).

website/assets/style.css

@@ -239,29 +239,18 @@ hr {
   margin: 2em 0;
 }
 
-@media (max-width: 550px) {
-  body {
-    padding: 0 20px 40px;
-  }
-
-  .static,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .col-lbl,
-  p {
-    max-width: 100%;
-  }
-}
-
 #support-plans-slider {
   max-width: 600px;
   margin: 200px auto 150px;
 }
 
+@media (max-width: 550px) {
+  #support-plans-slider {
+    max-width: 98%;
+    margin: 170px auto 120px;
+  }
+}
+
 .noUi-connects {
   cursor: pointer;
 }
@@ -292,6 +281,17 @@ hr {
   padding: 10px;
 }
 
+.noUi-tooltip.first {
+  left: 0;
+  transform: unset;
+}
+
+.noUi-tooltip.last {
+  right: 0;
+  left: unset;
+  transform: unset;
+}
+
 .plan-name {
   font-weight: bold;
   margin-bottom: 10px;
@@ -318,3 +318,21 @@ hr {
 .plan-link:focus {
   background-color: #fdb900;
 }
+
+@media (max-width: 550px) {
+  body {
+    padding: 0 20px 40px;
+  }
+
+  .static,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .col-lbl,
+  p {
+    max-width: 100%;
+  }
+}

website/assets/support_plans.js

@@ -39,6 +39,19 @@ pricingSlider.on('update', function (values, _) {
   const value = parseInt(values[0])
   const el = sliderDiv.querySelector('.noUi-value[data-value="' + value + '"]')
   el.classList.add('active')
+
+  const tooltip = sliderDiv.querySelector('.noUi-tooltip')
+  tooltip.classList.remove('first')
+  tooltip.classList.remove('last')
+
+  if (screen.width < 500) {
+    if (value === 0) {
+      tooltip.classList.add('first')
+    }
+    if (value === priceNumbers.length - 1) {
+      tooltip.classList.add('last')
+    }
+  }
 })
 
 const pips = sliderDiv.querySelectorAll('.noUi-value')