QR Code Maker update
This commit is contained in:
@@ -1013,6 +1013,105 @@ body {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Search Result Item with QR Button */
|
||||
.search-result-item {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.search-result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.search-result-item .make-qr-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* QR Code Modal Styles */
|
||||
.qr-modal {
|
||||
z-index: 11000; /* Ensure QR modal is above everything else */
|
||||
}
|
||||
|
||||
.qr-modal-content {
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
z-index: 11001; /* Even higher for the content */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.qr-modal-body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.qr-code-image {
|
||||
max-width: 256px;
|
||||
height: auto;
|
||||
margin: 0 auto 20px;
|
||||
display: block;
|
||||
border: 4px solid var(--light-color);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.qr-code-info {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.qr-code-info p {
|
||||
margin-bottom: 10px;
|
||||
color: var(--secondary-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.qr-code-url {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.qr-code-url:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.qr-loading {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* Adjust search result layout to accommodate button */
|
||||
.docs-search-results-list .search-result {
|
||||
display: block;
|
||||
padding-right: 100px; /* Make room for QR button */
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for QR button */
|
||||
@media (max-width: 768px) {
|
||||
.search-result-item .make-qr-btn {
|
||||
position: static;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.docs-search-results-list .search-result {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.qr-modal-content {
|
||||
width: 95%;
|
||||
max-width: 350px;
|
||||
z-index: 11001; /* Maintain high z-index on mobile */
|
||||
}
|
||||
|
||||
.qr-modal {
|
||||
z-index: 11000; /* Maintain high z-index on mobile */
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.docs-search-container {
|
||||
@@ -1020,7 +1119,7 @@ body {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
padding: 0 0px;
|
||||
/* Remove z-index */
|
||||
z-index:10002/* Remove z-index */
|
||||
}
|
||||
|
||||
.docs-search-wrapper {
|
||||
|
||||
@@ -215,18 +215,128 @@ export class MkDocsSearch {
|
||||
resultsCount.textContent = 'No results';
|
||||
} else {
|
||||
resultsCount.textContent = `${results.length} result${results.length > 1 ? 's' : ''}`;
|
||||
resultsContainer.innerHTML = results.map(result => `
|
||||
<a href="${result.url}" class="search-result" target="_blank" rel="noopener">
|
||||
<div class="search-result-title">${this.escapeHtml(result.title)}</div>
|
||||
<div class="search-result-snippet">${result.snippet}</div>
|
||||
<div class="search-result-path">${result.location}</div>
|
||||
</a>
|
||||
resultsContainer.innerHTML = results.map((result, index) => `
|
||||
<div class="search-result-item">
|
||||
<a href="${result.url}" class="search-result" target="_blank" rel="noopener">
|
||||
<div class="search-result-title">${this.escapeHtml(result.title)}</div>
|
||||
<div class="search-result-snippet">${result.snippet}</div>
|
||||
<div class="search-result-path">${result.location}</div>
|
||||
</a>
|
||||
<button class="btn btn-sm btn-secondary make-qr-btn" data-url="${result.url}" data-index="${index}">
|
||||
<span class="btn-icon">📱</span>
|
||||
<span class="btn-text">Make QR</span>
|
||||
</button>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Add event listeners to QR buttons
|
||||
this.attachQRButtonListeners();
|
||||
}
|
||||
|
||||
resultsElement.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Add new method to handle QR button clicks
|
||||
attachQRButtonListeners() {
|
||||
const qrButtons = document.querySelectorAll('.make-qr-btn');
|
||||
qrButtons.forEach(button => {
|
||||
button.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const url = button.getAttribute('data-url');
|
||||
this.showQRCodeModal(url);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Add method to show QR code modal
|
||||
showQRCodeModal(url) {
|
||||
// Create or get existing QR modal
|
||||
let modal = document.getElementById('qr-code-modal');
|
||||
if (!modal) {
|
||||
modal = this.createQRModal();
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
// Ensure modal has correct z-index and class
|
||||
modal.classList.add('qr-modal');
|
||||
modal.style.zIndex = '11000'; // Force above all overlays
|
||||
|
||||
// Update modal content
|
||||
const qrImage = modal.querySelector('.qr-code-image');
|
||||
const qrUrl = modal.querySelector('.qr-code-url');
|
||||
const qrLoading = modal.querySelector('.qr-loading');
|
||||
|
||||
// Show modal and loading state
|
||||
modal.classList.remove('hidden');
|
||||
qrLoading.style.display = 'block';
|
||||
qrImage.style.display = 'none';
|
||||
|
||||
// Update URL display
|
||||
qrUrl.textContent = url;
|
||||
qrUrl.href = url;
|
||||
|
||||
// Generate QR code
|
||||
const qrApiUrl = `/api/qr?text=${encodeURIComponent(url)}&size=256`;
|
||||
qrImage.src = qrApiUrl;
|
||||
|
||||
qrImage.onload = () => {
|
||||
qrLoading.style.display = 'none';
|
||||
qrImage.style.display = 'block';
|
||||
};
|
||||
|
||||
qrImage.onerror = () => {
|
||||
qrLoading.innerHTML = '<p style="color: var(--danger-color);">Failed to generate QR code</p>';
|
||||
};
|
||||
}
|
||||
|
||||
// Add method to create QR modal
|
||||
createQRModal() {
|
||||
const modal = document.createElement('div');
|
||||
modal.id = 'qr-code-modal';
|
||||
modal.className = 'modal qr-modal'; // Ensure both classes for styling
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content qr-modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>QR Code</h2>
|
||||
<button class="modal-close" id="close-qr-modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body qr-modal-body">
|
||||
<div class="qr-loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Generating QR code...</p>
|
||||
</div>
|
||||
<img class="qr-code-image" alt="QR Code" style="display: none;">
|
||||
<div class="qr-code-info">
|
||||
<p>Scan this QR code to open:</p>
|
||||
<a class="qr-code-url" target="_blank" rel="noopener"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add close functionality
|
||||
const closeBtn = modal.querySelector('#close-qr-modal');
|
||||
closeBtn.addEventListener('click', () => {
|
||||
modal.classList.add('hidden');
|
||||
});
|
||||
|
||||
// Close on background click
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
|
||||
modal.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
return modal;
|
||||
}
|
||||
|
||||
closeResults(inputElement, resultsElement) {
|
||||
resultsElement.classList.add('hidden');
|
||||
inputElement.value = '';
|
||||
|
||||
Reference in New Issue
Block a user