Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Header #53

Merged
merged 1 commit into from
Dec 10, 2024
Merged

Updated Header #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
303 changes: 240 additions & 63 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -680,68 +680,56 @@
max-width: none;
}
}

/* Add these styles for mobile menu animation */
#mobile-menu {
transition: all 0.3s ease-in-out;
max-height: 0;
overflow: hidden;
}

#mobile-menu.show {
max-height: 300px; /* Adjust this value based on your content */
}

/* Ensure the select is positioned over the icon but invisible */
#mobile-nav {
top: 0;
right: 0;
z-index: 2;
}

/* Mobile menu animation */
#mobile-menu {
transition: all 0.3s ease-in-out;
opacity: 0;
transform: translateY(-10px);
}

#mobile-menu.show {
opacity: 1;
transform: translateY(0);
}

/* Add subtle border between menu items */
#mobile-menu a:not(:last-child) {
border-bottom: 1px solid rgba(156, 163, 175, 0.1);
}
</style>
</head>
<body>
<header class="fixed top-0 left-0 right-0 bg-white dark:bg-gray-900 shadow-md z-50">
<div class="flex items-center justify-between px-4 py-2">
<header class="fixed top-0 w-full bg-opacity-90 backdrop-filter backdrop-blur-lg z-50 flex items-center justify-between px-4 py-2 border-b border-gray-200">
<div class="flex items-center">
<button class="menu-button md:hidden" id="menu-toggle">
<i class="fas fa-bars"></i>
</button>
<a href="{{ site.baseurl }}/" class="text-xl font-semibold ml-2">
{{ site.title }}
Transformers in Single-Cell Omics
</a>
</div>

<!-- Navigation Links -->
<div class="nav-links hidden md:flex items-center space-x-4" id="nav-links">
<a href="{{ site.baseurl }}/single-cell-transformers" class="nav-link">Single Cell Transformers</a>
<a href="{{ site.baseurl }}/transformer-llms" class="nav-link">Transformer LLMs</a>
<a href="{{ site.baseurl }}/transformer-evaluation" class="nav-link">Transformer Evaluation</a>
</div>

<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-4">
<a href="{{ site.baseurl }}/single-cell-transformers" class="nav-link">Single Cell Transformers</a>
<a href="{{ site.baseurl }}/transformer-llms" class="nav-link">Transformer LLMs</a>
<a href="{{ site.baseurl }}/transformer-evaluation" class="nav-link">Transformer Evaluation</a>
<div class="flex items-center space-x-6">
<!-- GitHub Dropdown -->
<div class="relative">
<button id="github-btn" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100">
<i class="fab fa-github text-xl"></i>
</button>
<div id="github-dropdown" class="dropdown right-0 mt-2 w-48">
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800">
<i class="fas fa-code-branch mr-2"></i>Repository
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800">
<i class="fas fa-edit mr-2"></i>Suggest edit
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800">
<i class="fas fa-exclamation-circle mr-2"></i>Open issue
</a>
</div>
</div>

<!-- Mobile menu button -->
<button onclick="toggleMenu()" class="md:hidden p-2" aria-label="Menu">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Download Button -->
<div class="relative" id="download-btn">
<button class="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">
<i class="fas fa-download"></i>
</button>
</div>

<!-- Mobile menu -->
<div id="mobileMenu" class="hidden md:hidden bg-white dark:bg-gray-900 shadow-lg">
<a href="{{ site.baseurl }}/single-cell-transformers" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800">Single Cell Transformers</a>
<a href="{{ site.baseurl }}/transformer-llms" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800">Transformer LLMs</a>
<a href="{{ site.baseurl }}/transformer-evaluation" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800">Transformer Evaluation</a>
<!-- Theme Toggle -->
<button id="theme-toggle" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100">
<i class="fas fa-sun text-xl"></i>
</button>
</div>
</header>

Expand All @@ -750,9 +738,10 @@
<nav id="sidebar" class="sidebar fixed left-0 top-16 h-full text-white p-6"> <!-- increased padding -->
<div class="space-y-6"> <!-- increased spacing -->
<h2 class="text-2xl font-bold mb-8">Navigation</h2> <!-- larger text and margin -->
<a href="{{ site.baseurl }}/single-cell-transformers" class="block py-3 hover:bg-opacity-20 hover:bg-white rounded">Single-cell transformers</a>
<a href="{{ site.baseurl }}/transformer-llms" class="block py-3 hover:bg-opacity-20 hover:bg-white rounded">Transformer LLMs</a>
<a href="{{ site.baseurl }}/transformer-evaluation" class="block py-3 hover:bg-opacity-20 hover:bg-white rounded">Transformer evaluation</a>
<a href="{{ site.baseurl }}/" class="block py-3 hover:bg-opacity-20 hover:bg-white rounded">Home</a>
<a href="{{ site.baseurl }}/single-cell-transformers/" class="block py-3 hover:bg-opacity-20 hover:bg-white rounded">Single-cell transformers</a>
<a href="{{ site.baseurl }}/transformer-llms/" class="block py-3 hover:bg-opacity-20 hover:bg-white rounded">Transformer LLMs</a>
<a href="{{ site.baseurl }}/transformer-evaluation/" class="block py-3 hover:bg-opacity-20 hover:bg-white rounded">Transformer evaluation</a>
</div>
</nav>

Expand All @@ -764,12 +753,196 @@ <h2 class="text-2xl font-bold mb-8">Navigation</h2> <!-- larger text and margin
</main>

<script>
function toggleMenu() {
const menu = document.getElementById('mobileMenu');
if (menu) {
menu.classList.toggle('hidden');
// Add this helper function at the top of your script section
function showNotification(message, isError = false) {
const notification = document.createElement('div');
notification.className = `fixed bottom-4 right-4 p-4 rounded-lg shadow-lg ${
isError ? 'bg-red-500' : 'bg-green-500'
} text-white`;
notification.textContent = message;
document.body.appendChild(notification);

setTimeout(() => {
notification.remove();
}, 3000);
}

// Theme Toggle
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = themeToggle.querySelector('i');
const html = document.documentElement;

function updateThemeIcon(isDark) {
themeIcon.classList.remove('fa-sun', 'fa-moon');
themeIcon.classList.add(isDark ? 'fa-moon' : 'fa-sun');
}

themeToggle.addEventListener('click', () => {
const isDark = html.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
updateThemeIcon(isDark);
});

// Initialize theme
const savedTheme = localStorage.getItem('theme') || 'light';
html.classList.add(savedTheme);
updateThemeIcon(savedTheme === 'dark');

// Dropdown functionality
function setupDropdown(btnId, dropdownId) {
const btn = document.getElementById(btnId);
const dropdown = document.getElementById(dropdownId);

if (!btn || !dropdown) return;

btn.addEventListener('click', (e) => {
e.stopPropagation();
const isVisible = dropdown.classList.contains('show');

// Close all dropdowns
document.querySelectorAll('.dropdown').forEach(d => d.classList.remove('show'));

// Toggle current dropdown
if (!isVisible) {
dropdown.classList.add('show');
}
});
}

// Close dropdowns when clicking outside
document.addEventListener('click', () => {
document.querySelectorAll('.dropdown').forEach(d => d.classList.remove('show'));
});

// Initialize dropdowns
setupDropdown('github-btn', 'github-dropdown');
setupDropdown('download-btn', 'download-dropdown');

// GitHub functionality
const REPO_URL = 'https://github.com/theislab/single-cell-transformer-papers';

document.querySelector('#github-dropdown').addEventListener('click', (e) => {
e.preventDefault();
const action = e.target.closest('a')?.textContent.trim();

if (action) {
switch(action) {
case 'Repository':
window.open(REPO_URL, '_blank');
break;
case 'Suggest edit':
// Get current page path
const path = window.location.pathname;
let editPath;

// Check if we're on a table page
if (path.includes('single-cell-transformers') ||
path.includes('transformer-llms') ||
path.includes('transformer-evaluation')) {
editPath = 'README.md';
} else {
// For any other page, use the default logic
editPath = path === '/' ? 'README.md' :
path.replace(/\/$/, '').split('/').pop() + '.md';
}

const editUrl = `${REPO_URL}/edit/main/${editPath}`;
window.open(editUrl, '_blank');
break;
case 'Open issue':
window.open(`${REPO_URL}/issues/new`, '_blank');
break;
}
}
}
});

// Update the print preparation function
function prepareForPrint() {
const style = document.createElement('style');
style.textContent = `
@page {
size: landscape !important;
margin: 0.5cm !important;
}
/* Force all columns to be visible */
table {
width: 100% !important;
display: table !important;
table-layout: auto !important;
font-size: 8pt !important;
}
th, td {
display: table-cell !important;
visibility: visible !important;
white-space: normal !important;
min-width: auto !important;
max-width: none !important;
overflow: visible !important;
padding: 4px !important;
}
/* Show all columns */
.hidden,
[hidden],
[style*="display: none"],
[style*="visibility: hidden"] {
display: table-cell !important;
visibility: visible !important;
}
/* Adjust content wrapping */
td > * {
white-space: normal !important;
word-wrap: break-word !important;
}
`;

document.head.appendChild(style);

// Force all columns to be visible
const tables = document.querySelectorAll('table');
tables.forEach(table => {
// Show all columns
const columns = table.querySelectorAll('th, td');
columns.forEach(col => {
col.style.cssText = `
display: table-cell !important;
visibility: visible !important;
white-space: normal !important;
min-width: auto !important;
max-width: none !important;
overflow: visible !important;
`;
});
});

window.print();

// Cleanup
setTimeout(() => {
document.head.removeChild(style);
}, 1000);
}

// Update the download button click handler
document.getElementById('download-btn').addEventListener('click', (e) => {
e.preventDefault();
prepareForPrint();
});

// Mobile menu toggle
document.getElementById('menu-toggle')?.addEventListener('click', () => {
document.getElementById('nav-links')?.classList.toggle('show');
});

// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('#menu-toggle') && !e.target.closest('#nav-links')) {
document.getElementById('nav-links')?.classList.remove('show');
}
});
</script>
<!-- Load React and ReactDOM first -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
Expand All @@ -782,10 +955,14 @@ <h2 class="text-2xl font-bold mb-8">Navigation</h2> <!-- larger text and margin
window.transformerEvaluation = {{ site.data.transformer-evaluation | jsonify }};
</script>

<!-- Load all bundles -->
<!-- Then load your bundles -->
<script src="{{ site.baseurl }}/assets/js/dist/single-cell-transformers.bundle.js"></script>
<script src="{{ site.baseurl }}/assets/js/dist/transformer-llms.bundle.js"></script>
<script src="{{ site.baseurl }}/assets/js/dist/transformer-evaluation.bundle.js"></script>

<!-- Add these divs where you want the tables to appear -->
<div id="single-cell-transformers"></div>
<div id="transformer-llms"></div>
<div id="transformer-evaluation"></div>
</body>
</html>

2 changes: 1 addition & 1 deletion _site/feed.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.4">Jekyll</generator><link href="http://localhost:4000/single-cell-transformer-papers/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/single-cell-transformer-papers/" rel="alternate" type="text/html" /><updated>2024-12-02T15:45:28+08:00</updated><id>http://localhost:4000/single-cell-transformer-papers/feed.xml</id><title type="html">Transformers in Single-Cell Omics</title><subtitle>A curated collection of papers on transformers in single-cell analysis</subtitle></feed>
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.4">Jekyll</generator><link href="http://localhost:4000/single-cell-transformer-papers/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/single-cell-transformer-papers/" rel="alternate" type="text/html" /><updated>2024-12-10T10:07:53+01:00</updated><id>http://localhost:4000/single-cell-transformer-papers/feed.xml</id><title type="html">Transformers in Single-Cell Omics</title><subtitle>A curated collection of papers on transformers in single-cell analysis</subtitle></feed>
Loading
Loading