Add toggle for grid, list and compact list views
This commit is contained in:
Kylian Schmidt
+7
-1
@@ -18,5 +18,11 @@
|
||||
@import url('./metadata.css');
|
||||
@import url('./export.css');
|
||||
|
||||
/* Responsive design */
|
||||
/* View controls - must come after grid.css to override */
|
||||
@import url('./view-controls.css');
|
||||
|
||||
/* View override - force grid layout to work */
|
||||
@import url('./view-override.css');
|
||||
|
||||
/* Responsive design - last to override everything */
|
||||
@import url('./responsive.css');
|
||||
|
||||
@@ -28,4 +28,21 @@
|
||||
.search-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* View controls responsive */
|
||||
.view-controls {
|
||||
margin-right: 0.5rem !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
min-width: 40px !important;
|
||||
min-height: 40px !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.view-btn svg {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
/* ========================================
|
||||
VIEW CONTROLS AND LAYOUT MODES
|
||||
======================================== */
|
||||
|
||||
/* View Controls */
|
||||
.view-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 1rem 0;
|
||||
padding: 12px 16px;
|
||||
background: var(--tree-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: 2rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background: var(--button-bg);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: var(--button-bg);
|
||||
color: white;
|
||||
border-color: var(--button-bg);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Plot Container Base Styles */
|
||||
.plot-container {
|
||||
margin: 1rem 0;
|
||||
transition: all 0.3s ease;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.plot-container .plot-item {
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.plot-container .plot-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.plot-container .plot-link {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.plot-container .plot-thumbnail {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.plot-container .plot-info {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.plot-container .plot-name {
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Grid View - Override any conflicting styles */
|
||||
.plot-container.grid-view {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
|
||||
gap: 1.2rem !important;
|
||||
padding: 1rem 0 !important;
|
||||
}
|
||||
|
||||
.plot-container.grid-view .plot-item,
|
||||
.plot-container.grid-view .grid-item {
|
||||
text-align: center !important;
|
||||
background: var(--card-bg) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0.8rem !important;
|
||||
transition: all 0.2s ease !important;
|
||||
border: 1px solid transparent !important;
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.plot-container.grid-view .plot-item:hover,
|
||||
.plot-container.grid-view .grid-item:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
.plot-container.grid-view .plot-link {
|
||||
display: block !important;
|
||||
color: var(--link-color) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.plot-container.grid-view .plot-thumbnail {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
object-fit: contain !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.plot-container.grid-view .plot-info {
|
||||
padding: 0.8rem 0 0 0 !important;
|
||||
}
|
||||
|
||||
.plot-container.grid-view .plot-name {
|
||||
max-height: 3.9rem !important;
|
||||
overflow: hidden !important;
|
||||
margin-top: 0.8rem !important;
|
||||
display: block !important;
|
||||
word-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
hyphens: auto !important;
|
||||
font-size: 0.9rem !important;
|
||||
line-height: 1.3 !important;
|
||||
font-weight: 500 !important;
|
||||
color: var(--text-color) !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Large List View */
|
||||
.plot-container.list-large-view {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0.8rem !important;
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-item {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 1rem !important;
|
||||
gap: 1rem !important;
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-link {
|
||||
flex-shrink: 0 !important;
|
||||
width: 120px !important;
|
||||
height: 90px !important;
|
||||
overflow: hidden !important;
|
||||
border-radius: 6px !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-thumbnail {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-info {
|
||||
flex: 1 !important;
|
||||
padding: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-name {
|
||||
font-size: 1rem !important;
|
||||
line-height: 1.4 !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Compact List View */
|
||||
.plot-container.list-compact-view {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0.4rem !important;
|
||||
}
|
||||
|
||||
.plot-container.list-compact-view .plot-item {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 0.6rem 1rem !important;
|
||||
gap: 0.8rem !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.plot-container.list-compact-view .plot-link {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.plot-container.list-compact-view .plot-thumbnail {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.plot-container.list-compact-view .plot-info {
|
||||
padding: 0 !important;
|
||||
flex: 1 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.plot-container.list-compact-view .plot-name {
|
||||
font-size: 0.95rem !important;
|
||||
line-height: 1.2 !important;
|
||||
margin: 0 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
|
||||
/* Highlight effect for all views */
|
||||
.plot-item.highlighted {
|
||||
border-color: var(--button-bg);
|
||||
box-shadow: 0 0 15px rgba(0, 120, 212, 0.3);
|
||||
transform: translateY(-2px);
|
||||
animation: highlightPulse 2s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes highlightPulse {
|
||||
0%, 100% { transform: translateY(-2px) scale(1); }
|
||||
50% { transform: translateY(-2px) scale(1.02); }
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.view-controls {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.plot-container.grid-view {
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-link {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-item {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.plot-container.list-compact-view .plot-item {
|
||||
padding: 0.5rem 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.view-controls {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
padding: 6px 8px;
|
||||
font-size: 1rem;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.plot-container.grid-view {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.plot-container.list-large-view .plot-link {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/* ========================================
|
||||
VIEW OVERRIDE - Ensure grid view works
|
||||
======================================== */
|
||||
|
||||
/* Force grid layout when grid-view class is present */
|
||||
body .plot-container.grid-view {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
|
||||
gap: 1rem !important;
|
||||
padding: 1rem 0 !important;
|
||||
}
|
||||
|
||||
/* Force grid items to be proper tiles */
|
||||
body .plot-container.grid-view .plot-item,
|
||||
body .plot-container.grid-view .grid-item {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
max-width: none !important;
|
||||
text-align: center !important;
|
||||
background: var(--card-bg) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0.8rem !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
/* Ensure thumbnails are properly sized */
|
||||
body .plot-container.grid-view .plot-thumbnail {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
display: block !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
border-radius: 6px !important;
|
||||
object-fit: cover !important;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
|
||||
/* Force plot info styling */
|
||||
body .plot-container.grid-view .plot-info {
|
||||
padding: 0.5rem 0 0 0 !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
body .plot-container.grid-view .plot-name {
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1.2 !important;
|
||||
max-height: 2.4rem !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
line-clamp: 2 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
}
|
||||
@@ -9,7 +9,7 @@ import { RecentPlotsManager } from './recent-plots-manager.js';
|
||||
import { ComparisonManager } from './comparison-manager.js';
|
||||
import { StatsManager } from './stats-manager.js';
|
||||
import { KeyboardManager } from './keyboard-manager.js';
|
||||
import { ExportManager } from './export-manager.js';
|
||||
import { ViewManager } from './view-manager.js';
|
||||
import { Utils } from './utils.js';
|
||||
|
||||
/**
|
||||
@@ -29,7 +29,7 @@ export class GalleryApp {
|
||||
this.recentPlotsManager = new RecentPlotsManager(this.MAX_RECENT_PLOTS);
|
||||
this.comparisonManager = new ComparisonManager();
|
||||
this.statsManager = new StatsManager();
|
||||
this.exportManager = new ExportManager();
|
||||
this.viewManager = new ViewManager();
|
||||
this.keyboardManager = new KeyboardManager(this);
|
||||
this.utils = Utils;
|
||||
|
||||
@@ -38,7 +38,7 @@ export class GalleryApp {
|
||||
window.searchManager = this.searchManager;
|
||||
window.recentPlotsManager = this.recentPlotsManager;
|
||||
window.comparisonManager = this.comparisonManager;
|
||||
window.exportManager = this.exportManager;
|
||||
window.viewManager = this.viewManager;
|
||||
window.utils = this.utils;
|
||||
|
||||
this.init();
|
||||
|
||||
@@ -39,6 +39,13 @@ export class KeyboardManager {
|
||||
}
|
||||
}
|
||||
|
||||
if (e.ctrlKey && e.key === 'v') {
|
||||
e.preventDefault();
|
||||
if (this.app.viewManager) {
|
||||
this.app.viewManager.cycleView();
|
||||
}
|
||||
}
|
||||
|
||||
if (e.key === 'F5') {
|
||||
e.preventDefault();
|
||||
if (this.app.utils && this.app.utils.refreshGallery) {
|
||||
|
||||
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* View Controls Manager - handles switching between grid, list-large, and list-compact views
|
||||
*/
|
||||
export class ViewManager {
|
||||
constructor() {
|
||||
this.currentView = 'grid';
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize view controls
|
||||
*/
|
||||
init() {
|
||||
this.setupViewButtons();
|
||||
this.loadSavedView();
|
||||
this.updateControlsVisibility();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update visibility of view controls based on plot content
|
||||
*/
|
||||
updateControlsVisibility() {
|
||||
const plotContainer = document.getElementById('plotContainer');
|
||||
const viewControls = document.querySelector('.view-controls');
|
||||
|
||||
if (!plotContainer || !viewControls) return;
|
||||
|
||||
const hasPlots = plotContainer.children.length > 0;
|
||||
viewControls.style.display = hasPlots ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup view toggle buttons
|
||||
*/
|
||||
setupViewButtons() {
|
||||
const viewButtons = document.querySelectorAll('.view-btn');
|
||||
console.log('ViewManager: Found', viewButtons.length, 'view buttons');
|
||||
|
||||
viewButtons.forEach(button => {
|
||||
button.addEventListener('click', (e) => {
|
||||
const newView = button.getAttribute('data-view');
|
||||
console.log('ViewManager: Switching to view:', newView);
|
||||
this.switchView(newView);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch to a different view mode
|
||||
*/
|
||||
switchView(viewMode) {
|
||||
console.log('ViewManager: switchView called with:', viewMode, 'current:', this.currentView);
|
||||
|
||||
if (viewMode === this.currentView) return;
|
||||
|
||||
const plotContainer = document.getElementById('plotContainer');
|
||||
const viewButtons = document.querySelectorAll('.view-btn');
|
||||
|
||||
if (!plotContainer) {
|
||||
console.error('ViewManager: plotContainer not found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('ViewManager: Plot container found, classes before:', plotContainer.className);
|
||||
|
||||
// Remove current view class
|
||||
plotContainer.classList.remove(
|
||||
'grid-view',
|
||||
'list-large-view',
|
||||
'list-compact-view'
|
||||
);
|
||||
|
||||
// Add new view class
|
||||
switch (viewMode) {
|
||||
case 'grid':
|
||||
plotContainer.classList.add('grid-view');
|
||||
break;
|
||||
case 'list-large':
|
||||
plotContainer.classList.add('list-large-view');
|
||||
break;
|
||||
case 'list-compact':
|
||||
plotContainer.classList.add('list-compact-view');
|
||||
break;
|
||||
default:
|
||||
plotContainer.classList.add('grid-view');
|
||||
viewMode = 'grid';
|
||||
}
|
||||
|
||||
console.log('ViewManager: Plot container classes after:', plotContainer.className);
|
||||
|
||||
// Update button states
|
||||
viewButtons.forEach(btn => {
|
||||
if (btn.getAttribute('data-view') === viewMode) {
|
||||
btn.classList.add('active');
|
||||
} else {
|
||||
btn.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Save the preference
|
||||
this.currentView = viewMode;
|
||||
this.saveViewPreference(viewMode);
|
||||
|
||||
// Trigger any necessary layout updates
|
||||
this.onViewChanged(viewMode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Save view preference to localStorage
|
||||
*/
|
||||
saveViewPreference(viewMode) {
|
||||
try {
|
||||
localStorage.setItem('gallery-view-mode', viewMode);
|
||||
} catch (e) {
|
||||
// Ignore localStorage errors
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load saved view preference
|
||||
*/
|
||||
loadSavedView() {
|
||||
try {
|
||||
const savedView = localStorage.getItem('gallery-view-mode');
|
||||
if (savedView && ['grid', 'list-large', 'list-compact'].includes(savedView)) {
|
||||
this.switchView(savedView);
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore localStorage errors, use default
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle view change events - can be extended for additional functionality
|
||||
*/
|
||||
onViewChanged(viewMode) {
|
||||
// Dispatch custom event for other components that might need to know
|
||||
const event = new CustomEvent('viewChanged', {
|
||||
detail: { viewMode }
|
||||
});
|
||||
document.dispatchEvent(event);
|
||||
|
||||
// Update any other UI elements that depend on view mode
|
||||
this.updateUIForView(viewMode);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update UI elements based on current view
|
||||
*/
|
||||
updateUIForView(viewMode) {
|
||||
// You can add view-specific UI updates here
|
||||
// For example, adjusting search result highlighting, etc.
|
||||
|
||||
// Update any tooltips or help text
|
||||
const viewButtons = document.querySelectorAll('.view-btn');
|
||||
viewButtons.forEach(btn => {
|
||||
const btnView = btn.getAttribute('data-view');
|
||||
if (btnView === viewMode) {
|
||||
btn.style.transform = 'scale(1.05)';
|
||||
} else {
|
||||
btn.style.transform = 'scale(1)';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current view mode
|
||||
*/
|
||||
getCurrentView() {
|
||||
return this.currentView;
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh controls visibility (call this when gallery content changes)
|
||||
*/
|
||||
refresh() {
|
||||
this.updateControlsVisibility();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current view is grid mode
|
||||
*/
|
||||
isGridView() {
|
||||
return this.currentView === 'grid';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current view is list mode (either variant)
|
||||
*/
|
||||
isListView() {
|
||||
return this.currentView === 'list-large' || this.currentView === 'list-compact';
|
||||
}
|
||||
|
||||
/**
|
||||
* Cycle through view modes (useful for keyboard shortcuts)
|
||||
*/
|
||||
cycleView() {
|
||||
const views = ['grid', 'list-large', 'list-compact'];
|
||||
const currentIndex = views.indexOf(this.currentView);
|
||||
const nextIndex = (currentIndex + 1) % views.length;
|
||||
this.switchView(views[nextIndex]);
|
||||
}
|
||||
}
|
||||
+47
-9
@@ -34,17 +34,51 @@
|
||||
<!-- Folder Tree -->
|
||||
<div class="folder-tree" id="folderTree"></div>
|
||||
|
||||
<!-- Plot Grid -->
|
||||
<div class="grid">
|
||||
<!-- View Toggle Controls - Only show if there are plot items -->
|
||||
{% if items %}
|
||||
<div class="view-controls">
|
||||
<button class="view-btn active" data-view="grid" title="Grid View">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<rect x="1" y="1" width="6" height="6" fill="currentColor"/>
|
||||
<rect x="9" y="1" width="6" height="6" fill="currentColor"/>
|
||||
<rect x="1" y="9" width="6" height="6" fill="currentColor"/>
|
||||
<rect x="9" y="9" width="6" height="6" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="view-btn" data-view="list-large" title="Large List View">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<rect x="1" y="2" width="4" height="3" fill="currentColor"/>
|
||||
<rect x="7" y="2" width="8" height="1" fill="currentColor"/>
|
||||
<rect x="7" y="4" width="6" height="1" fill="currentColor"/>
|
||||
<rect x="1" y="7" width="4" height="3" fill="currentColor"/>
|
||||
<rect x="7" y="7" width="8" height="1" fill="currentColor"/>
|
||||
<rect x="7" y="9" width="6" height="1" fill="currentColor"/>
|
||||
<rect x="1" y="12" width="4" height="3" fill="currentColor"/>
|
||||
<rect x="7" y="12" width="8" height="1" fill="currentColor"/>
|
||||
<rect x="7" y="14" width="6" height="1" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="view-btn" data-view="list-compact" title="Compact List View">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<rect x="1" y="3" width="14" height="1" fill="currentColor"/>
|
||||
<rect x="1" y="6" width="14" height="1" fill="currentColor"/>
|
||||
<rect x="1" y="9" width="14" height="1" fill="currentColor"/>
|
||||
<rect x="1" y="12" width="14" height="1" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Plot Container -->
|
||||
<div class="plot-container grid-view" id="plotContainer">
|
||||
{% for item in items %}
|
||||
<div class="grid-item">
|
||||
<a href="{{ item.pdf_href }}">
|
||||
<img src="{{ item.png_href }}" alt="{{ item.name }}">
|
||||
<div class="plot-item grid-item">
|
||||
<a href="{{ item.pdf_href }}" class="plot-link">
|
||||
<img src="{{ item.png_href }}" alt="{{ item.name }}" class="plot-thumbnail">
|
||||
</a>
|
||||
<button class="metadata-btn" onclick="event.stopPropagation(); showMetadataPopup(this, '{{ item.name|e }}', {{ (item.metadata or {})|tojson }})" title="View metadata">
|
||||
⋯
|
||||
</button>
|
||||
<div class="plot-name" title="{{ item.name }}">{{ item.name }}</div>
|
||||
<div class="plot-info">
|
||||
<div class="plot-name" title="{{ item.name }}">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -120,6 +154,10 @@
|
||||
<span>Toggle theme</span>
|
||||
<span class="shortcut-key">Ctrl+T</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span>Toggle view</span>
|
||||
<span class="shortcut-key">Ctrl+V</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span>Help</span>
|
||||
<span class="shortcut-key">?</span>
|
||||
|
||||
Reference in New Issue
Block a user