starred/newznab-tmux
1
0
Fork 0
mirror of https://github.com/NNTmux/newznab-tmux.git synced 2026-08-29 01:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update layout handling

Browse Source
This commit is contained in:
DariusIII
2026-02-07 22:47:41 +01:00
parent edced87e8a
commit 71c316473a
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/alpine/components/movies-layout.js
+22 -12
View File
@@ -5,10 +5,16 @@ import Alpine from '@alpinejs/csp';
Alpine.data('moviesLayout', () => ({
layout: 2,
mediaQuery: null,
init() {
const grid = document.getElementById('moviesGrid');
if (grid) this.layout = parseInt(grid.dataset.userLayout) || 2;
// Set up media query listener for responsive behavior
this.mediaQuery = window.matchMedia('(min-width: 1024px)');
this.mediaQuery.addEventListener('change', () => this._applyLayout());
this._applyLayout();
},
@@ -32,34 +38,38 @@ Alpine.data('moviesLayout', () => ({
_applyLayout() {
const grid = document.getElementById('moviesGrid');
if (!grid) return;
// Select movie poster images and placeholder divs (both direct children and inside anchor tags)
const images = grid.querySelectorAll('.flex-shrink-0 img, .flex-shrink-0 div.bg-gray-200');
// On mobile (< 1024px), always show 1 column; on larger screens, use user preference
const isLargeScreen = this.mediaQuery && this.mediaQuery.matches;
const effectiveLayout = isLargeScreen ? this.layout : 1;
// Select movie poster images and placeholder divs
const images = grid.querySelectorAll('.flex-shrink-0 img, .flex-shrink-0 > a > div, .flex-shrink-0 > div');
const containers = grid.querySelectorAll('.release-card-container');
if (this.layout === 1) {
if (effectiveLayout === 1) {
// Single column layout
grid.classList.remove('lg:grid-cols-2');
grid.classList.add('grid-cols-1');
grid.style.gridTemplateColumns = 'repeat(1, minmax(0, 1fr))';
images.forEach(img => { img.classList.remove('w-32', 'h-48'); img.classList.add('w-48', 'h-72'); });
containers.forEach(c => {
c.classList.remove('space-y-2');
c.classList.remove('flex-col', 'space-y-2');
c.classList.add('flex', 'flex-row', 'items-start', 'justify-between', 'gap-3');
const info = c.querySelector('.release-info-wrapper');
if (info) info.classList.add('flex-1', 'min-w-0');
const acts = c.querySelector('.release-actions');
if (acts) { acts.classList.remove('flex-wrap'); acts.classList.add('flex-shrink-0', 'flex-row', 'items-center'); }
if (acts) { acts.classList.remove('flex-wrap', 'mt-2'); acts.classList.add('flex-shrink-0', 'flex-row', 'items-center'); }
});
} else {
// Two column layout (grid-cols-1 on mobile, lg:grid-cols-2 on large screens)
grid.classList.add('grid-cols-1', 'lg:grid-cols-2');
// Two column layout
grid.style.gridTemplateColumns = 'repeat(2, minmax(0, 1fr))';
images.forEach(img => { img.classList.remove('w-48', 'h-72'); img.classList.add('w-32', 'h-48'); });
containers.forEach(c => {
c.classList.add('space-y-2');
c.classList.remove('flex', 'flex-row', 'items-start', 'justify-between', 'gap-3');
c.classList.add('flex', 'flex-col', 'space-y-2');
c.classList.remove('flex-row', 'items-start', 'justify-between', 'gap-3');
const info = c.querySelector('.release-info-wrapper');
if (info) info.classList.remove('flex-1', 'min-w-0');
const acts = c.querySelector('.release-actions');
if (acts) { acts.classList.add('flex-wrap', 'items-center'); acts.classList.remove('flex-shrink-0', 'flex-row'); }
if (acts) { acts.classList.add('flex-wrap', 'items-center', 'mt-2'); acts.classList.remove('flex-shrink-0', 'flex-row'); }
});
}
}
resources/views/movies/index.blade.php
+1 -1
View File
@@ -105,7 +105,7 @@
</div>
</div>
<div id="moviesGrid" class="grid {{ ($movie_layout ?? 2) == 1 ? 'grid-cols-1' : 'grid-cols-1 lg:grid-cols-2' }} gap-4" data-user-layout="{{ $movie_layout ?? 2 }}">
<div id="moviesGrid" class="grid gap-4" style="grid-template-columns: repeat({{ ($movie_layout ?? 2) == 1 ? '1' : '2' }}, minmax(0, 1fr));" data-user-layout="{{ $movie_layout ?? 2 }}">
@foreach($results as $result)
@php
// Get the first GUID from the comma-separated list