toolz/linkding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: layout and UX improvements

Browse Source
This commit is contained in:
0x1d
2025-11-15 12:54:00 +01:00
parent f417bebf1a
commit 0a986f4293
3 changed files with 350 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
public/index.html
View File

@@ -9,19 +9,61 @@
<body>
<header class="top-header-bar">
<div class="header-container">
<div class="header-left">
<div class="header-row">
<div class="header-left">
<h1 class="app-title">
<span class="title-text">🔗 LinkDing</span>
<span class="title-text">🔗 Links</span>
</h1>
</div>
<div class="header-right">
<div class="archive-toggle-wrapper" title="Toggle archived links">
<button id="archiveToggle" class="archive-toggle">
<span class="toggle-slider"></span>
</button>
<span class="toggle-label">Archive</span>
<button id="addLinkToggle" class="add-link-toggle-btn" title="Add link">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</button>
<button id="archiveToggle" class="archive-toggle-btn" title="Toggle archived links">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
<line x1="12" y1="22.08" x2="12" y2="12"/>
</svg>
</button>
<button id="searchToggle" class="search-toggle-btn" title="Toggle search">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
</button>
</div>
</div>
<div class="header-fields-container">
<div class="add-link-wrapper" id="addLinkWrapper">
<form id="linkForm" class="link-form">
<div class="input-wrapper">
<svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
<input
type="url"
id="linkInput"
placeholder="Paste a link to add..."
required
autocomplete="off"
>
<button type="submit" id="addButton" class="btn-add" data-tooltip="Add link">
<span class="btn-text">Add</span>
<span class="btn-loader" style="display: none;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>
</span>
</button>
</div>
</form>
</div>
<div class="search-wrapper">
<div class="search-wrapper" id="searchWrapper">
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
@@ -38,34 +80,6 @@
</header>
<div class="container">
<div class="top-section">
<div class="add-link-section">
<form id="linkForm" class="link-form">
<div class="input-wrapper">
<svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
<input
type="url"
id="linkInput"
placeholder="Paste a link to add..."
required
autocomplete="off"
>
<button type="submit" id="addButton" class="btn-add" data-tooltip="Add link">
<span class="btn-text">Add</span>
<span class="btn-loader" style="display: none;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>
</span>
</button>
</div>
</form>
</div>
</div>
<div id="linksContainer" class="links-container">
<div class="empty-state">
<p>No links yet. Add your first link to get started!</p>