aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/common/js/thumbnails-update.js51
-rw-r--r--assets/default/scss/shaarli.scss44
-rw-r--r--assets/vintage/css/shaarli.css40
3 files changed, 135 insertions, 0 deletions
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/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,
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
149.page-single-alert { 156.page-single-alert {
150 margin-top: 100px; 157 margin-top: 100px;
151} 158}
@@ -1547,3 +1554,40 @@ form {
1547.pure-button-shaarli { 1554.pure-button-shaarli {
1548 background-color: $main-green; 1555 background-color: $main-green;
1549} 1556}
1557
1558.progressbar {
1559 border-radius: 6px;
1560 background-color: $main-green;
1561 padding: 1px;
1562
1563 > div {
1564 border-radius: 10px;
1565 background: repeating-linear-gradient(
1566 -45deg,
1567 $almost-white,
1568 $almost-white 6px,
1569 $background-color 6px,
1570 $background-color 12px
1571 );
1572 width: 0%;
1573 height: 10px;
1574 }
1575}
1576
1577.thumbnails-page-container {
1578 .progress-counter {
1579 padding: 10px 0 20px;
1580 }
1581
1582 .thumbnail-placeholder {
1583 margin: 10px auto;
1584 background-color: $light-grey;
1585 }
1586
1587 .thumbnail-link-title {
1588 padding-bottom: 20px;
1589 overflow: hidden;
1590 text-overflow: ellipsis;
1591 white-space: nowrap;
1592 }
1593}
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 {
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}