Merge pull request #1636 from ArthurHoaro/fix/vintage-async-metadata

This commit is contained in:
ArthurHoaro 2020-11-10 10:45:22 +01:00 committed by GitHub
commit 39b75ea983
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 114 additions and 11 deletions

View file

@ -1122,6 +1122,16 @@ ul.errors {
float: left;
}
ul.warnings {
color: orange;
float: left;
}
ul.successes {
color: green;
float: left;
}
#pluginsadmin {
width: 80%;
padding: 20px 0 0 20px;
@ -1248,3 +1258,54 @@ ul.errors {
width: 0%;
height: 10px;
}
.loading-input {
position: relative;
}
@keyframes around {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-input .icon-container {
position: absolute;
right: 60px;
top: calc(50% - 10px);
}
.loading-input .loader {
position: relative;
height: 20px;
width: 20px;
display: inline-block;
animation: around 5.4s infinite;
}
.loading-input .loader::after,
.loading-input .loader::before {
content: "";
background: #eee;
position: absolute;
display: inline-block;
width: 100%;
height: 100%;
border-width: 2px;
border-color: #333 #333 transparent transparent;
border-style: solid;
border-radius: 20px;
box-sizing: border-box;
top: 0;
left: 0;
animation: around 0.7s ease-in-out infinite;
}
.loading-input .loader::after {
animation: around 0.7s ease-in-out 0.1s infinite;
background: transparent;
}

View file

@ -14,9 +14,9 @@
<div class="dailyAbout">
All links of one day<br>in a single page.<br>
{if="$previousday"} <a href="{$base_path}/daily&amp;day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
{if="$previousday"} <a href="{$base_path}/daily?day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
-
{if="$nextday"}<a href="{$base_path}/daily&amp;day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
{if="$nextday"}<a href="{$base_path}/daily?day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
<br>
{loop="$daily_about_plugin"}
@ -52,13 +52,13 @@
{$link=$value}
<div class="dailyEntry">
<div class="dailyEntryPermalink">
<a href="{$base_path}/?{$value.shorturl}">
<a href="{$base_path}/shaare/{$value.shorturl}">
<img src="{$asset_path}/img/squiggle.png#" width="25" height="26" title="permalink" alt="permalink">
</a>
</div>
{if="!$hide_timestamps || $is_logged_in"}
<div class="dailyEntryLinkdate">
<a href="{$base_path}/?{$value.shorturl}">{function="strftime('%c', $link.timestamp)"}</a>
<a href="{$base_path}/shaare/{$value.shorturl}">{function="strftime('%c', $link.timestamp)"}</a>
</div>
{/if}
{if="$link.tags"}

View file

@ -6,6 +6,7 @@
{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
{elseif="$link.description==''"}onload="document.linkform.lf_description.focus();"
{else}onload="document.linkform.lf_tags.focus();"{/if} >
{$asyncLoadClass=$link_is_new && $async_metadata && empty($link.title) ? 'loading-input' : ''}
<div id="pageheader">
{include="page.header"}
<div id="shaarli_title"><a href="{$titleLink}">{$shaarlititle}</a></div>
@ -14,12 +15,29 @@
{if="isset($link.id)"}
<input type="hidden" name="lf_id" value="{$link.id}">
{/if}
<label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input"><br>
<label for="lf_title"><i>Title</i></label><br><input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input"><br>
<label for="lf_description"><i>Description</i></label><br><textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea><br>
<label for="lf_tags"><i>Tags</i></label><br>
<input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
<label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input">
<label for="lf_title"><i>Title</i></label>
<div class="{$asyncLoadClass}">
<input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input">
<div class="icon-container">
<i class="loader"></i>
</div>
</div>
<label for="lf_description"><i>Description</i></label>
<div class="{if="$retrieve_description"}{$asyncLoadClass}{/if}">
<textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea>
<div class="icon-container">
<i class="loader"></i>
</div>
</div>
<label for="lf_tags"><i>Tags</i></label>
<div class="{if="$retrieve_description"}{$asyncLoadClass}{/if}">
<input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" >
<div class="icon-container">
<i class="loader"></i>
</div>
</div>
{if="$formatter==='markdown'"}
<div class="md_help">
@ -56,5 +74,5 @@
</div>
</div>
{include="page.footer"}
</body>
{if="$link_is_new && $async_metadata"}<script src="{$asset_path}/js/metadata.min.js?v={$version_hash}#"></script>{/if}</body>
</html>

View file

@ -54,6 +54,30 @@
</ul>
{/if}
{if="!empty($global_errors)"}
<ul class="errors">
{loop="$global_errors"}
<li>{$value}</li>
{/loop}
</ul>
{/if}
{if="!empty($global_warnings)"}
<ul class="warnings">
{loop="$global_warnings"}
<li>{$value}</li>
{/loop}
</ul>
{/if}
{if="!empty($global_successes)"}
<ul class="successes">
{loop="$global_successes"}
<li>{$value}</li>
{/loop}
</ul>
{/if}
<div class="clear"></div>