Skip to content

Commit 0749ccc

Browse files
gyrationtechsgyrationtechs
authored
Merge pull request #796 from Kali-Decoder/fix-tags-dropdown
Fix Tags Dev Diaries Dropdown
2 parents 153a9ae + dc4a5b3 commit 0749ccc

File tree

4 files changed

+5988
-6050
lines changed

4 files changed

+5988
-6050
lines changed

‎.yarnrc.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
enableHardenedMode: false
2-
31
nodeLinker: node-modules

‎src/components/BlogIndex/index.js‎

Lines changed: 83 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ export default function BlogIndex() {
4343
const [selectedTags, setSelectedTags] = useState([]);
4444
const [selectedAuthor, setSelectedAuthor] = useState('');
4545
const [sortOrder, setSortOrder] = useState('desc');
46+
const [isTagDropdownOpen, setIsTagDropdownOpen] = useState(false);
47+
48+
const toggleTag = (tagLabel) => {
49+
setSelectedTags((prev) =>
50+
prev.includes(tagLabel) ? prev.filter((t) => t !== tagLabel) : [...prev, tagLabel]
51+
);
52+
};
4653

4754
const getPostImage = (post) => {
4855
const image = post.image || post.frontMatter?.image;
@@ -545,7 +552,7 @@ export default function BlogIndex() {
545552

546553
<section className="margin-bottom--xl">
547554
<h2 style={{ fontSize: '2rem', marginBottom: '1.5rem', fontWeight: '700' }}>
548-
Latest Post
555+
Latest Post
549556
</h2>
550557
{latestPost && (
551558
<div style={{ width: '100%' }}>
@@ -583,33 +590,88 @@ export default function BlogIndex() {
583590
</div>
584591

585592
<div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start' }}>
586-
<div style={{ flex: '0 0 32%' }}>
593+
<div style={{ flex: '0 0 32%', position: 'relative' }}>
587594
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
588595
Tags: {selectedTags.length > 0 && <span style={{ color: '#2563eb', fontSize: '0.875rem' }}>({selectedTags.length} selected)</span>}
589596
</label>
590-
<select
591-
multiple
592-
value={selectedTags}
593-
onChange={(e) =>
594-
setSelectedTags(Array.from(e.target.selectedOptions, (o) => o.value))
595-
}
596-
style={{
597-
height: '60px',
597+
<button
598+
type="button"
599+
onClick={() => setIsTagDropdownOpen((v) => !v)}
600+
aria-haspopup="listbox"
601+
aria-expanded={isTagDropdownOpen}
602+
style={{
598603
width: '100%',
599-
padding: '0.25rem',
604+
padding: '0.5rem 0.75rem',
600605
borderRadius: '6px',
601606
border: '1px solid #ccc',
607+
background: '#ffffff',
608+
display: 'flex',
609+
alignItems: 'center',
610+
justifyContent: 'space-between',
602611
fontSize: '0.875rem',
603-
overflowY: 'auto'
604-
}}>
605-
{allTags.map((tag) => (
606-
<option key={tag} value={tag}>
607-
{tag}
608-
</option>
609-
))}
610-
</select>
612+
height: '38px',
613+
cursor: 'pointer'
614+
}}
615+
>
616+
<span style={{ color: selectedTags.length ? '#111827' : '#6b7280' }}>
617+
{selectedTags.length ? `${selectedTags.length} tags selected` : 'Select tags'}
618+
</span>
619+
<span style={{ fontSize: '0.75rem', color: '#6b7280' }}>{isTagDropdownOpen ? '▲' : '▼'}</span>
620+
</button>
621+
622+
{isTagDropdownOpen && (
623+
<div
624+
role="listbox"
625+
aria-multiselectable="true"
626+
style={{
627+
position: 'absolute',
628+
top: '100%',
629+
left: 0,
630+
right: 0,
631+
marginTop: '0.5rem',
632+
maxHeight: '220px',
633+
overflowY: 'auto',
634+
borderRadius: '6px',
635+
border: '1px solid #ccc',
636+
background: '#ffffff',
637+
boxShadow: '0 10px 25px rgba(0, 0, 0, 0.08)',
638+
zIndex: 10,
639+
padding: '0.25rem'
640+
}}
641+
>
642+
{allTags.map((tag) => {
643+
const isSelected = selectedTags.includes(tag);
644+
return (
645+
<button
646+
key={tag}
647+
type="button"
648+
role="option"
649+
aria-selected={isSelected}
650+
onClick={() => toggleTag(tag)}
651+
style={{
652+
width: '100%',
653+
display: 'flex',
654+
alignItems: 'center',
655+
justifyContent: 'space-between',
656+
padding: '0.45rem 0.6rem',
657+
borderRadius: '6px',
658+
border: 'none',
659+
background: isSelected ? '#eff6ff' : 'transparent',
660+
color: '#111827',
661+
fontSize: '0.8125rem',
662+
cursor: 'pointer',
663+
textAlign: 'left'
664+
}}
665+
>
666+
<span>{tag}</span>
667+
<span style={{ opacity: isSelected ? 1 : 0.2 }}>✓</span>
668+
</button>
669+
);
670+
})}
671+
</div>
672+
)}
611673
<div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
612-
Hold Ctrl/Cmd to select multiple
674+
Click to select. Click again to deselect.
613675
</div>
614676
</div>
615677

@@ -657,74 +719,6 @@ export default function BlogIndex() {
657719
</select>
658720
</div>
659721
</div>
660-
661-
{/* Active Filters Display */}
662-
{(selectedTags.length > 0 || selectedAuthor) && (
663-
<div style={{ marginTop: '1rem', display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
664-
<span style={{ fontSize: '0.875rem', fontWeight: '500', color: '#666' }}>Active filters:</span>
665-
666-
{selectedTags.map((tag) => (
667-
<span
668-
key={tag}
669-
style={{
670-
background: '#2563eb',
671-
color: 'white',
672-
padding: '0.25rem 0.5rem',
673-
borderRadius: '4px',
674-
fontSize: '0.75rem',
675-
display: 'flex',
676-
alignItems: 'center',
677-
gap: '0.25rem'
678-
}}
679-
>
680-
{tag}
681-
<button
682-
onClick={() => setSelectedTags(selectedTags.filter(t => t !== tag))}
683-
style={{
684-
background: 'none',
685-
border: 'none',
686-
color: 'white',
687-
cursor: 'pointer',
688-
padding: 0,
689-
fontSize: '0.875rem'
690-
}}
691-
>
692-
×
693-
</button>
694-
</span>
695-
))}
696-
697-
{selectedAuthor && (
698-
<span
699-
style={{
700-
background: '#059669',
701-
color: 'white',
702-
padding: '0.25rem 0.5rem',
703-
borderRadius: '4px',
704-
fontSize: '0.75rem',
705-
display: 'flex',
706-
alignItems: 'center',
707-
gap: '0.25rem'
708-
}}
709-
>
710-
Author: {selectedAuthor}
711-
<button
712-
onClick={() => setSelectedAuthor('')}
713-
style={{
714-
background: 'none',
715-
border: 'none',
716-
color: 'white',
717-
cursor: 'pointer',
718-
padding: 0,
719-
fontSize: '0.875rem'
720-
}}
721-
>
722-
×
723-
</button>
724-
</span>
725-
)}
726-
</div>
727-
)}
728722
</section>
729723

730724
<section className="margin-bottom--xl">
@@ -747,4 +741,4 @@ export default function BlogIndex() {
747741
</main>
748742
</Layout>
749743
);
750-
}
744+
}

‎src/css/custom.css‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1627,25 +1627,24 @@ html[data-theme='dark'] .llm-menu__item:hover {
16271627

16281628
/* Dark defaults */
16291629
:root {
1630-
--mn-card-bg: rgba(10, 14, 25, 0.92);
1631-
--mn-card-bg-hover: rgba(14, 18, 32, 0.98);
1632-
--mn-border: rgba(255, 255, 255, 0.10);
1633-
--mn-border-hover: rgba(91, 182, 242, 0.45);
1634-
--mn-primary: #5bb6f2;
1635-
--mn-accent-violet: #7a5cff;
1636-
--mn-muted: var(--ifm-color-content-secondary);
1630+
--mn-card-bg: #000000;
1631+
--mn-card-bg-hover: #ffffff;
1632+
--mn-border: rgba(255, 255, 255, 0.2);
1633+
--mn-border-hover: rgba(0, 0, 0, 0.25);
1634+
--mn-text: #ffffff;
1635+
--mn-text-hover: #000000;
16371636
--mn-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
1638-
--mn-shadow-glow: 0 8px 24px rgba(91, 182, 242, 0.22);
16391637
}
16401638

16411639
/* Light mode */
16421640
html[data-theme='light'] {
16431641
--mn-card-bg: #ffffff;
1644-
--mn-card-bg-hover: #f6f8ff;
1645-
--mn-border: rgba(0, 0, 0, 0.08);
1646-
--mn-border-hover: rgba(91, 182, 242, 0.4);
1642+
--mn-card-bg-hover: #000000;
1643+
--mn-border: rgba(0, 0, 0, 0.12);
1644+
--mn-border-hover: rgba(255, 255, 255, 0.35);
1645+
--mn-text: #000000;
1646+
--mn-text-hover: #ffffff;
16471647
--mn-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
1648-
--mn-shadow-glow: 0 10px 30px rgba(91, 182, 242, 0.25);
16491648
}
16501649

16511650
/* Base tile */
@@ -1657,47 +1656,47 @@ html[data-theme='light'] {
16571656
padding: 20px 20px 18px;
16581657
border-radius: 16px;
16591658
border: 1px solid var(--mn-border);
1660-
background:
1661-
radial-gradient(120% 120% at 85% 15%, rgba(91,182,242,0.12), transparent),
1662-
radial-gradient(120% 120% at 15% 85%, rgba(122,92,255,0.12), transparent),
1663-
var(--mn-card-bg);
1659+
background: var(--mn-card-bg);
16641660
box-shadow: var(--mn-shadow);
1665-
color: var(--ifm-font-color-base);
1661+
color: var(--mn-text);
16661662
text-decoration: none;
16671663
transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
16681664
}
16691665

1670-
/* 💡 Light mode — more visible gradients */
1671-
html[data-theme='light'] .mn-tile {
1672-
background:
1673-
radial-gradient(120% 120% at 85% 15%, rgba(91,182,242,0.20), transparent),
1674-
radial-gradient(120% 120% at 15% 85%, rgba(122,92,255,0.18), transparent),
1675-
var(--mn-card-bg);
1666+
/* Ensure linked headings/cta inherit tile color */
1667+
.mn-tile a {
1668+
color: inherit;
1669+
text-decoration: none;
1670+
}
1671+
1672+
.mn-tile a:hover,
1673+
.mn-tile a:focus-visible {
1674+
color: inherit;
1675+
text-decoration: none;
16761676
}
16771677

16781678
/* Hover effect */
16791679
.mn-tile:hover,
16801680
.mn-tile:focus-visible {
1681-
background:
1682-
radial-gradient(120% 120% at 85% 15%, rgba(91,182,242,0.25), transparent),
1683-
radial-gradient(120% 120% at 15% 85%, rgba(122,92,255,0.22), transparent),
1684-
var(--mn-card-bg-hover);
1681+
background: var(--mn-card-bg-hover);
16851682
border-color: var(--mn-border-hover);
16861683
transform: translateY(-2px);
1687-
box-shadow: var(--mn-shadow-glow);
1684+
box-shadow: var(--mn-shadow);
1685+
color: var(--mn-text-hover);
16881686
}
16891687

16901688
/* Typography */
16911689
.mn-tile h3 {
16921690
margin: 0;
16931691
font-size: 1.05rem;
16941692
font-weight: 600;
1695-
color: var(--ifm-heading-color);
1693+
color: inherit;
16961694
}
16971695

16981696
.mn-tile p {
16991697
margin: 4px 0 0;
1700-
color: var(--mn-muted);
1698+
color: inherit;
1699+
opacity: 0.8;
17011700
font-size: 0.92rem;
17021701
line-height: 1.45;
17031702
}
@@ -1706,7 +1705,7 @@ html[data-theme='light'] .mn-tile {
17061705
.mn-cta {
17071706
margin-top: 10px;
17081707
font-weight: 600;
1709-
color: var(--mn-primary);
1708+
color: inherit;
17101709
font-size: 0.9rem;
17111710
display: inline-flex;
17121711
align-items: center;
@@ -1721,7 +1720,7 @@ html[data-theme='light'] .mn-tile {
17211720
}
17221721

17231722
.mn-tile:hover .mn-cta {
1724-
color: var(--ifm-color-primary);
1723+
color: inherit;
17251724
}
17261725

17271726
/* Video responsiveness */

0 commit comments

Comments
 (0)