From c79d6824e3b78ff6e8c4f4d37cd2deda7d70ac9a Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Fri, 25 Mar 2022 23:37:28 +0100 Subject: [PATCH 1/3] Minor UI cleanups (mobile tabs, font sizing) (#503) --- changedetectionio/static/styles/styles.css | 19 ++++++++---- changedetectionio/static/styles/styles.scss | 33 ++++++++++++++++----- 2 files changed, 39 insertions(+), 13 deletions(-) diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index c1698382..cdcd2487 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -244,7 +244,7 @@ footer { .sticky-tab { position: absolute; top: 60px; - font-size: 8px; + font-size: 65%; background: #fff; padding: 10px; } .sticky-tab#left-sticky { @@ -310,14 +310,23 @@ footer { #nav-menu { overflow-x: scroll; } } -/* +@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { + div.sticky-tab#hosted-sticky { + top: 60px; + left: 0px; + right: auto; } + section.content { + padding-top: 110px; } + div.tabs ul li { + display: block; + border-radius: 0px; } + input[type='text'] { + width: 100%; } + /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { - input[type='text'] { - width: 100%; } .watch-table { /* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */ diff --git a/changedetectionio/static/styles/styles.scss b/changedetectionio/static/styles/styles.scss index 9a956f7f..5ca7eb31 100644 --- a/changedetectionio/static/styles/styles.scss +++ b/changedetectionio/static/styles/styles.scss @@ -322,7 +322,7 @@ footer { .sticky-tab { position: absolute; top: 60px; - font-size: 8px; + font-size: 65%; background: #fff; padding: 10px; &#left-sticky { @@ -422,18 +422,35 @@ footer { } } -/* -Max width before this PARTICULAR table gets nasty -This query will take effect for any screen smaller than 760px -and also iPads specifically. -*/ -@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { + +@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) { + + div.sticky-tab#hosted-sticky { + top: 60px; + left: 0px; + right: auto; + } + + section.content { + padding-top: 110px; + } + + // Make the tabs easier to hit, they will be all nice and horizontal + div.tabs ul li { + display: block; + border-radius: 0px; + } input[type='text'] { width: 100%; } - + +/* +Max width before this PARTICULAR table gets nasty +This query will take effect for any screen smaller than 760px +and also iPads specifically. +*/ .watch-table { /* Force table to not be like tables anymore */ thead, tbody, th, td, tr { From 81aa8fa16bf347fb93972b889c871ce7a752c593 Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Sat, 26 Mar 2022 09:56:56 +0100 Subject: [PATCH 2/3] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 91e67b63..d13253b7 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,10 @@ _Know when web pages change! Stay ontop of new information!_ Live your data-life *pro-actively* instead of *re-actively*. -Open source web page monitoring, notification and change detection. +Free, Open-source web page monitoring, notification and change detection. Don't have time? [Try our or $6.99/month plan](https://lemonade.changedetection.io/start) -Self-hosted web page change monitoring +[Self-hosted web page change monitoring](https://lemonade.changedetection.io/start) **Get your own private instance now! Let us host it for you!** From 334010025f160872f6f998cd15bdd44925de775a Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Sat, 26 Mar 2022 14:02:56 +0100 Subject: [PATCH 3/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d13253b7..192fabdf 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ _Know when web pages change! Stay ontop of new information!_ Live your data-life *pro-actively* instead of *re-actively*. -Free, Open-source web page monitoring, notification and change detection. Don't have time? [Try our or $6.99/month plan](https://lemonade.changedetection.io/start) +Free, Open-source web page monitoring, notification and change detection. Don't have time? [Try our $6.99/month plan - unlimited checks and watches!](https://lemonade.changedetection.io/start) [Self-hosted web page change monitoring](https://lemonade.changedetection.io/start)