diff options
Diffstat (limited to 'assets/default')
-rw-r--r-- | assets/default/js/base.js | 62 | ||||
-rw-r--r-- | assets/default/scss/shaarli.scss | 87 |
2 files changed, 96 insertions, 53 deletions
diff --git a/assets/default/js/base.js b/assets/default/js/base.js index 5cf037c2..99e03370 100644 --- a/assets/default/js/base.js +++ b/assets/default/js/base.js | |||
@@ -98,29 +98,6 @@ function htmlEntities(str) { | |||
98 | return str.replace(/[\u00A0-\u9999<>&]/gim, i => `&#${i.charCodeAt(0)};`); | 98 | return str.replace(/[\u00A0-\u9999<>&]/gim, i => `&#${i.charCodeAt(0)};`); |
99 | } | 99 | } |
100 | 100 | ||
101 | function activateFirefoxSocial(node) { | ||
102 | const loc = location.href; | ||
103 | const baseURL = loc.substring(0, loc.lastIndexOf('/') + 1); | ||
104 | |||
105 | const data = { | ||
106 | name: document.title, | ||
107 | description: document.getElementById('translation-delete-link').innerHTML, | ||
108 | author: 'Shaarli', | ||
109 | version: '1.0.0', | ||
110 | |||
111 | iconURL: `${baseURL}/images/favicon.ico`, | ||
112 | icon32URL: `${baseURL}/images/favicon.ico`, | ||
113 | icon64URL: `${baseURL}/images/favicon.ico`, | ||
114 | |||
115 | shareURL: `${baseURL}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi`, | ||
116 | homepageURL: baseURL, | ||
117 | }; | ||
118 | node.setAttribute('data-service', JSON.stringify(data)); | ||
119 | |||
120 | const activate = new CustomEvent('ActivateSocialFeature'); | ||
121 | node.dispatchEvent(activate); | ||
122 | } | ||
123 | |||
124 | /** | 101 | /** |
125 | * Add the class 'hidden' to city options not attached to the current selected continent. | 102 | * Add the class 'hidden' to city options not attached to the current selected continent. |
126 | * | 103 | * |
@@ -433,16 +410,6 @@ function init(description) { | |||
433 | }); | 410 | }); |
434 | }); | 411 | }); |
435 | 412 | ||
436 | /** | ||
437 | * Firefox Social | ||
438 | */ | ||
439 | const ffButton = document.getElementById('ff-social-button'); | ||
440 | if (ffButton != null) { | ||
441 | ffButton.addEventListener('click', (event) => { | ||
442 | activateFirefoxSocial(event.target); | ||
443 | }); | ||
444 | } | ||
445 | |||
446 | const continent = document.getElementById('continent'); | 413 | const continent = document.getElementById('continent'); |
447 | const city = document.getElementById('city'); | 414 | const city = document.getElementById('city'); |
448 | if (continent != null && city != null) { | 415 | if (continent != null && city != null) { |
@@ -455,12 +422,12 @@ function init(description) { | |||
455 | /** | 422 | /** |
456 | * Bulk actions | 423 | * Bulk actions |
457 | */ | 424 | */ |
458 | const linkCheckboxes = document.querySelectorAll('.delete-checkbox'); | 425 | const linkCheckboxes = document.querySelectorAll('.link-checkbox'); |
459 | const bar = document.getElementById('actions'); | 426 | const bar = document.getElementById('actions'); |
460 | [...linkCheckboxes].forEach((checkbox) => { | 427 | [...linkCheckboxes].forEach((checkbox) => { |
461 | checkbox.style.display = 'inline-block'; | 428 | checkbox.style.display = 'inline-block'; |
462 | checkbox.addEventListener('click', () => { | 429 | checkbox.addEventListener('change', () => { |
463 | const linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); | 430 | const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked'); |
464 | const count = [...linkCheckedCheckboxes].length; | 431 | const count = [...linkCheckedCheckboxes].length; |
465 | if (count === 0 && bar.classList.contains('open')) { | 432 | if (count === 0 && bar.classList.contains('open')) { |
466 | bar.classList.toggle('open'); | 433 | bar.classList.toggle('open'); |
@@ -477,7 +444,7 @@ function init(description) { | |||
477 | event.preventDefault(); | 444 | event.preventDefault(); |
478 | 445 | ||
479 | const links = []; | 446 | const links = []; |
480 | const linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); | 447 | const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked'); |
481 | [...linkCheckedCheckboxes].forEach((checkbox) => { | 448 | [...linkCheckedCheckboxes].forEach((checkbox) => { |
482 | links.push({ | 449 | links.push({ |
483 | id: checkbox.value, | 450 | id: checkbox.value, |
@@ -500,6 +467,25 @@ function init(description) { | |||
500 | } | 467 | } |
501 | 468 | ||
502 | /** | 469 | /** |
470 | * Select all button | ||
471 | */ | ||
472 | const selectAllButtons = document.querySelectorAll('.select-all-button'); | ||
473 | [...selectAllButtons].forEach((selectAllButton) => { | ||
474 | selectAllButton.addEventListener('click', (e) => { | ||
475 | e.preventDefault(); | ||
476 | const checked = selectAllButton.classList.contains('filter-off'); | ||
477 | [...selectAllButtons].forEach((selectAllButton2) => { | ||
478 | selectAllButton2.classList.toggle('filter-off'); | ||
479 | selectAllButton2.classList.toggle('filter-on'); | ||
480 | }); | ||
481 | [...linkCheckboxes].forEach((linkCheckbox) => { | ||
482 | linkCheckbox.checked = checked; | ||
483 | linkCheckbox.dispatchEvent(new Event('change')); | ||
484 | }); | ||
485 | }); | ||
486 | }); | ||
487 | |||
488 | /** | ||
503 | * Tag list operations | 489 | * Tag list operations |
504 | * | 490 | * |
505 | * TODO: support error code in the backend for AJAX requests | 491 | * TODO: support error code in the backend for AJAX requests |
@@ -581,7 +567,7 @@ function init(description) { | |||
581 | event.preventDefault(); | 567 | event.preventDefault(); |
582 | const block = findParent(event.target, 'div', { class: 'tag-list-item' }); | 568 | const block = findParent(event.target, 'div', { class: 'tag-list-item' }); |
583 | const tag = block.getAttribute('data-tag'); | 569 | const tag = block.getAttribute('data-tag'); |
584 | const refreshedToken = document.getElementById('token'); | 570 | const refreshedToken = document.getElementById('token').value; |
585 | 571 | ||
586 | if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) { | 572 | if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) { |
587 | const xhr = new XMLHttpRequest(); | 573 | const xhr = new XMLHttpRequest(); |
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 09d5efbe..760d8d6a 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; |
@@ -370,8 +381,6 @@ body, | |||
370 | box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset; | 381 | box-shadow: 0 1px 0 $light-shadow, 0 1px 4px $dark-shadow inset; |
371 | background: $almost-white; | 382 | background: $almost-white; |
372 | padding: 5px 5px 3px 15px; | 383 | padding: 5px 5px 3px 15px; |
373 | width: 20%; | ||
374 | height: 20px; | ||
375 | color: $dark-grey; | 384 | color: $dark-grey; |
376 | } | 385 | } |
377 | 386 | ||
@@ -625,23 +634,22 @@ body, | |||
625 | } | 634 | } |
626 | 635 | ||
627 | .linklist-item { | 636 | .linklist-item { |
637 | position: relative; | ||
628 | margin: 0 0 10px; | 638 | margin: 0 0 10px; |
629 | box-shadow: 1px 1px 3px $light-grey; | 639 | box-shadow: 1px 1px 3px $light-grey; |
630 | background: $almost-white; | 640 | background: $almost-white; |
631 | 641 | ||
632 | &.private { | 642 | &.private { |
633 | .linklist-item-title { | 643 | &::before { |
634 | &::before { | 644 | display: block; |
635 | @extend %private-border; | 645 | position: absolute; |
636 | margin-top: 3px; | 646 | top: 0; |
637 | } | 647 | left: 0; |
638 | } | 648 | z-index: 1; |
639 | 649 | background: $orange; | |
640 | .linklist-item-description { | 650 | width: 2px; |
641 | &::before { | 651 | height: 100%; |
642 | @extend %private-border; | 652 | content: ''; |
643 | height: 100%; | ||
644 | } | ||
645 | } | 653 | } |
646 | } | 654 | } |
647 | } | 655 | } |
@@ -732,7 +740,7 @@ body, | |||
732 | font-size: 1em; | 740 | font-size: 1em; |
733 | } | 741 | } |
734 | 742 | ||
735 | .delete-checkbox { | 743 | .link-checkbox { |
736 | display: none; | 744 | display: none; |
737 | } | 745 | } |
738 | } | 746 | } |
@@ -747,6 +755,14 @@ body, | |||
747 | font-size: 1.3em; | 755 | font-size: 1.3em; |
748 | } | 756 | } |
749 | 757 | ||
758 | .pin-link { | ||
759 | font-size: 1.3em; | ||
760 | } | ||
761 | |||
762 | .pinned-link { | ||
763 | color: $blue !important; | ||
764 | } | ||
765 | |||
750 | .linklist-item-description { | 766 | .linklist-item-description { |
751 | position: relative; | 767 | position: relative; |
752 | padding: 0 10px; | 768 | padding: 0 10px; |
@@ -840,6 +856,10 @@ body, | |||
840 | margin: 0 7px; | 856 | margin: 0 7px; |
841 | } | 857 | } |
842 | 858 | ||
859 | .ctrl-delete { | ||
860 | margin: 0 7px 0 0; | ||
861 | } | ||
862 | |||
843 | // 64em -> lg | 863 | // 64em -> lg |
844 | @media screen and (max-width: 64em) { | 864 | @media screen and (max-width: 64em) { |
845 | .linklist-item-infos-url { | 865 | .linklist-item-infos-url { |
@@ -1543,3 +1563,40 @@ form { | |||
1543 | .pure-button-shaarli { | 1563 | .pure-button-shaarli { |
1544 | background-color: $main-green; | 1564 | background-color: $main-green; |
1545 | } | 1565 | } |
1566 | |||
1567 | .progressbar { | ||
1568 | border-radius: 6px; | ||
1569 | background-color: $main-green; | ||
1570 | padding: 1px; | ||
1571 | |||
1572 | > div { | ||
1573 | border-radius: 10px; | ||
1574 | background: repeating-linear-gradient( | ||
1575 | -45deg, | ||
1576 | $almost-white, | ||
1577 | $almost-white 6px, | ||
1578 | $background-color 6px, | ||
1579 | $background-color 12px | ||
1580 | ); | ||
1581 | width: 0%; | ||
1582 | height: 10px; | ||
1583 | } | ||
1584 | } | ||
1585 | |||
1586 | .thumbnails-page-container { | ||
1587 | .progress-counter { | ||
1588 | padding: 10px 0 20px; | ||
1589 | } | ||
1590 | |||
1591 | .thumbnail-placeholder { | ||
1592 | margin: 10px auto; | ||
1593 | background-color: $light-grey; | ||
1594 | } | ||
1595 | |||
1596 | .thumbnail-link-title { | ||
1597 | padding-bottom: 20px; | ||
1598 | overflow: hidden; | ||
1599 | text-overflow: ellipsis; | ||
1600 | white-space: nowrap; | ||
1601 | } | ||
1602 | } | ||