From f67d2623b7a50849893cfa774d85e4e2278308e2 Mon Sep 17 00:00:00 2001
From: Andrew Dolgov <noreply@fakecake.org>
Date: Thu, 11 Mar 2021 19:26:19 +0300
Subject: [PATCH] add some media queries to improve main UI on small-width
 devices

---
 index.php                 |  2 +-
 js/Headlines.js           |  2 +-
 themes/compact.css        | 22 +++++++++++++++++++++-
 themes/compact_night.css  | 22 +++++++++++++++++++++-
 themes/light.css          | 22 +++++++++++++++++++++-
 themes/light/defines.less |  5 +++++
 themes/light/prefs.less   | 10 ++++++++++
 themes/light/tt-rss.less  | 16 +++++++++++++++-
 themes/night.css          | 22 +++++++++++++++++++++-
 themes/night_blue.css     | 22 +++++++++++++++++++++-
 10 files changed, 137 insertions(+), 8 deletions(-)

diff --git a/index.php b/index.php
index fd3eebafa..4ae81c00f 100644
--- a/index.php
+++ b/index.php
@@ -197,7 +197,7 @@
 				?>
             </select>
 
-            <div dojoType="fox.form.ComboButton" onclick="Feeds.catchupCurrent()">
+            <div class="catchup-button" dojoType="fox.form.ComboButton" onclick="Feeds.catchupCurrent()">
                 <span><?= __('Mark as read') ?></span>
                 <div dojoType="dijit.DropDownMenu">
                     <div dojoType="dijit.MenuItem" onclick="Feeds.catchupCurrent('1day')">
diff --git a/js/Headlines.js b/js/Headlines.js
index 403f3f52c..4dad68db9 100755
--- a/js/Headlines.js
+++ b/js/Headlines.js
@@ -624,7 +624,7 @@ const Headlines = {
 				</span>
 				<span class='right'>
 					<span id='selected_prompt'></span>
-					<div dojoType='fox.form.DropDownButton' title='"${__('Select articles')}'>
+					<div class='select-articles-dropdown' dojoType='fox.form.DropDownButton' title='"${__('Select articles')}'>
 						<span>${__("Select...")}</span>
 						<div dojoType='dijit.Menu' style='display: none;'>
 						<div dojoType='dijit.MenuItem' onclick='Headlines.select("all")'>${__('All')}</div>
diff --git a/themes/compact.css b/themes/compact.css
index 3f3ecd846..e8fe58c8c 100644
--- a/themes/compact.css
+++ b/themes/compact.css
@@ -766,6 +766,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search {
   margin-left: 4px;
 }
+@media (max-width: 768px) {
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate {
+    display: none;
+  }
+}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
   align-items: center;
@@ -780,11 +786,17 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
   margin-right: 4px;
   color: #257aa7;
 }
-@media (max-width: 992px) {
+@media (max-width: 768px) {
   body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
     display: none;
   }
 }
+@media (max-width: 576px) {
+  body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown,
+  body.ttrss_main #toolbar-frame #toolbar .catchup-button {
+    display: none;
+  }
+}
 body.ttrss_main #header {
   text-align: right;
   color: #555;
@@ -1557,6 +1569,14 @@ body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name {
   text-align: right;
   font-weight: bold;
 }
+@media (max-width: 992px) {
+  body.ttrss_prefs ul.prefs-plugin-list li label.checkbox {
+    min-width: 200px ! important;
+  }
+  body.ttrss_prefs ul.prefs-plugin-list li .version {
+    display: none;
+  }
+}
 body.ttrss_prefs ul.prefs-plugin-list li .actions {
   flex-grow: 2;
   text-align: right;
diff --git a/themes/compact_night.css b/themes/compact_night.css
index 22be462c7..1870f963b 100644
--- a/themes/compact_night.css
+++ b/themes/compact_night.css
@@ -766,6 +766,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search {
   margin-left: 4px;
 }
+@media (max-width: 768px) {
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate {
+    display: none;
+  }
+}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
   align-items: center;
@@ -780,11 +786,17 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
   margin-right: 4px;
   color: #b87d2c;
 }
-@media (max-width: 992px) {
+@media (max-width: 768px) {
   body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
     display: none;
   }
 }
+@media (max-width: 576px) {
+  body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown,
+  body.ttrss_main #toolbar-frame #toolbar .catchup-button {
+    display: none;
+  }
+}
 body.ttrss_main #header {
   text-align: right;
   color: #ccc;
@@ -1557,6 +1569,14 @@ body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name {
   text-align: right;
   font-weight: bold;
 }
+@media (max-width: 992px) {
+  body.ttrss_prefs ul.prefs-plugin-list li label.checkbox {
+    min-width: 200px ! important;
+  }
+  body.ttrss_prefs ul.prefs-plugin-list li .version {
+    display: none;
+  }
+}
 body.ttrss_prefs ul.prefs-plugin-list li .actions {
   flex-grow: 2;
   text-align: right;
diff --git a/themes/light.css b/themes/light.css
index 59c17a457..0619476cf 100644
--- a/themes/light.css
+++ b/themes/light.css
@@ -766,6 +766,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search {
   margin-left: 4px;
 }
+@media (max-width: 768px) {
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate {
+    display: none;
+  }
+}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
   align-items: center;
@@ -780,11 +786,17 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
   margin-right: 4px;
   color: #257aa7;
 }
-@media (max-width: 992px) {
+@media (max-width: 768px) {
   body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
     display: none;
   }
 }
+@media (max-width: 576px) {
+  body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown,
+  body.ttrss_main #toolbar-frame #toolbar .catchup-button {
+    display: none;
+  }
+}
 body.ttrss_main #header {
   text-align: right;
   color: #555;
@@ -1557,6 +1569,14 @@ body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name {
   text-align: right;
   font-weight: bold;
 }
+@media (max-width: 992px) {
+  body.ttrss_prefs ul.prefs-plugin-list li label.checkbox {
+    min-width: 200px ! important;
+  }
+  body.ttrss_prefs ul.prefs-plugin-list li .version {
+    display: none;
+  }
+}
 body.ttrss_prefs ul.prefs-plugin-list li .actions {
   flex-grow: 2;
   text-align: right;
diff --git a/themes/light/defines.less b/themes/light/defines.less
index 338c71d79..db86ee0c0 100644
--- a/themes/light/defines.less
+++ b/themes/light/defines.less
@@ -24,6 +24,11 @@
 @font-size-toolbar: 13px;
 @font-size-content: 14px;
 
+@breakpoint-sm: 576px;
+@breakpoint-md: 768px;
+@breakpoint-lg: 992px;
+@breakpoint-xl: 1200px;
+
 @embed-responsive-padding: 56.25%; // Use 56.25% for 16:9 aspect ratio, 75% for 4:3.
 
 body.ttrss_main,
diff --git a/themes/light/prefs.less b/themes/light/prefs.less
index 0ac0bed52..a7b964fc0 100644
--- a/themes/light/prefs.less
+++ b/themes/light/prefs.less
@@ -155,6 +155,16 @@ body.ttrss_prefs {
 				}
 			}
 
+			@media (max-width: @breakpoint-lg) {
+				label.checkbox {
+					min-width : 200px ! important;
+				}
+
+				.version {
+					display : none;
+				}
+			}
+
 			.actions {
 				flex-grow : 2;
 				text-align: right;
diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less
index 7fc9ebe01..1f9ad7c4b 100644
--- a/themes/light/tt-rss.less
+++ b/themes/light/tt-rss.less
@@ -887,6 +887,12 @@ body.ttrss_main {
 					.feed_title, .cancel_search {
 						margin-left : 4px;
 					}
+
+					@media (max-width: @breakpoint-md) {
+						.feed_title, i.icon-syndicate {
+							display : none;
+						}
+					}
 				}
 
 				.right {
@@ -907,11 +913,19 @@ body.ttrss_main {
 				color : @color-accent;
 			}
 
-			@media (max-width: 992px) {
+			@media (max-width: @breakpoint-md) {
 				#selected_prompt {
 					display : none;
 				}
 			}
+
+			@media (max-width: @breakpoint-sm) {
+				.select-articles-dropdown,
+				.catchup-button {
+					display : none;
+				}
+			}
+
 		}
 	}
 
diff --git a/themes/night.css b/themes/night.css
index 2207450ed..5b13ad506 100644
--- a/themes/night.css
+++ b/themes/night.css
@@ -767,6 +767,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search {
   margin-left: 4px;
 }
+@media (max-width: 768px) {
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate {
+    display: none;
+  }
+}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
   align-items: center;
@@ -781,11 +787,17 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
   margin-right: 4px;
   color: #b87d2c;
 }
-@media (max-width: 992px) {
+@media (max-width: 768px) {
   body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
     display: none;
   }
 }
+@media (max-width: 576px) {
+  body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown,
+  body.ttrss_main #toolbar-frame #toolbar .catchup-button {
+    display: none;
+  }
+}
 body.ttrss_main #header {
   text-align: right;
   color: #ccc;
@@ -1558,6 +1570,14 @@ body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name {
   text-align: right;
   font-weight: bold;
 }
+@media (max-width: 992px) {
+  body.ttrss_prefs ul.prefs-plugin-list li label.checkbox {
+    min-width: 200px ! important;
+  }
+  body.ttrss_prefs ul.prefs-plugin-list li .version {
+    display: none;
+  }
+}
 body.ttrss_prefs ul.prefs-plugin-list li .actions {
   flex-grow: 2;
   text-align: right;
diff --git a/themes/night_blue.css b/themes/night_blue.css
index 9d2b4fa38..1471d6e69 100644
--- a/themes/night_blue.css
+++ b/themes/night_blue.css
@@ -767,6 +767,12 @@ body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .cancel_search {
   margin-left: 4px;
 }
+@media (max-width: 768px) {
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left .feed_title,
+  body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .left i.icon-syndicate {
+    display: none;
+  }
+}
 body.ttrss_main #toolbar-frame #toolbar #toolbar-headlines .right {
   display: flex;
   align-items: center;
@@ -781,11 +787,17 @@ body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
   margin-right: 4px;
   color: #257aa7;
 }
-@media (max-width: 992px) {
+@media (max-width: 768px) {
   body.ttrss_main #toolbar-frame #toolbar #selected_prompt {
     display: none;
   }
 }
+@media (max-width: 576px) {
+  body.ttrss_main #toolbar-frame #toolbar .select-articles-dropdown,
+  body.ttrss_main #toolbar-frame #toolbar .catchup-button {
+    display: none;
+  }
+}
 body.ttrss_main #header {
   text-align: right;
   color: #ccc;
@@ -1558,6 +1570,14 @@ body.ttrss_prefs ul.prefs-plugin-list li label.checkbox .name {
   text-align: right;
   font-weight: bold;
 }
+@media (max-width: 992px) {
+  body.ttrss_prefs ul.prefs-plugin-list li label.checkbox {
+    min-width: 200px ! important;
+  }
+  body.ttrss_prefs ul.prefs-plugin-list li .version {
+    display: none;
+  }
+}
 body.ttrss_prefs ul.prefs-plugin-list li .actions {
   flex-grow: 2;
   text-align: right;