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

Compare commits

base: toolz:1.2.0
Branches Tags
toolz:main
toolz:1.2.0 toolz:1.1.0 toolz:1.0.0
...
compare: toolz:main
Branches Tags
toolz:main
toolz:1.2.0 toolz:1.1.0 toolz:1.0.0

2 Commits
1.2.0 ... main

Author SHA1 Message Date
0x1d
3f0670baf7 feat: public link toggle color improvement 2025-11-16 11:16:07 +01:00
0x1d
1dfbdd6e71 feat: style improvements 2025-11-16 11:05:23 +01:00
2 changed files with 280 additions and 74 deletions
Expand all files Collapse all files

54
public/app.js
View File

@@ -740,33 +740,33 @@ function createLinkCard(link) {
<a href="${escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-url">
${escapeHtml(link.url)}
</a>
<div class="link-footer">
<span class="link-date">${formattedDate}</span>
<div class="link-actions">
<button class="add-to-list-btn" data-tooltip="Add to lists">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="6" x2="19" y2="6"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
<line x1="5" y1="18" x2="19" y2="18"></line>
<line x1="2" y1="6" x2="2.01" y2="6"></line>
<line x1="2" y1="12" x2="2.01" y2="12"></line>
<line x1="2" y1="18" x2="2.01" y2="18"></line>
</svg>
</button>
<button class="archive-btn" data-tooltip="${link.archived ? 'Unarchive' : 'Archive'}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
${link.archived
? '<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"/><path d="M9 12l3 3 3-3"/>'
: '<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 class="delete-btn" data-tooltip="Delete">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
</svg>
</button>
</div>
</div>
<div class="link-footer">
<span class="link-date">${formattedDate}</span>
<div class="link-actions">
<button class="add-to-list-btn" data-tooltip="Add to lists">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="5" y1="6" x2="19" y2="6"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
<line x1="5" y1="18" x2="19" y2="18"></line>
<line x1="2" y1="6" x2="2.01" y2="6"></line>
<line x1="2" y1="12" x2="2.01" y2="12"></line>
<line x1="2" y1="18" x2="2.01" y2="18"></line>
</svg>
</button>
<button class="archive-btn" data-tooltip="${link.archived ? 'Unarchive' : 'Archive'}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
${link.archived
? '<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"/><path d="M9 12l3 3 3-3"/>'
: '<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 class="delete-btn" data-tooltip="Delete">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
</svg>
</button>
</div>
</div>
</div>

300
public/styles.css
View File

@@ -744,8 +744,7 @@ body {
}
.links-container.layout-masonry .link-footer {
margin-top: auto;
padding-top: 0.75rem;
padding: 0.75rem 1.25rem;
}
.links-container.layout-masonry .empty-state {
@@ -764,7 +763,9 @@ body {
}
.links-container.layout-list .link-card {
flex-direction: row;
display: grid;
grid-template-columns: 100px 1fr;
grid-template-rows: 1fr auto;
border-radius: 10px;
padding: 0;
}
@@ -772,13 +773,17 @@ body {
.links-container.layout-list .link-image {
width: 100px;
height: 100px;
flex-shrink: 0;
grid-column: 1;
grid-row: 1;
border-radius: 0;
}
.links-container.layout-list .link-content {
padding: 0.75rem 1rem;
flex: 1;
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
}
.links-container.layout-list .link-title {
@@ -800,8 +805,11 @@ body {
}
.links-container.layout-list .link-footer {
padding-top: 0.5rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--border);
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
.links-container.layout-list .link-date {
@@ -872,6 +880,10 @@ body {
flex-direction: column;
}
.link-card .link-footer {
padding: 1rem 1.5rem;
}
.link-title {
font-size: 1.25rem;
font-weight: 600;
@@ -914,7 +926,6 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
@@ -1080,27 +1091,43 @@ body {
}
.title-icon {
font-size: 1.25rem;
width: 44px;
height: 44px;
}
.header-right {
flex-wrap: wrap;
gap: 0.75rem;
}
/* Remove focus outline and active state persistence on mobile nav buttons */
.search-toggle-btn,
.add-link-toggle-btn,
.lists-toggle-btn,
.layout-toggle-btn {
.layout-toggle-btn,
.login-toggle-btn {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
touch-action: manipulation;
width: 44px;
height: 44px;
padding: 0.625rem;
}
.search-toggle-btn svg,
.add-link-toggle-btn svg,
.lists-toggle-btn svg,
.layout-toggle-btn svg,
.login-toggle-btn svg {
width: 22px;
height: 22px;
}
.search-toggle-btn:focus,
.add-link-toggle-btn:focus,
.lists-toggle-btn:focus,
.layout-toggle-btn:focus {
.layout-toggle-btn:focus,
.login-toggle-btn:focus {
outline: none;
}
@@ -1108,7 +1135,8 @@ body {
.search-toggle-btn:active:not(.active),
.add-link-toggle-btn:active:not(.active),
.lists-toggle-btn:active:not(.active),
.layout-toggle-btn:active:not(.active) {
.layout-toggle-btn:active:not(.active),
.login-toggle-btn:active:not(.active) {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
@@ -1118,7 +1146,8 @@ body {
.search-toggle-btn:not(.active),
.add-link-toggle-btn:not(.active),
.lists-toggle-btn:not(.active),
.layout-toggle-btn:not(.active) {
.layout-toggle-btn:not(.active),
.login-toggle-btn:not(.active) {
background: transparent !important;
border-color: var(--border) !important;
color: var(--text-secondary) !important;
@@ -1137,14 +1166,43 @@ body {
}
.user-info {
padding: 0.5rem;
padding: 0;
gap: 0;
min-height: 44px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn {
width: 44px;
height: 44px;
padding: 0.625rem;
margin: 0;
}
.logout-btn svg {
width: 20px;
height: 20px;
}
.add-link-toggle-btn {
display: flex;
}
.lists-toggle-btn {
width: 44px !important;
height: 44px !important;
padding: 0.625rem;
}
.lists-toggle-btn svg {
width: 22px;
height: 22px;
}
.layout-toggle-wrapper {
position: relative;
}
@@ -1169,14 +1227,34 @@ body {
transform: translateY(0);
}
.add-link-wrapper .input-wrapper {
height: 52px !important;
padding: 0.75rem 1rem !important;
}
.add-link-wrapper .input-wrapper #linkInput {
font-size: 1rem;
}
.add-link-wrapper .input-wrapper .btn-add {
width: 44px !important;
height: 44px !important;
padding: 0.625rem !important;
}
.add-link-wrapper .input-wrapper .btn-add::after {
font-size: 1.5rem !important;
}
.search-wrapper {
width: 100%;
margin: 0;
padding: 0.625rem 1rem;
padding: 0.75rem 1rem;
display: none;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
min-height: 52px;
}
.search-wrapper.show {
@@ -1185,31 +1263,130 @@ body {
transform: translateY(0);
}
.link-actions {
flex-wrap: wrap;
gap: 0.5rem;
}
.archive-btn,
.delete-btn {
width: 36px;
height: 36px;
.search-wrapper #searchInput {
font-size: 1rem;
}
.input-wrapper {
flex-wrap: nowrap;
min-height: 48px;
padding: 0.625rem 1rem;
}
#linkInput {
font-size: 1rem;
padding: 0.625rem 0;
}
.btn-add {
width: 36px;
height: 36px;
padding: 0.5rem;
width: 44px;
height: 44px;
padding: 0.625rem;
flex-shrink: 0;
}
.btn-add::after {
font-size: 1.75rem;
}
.link-actions {
flex-wrap: wrap;
gap: 0.625rem;
}
.archive-btn,
.delete-btn,
.add-to-list-btn {
width: 44px !important;
height: 44px !important;
padding: 0.625rem;
}
.archive-btn svg,
.delete-btn svg,
.add-to-list-btn svg {
width: 20px;
height: 20px;
}
.add-to-list-btn {
width: 44px !important;
height: 44px !important;
padding: 0.625rem;
}
.add-to-list-btn svg {
width: 20px;
height: 20px;
}
.edit-lists-btn,
.clear-list-filters-btn {
padding: 0.625rem 1rem;
font-size: 0.9375rem;
min-height: 44px;
}
.edit-lists-btn svg {
width: 18px;
height: 18px;
}
.list-filter-chip {
padding: 0.625rem 1rem;
font-size: 0.9375rem;
min-height: 44px;
}
.archive-toggle-slider {
width: 50px;
height: 28px;
}
.archive-toggle-slider:before {
height: 22px;
width: 22px;
}
.archive-toggle-switch input:checked + .archive-toggle-slider:before {
transform: translateX(22px);
}
.links-container {
grid-template-columns: 1fr;
}
.close-modal-btn,
.close-overlay-btn {
width: 44px;
height: 44px;
padding: 0.625rem;
}
.close-modal-btn svg,
.close-overlay-btn svg {
width: 22px;
height: 22px;
}
.btn-login,
.btn-create-list {
padding: 0.875rem 1.5rem;
font-size: 1rem;
min-height: 48px;
}
.form-group input {
padding: 0.875rem;
font-size: 1rem;
min-height: 48px;
}
.create-list-form input {
padding: 0.875rem;
font-size: 1rem;
min-height: 48px;
}
}
/* Scroll to Top Button */
@@ -1235,6 +1412,20 @@ body {
z-index: 999;
}
@media (max-width: 768px) {
.scroll-to-top-btn {
width: 56px;
height: 56px;
bottom: 1.5rem;
right: 1.5rem;
}
.scroll-to-top-btn svg {
width: 28px;
height: 28px;
}
}
.scroll-to-top-btn.show {
opacity: 1;
visibility: visible;
@@ -1258,7 +1449,7 @@ body {
@media (max-width: 400px) {
.header-right {
flex-wrap: nowrap;
gap: 0.5rem;
gap: 0.625rem;
}
.search-wrapper {
@@ -1268,8 +1459,13 @@ body {
.scroll-to-top-btn {
bottom: 1.5rem;
right: 1.5rem;
width: 45px;
height: 45px;
width: 52px;
height: 52px;
}
.scroll-to-top-btn svg {
width: 26px;
height: 26px;
}
}
@@ -1678,27 +1874,27 @@ body {
}
.toggle-public-btn {
color: var(--success);
border-color: rgba(16, 185, 129, 0.3);
}
.toggle-public-btn:hover {
background: rgba(16, 185, 129, 0.2);
border-color: var(--success);
color: var(--success);
}
.toggle-public-btn.active {
color: var(--text-secondary);
border-color: rgba(156, 163, 175, 0.3);
}
.toggle-public-btn:hover {
.toggle-public-btn.active:hover {
background: var(--surface-light);
border-color: var(--text-secondary);
color: var(--text-primary);
}
.toggle-public-btn.active {
color: var(--secondary-color);
border-color: rgba(139, 92, 246, 0.3);
}
.toggle-public-btn.active:hover {
background: rgba(139, 92, 246, 0.2);
border-color: var(--secondary-color);
color: var(--secondary-color);
}
.public-url-btn {
color: var(--primary-color);
border-color: rgba(99, 102, 241, 0.3);
@@ -2062,18 +2258,28 @@ body {
.public-url-btn,
.save-list-btn,
.delete-list-btn {
padding: 0.25rem;
min-width: 28px;
width: 28px;
height: 28px;
padding: 0.625rem;
min-width: 44px;
width: 44px;
height: 44px;
}
.toggle-public-btn svg,
.public-url-btn svg,
.save-list-btn svg,
.delete-list-btn svg {
width: 14px;
height: 14px;
width: 20px;
height: 20px;
}
.list-item {
padding: 0.75rem;
}
.list-name-input {
font-size: 1rem;
padding: 0.5rem;
min-height: 44px;
}
}