feat: refine grid view layout with improved action button sizing, footer alignment, and checkbox positioning.
This commit is contained in:
parent
84ac064462
commit
836bf1fcd3
@ -1170,6 +1170,10 @@ input:checked+.theme-slider:before {
|
|||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.view-grid .link-select-checkbox {
|
||||||
|
right: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .link-select-checkbox {
|
[data-theme="dark"] .link-select-checkbox {
|
||||||
background: rgba(30, 41, 59, 0.9);
|
background: rgba(30, 41, 59, 0.9);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
@ -1367,6 +1371,12 @@ input:checked+.theme-slider:before {
|
|||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.view-grid .link-footer {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Tags */
|
/* Tags */
|
||||||
.link-tag-list {
|
.link-tag-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1390,6 +1400,11 @@ input:checked+.theme-slider:before {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.view-grid .link-tag-list {
|
||||||
|
align-self: stretch;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
/* Actions */
|
/* Actions */
|
||||||
.link-actions {
|
.link-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1401,8 +1416,8 @@ input:checked+.theme-slider:before {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 30px;
|
width: 36px;
|
||||||
height: 30px;
|
height: 36px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
@ -1412,6 +1427,11 @@ input:checked+.theme-slider:before {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link-actions a i,
|
||||||
|
.link-actions button i {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
.link-actions a:hover,
|
.link-actions a:hover,
|
||||||
.link-actions button:hover {
|
.link-actions button:hover {
|
||||||
background: var(--primary-light);
|
background: var(--primary-light);
|
||||||
@ -2745,13 +2765,13 @@ select:focus {
|
|||||||
|
|
||||||
.view-compact .link-actions a,
|
.view-compact .link-actions a,
|
||||||
.view-compact .link-actions button {
|
.view-compact .link-actions button {
|
||||||
width: 26px;
|
width: 32px;
|
||||||
height: 26px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-compact .link-actions a i,
|
.view-compact .link-actions a i,
|
||||||
.view-compact .link-actions button i {
|
.view-compact .link-actions button i {
|
||||||
font-size: 0.9rem;
|
font-size: 1.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Compact view - Hover actions */
|
/* Compact view - Hover actions */
|
||||||
|
|||||||
@ -45,18 +45,11 @@
|
|||||||
<div class="links-list view-grid" id="links-list">
|
<div class="links-list view-grid" id="links-list">
|
||||||
{loop="$links"}
|
{loop="$links"}
|
||||||
<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
|
<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
|
||||||
{if="$is_logged_in"}<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>{/if}
|
{if="$is_logged_in"}
|
||||||
|
<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>
|
||||||
|
{/if}
|
||||||
{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;"></div>{/if}
|
{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;"></div>{/if}
|
||||||
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
|
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
|
||||||
|
|
||||||
{if="$is_logged_in"}
|
|
||||||
<div class="link-hover-actions">
|
|
||||||
<a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
|
|
||||||
<a href="{$value.real_url}" target="_blank" rel="noopener" class="link-hover-btn" title="Open"><i class="mdi mdi-open-in-new"></i></a>
|
|
||||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="link-content">
|
<div class="link-content">
|
||||||
<div class="link-header">
|
<div class="link-header">
|
||||||
<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>
|
<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>
|
||||||
|
|||||||
@ -1,85 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
|
|
||||||
<head>
|
|
||||||
{$pageName="linklist"}
|
|
||||||
{include="includes"}
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{include="page.header"}
|
|
||||||
<div id="linklist">
|
|
||||||
{loop="$plugin_start_zone"}
|
|
||||||
{$value}
|
|
||||||
{/loop}
|
|
||||||
<div class="content-toolbar">
|
|
||||||
<div class="toolbar-left">{include="linklist.paging"}</div>
|
|
||||||
<div class="toolbar-right">
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button class="view-toggle-btn active" id="view-grid-btn" title="Grid View"><i class="mdi mdi-view-grid"></i></button>
|
|
||||||
<button class="view-toggle-btn" id="view-list-btn" title="List View"><i class="mdi mdi-view-list"></i></button>
|
|
||||||
<button class="view-toggle-btn" id="view-compact-btn" title="Compact View"><i class="mdi mdi-view-headline"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{if="!empty($search_tags)"}
|
|
||||||
<div class="search-results-header">
|
|
||||||
<span class="search-count">{$result_count} results tagged</span>
|
|
||||||
{$exploded_tags=tags_str2array($search_tags, $tags_separator)}
|
|
||||||
{loop="$exploded_tags"}
|
|
||||||
<span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="urlencode($value)"}" class="search-tag-close" title="Remove tag"><i class="mdi mdi-close"></i></a></span>
|
|
||||||
{/loop}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{if="count($links)==0"}
|
|
||||||
<div class="empty-state">
|
|
||||||
<div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
|
|
||||||
<h2 class="empty-state-title">No bookmarks found</h2>
|
|
||||||
<p class="empty-state-text">{if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>{else}Start adding bookmarks to see them here.{/if}</p>
|
|
||||||
</div>
|
|
||||||
{else}
|
|
||||||
<div class="links-list view-grid" id="links-list">
|
|
||||||
{loop="$links"}
|
|
||||||
<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
|
|
||||||
{if="$is_logged_in"}<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>{/if}
|
|
||||||
{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%; height:100%; object-fit:cover;"></div>{/if}
|
|
||||||
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
|
|
||||||
{if="$is_logged_in"}
|
|
||||||
<div class="link-hover-actions">
|
|
||||||
<a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
|
|
||||||
<a href="{$value.real_url}" target="_blank" rel="noopener" class="link-hover-btn" title="Open"><i class="mdi mdi-open-in-new"></i></a>
|
|
||||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="link-content">
|
|
||||||
<div class="link-header">
|
|
||||||
<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}</a>
|
|
||||||
<span class="link-url">{$value.url}</span>
|
|
||||||
<div class="link-meta">
|
|
||||||
<span class="link-date">{function="strftime('%c', $value.timestamp)"}</span>
|
|
||||||
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
|
|
||||||
<div class="link-footer">
|
|
||||||
<div class="link-tag-list">{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}</div>
|
|
||||||
<div class="link-actions">
|
|
||||||
{if="$is_logged_in"}
|
|
||||||
<a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
|
|
||||||
<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
|
|
||||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
|
|
||||||
{/if}
|
|
||||||
<a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/loop}
|
|
||||||
</div>
|
|
||||||
{include="linklist.paging"}
|
|
||||||
{/if}
|
|
||||||
{loop="$plugin_end_zone"}
|
|
||||||
{$value}
|
|
||||||
{/loop}
|
|
||||||
</div>
|
|
||||||
{include="page.footer"}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
{$pageName='linklist'}
|
|
||||||
{include="includes"}
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
{include="page.header"}
|
|
||||||
|
|
||||||
<div id="linklist">
|
|
||||||
{* ----- barre outils ----- *}
|
|
||||||
<div class="content-toolbar">
|
|
||||||
<div class="toolbar-left">{include="linklist.paging"}</div>
|
|
||||||
<div class="toolbar-right">
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button class="view-toggle-btn active" id="view-grid-btn" title="Grid"><i class="mdi mdi-view-grid"></i></button>
|
|
||||||
<button class="view-toggle-btn" id="view-list-btn" title="List"><i class="mdi mdi-view-list"></i></button>
|
|
||||||
<button class="view-toggle-btn" id="view-compact-btn" title="Compact"><i class="mdi mdi-view-headline"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{* ----- résultats de recherche par tags ----- *}
|
|
||||||
{if="!empty($search_tags)"}
|
|
||||||
<div class="search-results-header">
|
|
||||||
<span class="search-count">{$result_count} results tagged</span>
|
|
||||||
{$exploded_tags=tags_str2array($search_tags,$tags_separator)}
|
|
||||||
{loop="$exploded_tags"}
|
|
||||||
<span class="search-tag-chip">{$value}
|
|
||||||
<a href="{$base_path}/remove-tag/{function=" urlencode($value")}" class="search-tag-close" title="Remove tag"><i class="mdi mdi-close"></i></a>
|
|
||||||
</span>
|
|
||||||
{/loop}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{* ----- aucun lien ----- *}
|
|
||||||
{if="count($links)==0"}
|
|
||||||
<div class="empty-state">
|
|
||||||
<div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
|
|
||||||
<h2 class="empty-state-title">No bookmarks found</h2>
|
|
||||||
<p class="empty-state-text">
|
|
||||||
{if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>
|
|
||||||
{else}Start adding bookmarks to see them here.{/if}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{* ----- au moins un lien ----- *}
|
|
||||||
{else}
|
|
||||||
<div class="links-list view-grid" id="links-list">
|
|
||||||
{loop="$links"}
|
|
||||||
<div id="{$value.id}" class="link-outer{if=" isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class" } {$value.class}{/if}{if="$value.private" } private{else} public{/if}" data-id="{$value.id}">
|
|
||||||
{if="$is_logged_in"}<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>{/if}
|
|
||||||
{if="$value.thumbnail!==false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;"></div>{/if}
|
|
||||||
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
|
|
||||||
|
|
||||||
{if="$is_logged_in"}
|
|
||||||
<div class="link-hover-actions">
|
|
||||||
<a href="{$base_path}/admin/shaare/{$value.id}" class="link-hover-btn" title="Edit"><i class="mdi mdi-pencil"></i></a>
|
|
||||||
<a href="{$value.real_url}" target="_blank" rel="noopener" class="link-hover-btn" title="Open"><i class="mdi mdi-open-in-new"></i></a>
|
|
||||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}" class="link-hover-btn" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="link-content">
|
|
||||||
<div class="link-header">
|
|
||||||
<a href="{$value.real_url}" class="link-title" {if="strpos($value.url,$value.shorturl)!==false" } title="Note" {/if}>
|
|
||||||
{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}
|
|
||||||
</a>
|
|
||||||
<span class="link-url">{$value.url}</span>
|
|
||||||
<div class="link-meta">
|
|
||||||
<span class="link-date">{function="strftime('%c',$value.timestamp)"}</span>
|
|
||||||
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
|
|
||||||
<div class="link-footer">
|
|
||||||
<div class="link-tag-list">
|
|
||||||
{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
|
|
||||||
</div>
|
|
||||||
<div class="link-actions">
|
|
||||||
{if="$is_logged_in"}
|
|
||||||
<a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
|
|
||||||
<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
|
|
||||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
|
|
||||||
{/if}
|
|
||||||
<!-- bouton plein écran (dans les 3 vues) -->
|
|
||||||
<a href="#" class="view-desc-btn" data-id="{$value.id}" title="View Description"><i class="mdi mdi-fullscreen"></i></a>
|
|
||||||
<a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/loop}
|
|
||||||
</div>
|
|
||||||
{include="linklist.paging"}
|
|
||||||
{/if} {* ferme le ELSE du “count($links)==0” *}
|
|
||||||
|
|
||||||
{loop="$plugin_end_zone"}{$value}{/loop}
|
|
||||||
</div> {* ferme #linklist *}
|
|
||||||
|
|
||||||
{* ----- modale unique ----- *}
|
|
||||||
<div id="desc-modal" class="modal-overlay">
|
|
||||||
<div class="modal-content">
|
|
||||||
<button class="modal-close" id="desc-modal-close">×</button>
|
|
||||||
<div class="modal-body" id="desc-modal-body"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{include="page.footer"}
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user