From 2e69c855951653bce2c460c2c29292d683763a07 Mon Sep 17 00:00:00 2001 From: liumengyi Date: Sun, 8 Oct 2023 09:40:01 +0800 Subject: [PATCH] * Modify short statistic block. --- lib/zin/wg/statisticblock/css/v1.css | 14 ++++++++------ lib/zin/wg/statisticblock/v1.php | 25 ++++++++++++++++++------- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/lib/zin/wg/statisticblock/css/v1.css b/lib/zin/wg/statisticblock/css/v1.css index bb4c752b41..deb7a7dc3e 100644 --- a/lib/zin/wg/statisticblock/css/v1.css +++ b/lib/zin/wg/statisticblock/css/v1.css @@ -8,10 +8,12 @@ .is-long .block-statistic-nav-url {position: absolute!important; padding: 0!important; width: 32px!important; justify-content: center!important; height: 36px!important;} .is-long .block-statistic-nav-url:hover {background-color: var(--color-canvas);} -.is-short .block-statistic-nav {--scrollbar-size: 2px} -.is-short .block-statistic-nav-item {height: 32px!important; border-radius: var(--radius);} -.is-short .block-statistic-nav-url {display: none;} -.is-short .block-statistic-nav-item.active {background: rgba(var(--color-primary-50-rgb), 0.5);} -.block-statistic-nav-btn {opacity: 0;} -.block-statistic-nav:hover .block-statistic-nav-btn {opacity: 1;} +.is-short .block-statistic-nav .nav {justify-content: center;} +.is-short .block-statistic-nav .nav-item {gap: 0;} +.is-short .block-statistic-nav .nav-item.active {gap: 0;} +.is-short .block-statistic-nav .nav-item:not(.active) {display: none;} +.is-short .block-statistic-nav .nav-item > a {gap: 0; padding: 0px 0.25rem;} +.is-short .block-statistic-nav .nav-item .block-statistic-nav-item {display: none;} + +.block-statistic-nav-btn {opacity: 1;} diff --git a/lib/zin/wg/statisticblock/v1.php b/lib/zin/wg/statisticblock/v1.php index 7c15c3ae1c..2236cf062f 100644 --- a/lib/zin/wg/statisticblock/v1.php +++ b/lib/zin/wg/statisticblock/v1.php @@ -57,20 +57,28 @@ class statisticBlock extends blockPanel if(empty($items)) return null; $navItems = array(); - foreach($items as $item) + $hasPrev = true; + $hasNext = true; + foreach($items as $index => $item) { + if($item['id'] == $active) + { + if($index == 0) $hasPrev = false; + if($index + 1 == count($items)) $hasNext = false; + } $navItems[] = li ( - setClass('nav-item group'), + setClass('nav-item group' . ($item['id'] == $active ? ' active' : '')), a ( toggle::tab(array('target' => "#blockTab_{$id}_{$item['id']}")), setClass('block-statistic-nav-item flex-auto min-w-0', $item['id'] == $active ? 'active scroll-into-view' : ''), - span(setClass('text clip'), $item['text']) + span(setClass('text clip'), $item['text']), ), - (isset($item['url']) && !empty($item['url'])) ? a + !$longBlock ? span(setClass('block-statistic-nav-title text text-primary font-bold clip'), $item['text']) : null, + !empty($item['url']) ? a ( - setClass('block-statistic-nav-url top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity'), + $longBlock ? setClass('block-statistic-nav-url top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity') : null, set::href($item['url']), icon('import rotate-270 primary-pale rounded-full w-5 h-5 center'), ) : null @@ -88,15 +96,18 @@ class statisticBlock extends blockPanel ), $longBlock ? null : array ( - btn(span(setClass('chevron-left scale-75')), setClass('block-statistic-nav-btn size-sm square w-6 transition-opacity canvas text-primary rounded-full shadow-lg absolute top-3 left-2'), setData('type', 'prev')), - btn(span(setClass('chevron-right scale-75')), setClass('block-statistic-nav-btn size-sm square w-6 transition-opacity canvas text-primary rounded-full shadow-lg absolute top-3 right-2'), setData('type', 'next')), + btn(span(setClass('chevron-left scale-75')), setClass('block-statistic-nav-btn size-sm square w-6 transition-opacity canvas text-primary rounded-full shadow-lg absolute top-3 left-2'), setData('type', 'prev'), set::disabled(!$hasPrev)), + btn(span(setClass('chevron-right scale-75')), setClass('block-statistic-nav-btn size-sm square w-6 transition-opacity canvas text-primary rounded-full shadow-lg absolute top-3 right-2'), setData('type', 'next'), set::disabled(!$hasNext)), bind::click('.block-statistic-nav-btn', implode('', array ( 'const disabled = "disabled";', 'const type = $target.data("type");', 'const $nextItem = $element.find(".nav-item>.active").parent()[type]();', 'if(!$nextItem.length) return $target.addClass(disabled);', + '$element.find(".nav-item>.active").parent().removeClass("active");', + '$element.find(".nav-item>.active").removeClass("active").removeClass("scroll-into-view");', '$nextItem.scrollIntoView({block: "nearest", inline: "center", behavior: "smooth", ifNeeded: false}).find("a")[0].click();', + '$nextItem.addClass("active").addClass("scroll-into-view");', '$element.find(".block-statistic-nav-btn[data-type=\'prev\']").toggleClass(disabled, !$nextItem.prev().length);', '$element.find(".block-statistic-nav-btn[data-type=\'next\']").toggleClass(disabled, !$nextItem.next().length);' )))