aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/default
diff options
context:
space:
mode:
Diffstat (limited to 'assets/default')
-rw-r--r--assets/default/js/base.js62
-rw-r--r--assets/default/scss/shaarli.scss87
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
101function 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}