marcel/linkding
1
0
Fork 0
mirror of https://github.com/sissbruecker/linkding.git synced 2025-08-14 05:59:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Convert tag modal into drawer (#977)

Browse Source 
* change tag modal into drawer

* improve scroll handling

* teleport all side bar content

* improve naming

* fix focus trap in filter drawer
This commit is contained in:
Sascha Ißbrücker
2025-02-02 20:42:28 +01:00
committed by GitHub
parent 0d4c47eb81
commit c5a300a435
14 changed files with 197 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
bookmarks/styles/theme/modals.css
View File

@@ -62,13 +62,14 @@
gap: var(--unit-4);
max-height: 75vh;
max-width: var(--control-width-md);
padding: var(--unit-6);
width: 100%;
& .modal-header {
display: flex;
align-items: flex-start;
gap: var(--unit-2);
padding: var(--unit-6);
padding-bottom: 0;
color: var(--text-color);
& h2 {
@@ -95,10 +96,53 @@
& .modal-body {
overflow-y: auto;
position: relative;
padding: 0 var(--unit-6);
}
& .modal-body:not(:has(+ .modal-footer)) {
margin-bottom: var(--unit-6);
}
& .modal-footer {
padding: var(--unit-6);
padding-top: 0;
text-align: right;
}
}
.modal.drawer {
display: block;
& .modal-container {
position: fixed;
top: 0;
right: 0;
width: 400px;
max-width: 100%;
height: 100%;
max-height: 100%;
border: none;
border-left: solid 1px var(--modal-container-border-color);
border-radius: 0;
transform: translateX(100%);
animation: fade-in 0.25s ease 1;
transition: transform 0.25s ease;
}
&.active {
& .modal-container {
transform: translateX(0);
}
}
&.active.closing {
& .modal-container {
animation: fade-out 0.25s ease 1;
transform: translateX(100%);
}
}
}
.scroll-lock {
overflow: hidden !important;
}