From 7f9c31f600af5aa937fd7974c05ad33c3b90d97c Mon Sep 17 00:00:00 2001
From: Zsolt Ero <zsolt.ero@gmail.com>
Date: Wed, 31 Jan 2024 18:19:10 +0100
Subject: [PATCH] website

---
 README.md                       |  6 +---
 website/assets/style.css        | 54 ++++++++++++++++++++++-----------
 website/assets/support_plans.js | 13 ++++++++
 3 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index e7b31a8..e660e90 100644
--- a/README.md
+++ b/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.
@@ -96,7 +94,7 @@ It's recommended to use [direnv](https://direnv.net/), to have automatic venv ac
 
 2. SSH_PASSWD is only needed if you don't use SSH keys.
 
-3. rclone.conf is only needed for uploading. For http_host  there is no need for this file.
+3. rclone.conf is only needed for uploading. For http_host there is no need for this file.
 
 4. certs - these are the certs for nginx. If you put a cert here, it'll be uploaded to `/data/nginx/certs`.
 
@@ -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).
diff --git a/website/assets/style.css b/website/assets/style.css
index 3745f0f..27ad078 100644
--- a/website/assets/style.css
+++ b/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%;
+  }
+}
diff --git a/website/assets/support_plans.js b/website/assets/support_plans.js
index 4d7a640..f03b36d 100644
--- a/website/assets/support_plans.js
+++ b/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')