use svg icon for headlines loadmore prompt

This commit is contained in:
Andrew Dolgov 2021-03-16 22:09:01 +03:00
parent 32c080bec0
commit 0f5fd9ea13
9 changed files with 42 additions and 13 deletions

View File

@ -131,9 +131,10 @@
<div id="main" dojoType="dijit.layout.BorderContainer"> <div id="main" dojoType="dijit.layout.BorderContainer">
<div id="feeds-holder" dojoType="dijit.layout.ContentPane" region="leading" style="width : 20%" splitter="true"> <div id="feeds-holder" dojoType="dijit.layout.ContentPane" region="leading" style="width : 20%" splitter="true">
<div id="feedlistLoading"> <div id="feedlistLoading" class="text-center text-muted text-small">
<img src='images/indicator_tiny.gif'/> <img class="icon-three-dots" src="images/three-dots.svg?2">
<?= __("Loading, please wait..."); ?></div> <?= __("Loading, please wait..."); ?>
</div>
<?php <?php
PluginHost::getInstance()->run_hooks_callback(PluginHost::HOOK_FEED_TREE, function ($result) { PluginHost::getInstance()->run_hooks_callback(PluginHost::HOOK_FEED_TREE, function ($result) {
echo $result; echo $result;

View File

@ -351,8 +351,7 @@ const Headlines = {
// invoke lazy load if last article in buffer is nearly visible OR is active // invoke lazy load if last article in buffer is nearly visible OR is active
if (Article.getActive() == last_row.getAttribute("data-article-id") || last_row.offsetTop - 250 <= container.scrollTop + container.offsetHeight) { if (Article.getActive() == last_row.getAttribute("data-article-id") || last_row.offsetTop - 250 <= container.scrollTop + container.offsetHeight) {
hsp.innerHTML = "<span class='loading'><img src='images/indicator_tiny.gif'> " + hsp.innerHTML = `<span class='text-muted text-small text-center'><img class="icon-three-dots" src="${App.getInitParam('icon_three_dots')}"> ${__("Loading, please wait...")}</span>`;
__("Loading, please wait...") + "</span>";
Headlines.loadMore(); Headlines.loadMore();
return; return;

View File

@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
text-align: center; text-align: center;
color: #555; color: #555;
font-size: 11px; font-size: 11px;
font-style: italic;
} }
body.ttrss_main #headlines-frame #headlines-spacer a, body.ttrss_main #headlines-frame #headlines-spacer a,
body.ttrss_main #headlines-frame #headlines-spacer span { body.ttrss_main #headlines-frame #headlines-spacer span {
@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.icon-three-dots {
width: 18px;
height: 18px;
vertical-align: middle;
}
::selection { ::selection {
background: #257aa7; background: #257aa7;
color: white; color: white;
@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
.cdm .content-inner .icon-unpack-pending { .cdm .content-inner .icon-unpack-pending {
width: 18px; width: 18px;
height: 18px; height: 18px;
vertical-align: middle;
} }
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;

View File

@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
text-align: center; text-align: center;
color: #ccc; color: #ccc;
font-size: 11px; font-size: 11px;
font-style: italic;
} }
body.ttrss_main #headlines-frame #headlines-spacer a, body.ttrss_main #headlines-frame #headlines-spacer a,
body.ttrss_main #headlines-frame #headlines-spacer span { body.ttrss_main #headlines-frame #headlines-spacer span {
@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.icon-three-dots {
width: 18px;
height: 18px;
vertical-align: middle;
}
::selection { ::selection {
background: #b87d2c; background: #b87d2c;
color: #333; color: #333;
@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
.cdm .content-inner .icon-unpack-pending { .cdm .content-inner .icon-unpack-pending {
width: 18px; width: 18px;
height: 18px; height: 18px;
vertical-align: middle;
} }
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;

View File

@ -705,7 +705,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
text-align: center; text-align: center;
color: #555; color: #555;
font-size: 11px; font-size: 11px;
font-style: italic;
} }
body.ttrss_main #headlines-frame #headlines-spacer a, body.ttrss_main #headlines-frame #headlines-spacer a,
body.ttrss_main #headlines-frame #headlines-spacer span { body.ttrss_main #headlines-frame #headlines-spacer span {
@ -1193,6 +1192,11 @@ body.ttrss_utility hr {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.icon-three-dots {
width: 18px;
height: 18px;
vertical-align: middle;
}
::selection { ::selection {
background: #257aa7; background: #257aa7;
color: white; color: white;
@ -1384,6 +1388,7 @@ body.ttrss_utility hr {
.cdm .content-inner .icon-unpack-pending { .cdm .content-inner .icon-unpack-pending {
width: 18px; width: 18px;
height: 18px; height: 18px;
vertical-align: middle;
} }
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;

View File

@ -210,8 +210,7 @@
.content-inner { .content-inner {
.icon-unpack-pending { .icon-unpack-pending {
width : 18px; .icon-three-dots;
height : 18px;
} }
} }

View File

@ -829,7 +829,6 @@ body.ttrss_main {
text-align : center; text-align : center;
color : @default-text; color : @default-text;
font-size : @font-size-small; font-size : @font-size-small;
font-style : italic;
a, span { a, span {
color : @default-text; color : @default-text;
@ -1404,6 +1403,12 @@ body.ttrss_main, body.ttrss_utility {
} }
} }
.icon-three-dots {
width : 18px;
height : 18px;
vertical-align : middle;
}
::selection { ::selection {
background : @color-accent; background : @color-accent;
color : @default-bg; color : @default-bg;

View File

@ -706,7 +706,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
text-align: center; text-align: center;
color: #ccc; color: #ccc;
font-size: 11px; font-size: 11px;
font-style: italic;
} }
body.ttrss_main #headlines-frame #headlines-spacer a, body.ttrss_main #headlines-frame #headlines-spacer a,
body.ttrss_main #headlines-frame #headlines-spacer span { body.ttrss_main #headlines-frame #headlines-spacer span {
@ -1194,6 +1193,11 @@ body.ttrss_utility hr {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.icon-three-dots {
width: 18px;
height: 18px;
vertical-align: middle;
}
::selection { ::selection {
background: #b87d2c; background: #b87d2c;
color: #333; color: #333;
@ -1385,6 +1389,7 @@ body.ttrss_utility hr {
.cdm .content-inner .icon-unpack-pending { .cdm .content-inner .icon-unpack-pending {
width: 18px; width: 18px;
height: 18px; height: 18px;
vertical-align: middle;
} }
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;

View File

@ -706,7 +706,6 @@ body.ttrss_main #headlines-frame #headlines-spacer {
text-align: center; text-align: center;
color: #ccc; color: #ccc;
font-size: 11px; font-size: 11px;
font-style: italic;
} }
body.ttrss_main #headlines-frame #headlines-spacer a, body.ttrss_main #headlines-frame #headlines-spacer a,
body.ttrss_main #headlines-frame #headlines-spacer span { body.ttrss_main #headlines-frame #headlines-spacer span {
@ -1194,6 +1193,11 @@ body.ttrss_utility hr {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.icon-three-dots {
width: 18px;
height: 18px;
vertical-align: middle;
}
::selection { ::selection {
background: #257aa7; background: #257aa7;
color: #333; color: #333;
@ -1385,6 +1389,7 @@ body.ttrss_utility hr {
.cdm .content-inner .icon-unpack-pending { .cdm .content-inner .icon-unpack-pending {
width: 18px; width: 18px;
height: 18px; height: 18px;
vertical-align: middle;
} }
.cdm .content-inner .embed-responsive { .cdm .content-inner .embed-responsive {
overflow: hidden; overflow: hidden;