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

Add button to show tags on smaller screens (#529)

Browse Source 
* Implement tag modal

* Improve header controls responsiveness

* Improve modal styles

* Cleanup
This commit is contained in:
Sascha Ißbrücker
2023-09-10 09:44:49 +03:00
committed by GitHub
parent 0975914a86
commit d9c4ddb4d7
9 changed files with 160 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
bookmarks/styles/bookmark-page.scss
View File

@@ -2,31 +2,36 @@
grid-gap: $unit-10;
}
/* Bookmark search box */
.bookmarks-page .search {
$searchbox-width: 180px;
$searchbox-width-md: 300px;
$searchbox-height: 1.8rem;
/* Bookmark area header controls */
.bookmarks-page .content-area-header {
--searchbox-max-width: 350px;
--searchbox-height: 1.8rem;
@media (max-width: $size-sm) {
--searchbox-max-width: initial;
flex-direction: column;
}
}
.bookmarks-page #search {
flex: 1 1 0;
display: flex;
justify-content: flex-end;
// Regular input
input[type='search'] {
width: $searchbox-width;
height: $searchbox-height;
height: var(--searchbox-height);
-webkit-appearance: none;
@media (min-width: $control-width-md) {
width: $searchbox-width-md;
}
}
// Enhanced auto-complete input
// This needs a bit more wrangling to make the CSS component align with the attached button
.form-autocomplete {
height: $searchbox-height;
height: var(--searchbox-height);
.form-autocomplete-input {
width: $searchbox-width;
height: $searchbox-height;
width: 100%;
height: var(--searchbox-height);
input[type='search'] {
width: 100%;
@@ -34,13 +39,19 @@
margin: 0;
border: none;
}
@media (min-width: $control-width-md) {
width: $searchbox-width-md;
}
}
}
.input-group {
flex: 1 1 0;
min-width: var(--searchbox-min-width);
max-width: var(--searchbox-max-width);
}
.input-group > :first-child {
flex: 1 1 0;
}
// Group search options button with search button
.input-group input[type='submit'] {
border-top-right-radius: 0;