valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Andrew Dolgov 2021-03-11 19:26:19 +03:00
parent a4da2f1e62
commit f67d2623b7
10 changed files with 137 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@ -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')">

2
js/Headlines.js
View File

@ -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>

22
themes/compact.css
View File

@ -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;

22
themes/compact_night.css
View File

@ -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;

22
themes/light.css
View File

@ -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;

5
themes/light/defines.less
View File

@ -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,

10
themes/light/prefs.less
View File

@ -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;

16
themes/light/tt-rss.less
View File

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

22
themes/night.css
View File

@ -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;

22
themes/night_blue.css
View File

@ -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;