From 1b93137e16694f52952c930848e1a7928e8a00a6 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Wed, 9 Nov 2016 18:57:02 +0100 Subject: Use web-thumbnailer to retrieve thumbnails * requires PHP 5.6 * use blazy on linklist since a lot more thumbs are retrieved * thumbnails can be disabled * thumbs size is now 120x120 * thumbs are now cropped to fit the expected size Fixes #345 #425 #487 #543 #588 #590 --- assets/vintage/css/shaarli.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'assets') diff --git a/assets/vintage/css/shaarli.css b/assets/vintage/css/shaarli.css index c919339b..05e2c17e 100644 --- a/assets/vintage/css/shaarli.css +++ b/assets/vintage/css/shaarli.css @@ -701,8 +701,8 @@ a.bigbutton, #pageheader a.bigbutton { position: relative; display: table-cell; vertical-align: middle; - width: 90px; - height: 90px; + width: 120px; + height: 120px; overflow: hidden; text-align: center; float: left; @@ -739,9 +739,9 @@ a.bigbutton, #pageheader a.bigbutton { position: absolute; top: 0; left: 0; - width: 90px; + width: 120px; font-weight: bold; - font-size: 8pt; + font-size: 9pt; color: #fff; text-align: left; background-color: transparent; -- cgit v1.2.3 From e85b7a05a177f803ae36ba5c12835313f31177bc Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sat, 11 Nov 2017 14:01:21 +0100 Subject: Update thumbnail integration after rebasing the branch --- assets/common/js/picwall.js | 10 ---------- assets/common/js/thumbnails.js | 7 +++++++ assets/default/scss/shaarli.scss | 4 ++++ 3 files changed, 11 insertions(+), 10 deletions(-) delete mode 100644 assets/common/js/picwall.js create mode 100644 assets/common/js/thumbnails.js (limited to 'assets') diff --git a/assets/common/js/picwall.js b/assets/common/js/picwall.js deleted file mode 100644 index 87a93fc3..00000000 --- a/assets/common/js/picwall.js +++ /dev/null @@ -1,10 +0,0 @@ -import Blazy from 'blazy'; - -(() => { - const picwall = document.getElementById('picwall_container'); - if (picwall != null) { - // Suppress ESLint error because that's how bLazy works - /* eslint-disable no-new */ - new Blazy(); - } -})(); diff --git a/assets/common/js/thumbnails.js b/assets/common/js/thumbnails.js new file mode 100644 index 00000000..c28322bb --- /dev/null +++ b/assets/common/js/thumbnails.js @@ -0,0 +1,7 @@ +import Blazy from 'blazy'; + +(() => { + // Suppress ESLint error because that's how bLazy works + /* eslint-disable no-new */ + new Blazy(); +})(); diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 09d5efbe..425a0490 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -146,6 +146,10 @@ body, background-color: $main-green; } +.page-single-alert { + margin-top: 100px; +} + .anchor { &:target { padding-top: 40px; -- cgit v1.2.3 From 28f26524609338316cc6e51c743058e6e8c7b12b Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Fri, 8 Jun 2018 12:50:49 +0200 Subject: Add a page to update all thumbnails through AJAX requests in both templates --- assets/common/js/thumbnails-update.js | 51 +++++++++++++++++++++++++++++++++++ assets/default/scss/shaarli.scss | 44 ++++++++++++++++++++++++++++++ assets/vintage/css/shaarli.css | 40 +++++++++++++++++++++++++++ 3 files changed, 135 insertions(+) create mode 100644 assets/common/js/thumbnails-update.js (limited to 'assets') diff --git a/assets/common/js/thumbnails-update.js b/assets/common/js/thumbnails-update.js new file mode 100644 index 00000000..b66ca3ae --- /dev/null +++ b/assets/common/js/thumbnails-update.js @@ -0,0 +1,51 @@ +/** + * Script used in the thumbnails update page. + * + * It retrieves the list of link IDs to update, and execute AJAX requests + * to update their thumbnails, while updating the progress bar. + */ + +/** + * Update the thumbnail of the link with the current i index in ids. + * It contains a recursive call to retrieve the thumb of the next link when it succeed. + * It also update the progress bar and other visual feedback elements. + * + * @param {array} ids List of LinkID to update + * @param {int} i Current index in ids + * @param {object} elements List of DOM element to avoid retrieving them at each iteration + */ +function updateThumb(ids, i, elements) { + const xhr = new XMLHttpRequest(); + xhr.open('POST', '?do=ajax_thumb_update'); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status !== 200) { + alert(`An error occurred. Return code: ${xhr.status}`); + } else { + const { response } = xhr; + i += 1; + elements.progressBar.style.width = `${(i * 100) / ids.length}%`; + elements.current.innerHTML = i; + elements.title.innerHTML = response.title; + if (response.thumbnail !== false) { + elements.thumbnail.innerHTML = ``; + } + if (i < ids.length) { + updateThumb(ids, i, elements); + } + } + }; + xhr.send(`id=${ids[i]}`); +} + +(() => { + const ids = document.getElementsByName('ids')[0].value.split(','); + const elements = { + progressBar: document.querySelector('.progressbar > div'), + current: document.querySelector('.progress-current'), + thumbnail: document.querySelector('.thumbnail-placeholder'), + title: document.querySelector('.thumbnail-link-title'), + }; + updateThumb(ids, 0, elements); +})(); diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 425a0490..6a8a8bc7 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -146,6 +146,13 @@ body, background-color: $main-green; } +.pure-alert-warning { + a { + color: $warning-text; + font-weight: bold; + } +} + .page-single-alert { margin-top: 100px; } @@ -1547,3 +1554,40 @@ form { .pure-button-shaarli { background-color: $main-green; } + +.progressbar { + border-radius: 6px; + background-color: $main-green; + padding: 1px; + + > div { + border-radius: 10px; + background: repeating-linear-gradient( + -45deg, + $almost-white, + $almost-white 6px, + $background-color 6px, + $background-color 12px + ); + width: 0%; + height: 10px; + } +} + +.thumbnails-page-container { + .progress-counter { + padding: 10px 0 20px; + } + + .thumbnail-placeholder { + margin: 10px auto; + background-color: $light-grey; + } + + .thumbnail-link-title { + padding-bottom: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} diff --git a/assets/vintage/css/shaarli.css b/assets/vintage/css/shaarli.css index 05e2c17e..87c440c8 100644 --- a/assets/vintage/css/shaarli.css +++ b/assets/vintage/css/shaarli.css @@ -1210,3 +1210,43 @@ ul.errors { width: 13px; height: 13px; } + +.thumbnails-update-container { + padding: 20px 0; + width: 50%; + margin: auto; +} + +.thumbnails-update-container .thumbnail-placeholder { + background: grey; + margin: auto; +} + +.thumbnails-update-container .thumbnail-link-title { + width: 75%; + margin: auto; + + padding-bottom: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.progressbar { + border-radius: 6px; + background-color: #111; + padding: 1px; +} + +.progressbar > div { + border-radius: 10px; + background: repeating-linear-gradient( + -45deg, + #f5f5f5, + #f5f5f5 6px, + #d0d0d0 6px, + #d0d0d0 12px + ); + width: 0%; + height: 10px; +} -- cgit v1.2.3 From 7b4fea0e39be9e74e9aef13e73af9bbd2b1a6397 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Tue, 17 Jul 2018 13:13:26 +0200 Subject: Bunch of improvement for thumbnails integration: - add a default thumb size value (125x90px) - improve private vertical bar visual, especially with thumbnails - translations - add a sync thumbs button in tool and empty picwall page - fixes WT download mode in JSON config --- assets/default/scss/shaarli.scss | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) (limited to 'assets') diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 6a8a8bc7..6b286f1e 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -636,23 +636,22 @@ body, } .linklist-item { + position: relative; margin: 0 0 10px; box-shadow: 1px 1px 3px $light-grey; background: $almost-white; &.private { - .linklist-item-title { - &::before { - @extend %private-border; - margin-top: 3px; - } - } - - .linklist-item-description { - &::before { - @extend %private-border; - height: 100%; - } + &::before { + display: block; + position: absolute; + top: 0; + left: 0; + z-index: 1; + background: $orange; + width: 2px; + height: 100%; + content: ''; } } } -- cgit v1.2.3