aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2018-07-28 09:41:29 +0200
committerGitHub <noreply@github.com>2018-07-28 09:41:29 +0200
commitad5f47adbaee1eef85e90950ab8a45fe82959924 (patch)
treed23a186661db00d36cb2b2287a7bf890fbc62cfb /assets
parent8fdd65b88412a0db28c723a486650c434fe5668c (diff)
parent7b4fea0e39be9e74e9aef13e73af9bbd2b1a6397 (diff)
downloadShaarli-ad5f47adbaee1eef85e90950ab8a45fe82959924.tar.gz
Shaarli-ad5f47adbaee1eef85e90950ab8a45fe82959924.tar.zst
Shaarli-ad5f47adbaee1eef85e90950ab8a45fe82959924.zip
Merge pull request #687 from ArthurHoaro/web-thumb
Use web-thumbnailer to retrieve thumbnails
Diffstat (limited to 'assets')
-rw-r--r--assets/common/js/picwall.js10
-rw-r--r--assets/common/js/thumbnails-update.js51
-rw-r--r--assets/common/js/thumbnails.js7
-rw-r--r--assets/default/scss/shaarli.scss71
-rw-r--r--assets/vintage/css/shaarli.css48
5 files changed, 161 insertions, 26 deletions
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 @@
1import Blazy from 'blazy';
2
3(() => {
4 const picwall = document.getElementById('picwall_container');
5 if (picwall != null) {
6 // Suppress ESLint error because that's how bLazy works
7 /* eslint-disable no-new */
8 new Blazy();
9 }
10})();
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 @@
1/**
2 * Script used in the thumbnails update page.
3 *
4 * It retrieves the list of link IDs to update, and execute AJAX requests
5 * to update their thumbnails, while updating the progress bar.
6 */
7
8/**
9 * Update the thumbnail of the link with the current i index in ids.
10 * It contains a recursive call to retrieve the thumb of the next link when it succeed.
11 * It also update the progress bar and other visual feedback elements.
12 *
13 * @param {array} ids List of LinkID to update
14 * @param {int} i Current index in ids
15 * @param {object} elements List of DOM element to avoid retrieving them at each iteration
16 */
17function updateThumb(ids, i, elements) {
18 const xhr = new XMLHttpRequest();
19 xhr.open('POST', '?do=ajax_thumb_update');
20 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
21 xhr.responseType = 'json';
22 xhr.onload = () => {
23 if (xhr.status !== 200) {
24 alert(`An error occurred. Return code: ${xhr.status}`);
25 } else {
26 const { response } = xhr;
27 i += 1;
28 elements.progressBar.style.width = `${(i * 100) / ids.length}%`;
29 elements.current.innerHTML = i;
30 elements.title.innerHTML = response.title;
31 if (response.thumbnail !== false) {
32 elements.thumbnail.innerHTML = `<img src="${response.thumbnail}">`;
33 }
34 if (i < ids.length) {
35 updateThumb(ids, i, elements);
36 }
37 }
38 };
39 xhr.send(`id=${ids[i]}`);
40}
41
42(() => {
43 const ids = document.getElementsByName('ids')[0].value.split(',');
44 const elements = {
45 progressBar: document.querySelector('.progressbar > div'),
46 current: document.querySelector('.progress-current'),
47 thumbnail: document.querySelector('.thumbnail-placeholder'),
48 title: document.querySelector('.thumbnail-link-title'),
49 };
50 updateThumb(ids, 0, elements);
51})();
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 @@
1import Blazy from 'blazy';
2
3(() => {
4 // Suppress ESLint error because that's how bLazy works
5 /* eslint-disable no-new */
6 new Blazy();
7})();
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 09d5efbe..6b286f1e 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -146,6 +146,17 @@ body,
146 background-color: $main-green; 146 background-color: $main-green;
147} 147}
148 148
149.pure-alert-warning {
150 a {
151 color: $warning-text;
152 font-weight: bold;
153 }
154}
155
156.page-single-alert {
157 margin-top: 100px;
158}
159
149.anchor { 160.anchor {
150 &:target { 161 &:target {
151 padding-top: 40px; 162 padding-top: 40px;
@@ -625,23 +636,22 @@ body,
625} 636}
626 637
627.linklist-item { 638.linklist-item {
639 position: relative;
628 margin: 0 0 10px; 640 margin: 0 0 10px;
629 box-shadow: 1px 1px 3px $light-grey; 641 box-shadow: 1px 1px 3px $light-grey;
630 background: $almost-white; 642 background: $almost-white;
631 643
632 &.private { 644 &.private {
633 .linklist-item-title { 645 &::before {
634 &::before { 646 display: block;
635 @extend %private-border; 647 position: absolute;
636 margin-top: 3px; 648 top: 0;
637 } 649 left: 0;
638 } 650 z-index: 1;
639 651 background: $orange;
640 .linklist-item-description { 652 width: 2px;
641 &::before { 653 height: 100%;
642 @extend %private-border; 654 content: '';
643 height: 100%;
644 }
645 } 655 }
646 } 656 }
647} 657}
@@ -1543,3 +1553,40 @@ form {
1543.pure-button-shaarli { 1553.pure-button-shaarli {
1544 background-color: $main-green; 1554 background-color: $main-green;
1545} 1555}
1556
1557.progressbar {
1558 border-radius: 6px;
1559 background-color: $main-green;
1560 padding: 1px;
1561
1562 > div {
1563 border-radius: 10px;
1564 background: repeating-linear-gradient(
1565 -45deg,
1566 $almost-white,
1567 $almost-white 6px,
1568 $background-color 6px,
1569 $background-color 12px
1570 );
1571 width: 0%;
1572 height: 10px;
1573 }
1574}
1575
1576.thumbnails-page-container {
1577 .progress-counter {
1578 padding: 10px 0 20px;
1579 }
1580
1581 .thumbnail-placeholder {
1582 margin: 10px auto;
1583 background-color: $light-grey;
1584 }
1585
1586 .thumbnail-link-title {
1587 padding-bottom: 20px;
1588 overflow: hidden;
1589 text-overflow: ellipsis;
1590 white-space: nowrap;
1591 }
1592}
diff --git a/assets/vintage/css/shaarli.css b/assets/vintage/css/shaarli.css
index c919339b..87c440c8 100644
--- a/assets/vintage/css/shaarli.css
+++ b/assets/vintage/css/shaarli.css
@@ -701,8 +701,8 @@ a.bigbutton, #pageheader a.bigbutton {
701 position: relative; 701 position: relative;
702 display: table-cell; 702 display: table-cell;
703 vertical-align: middle; 703 vertical-align: middle;
704 width: 90px; 704 width: 120px;
705 height: 90px; 705 height: 120px;
706 overflow: hidden; 706 overflow: hidden;
707 text-align: center; 707 text-align: center;
708 float: left; 708 float: left;
@@ -739,9 +739,9 @@ a.bigbutton, #pageheader a.bigbutton {
739 position: absolute; 739 position: absolute;
740 top: 0; 740 top: 0;
741 left: 0; 741 left: 0;
742 width: 90px; 742 width: 120px;
743 font-weight: bold; 743 font-weight: bold;
744 font-size: 8pt; 744 font-size: 9pt;
745 color: #fff; 745 color: #fff;
746 text-align: left; 746 text-align: left;
747 background-color: transparent; 747 background-color: transparent;
@@ -1210,3 +1210,43 @@ ul.errors {
1210 width: 13px; 1210 width: 13px;
1211 height: 13px; 1211 height: 13px;
1212} 1212}
1213
1214.thumbnails-update-container {
1215 padding: 20px 0;
1216 width: 50%;
1217 margin: auto;
1218}
1219
1220.thumbnails-update-container .thumbnail-placeholder {
1221 background: grey;
1222 margin: auto;
1223}
1224
1225.thumbnails-update-container .thumbnail-link-title {
1226 width: 75%;
1227 margin: auto;
1228
1229 padding-bottom: 20px;
1230 overflow: hidden;
1231 text-overflow: ellipsis;
1232 white-space: nowrap;
1233}
1234
1235.progressbar {
1236 border-radius: 6px;
1237 background-color: #111;
1238 padding: 1px;
1239}
1240
1241.progressbar > div {
1242 border-radius: 10px;
1243 background: repeating-linear-gradient(
1244 -45deg,
1245 #f5f5f5,
1246 #f5f5f5 6px,
1247 #d0d0d0 6px,
1248 #d0d0d0 12px
1249 );
1250 width: 0%;
1251 height: 10px;
1252}