add some media queries to improve main UI on small-width devices

3 files changed, 30 insertions, 1 deletions

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;
+				}
+			}
+
 		}
 	}