fix(widgets): restore article list rendering and reference styles
This commit is contained in:
kate522 committed
1 parent
4ea00f1322
commit
fc04bf65e6
18 files changed
+345
-97
No files matched your search
+29
-28
@@ -68,9 +68,11 @@
|
||||
.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,
|
||||
.aksrt-tab-posts-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline:3px solid var(--focus-color,#ff5473) !important; outline-offset:3px; }
|
||||
.aksrt-tab-posts-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible,
|
||||
.aksrt-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; }
|
||||
.dark-theme .aksrt-posts-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible,
|
||||
[data-theme="dark"] :is(.aksrt-user-widget-wrap, .aksrt-tab-posts-wrap, .aksrt-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; }
|
||||
@@ -159,21 +161,21 @@
|
||||
.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 .item-meta .meta-pay { padding:0 4px; cursor:auto; }
|
||||
.aksrt-tab-posts-wrap, .aksrt-posts-wrap { font-size:14px; line-height:1.42857143; color:var(--main-color,#4e5358); }
|
||||
.widget-tab-post .item-heading, .widget-main-post .item-heading { font-weight:500; color:inherit; }
|
||||
.widget-tab-post .item-heading.font-bold, .widget-main-post .item-heading.font-bold { font-weight:700; }
|
||||
.widget-tab-post .posts-mini, .widget-main-post .posts-mini { vertical-align:baseline; }
|
||||
.widget-tab-post .posts-mini-con, .widget-main-post .posts-mini-con { flex:auto; }
|
||||
.widget-tab-post .item-meta .meta-pay, .widget-main-post .item-meta .meta-pay { padding:0 4px; cursor:auto; }
|
||||
.widget-tab-post .post_ajax_loader { min-height: 40px; }
|
||||
/* Keep the reference's compact pagination after public pagination.css. */
|
||||
.widget-tab-post .pagenav {
|
||||
.widget-tab-post .pagenav, .widget-main-post .pagenav {
|
||||
display:block;
|
||||
padding:20px 0;
|
||||
line-height:1.4;
|
||||
text-align:center;
|
||||
}
|
||||
.widget-tab-post .pagenav .page-numbers {
|
||||
.widget-tab-post .pagenav .page-numbers, .widget-main-post .pagenav .page-numbers {
|
||||
display:inline-block;
|
||||
min-width:31px;
|
||||
min-height:0;
|
||||
@@ -187,8 +189,8 @@
|
||||
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 {
|
||||
.widget-tab-post .pagenav a.page-numbers:hover, .widget-main-post .pagenav a.page-numbers:hover { background:var(--main-border-color); color:var(--muted-color); opacity:.7; }
|
||||
.widget-tab-post .pagenav .page-numbers > span, .widget-main-post .pagenav .page-numbers > span {
|
||||
display:inline;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
@@ -201,12 +203,12 @@
|
||||
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 {
|
||||
.widget-tab-post .pagenav .page-numbers > .ml6, .widget-main-post .pagenav .page-numbers > .ml6 { margin-left:6px; }
|
||||
.widget-tab-post .pagenav .page-numbers > .mr6, .widget-main-post .pagenav .page-numbers > .mr6 { margin-right:6px; }
|
||||
.widget-tab-post .pagenav .prev i, .widget-main-post .pagenav .prev i,
|
||||
.widget-tab-post .pagenav .next i, .widget-main-post .pagenav .next i { font-size:1.2em; }
|
||||
.widget-tab-post .pagenav .pag-jump, .widget-main-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, .widget-main-post .pagenav .pag-jump .jump-input {
|
||||
position:absolute;
|
||||
inset:0;
|
||||
width:100%;
|
||||
@@ -217,23 +219,22 @@
|
||||
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; }
|
||||
.widget-tab-post .pagenav .jump-input:focus, .widget-main-post .pagenav .jump-input:focus,
|
||||
.widget-tab-post .pagenav .pag-jump:hover .jump-input, .widget-main-post .pagenav .pag-jump:hover .jump-input { opacity:1; }
|
||||
.sidebar :is(.widget-tab-post, .widget-main-post) .pagenav { padding:10px 5px; }
|
||||
.sidebar :is(.widget-tab-post, .widget-main-post) .theme-pagination { margin:10px; }
|
||||
.sidebar :is(.widget-tab-post, .widget-main-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; }
|
||||
:is(.widget-tab-post, .widget-main-post) .pagenav a.page-numbers { display:none; }
|
||||
:is(.widget-tab-post, .widget-main-post) .pagenav a.next,
|
||||
:is(.widget-tab-post, .widget-main-post) .pagenav a.prev { display:inline-block; }
|
||||
:is(.widget-tab-post, .widget-main-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; }
|
||||
.theme-pagination .next-page a:hover { background: var(--main-border-color, rgba(127,127,127,.18)); opacity: 1; }
|
||||
.pagenav .page-numbers { cursor: pointer; }
|
||||
.widget-ajaxpager[lazyload-action="ias"] .post_ajax_trigger { display: none; }
|
||||
/* 组合模块 PC 端为左右两列；后台预览不加载 main.css 的 .flex 工具类，这里需自声明。 */
|
||||
.widget-slider-graphic { display: flex; gap: 10px; align-items: stretch; }
|
||||
.widget-slider-graphic .slider-col { width: var(--layout-ratio, 60%); min-width: 0; }
|
||||
|
||||
@@ -85,10 +85,17 @@
|
||||
}
|
||||
|
||||
function itemsUrl(widget, instance, page, segment) {
|
||||
var base = String(config.restUrl || '').replace(/\/$/, '');
|
||||
var url = base + '/' + encodeURIComponent(widget) + '/items?instance=' + encodeURIComponent(instance) + '&page=' + encodeURIComponent(page);
|
||||
if (segment !== undefined && segment !== '') url += '&segment=' + encodeURIComponent(segment);
|
||||
return url;
|
||||
var url = new URL(config.restUrl, window.location.href);
|
||||
var path = '/' + encodeURIComponent(widget) + '/items';
|
||||
if (url.searchParams.has('rest_route')) {
|
||||
url.searchParams.set('rest_route', url.searchParams.get('rest_route').replace(/\/$/, '') + path);
|
||||
} else {
|
||||
url.pathname = url.pathname.replace(/\/$/, '') + path;
|
||||
}
|
||||
url.searchParams.set('instance', instance);
|
||||
url.searchParams.set('page', page);
|
||||
if (segment !== undefined && segment !== '') url.searchParams.set('segment', segment);
|
||||
return url.href;
|
||||
}
|
||||
|
||||
function loaderOf(container) {
|
||||
@@ -192,6 +199,14 @@
|
||||
|
||||
function initItems(container) {
|
||||
if (!once(container, 'Items')) return;
|
||||
if (container.hasAttribute('data-widget-lazy') && container.dataset.loaded !== '1') {
|
||||
container.addEventListener('lazybeforeunveil', function (event) {
|
||||
if (event.target === container && container.dataset.loaded !== '1') loadItems(container, 1, false);
|
||||
});
|
||||
// main.js loads asynchronously through loader_js. Its lazySizes scan
|
||||
// may finish before this client binds, so consume an unveiled pager.
|
||||
if (!container.classList.contains('lazyload')) loadItems(container, 1, false);
|
||||
}
|
||||
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)) {
|
||||
@@ -229,11 +244,8 @@
|
||||
return;
|
||||
}
|
||||
if (trigger) {
|
||||
// data-widget-ias marks the hidden reveal trigger the runtime clicks
|
||||
// when the lazy container scrolls into view; it reloads page one.
|
||||
event.preventDefault();
|
||||
if (trigger.dataset.widgetIas === '1') loadItems(container, 1, false);
|
||||
else loadItems(container, Number(trigger.dataset.nextPage || 2), true);
|
||||
loadItems(container, Number(trigger.dataset.nextPage || 2), true);
|
||||
return;
|
||||
}
|
||||
if (pageLink) {
|
||||
@@ -346,6 +358,7 @@
|
||||
var scope = root || document;
|
||||
scope.querySelectorAll('.aksrt-widget-video[data-video-url]').forEach(initVideo);
|
||||
scope.querySelectorAll('.aksrt-widget-quote').forEach(initQuote);
|
||||
if (scope.matches && scope.matches('[data-widget-items]')) initItems(scope);
|
||||
scope.querySelectorAll('[data-widget-items]').forEach(initItems);
|
||||
scope.querySelectorAll('.widget-tab-post').forEach(initTabs);
|
||||
scope.querySelectorAll('.aksrt-faq').forEach(initFaq);
|
||||
|
||||
Reference in new issue
Block a user