Skip to content

Commit 3f9f7fd

Browse files
author
Anass Rach
committed
Update breadcrumb display!
1 parent 76cdca7 commit 3f9f7fd

3 files changed

Lines changed: 498 additions & 16 deletions

File tree

‎_includes/simple_breadcrumb.html‎

Lines changed: 67 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,69 @@
1-
2-
<!-- Simple breadcrumb component -->
3-
<div class="flashcard-breadcrumb">
4-
<a href="{{ '/' | relative_url }}" class="breadcrumb-home">🏠 Home</a>
5-
{% if page.category %}
6-
<span class="breadcrumb-separator">→</span>
7-
<a href="{{ '/' | relative_url }}#{{ page.category | slugify }}" class="breadcrumb-category"
8-
onclick="setTimeout(function(){
9-
const element = document.getElementById('{{ page.category | slugify }}');
10-
if(element) element.open = true;
11-
}, 100);">
12-
{{ page.category }}
1+
<div class="flashcard-top-navigation">
2+
<!-- Breadcrumb -->
3+
<div class="flashcard-breadcrumb">
4+
<a href="{{ '/' | relative_url }}" class="breadcrumb-home">
5+
<span class="breadcrumb-icon">🏠</span>
6+
<span class="breadcrumb-text">Home</span>
137
</a>
14-
<span class="breadcrumb-separator">→</span>
15-
{% endif %}
16-
<span class="breadcrumb-current">{{ page.title }}</span>
8+
{% if page.category %}
9+
<span class="breadcrumb-separator">›</span>
10+
<a href="{{ '/' | relative_url }}#{{ page.category | slugify }}" class="breadcrumb-category"
11+
onclick="setTimeout(function(){
12+
const element = document.getElementById('{{ page.category | slugify }}');
13+
if(element) element.open = true;
14+
}, 100);">
15+
{{ page.category }}
16+
</a>
17+
<span class="breadcrumb-separator">›</span>
18+
{% endif %}
19+
<span class="breadcrumb-current">{{ page.title | truncate: 50 }}</span>
20+
</div>
21+
22+
<!-- Quick Navigation Bar -->
23+
<div class="quick-nav-bar">
24+
{% assign flashcards = site.flashcards | where: "category", page.category | sort: "order" %}
25+
{% for flashcard in flashcards %}
26+
{% if flashcard.url == page.url %}
27+
{% assign current_index = forloop.index0 %}
28+
{% break %}
29+
{% endif %}
30+
{% endfor %}
31+
32+
{% assign prev_index = current_index | minus: 1 %}
33+
{% assign next_index = current_index | plus: 1 %}
34+
35+
<div class="quick-nav-left">
36+
{% if prev_index >= 0 %}
37+
<a href="{{ flashcards[prev_index].url | relative_url }}" class="quick-nav-btn quick-nav-prev" title="Previous: {{ flashcards[prev_index].title }}">
38+
<span class="nav-arrow">←</span>
39+
<span class="nav-label">Previous</span>
40+
</a>
41+
{% else %}
42+
<span class="quick-nav-btn quick-nav-disabled">
43+
<span class="nav-arrow">←</span>
44+
<span class="nav-label">Previous</span>
45+
</span>
46+
{% endif %}
47+
</div>
48+
49+
<div class="quick-nav-center">
50+
<span class="card-counter">
51+
Card <strong>{{ current_index | plus: 1 }}</strong> of <strong>{{ flashcards.size }}</strong>
52+
</span>
53+
</div>
54+
55+
<div class="quick-nav-right">
56+
{% if next_index < flashcards.size %}
57+
<a href="{{ flashcards[next_index].url | relative_url }}" class="quick-nav-btn quick-nav-next" title="Next: {{ flashcards[next_index].title }}">
58+
<span class="nav-label">Next</span>
59+
<span class="nav-arrow">→</span>
60+
</a>
61+
{% else %}
62+
<span class="quick-nav-btn quick-nav-disabled">
63+
<span class="nav-label">Next</span>
64+
<span class="nav-arrow">→</span>
65+
</span>
66+
{% endif %}
67+
</div>
68+
</div>
1769
</div>

‎_layouts/flashcard.html‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -334,4 +334,212 @@ <h1>{{ page.title }}</h1>
334334
font-size: 0.9em;
335335
}
336336
}
337+
338+
/* Enhanced Navigation Styles */
339+
.flashcard-top-navigation {
340+
position: sticky;
341+
top: 0;
342+
z-index: 100;
343+
background: white;
344+
border-bottom: 2px solid #e1e8ed;
345+
margin: -20px -20px 30px -20px;
346+
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
347+
}
348+
349+
/* Improved Breadcrumb */
350+
.flashcard-breadcrumb {
351+
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
352+
padding: 12px 20px;
353+
font-size: 0.9em;
354+
display: flex;
355+
align-items: center;
356+
flex-wrap: wrap;
357+
gap: 5px;
358+
border-bottom: 1px solid #e1e8ed;
359+
}
360+
361+
.breadcrumb-home {
362+
color: #667eea;
363+
text-decoration: none;
364+
font-weight: 600;
365+
padding: 5px 10px;
366+
border-radius: 6px;
367+
transition: all 0.2s ease;
368+
display: flex;
369+
align-items: center;
370+
gap: 4px;
371+
}
372+
373+
.breadcrumb-icon {
374+
font-size: 1.1em;
375+
}
376+
377+
.breadcrumb-text {
378+
display: inline-block;
379+
}
380+
381+
.breadcrumb-home:hover {
382+
background: rgba(102, 126, 234, 0.1);
383+
transform: translateY(-1px);
384+
}
385+
386+
.breadcrumb-category {
387+
color: #667eea;
388+
text-decoration: none;
389+
font-weight: 600;
390+
padding: 5px 10px;
391+
border-radius: 6px;
392+
background: rgba(102, 126, 234, 0.08);
393+
border: 1px solid rgba(102, 126, 234, 0.2);
394+
transition: all 0.2s ease;
395+
}
396+
397+
.breadcrumb-category:hover {
398+
background: rgba(102, 126, 234, 0.15);
399+
transform: translateY(-1px);
400+
}
401+
402+
.breadcrumb-separator {
403+
color: #999;
404+
font-size: 1.2em;
405+
margin: 0 3px;
406+
}
407+
408+
.breadcrumb-current {
409+
color: #2c3e50;
410+
font-weight: 700;
411+
padding: 5px 0;
412+
}
413+
414+
/* Quick Navigation Bar */
415+
.quick-nav-bar {
416+
display: flex;
417+
justify-content: space-between;
418+
align-items: center;
419+
padding: 10px 20px;
420+
background: white;
421+
min-height: 50px;
422+
}
423+
424+
.quick-nav-left,
425+
.quick-nav-right {
426+
flex: 1;
427+
display: flex;
428+
}
429+
430+
.quick-nav-left {
431+
justify-content: flex-start;
432+
}
433+
434+
.quick-nav-right {
435+
justify-content: flex-end;
436+
}
437+
438+
.quick-nav-center {
439+
flex: 0 0 auto;
440+
text-align: center;
441+
padding: 0 15px;
442+
}
443+
444+
.quick-nav-btn {
445+
display: inline-flex;
446+
align-items: center;
447+
gap: 8px;
448+
padding: 8px 16px;
449+
background: linear-gradient(135deg, #667eea, #764ba2);
450+
color: white;
451+
text-decoration: none;
452+
border-radius: 8px;
453+
font-weight: 600;
454+
font-size: 0.9em;
455+
transition: all 0.2s ease;
456+
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
457+
}
458+
459+
.quick-nav-btn:hover {
460+
transform: translateY(-2px);
461+
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
462+
text-decoration: none;
463+
color: white;
464+
}
465+
466+
.quick-nav-disabled {
467+
background: #e9ecef;
468+
color: #999;
469+
cursor: not-allowed;
470+
box-shadow: none;
471+
}
472+
473+
.quick-nav-disabled:hover {
474+
transform: none;
475+
box-shadow: none;
476+
}
477+
478+
.nav-arrow {
479+
font-size: 1.2em;
480+
font-weight: bold;
481+
}
482+
483+
.nav-label {
484+
display: inline-block;
485+
}
486+
487+
.card-counter {
488+
color: #666;
489+
font-size: 0.9em;
490+
white-space: nowrap;
491+
}
492+
493+
.card-counter strong {
494+
color: #667eea;
495+
font-weight: 700;
496+
}
497+
498+
/* Responsive adjustments */
499+
@media (max-width: 768px) {
500+
.flashcard-top-navigation {
501+
margin: -15px -15px 20px -15px;
502+
}
503+
504+
.breadcrumb-text {
505+
display: none;
506+
}
507+
508+
.breadcrumb-current {
509+
font-size: 0.85em;
510+
}
511+
512+
.quick-nav-bar {
513+
padding: 8px 15px;
514+
}
515+
516+
.nav-label {
517+
display: none;
518+
}
519+
520+
.quick-nav-btn {
521+
padding: 8px 12px;
522+
}
523+
524+
.card-counter {
525+
font-size: 0.85em;
526+
}
527+
}
528+
529+
@media (max-width: 480px) {
530+
.breadcrumb-category {
531+
max-width: 120px;
532+
overflow: hidden;
533+
text-overflow: ellipsis;
534+
white-space: nowrap;
535+
}
536+
537+
.quick-nav-center {
538+
padding: 0 8px;
539+
}
540+
541+
.card-counter strong {
542+
font-size: 1.1em;
543+
}
544+
}
337545
</style>

0 commit comments

Comments
 (0)