use svg icon for headlines loadmore prompt
This commit is contained in:
parent
32c080bec0
commit
0f5fd9ea13
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -210,8 +210,7 @@
|
||||||
|
|
||||||
.content-inner {
|
.content-inner {
|
||||||
.icon-unpack-pending {
|
.icon-unpack-pending {
|
||||||
width : 18px;
|
.icon-three-dots;
|
||||||
height : 18px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue