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

feat: header layout

Browse Source
This commit is contained in:
0x1d
2025-11-15 11:03:35 +01:00
parent 862e5dafaf
commit 448fe54e82
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/index.html
View File

@@ -15,6 +15,12 @@
</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>
</div>
<div class="search-wrapper">
<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>
@@ -27,12 +33,6 @@
autocomplete="off"
>
</div>
<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>
</div>
</div>
</div>
</header>

30
public/styles.css
View File

@@ -573,13 +573,17 @@ body {
}
.header-container {
flex-direction: column;
gap: 1rem;
align-items: stretch;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 0.75rem;
align-items: center;
}
.header-left {
justify-content: center;
grid-column: 1;
grid-row: 1;
justify-content: flex-start;
}
.app-title {
@@ -591,21 +595,21 @@ body {
}
.header-right {
max-width: 100%;
flex-direction: row;
gap: 0.75rem;
flex-wrap: wrap;
}
.search-wrapper {
flex: 1;
min-width: 200px;
display: contents;
}
.archive-toggle-wrapper {
grid-column: 2;
grid-row: 1;
flex-shrink: 0;
}
.search-wrapper {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
.link-actions {
flex-wrap: wrap;
gap: 0.5rem;