feat: add tag cloud page with an alphabet filter and modern UI styling.
This commit is contained in:
parent
b21d97d179
commit
c7e7f9ceee
@ -1,15 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
|
||||
<head>
|
||||
{$pageName="tag.cloud"}
|
||||
{include="includes"}
|
||||
</head>
|
||||
<body>
|
||||
{include="page.header"}
|
||||
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
|
||||
|
||||
{include="tag.sort"}
|
||||
<head>
|
||||
{$pageName="tag.cloud"}
|
||||
{include="includes"}
|
||||
</head>
|
||||
|
||||
<div class="container page-tag-cloud">
|
||||
<body>
|
||||
{include="page.header"}
|
||||
|
||||
{include="tag.sort"}
|
||||
|
||||
<div class="container page-tag-cloud">
|
||||
<div id="plugin_zone_start_tagcloud" class="plugin_zone">
|
||||
{loop="$plugin_start_zone"}
|
||||
{$value}
|
||||
@ -19,15 +21,55 @@
|
||||
<div class="card">
|
||||
<div class="card-header">{'Tag Cloud'|t}</div>
|
||||
<div class="card-body">
|
||||
<!-- Alphabet Filter Bar -->
|
||||
<div id="alphabet-filter" class="alphabet-filter">
|
||||
<button type="button" class="alpha-btn active" data-letter="ALL">ALL</button>
|
||||
<button type="button" class="alpha-btn" data-letter="#">#</button>
|
||||
<button type="button" class="alpha-btn" data-letter="A">A</button>
|
||||
<button type="button" class="alpha-btn" data-letter="B">B</button>
|
||||
<button type="button" class="alpha-btn" data-letter="C">C</button>
|
||||
<button type="button" class="alpha-btn" data-letter="D">D</button>
|
||||
<button type="button" class="alpha-btn" data-letter="E">E</button>
|
||||
<button type="button" class="alpha-btn" data-letter="F">F</button>
|
||||
<button type="button" class="alpha-btn" data-letter="G">G</button>
|
||||
<button type="button" class="alpha-btn" data-letter="H">H</button>
|
||||
<button type="button" class="alpha-btn" data-letter="I">I</button>
|
||||
<button type="button" class="alpha-btn" data-letter="J">J</button>
|
||||
<button type="button" class="alpha-btn" data-letter="K">K</button>
|
||||
<button type="button" class="alpha-btn" data-letter="L">L</button>
|
||||
<button type="button" class="alpha-btn" data-letter="M">M</button>
|
||||
<button type="button" class="alpha-btn" data-letter="N">N</button>
|
||||
<button type="button" class="alpha-btn" data-letter="O">O</button>
|
||||
<button type="button" class="alpha-btn" data-letter="P">P</button>
|
||||
<button type="button" class="alpha-btn" data-letter="Q">Q</button>
|
||||
<button type="button" class="alpha-btn" data-letter="R">R</button>
|
||||
<button type="button" class="alpha-btn" data-letter="S">S</button>
|
||||
<button type="button" class="alpha-btn" data-letter="T">T</button>
|
||||
<button type="button" class="alpha-btn" data-letter="U">U</button>
|
||||
<button type="button" class="alpha-btn" data-letter="V">V</button>
|
||||
<button type="button" class="alpha-btn" data-letter="W">W</button>
|
||||
<button type="button" class="alpha-btn" data-letter="X">X</button>
|
||||
<button type="button" class="alpha-btn" data-letter="Y">Y</button>
|
||||
<button type="button" class="alpha-btn" data-letter="Z">Z</button>
|
||||
</div>
|
||||
|
||||
<div id="cloudtag" class="tag-cloud">
|
||||
{loop="$tags"}
|
||||
<span class="tag-item" data-tag="{$key}">
|
||||
<a href="{$base_path}/?searchtags={$tags_url.$key1}{$tags_separator|urlencode}{$search_tags_url}" style="font-size:{$value.size}em;" class="cloud-tag">{$key}</a>
|
||||
<span class="count-badge">{$value.count}</span>
|
||||
{loop="$value.tag_plugin"}
|
||||
{$value}
|
||||
{/loop}
|
||||
</span>
|
||||
{/loop}
|
||||
</div>
|
||||
|
||||
<!-- No results message -->
|
||||
<div id="no-tags-message" class="no-tags-message" style="display: none;">
|
||||
<i class="mdi mdi-tag-off-outline"></i>
|
||||
<span>No tags found for this letter</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,33 +78,380 @@
|
||||
{$value}
|
||||
{/loop}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style>
|
||||
/* Alphabet Filter Bar - Professional Design */
|
||||
.alphabet-filter {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.35rem;
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
|
||||
border-radius: 50px;
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
box-shadow:
|
||||
0 4px 20px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.alphabet-filter::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alpha-btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
letter-spacing: 0.02em;
|
||||
color: rgba(148, 163, 184, 0.8);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.alpha-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.alpha-btn:hover:not(.disabled) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alpha-btn:hover:not(.disabled)::before {
|
||||
background: rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.alpha-btn.active {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.alpha-btn.active::before {
|
||||
background: linear-gradient(135deg, #5b8def 0%, #6366f1 100%);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(91, 141, 239, 0.5),
|
||||
0 0 20px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.alpha-btn.disabled {
|
||||
color: rgba(100, 116, 139, 0.3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.alpha-btn.disabled:hover::before {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ALL button special styling */
|
||||
.alpha-btn[data-letter="ALL"] {
|
||||
min-width: 48px;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
border-radius: 20px;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.alpha-btn[data-letter="ALL"]::before {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
/* Separator after ALL and # */
|
||||
.alpha-btn[data-letter="ALL"]::after,
|
||||
.alpha-btn[data-letter="#"]::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.alpha-btn[data-letter="#"] {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* Tag Cloud - Premium Design */
|
||||
.tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem 0.25rem;
|
||||
line-height: 1.5;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.tag-item:hover {
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tag-item.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cloud-tag {
|
||||
color: var(--primary);
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5em 1em;
|
||||
font-weight: 500;
|
||||
color: #e2e8f0;
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
|
||||
border: 1px solid rgba(99, 102, 241, 0.15);
|
||||
border-radius: 25px;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
white-space: nowrap;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.cloud-tag:hover {
|
||||
color: var(--primary-hover);
|
||||
text-decoration: underline;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(91, 141, 239, 0.2) 100%);
|
||||
border-color: rgba(99, 102, 241, 0.5);
|
||||
text-decoration: none;
|
||||
box-shadow:
|
||||
0 4px 16px rgba(99, 102, 241, 0.3),
|
||||
0 0 20px rgba(99, 102, 241, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Count Badge - Positioned at top-right corner */
|
||||
.count-badge {
|
||||
font-size: 0.7em;
|
||||
color: var(--text-muted);
|
||||
vertical-align: super;
|
||||
margin-right: 0.5rem;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #5b8def 0%, #6366f1 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
|
||||
transition: all 0.25s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
{include="page.footer"}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
/* Large count badge for popular tags */
|
||||
.tag-item:hover .count-badge {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 3px 10px rgba(99, 102, 241, 0.5);
|
||||
}
|
||||
|
||||
/* Size variations for visual hierarchy - keeping font-size from template */
|
||||
.cloud-tag[style*="font-size:1"] {
|
||||
padding: 0.4em 0.8em;
|
||||
}
|
||||
|
||||
.cloud-tag[style*="font-size:2"],
|
||||
.cloud-tag[style*="font-size:3"],
|
||||
.cloud-tag[style*="font-size:4"] {
|
||||
padding: 0.5em 1.2em;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
/* Featured tags (largest) get special treatment */
|
||||
.cloud-tag[style*="font-size:4"],
|
||||
.cloud-tag[style*="font-size:5"] {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(30, 41, 59, 0.9) 100%);
|
||||
border-color: rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
/* No tags message */
|
||||
.no-tags-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.no-tags-message i {
|
||||
font-size: 2.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.no-tags-message span {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.alphabet-filter {
|
||||
justify-content: flex-start;
|
||||
padding: 0.3rem 0.5rem;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.alpha-btn {
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.alpha-btn[data-letter="ALL"] {
|
||||
min-width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.alpha-btn {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.alpha-btn[data-letter="ALL"] {
|
||||
min-width: 38px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const alphabetFilter = document.getElementById('alphabet-filter');
|
||||
const tagCloud = document.getElementById('cloudtag');
|
||||
const noTagsMessage = document.getElementById('no-tags-message');
|
||||
|
||||
if (!alphabetFilter || !tagCloud) return;
|
||||
|
||||
const alphaBtns = alphabetFilter.querySelectorAll('.alpha-btn');
|
||||
const tagItems = tagCloud.querySelectorAll('.tag-item');
|
||||
|
||||
// Check which letters have tags
|
||||
function getAvailableLetters() {
|
||||
const available = new Set(['ALL']);
|
||||
tagItems.forEach(item => {
|
||||
const tagName = item.dataset.tag || '';
|
||||
if (tagName.length > 0) {
|
||||
const firstChar = tagName.charAt(0).toUpperCase();
|
||||
if (/[A-Z]/.test(firstChar)) {
|
||||
available.add(firstChar);
|
||||
} else {
|
||||
available.add('#'); // Non-alphabetic characters
|
||||
}
|
||||
}
|
||||
});
|
||||
return available;
|
||||
}
|
||||
|
||||
// Mark unavailable letters as disabled
|
||||
function updateAvailableLetters() {
|
||||
const available = getAvailableLetters();
|
||||
alphaBtns.forEach(btn => {
|
||||
const letter = btn.dataset.letter;
|
||||
if (letter !== 'ALL' && !available.has(letter)) {
|
||||
btn.classList.add('disabled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filter tags by letter
|
||||
function filterByLetter(letter) {
|
||||
let visibleCount = 0;
|
||||
|
||||
tagItems.forEach(item => {
|
||||
const tagName = item.dataset.tag || '';
|
||||
const firstChar = tagName.charAt(0).toUpperCase();
|
||||
|
||||
let shouldShow = false;
|
||||
|
||||
if (letter === 'ALL') {
|
||||
shouldShow = true;
|
||||
} else if (letter === '#') {
|
||||
// Show tags that start with non-alphabetic characters
|
||||
shouldShow = !/[A-Z]/i.test(firstChar);
|
||||
} else {
|
||||
shouldShow = firstChar === letter;
|
||||
}
|
||||
|
||||
if (shouldShow) {
|
||||
item.classList.remove('hidden');
|
||||
visibleCount++;
|
||||
} else {
|
||||
item.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide no results message
|
||||
if (noTagsMessage) {
|
||||
noTagsMessage.style.display = visibleCount === 0 ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
// Show/hide tag cloud
|
||||
tagCloud.style.display = visibleCount === 0 ? 'none' : 'flex';
|
||||
}
|
||||
|
||||
// Handle button clicks
|
||||
alphaBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function () {
|
||||
if (this.classList.contains('disabled')) return;
|
||||
|
||||
const letter = this.dataset.letter;
|
||||
|
||||
// Update active state
|
||||
alphaBtns.forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
// Filter tags
|
||||
filterByLetter(letter);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize
|
||||
updateAvailableLetters();
|
||||
});
|
||||
</script>
|
||||
|
||||
{include="page.footer"}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user