feat: add tag cloud page with an alphabet filter and modern UI styling.
This commit is contained in:
parent
b21d97d179
commit
c7e7f9ceee
@ -1,9 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
|
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
{$pageName="tag.cloud"}
|
{$pageName="tag.cloud"}
|
||||||
{include="includes"}
|
{include="includes"}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{include="page.header"}
|
{include="page.header"}
|
||||||
|
|
||||||
@ -19,15 +21,55 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">{'Tag Cloud'|t}</div>
|
<div class="card-header">{'Tag Cloud'|t}</div>
|
||||||
<div class="card-body">
|
<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">
|
<div id="cloudtag" class="tag-cloud">
|
||||||
{loop="$tags"}
|
{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>
|
<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>
|
<span class="count-badge">{$value.count}</span>
|
||||||
{loop="$value.tag_plugin"}
|
{loop="$value.tag_plugin"}
|
||||||
{$value}
|
{$value}
|
||||||
{/loop}
|
{/loop}
|
||||||
|
</span>
|
||||||
{/loop}
|
{/loop}
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -39,30 +81,377 @@
|
|||||||
</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 {
|
.tag-cloud {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: baseline;
|
align-items: center;
|
||||||
gap: 0.5rem 0.25rem;
|
gap: 1rem;
|
||||||
line-height: 1.5;
|
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 {
|
.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;
|
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 {
|
.cloud-tag:hover {
|
||||||
color: var(--primary-hover);
|
color: #fff;
|
||||||
text-decoration: underline;
|
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 {
|
.count-badge {
|
||||||
font-size: 0.7em;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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);
|
color: var(--text-muted);
|
||||||
vertical-align: super;
|
text-align: center;
|
||||||
margin-right: 0.5rem;
|
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>
|
</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"}
|
{include="page.footer"}
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user