Refactor GalleryPanel and GalleryBrowser for improved layout and scrolling behavior
Updated the GalleryPanel component to adjust its height calculation, ensuring it occupies the full screen without causing dual scrollbars. Modified the GalleryBrowser to implement a fixed-size grid layout, enhancing the visual consistency of image tiles across different screen sizes. These changes improve the overall user experience and usability of the image gallery interface.
This commit is contained in:
@@ -6,10 +6,14 @@ import { GalleryBrowser } from './ImageGallery'
|
||||
* Своего заголовка нет: страница целиком об одном, и её название уже написано в активной вкладке
|
||||
* админки. Страница занимает экран и сама не прокручивается — пагинации у списка нет, а две полосы
|
||||
* прокрутки (внешняя и внутри сетки) мешали бы друг другу.
|
||||
*
|
||||
* 14rem — то, что занято над панелью и под ней: шапка сайта, отступы main, заголовок админки
|
||||
* и строка вкладок. Промахнуться в меньшую сторону безопасно (снизу останется зазор), в большую —
|
||||
* вернётся вторая полоса прокрутки.
|
||||
*/
|
||||
export function GalleryPanel() {
|
||||
return (
|
||||
<div className="crt-panel flex h-[calc(100vh-11rem)] min-h-96 flex-col rounded-md p-4">
|
||||
<div className="crt-panel flex h-[calc(100vh-14rem)] min-h-96 flex-col overflow-hidden rounded-md p-4">
|
||||
<GalleryBrowser fill />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -162,7 +162,9 @@ export function GalleryBrowser({
|
||||
</p>
|
||||
)}
|
||||
{!isLoading && sorted.length > 0 && (
|
||||
<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
|
||||
// Плитки фиксированного размера, а не N колонок на всю ширину: на широком экране пять
|
||||
// колонок растягивали постеры на треть экрана каждый.
|
||||
<div className="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
|
||||
{sorted.map((img) => (
|
||||
<div key={img.id} className="group relative">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user