Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Multiple minor improvements and bugfixes regarding the new templates:

Browse source 
* Add API settings in `configure.html`
  * Fix textarea autoresize
  * Load user.css from data folder
  * Move fold/expand all button to the right and fix an issue with already folded items
  * Reset datetime display to international datetime
  * Temporarilly remove JS login panel (need improvement and integration with the plugin system)
  * Body background is slightly lighter
  * Fix an issue where thumbnails were hidden by description
  * Fix an issue where private orange bar wasn't displayed with thumbnails
  * Remove the gradient bar behind titles
  * Fix empty bookmarklet name in Firefox
This commit is contained in:
ArthurHoaro 2017-02-21 14:16:48 +01:00
parent 430ff07102
commit 7040169069
8 changed files with 116 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
tpl/default/configure.html
View file

@ -183,6 +183,36 @@ <h2 class="window-title">{'Configure'|t}</h2>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
<div class="form-label">
<label for="apiEnabled">
<span class="label-name">{'Enable REST API'|t}</span><br>
<span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
</label>
</div>
</div>
<div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
<div class="form-input">
<input type="checkbox" name="apiEnabled" id="apiEnabled"
{if="$api_enabled"}checked{/if}/>
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-1">
<div class="form-label">
<label for="apiSecret">
<span class="label-name">{'API secret'|t}</span><br>
</label>
</div>
</div>
<div class="pure-u-lg-{$ratioLabel} pure-u-1">
<div class="form-input">
<input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}">
</div>
</div>
</div>
<div class="center">
<input type="submit" value="{'Save'|t}" name="save">
</div>

68
tpl/default/css/shaarli.css
View file

@ -2,7 +2,7 @@
* General
*/
body {
background: #c5c5c5;
background: #d0d0d0;
}
.strong {
@ -268,6 +268,12 @@ pre {
width: 200px;
}
/* because chrome */
#header-login-form input[type="text"]::-webkit-input-placeholder,
#header-login-form input[type="password"]::-webkit-input-placeholder {
color: #777777;
}
.subheader-form {
visibility: hidden;
position: fixed;
@ -384,6 +390,10 @@ pre {
color: #252525;
}
.toolbar-plugin input[type="submit"]:hover {
background: #fff;
}
@media screen and (max-width: 64em) {
.toolbar-plugin input[type="text"] {
width: 70%;
@ -484,19 +494,6 @@ pre {
background: #f5f5f5;
}
.linklist-item.private .linklist-item-title::before {
position: absolute;
left: 3px;
top: 0;
display: block;
content:"";
background: #F89406;
height: 95%;
width: 2px;
margin-top: 3px;
z-index: 1;
}
.linklist-item-title h2 {
padding: 3px 10px 0 10px;
line-height: 30px;
@ -563,14 +560,13 @@ pre {
.linklist-item-description {
position: relative;
padding: 10px;
background: #f5f5f5;
font-family: Roboto Slab, Arial, sans-serif;
word-wrap: break-word;
color: #252525;
line-height: 1.3em;
}
.linklist-item.private .linklist-item-description::before {
{
position: absolute;
left: 3px;
top: 0;
@ -596,9 +592,29 @@ pre {
}
.linklist-item-thumbnail {
position: relative;
margin-top: 10px;
padding: 10px;
float: left;
z-index: 50;
}
.linklist-item.private .linklist-item-title::before,
.linklist-item.private .linklist-item-description::before,
.linklist-item.private .linklist-item-thumbnail::before {
position: absolute;
left: 3px;
top: 0;
display: block;
content:"";
background: #F89406;
height: 95%;
width: 2px;
z-index: 1;
}
.linklist-item.private .linklist-item-title::before {
margin-top: 3px;
}
.linklist-item-infos {
@ -702,15 +718,6 @@ pre {
text-align: center;
}
.page-form .window-title:after {
display: block;
content:"";
background: linear-gradient(to right, #f5f5f5, #1b926c, #f5f5f5);
height: 1px;
width: 80%;
margin: auto;
}
.page-form .window-subtitle {
text-align: center;
}
@ -740,7 +747,7 @@ pre {
}
.page-form textarea {
height: 240px;
min-height: 240px;
padding: 15px 5px 3px 15px;
resize: vertical;
overflow-y: auto;
@ -1163,7 +1170,7 @@ div.awesomplete > ul {
.daily-entry-thumbnail {
float: left;
margin: 15px 5px 5px 5px;
margin: 15px 5px 5px 15px;
}
.daily-entry-description a {
@ -1178,3 +1185,10 @@ div.awesomplete > ul {
.daily-entry-description a:visited {
color: #20b988;
}
/*
* Fix empty bookmarklet name in Firefox
*/
.pure-button {
-moz-user-select: auto;
}

15
tpl/default/editlink.html
View file

@ -33,8 +33,7 @@ <h2 class="window-title">{'Shaare'|t}</h2>
<label for="lf_description">{'Description'|t}</label>
</div>
<div>
<textarea name="lf_description" id="lf_description" onkeyup="textAreaAdjust(this)"
>{$link.description}</textarea>
<textarea name="lf_description" id="lf_description">{$link.description}</textarea>
</div>
<div>
<label for="lf_tags">{'Tags'|t}</label>
@ -46,7 +45,7 @@ <h2 class="window-title">{'Shaare'|t}</h2>
<div>
<input type="checkbox" name="lf_private" id="lf_private"
{if="($link_is_new && $default_private_links) || $link.private == true"}
{if="($link_is_new && $default_private_links || $link.private == true)"}
checked="checked"
{/if}>
&nbsp;<label for="lf_private">{'Private'|t}</label>
@ -62,7 +61,7 @@ <h2 class="window-title">{'Shaare'|t}</h2>
<div class="submit-buttons center">
<input type="submit" value="{'Save'|t}" name="save_edit" class="">
{if="!$link_is_new"}
<a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
<a href="?delete_link&amp;lf_linkdate={$link.id}&amp;token={$token}"
title="" name="delete_link" class="button button-red confirm-delete">
{'Delete'|t}
</a>
@ -75,7 +74,7 @@ <h2 class="window-title">{'Shaare'|t}</h2>
{/if}
</form>
</div>
{if="$source !== 'firefoxsocialapi'"}
{if="$source !== 'firefoxsocialapi' && $source !== 'bookmarklet'"}
{include="page.footer"}
{/if}
<script>
@ -87,12 +86,6 @@ <h2 class="window-title">{'Shaare'|t}</h2>
} else {
document.linkform.lf_tags.focus();
}
function textAreaAdjust(el) {
el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight) + "px" : (el.clientHeight - 18) + "px";
}
(function (window, document) {
textAreaAdjust(document.linkform.lf_description)
})(this, this.document);
</script>
</body>
</html>

2
tpl/default/includes.html
View file

@ -12,7 +12,7 @@
<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
{if="is_file('inc/user.css')"}
<link type="text/css" rel="stylesheet" href="inc/user.css#" />
<link type="text/css" rel="stylesheet" href="data/user.css#" />
{/if}
{loop="$plugins_includes.css_files"}
<link type="text/css" rel="stylesheet" href="{$value}#"/>

34
tpl/default/js/shaarli.js
View file

@ -84,7 +84,13 @@ window.onload = function () {
[].forEach.call(foldAllButtons, function (foldAllButton) {
foldAllButton.addEventListener('click', function (event) {
event.preventDefault();
var state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') != -1 ? 'down' : 'up';
[].forEach.call(foldButtons, function (foldButton) {
if (foldButton.firstElementChild.classList.contains('fa-chevron-up') && state == 'down'
|| foldButton.firstElementChild.classList.contains('fa-chevron-down') && state == 'up'
) {
return;
}
// Retrieve description
var description = null;
var thumbnail = null;
@ -225,4 +231,32 @@ window.onload = function () {
anchor.style.paddingTop = 0;
}
}
/**
* Text area resizer
*/
var description = document.getElementById('lf_description');
var observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
function init () {
function resize () {
description.style.height = 'auto';
description.style.height = description.scrollHeight+10+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(description, 'change', resize);
observe(description, 'cut', delayedResize);
observe(description, 'paste', delayedResize);
observe(description, 'drop', delayedResize);
observe(description, 'keydown', delayedResize);
resize();
}
if (description != null) {
init();
}
};

2
tpl/default/linklist.html
View file

@ -174,7 +174,7 @@ <h2>
{$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'}
<span class="linkdate" title="{$updated}">
<i class="fa fa-clock-o"></i>
{function="strftime('%d %B %Y %H:%M', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if}
{function="strftime('%c', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if}
&middot;
</span>
{/if}

5
tpl/default/linklist.paging.html
View file

@ -10,7 +10,7 @@
class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
><i class="fa fa-key"></i></a>
{/if}
<a href="#" class="filter-off fold-all" title="Fold all">
<a href="#" class="filter-off fold-all pure-u-lg-0" title="Fold all">
<i class="fa fa-chevron-up"></i>
</a>
{loop="$action_plugin"}
@ -50,6 +50,9 @@
<form method="GET" class="pure-u-0 pure-u-lg-visible">
<input type="text" name="linksperpage" placeholder="133">
</form>
<a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="Fold all">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
</div>

2
tpl/default/page.header.html
View file

@ -76,7 +76,7 @@
</li>
{if="!isLoggedIn()"}
<li class="pure-menu-item">
<a href="?do=login" class="pure-menu-link subheader-opener"
<a href="?do=login" class="pure-menu-link"
data-open-id="header-login-form"
id="login-button" title="{'Login'|t}">
<i class="fa fa-user"></i>