Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* Modify short statistic block.

Browse Source
This commit is contained in:
liumengyi
2023-10-08 09:40:01 +08:00
parent 3d35ba8833
commit 2e69c85595
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/zin/wg/statisticblock/css/v1.css
+8 -6
View File
@@ -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;}
lib/zin/wg/statisticblock/v1.php
+18 -7
View File
@@ -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);'
)))