fix(widgets): align tabbed post layouts with reference
This commit is contained in:
kate522 committed
1 parent
17515cf9c5
commit
fd034ff055
16 files changed
+1256
-37
No files matched your search
@@ -67,8 +67,10 @@
|
||||
.zib-widget-wrap { padding:var(--aksrt-widget-space-top,0) var(--aksrt-widget-space-right,0) var(--aksrt-widget-space-bottom,0) var(--aksrt-widget-space-left,0); background-color:var(--aksrt-widget-bg-light,transparent); background-image:var(--aksrt-widget-bg-image-light,none); background-position:center; background-size:cover; }
|
||||
.dark-theme .zib-widget-wrap, [data-theme="dark"] .zib-widget-wrap { background-color:var(--aksrt-widget-bg-dark,var(--aksrt-widget-bg-light,transparent)); background-image:var(--aksrt-widget-bg-image-dark,var(--aksrt-widget-bg-image-light,none)); }
|
||||
.zib-widget-wrap .widget-container { position:relative; }
|
||||
.aksrt-user-widget-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline:3px solid var(--focus-color,#ff5473) !important; outline-offset:3px; }
|
||||
.dark-theme .aksrt-user-widget-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible, [data-theme="dark"] .aksrt-user-widget-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color:#ffd166 !important; }
|
||||
.aksrt-user-widget-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible,
|
||||
.aksrt-tab-posts-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline:3px solid var(--focus-color,#ff5473) !important; outline-offset:3px; }
|
||||
.dark-theme :is(.aksrt-user-widget-wrap, .aksrt-tab-posts-wrap) :where(a, button, input, select, textarea, [tabindex]):focus-visible,
|
||||
[data-theme="dark"] :is(.aksrt-user-widget-wrap, .aksrt-tab-posts-wrap) :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color:#ffd166 !important; }
|
||||
|
||||
.user-card.zib-widget { padding:0; overflow:hidden; }
|
||||
.user-card.widget .user-info > .text-center > p:not(.muted-color) { white-space:nowrap; }
|
||||
@@ -155,7 +157,76 @@
|
||||
.widget-tab-post .tab-content > .tab-pane { display: none; }
|
||||
.widget-tab-post .tab-content > .tab-pane.active { display: block; }
|
||||
.widget-tab-post, .term-aggregation { line-height:1.42857143; }
|
||||
/* Public typography overrides Bootstrap headings. Match the reference widget
|
||||
* without changing article headings elsewhere on the page. */
|
||||
.aksrt-tab-posts-wrap { font-size:14px; line-height:1.42857143; color:var(--main-color,#4e5358); }
|
||||
.widget-tab-post .item-heading { font-weight:500; color:inherit; }
|
||||
.widget-tab-post .item-heading.font-bold { font-weight:700; }
|
||||
.widget-tab-post .posts-mini { vertical-align:baseline; }
|
||||
.widget-tab-post .posts-mini-con { flex:auto; }
|
||||
.widget-tab-post .post_ajax_loader { min-height: 40px; }
|
||||
/* Keep the reference's compact pagination after public pagination.css. */
|
||||
.widget-tab-post .pagenav {
|
||||
display:block;
|
||||
padding:20px 0;
|
||||
line-height:1.4;
|
||||
text-align:center;
|
||||
}
|
||||
.widget-tab-post .pagenav .page-numbers {
|
||||
display:inline-block;
|
||||
min-width:31px;
|
||||
min-height:0;
|
||||
margin:3px;
|
||||
padding:6px 9px 5px;
|
||||
border:0;
|
||||
border-radius:3px;
|
||||
background:var(--main-border-color);
|
||||
color:var(--muted-color);
|
||||
font-size:inherit;
|
||||
line-height:inherit;
|
||||
font-weight:400;
|
||||
}
|
||||
.widget-tab-post .pagenav a.page-numbers:hover { background:var(--main-border-color); color:var(--muted-color); opacity:.7; }
|
||||
.widget-tab-post .pagenav .page-numbers > span {
|
||||
display:inline;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
border-radius:0;
|
||||
background:none;
|
||||
color:inherit;
|
||||
font-size:inherit;
|
||||
line-height:inherit;
|
||||
}
|
||||
.widget-tab-post .pagenav .page-numbers > .ml6 { margin-left:6px; }
|
||||
.widget-tab-post .pagenav .page-numbers > .mr6 { margin-right:6px; }
|
||||
.widget-tab-post .pagenav .prev i,
|
||||
.widget-tab-post .pagenav .next i { font-size:1.2em; }
|
||||
.widget-tab-post .pagenav .pag-jump { display:inline-flex; position:relative; width:auto; align-items:center; justify-content:normal; gap:0; }
|
||||
.widget-tab-post .pagenav .pag-jump .jump-input {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
width:100%;
|
||||
min-width:0;
|
||||
height:100%;
|
||||
padding:5px 22px 5px 5px;
|
||||
border-radius:3px;
|
||||
opacity:0;
|
||||
transition:.2s;
|
||||
}
|
||||
.widget-tab-post .pagenav .jump-input:focus,
|
||||
.widget-tab-post .pagenav .pag-jump:hover .jump-input { opacity:1; }
|
||||
.sidebar .widget-tab-post .pagenav { padding:10px 5px; }
|
||||
.sidebar .widget-tab-post .theme-pagination { margin:10px; }
|
||||
.sidebar .widget-tab-post .pagenav .page-numbers { min-width:28px; margin:2px; font-size:12px; }
|
||||
@media (max-width:640px) {
|
||||
.widget-tab-post .pagenav a.page-numbers { display:none; }
|
||||
.widget-tab-post .pagenav a.next,
|
||||
.widget-tab-post .pagenav a.prev { display:inline-block; }
|
||||
.widget-tab-post .pagenav .page-numbers { min-width:28px; margin:2px; font-size:12px; }
|
||||
}
|
||||
/* Widget pagination mirrors the reference .ajax-next rules while staying on the REST client. */
|
||||
.theme-pagination { margin: 20px 0; }
|
||||
.theme-pagination .next-page a { border-radius: 30px; padding: 5px 15px; color: var(--muted-color, #8a8c98); opacity: .6; cursor: pointer; }
|
||||
|
||||
@@ -79,9 +79,9 @@
|
||||
if (window.AksrtYiyan) window.AksrtYiyan.init(figure);
|
||||
}
|
||||
|
||||
function errorMarkup() {
|
||||
function errorMarkup(page, append) {
|
||||
var i18n = config.i18n || {};
|
||||
return '<div class="aksrt-widget-request-error" role="alert"><span>' + (i18n.error || '加载失败，请重试。') + '</span><button type="button" data-widget-retry>' + (i18n.retry || '重试') + '</button></div>';
|
||||
return '<div class="aksrt-widget-request-error" role="alert"><span>' + (i18n.error || '加载失败，请重试。') + '</span><button type="button" data-widget-retry data-retry-page="' + page + '" data-retry-append="' + (append ? '1' : '0') + '">' + (i18n.retry || '重试') + '</button></div>';
|
||||
}
|
||||
|
||||
function itemsUrl(widget, instance, page, segment) {
|
||||
@@ -142,6 +142,7 @@
|
||||
var instance = owner.dataset.instance || container.dataset.instance;
|
||||
var segment = container.dataset.segment || owner.dataset.segment || '';
|
||||
if (!widget || !instance || !config.restUrl || container.dataset.loading === '1') return;
|
||||
container.querySelectorAll(':scope > .aksrt-widget-request-error').forEach(function (error) { error.remove(); });
|
||||
setBusy(container, true);
|
||||
anchorLoader(container);
|
||||
return fetch(itemsUrl(widget, instance, page, segment), { credentials: 'same-origin', headers: { Accept: 'application/json' } })
|
||||
@@ -173,13 +174,14 @@
|
||||
container.dataset.loaded = '1';
|
||||
anchorLoader(container);
|
||||
scan(container);
|
||||
if (window.jQuery) window.jQuery(document).trigger('auto_fun');
|
||||
})
|
||||
.catch(function () {
|
||||
var loader = loaderOf(container);
|
||||
if (loader && loader.parentNode === container) {
|
||||
loader.insertAdjacentHTML('beforebegin', errorMarkup());
|
||||
loader.insertAdjacentHTML('beforebegin', errorMarkup(page, append));
|
||||
} else {
|
||||
container.insertAdjacentHTML('afterbegin', errorMarkup());
|
||||
container.insertAdjacentHTML('afterbegin', errorMarkup(page, append));
|
||||
}
|
||||
})
|
||||
.finally(function () { setBusy(container, false); });
|
||||
@@ -187,12 +189,40 @@
|
||||
|
||||
function initItems(container) {
|
||||
if (!once(container, 'Items')) return;
|
||||
function jumpTo(input) {
|
||||
var page = Math.min(Number(input.max), Math.floor(Number(input.value)));
|
||||
if (!Number.isFinite(page) || page < 1 || page === Number(container.dataset.page || 1)) {
|
||||
input.focus();
|
||||
return;
|
||||
}
|
||||
loadItems(container, page, false);
|
||||
}
|
||||
container.addEventListener('input', function (event) {
|
||||
if (!event.target.matches('[data-widget-jump]')) return;
|
||||
event.stopPropagation();
|
||||
var page = Math.floor(Number(event.target.value));
|
||||
event.target.value = page > 0 ? String(Math.min(Number(event.target.max), page)) : '';
|
||||
});
|
||||
container.addEventListener('keydown', function (event) {
|
||||
if (event.key !== 'Enter' || !event.target.matches('[data-widget-jump]')) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
jumpTo(event.target);
|
||||
});
|
||||
container.addEventListener('click', function (event) {
|
||||
var jump = event.target.closest('[data-widget-jump-go]');
|
||||
if (jump) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
jumpTo(jump.parentElement.querySelector('[data-widget-jump]'));
|
||||
return;
|
||||
}
|
||||
var retry = event.target.closest('[data-widget-retry]');
|
||||
var trigger = event.target.closest('[data-next-page]');
|
||||
var pageLink = event.target.closest('.page-numbers[data-widget-page]');
|
||||
if (retry) {
|
||||
loadItems(container, Number(container.dataset.page || 1), false);
|
||||
event.preventDefault();
|
||||
loadItems(container, Number(retry.dataset.retryPage || 1), retry.dataset.retryAppend === '1');
|
||||
return;
|
||||
}
|
||||
if (trigger) {
|
||||
@@ -217,6 +247,12 @@
|
||||
var button = event.target.closest('[role="tab"][data-segment]');
|
||||
if (!button) return;
|
||||
event.preventDefault();
|
||||
var nav = button.closest('[role="tablist"]');
|
||||
if (nav && nav.scrollWidth > nav.clientWidth) {
|
||||
var tabBounds = button.getBoundingClientRect();
|
||||
var navBounds = nav.getBoundingClientRect();
|
||||
nav.scrollTo({ left: nav.scrollLeft + tabBounds.left - navBounds.left + tabBounds.width / 2 - nav.clientWidth / 2, behavior: reducedMotion ? 'auto' : 'smooth' });
|
||||
}
|
||||
tabs.querySelectorAll('[role="tab"]').forEach(function (tab) {
|
||||
tab.setAttribute('aria-selected', tab === button ? 'true' : 'false');
|
||||
tab.setAttribute('tabindex', tab === button ? '0' : '-1');
|
||||
@@ -227,10 +263,7 @@
|
||||
item.classList.toggle('active', active); item.classList.toggle('in', active);
|
||||
});
|
||||
var panel = tabs.querySelector('[data-widget-items][data-segment="' + button.dataset.segment + '"]');
|
||||
if (!panel) panel = tabs.querySelector('[data-widget-items]');
|
||||
if (!panel) return;
|
||||
panel.dataset.segment = button.dataset.segment;
|
||||
panel.setAttribute('aria-labelledby', button.id);
|
||||
if (panel.dataset.loaded !== '1') loadItems(panel, 1, false);
|
||||
});
|
||||
}
|
||||
@@ -311,7 +344,7 @@
|
||||
scope.querySelectorAll('.aksrt-widget-video[data-video-url]').forEach(initVideo);
|
||||
scope.querySelectorAll('.aksrt-widget-quote').forEach(initQuote);
|
||||
scope.querySelectorAll('[data-widget-items]').forEach(initItems);
|
||||
scope.querySelectorAll('.aksrt-widget-tabs, .widget-tab-post').forEach(initTabs);
|
||||
scope.querySelectorAll('.widget-tab-post').forEach(initTabs);
|
||||
scope.querySelectorAll('.aksrt-faq').forEach(initFaq);
|
||||
scope.querySelectorAll('.aksrt-feature-intro').forEach(initFeatures);
|
||||
scope.querySelectorAll('[data-count-up]').forEach(initCount);
|
||||
|
||||
Reference in new issue
Block a user