SILVER/NODEDC_DESIGN_GUIDELINE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(map): add universal subject and station search

Browse Source
This commit is contained in:
Codex
2026-07-25 15:37:53 +03:00
parent eaecce9f56
commit a8c8bfd89a
13 changed files with 819 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/catalog/src/styles.css
+125
View File
@@ -703,6 +703,7 @@ textarea {
bottom: 1rem;
left: 50%;
display: flex;
width: 10.8rem;
gap: 0.35rem;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-map-glass-bg);
@@ -710,6 +711,130 @@ textarea {
translate: -50% 0;
backdrop-filter: blur(var(--nodedc-blur-control));
box-shadow: var(--nodedc-glass-dropdown-shadow);
transition: width 180ms ease;
}
.catalog-map-fixture__toolbar[data-search-open] {
width: min(42rem, calc(100% - 2rem));
}
.catalog-map-search {
position: relative;
min-width: 0;
flex: 0 1 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: flex-basis 180ms ease, opacity 120ms ease;
}
.catalog-map-search[data-open] {
flex-basis: 28rem;
overflow: visible;
opacity: 1;
pointer-events: auto;
}
.catalog-map-search__field {
height: 100%;
min-height: var(--nodedc-control-height);
display: flex;
align-items: center;
gap: 0.55rem;
border-radius: var(--nodedc-radius-circle);
background: rgb(255 255 255 / 0.84);
padding: 0 0.82rem;
color: var(--nodedc-map-glass-text);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.34);
}
.catalog-map-search__field .nodedc-icon {
flex: 0 0 auto;
}
.catalog-map-search__field input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: inherit;
font: inherit;
font-size: var(--nodedc-font-size-sm);
}
.catalog-map-search__field input::placeholder {
color: var(--nodedc-map-glass-text-muted);
}
.catalog-map-search__field input::-webkit-search-cancel-button {
cursor: pointer;
}
.catalog-map-search__results {
position: absolute;
right: 0;
bottom: calc(100% + 0.65rem);
width: 100%;
max-height: min(44vh, 24rem);
display: grid;
gap: 0.2rem;
overflow: auto;
border-radius: 1rem;
padding: 0.42rem;
box-shadow: var(--nodedc-glass-dropdown-shadow);
}
.catalog-map-search__results > button {
min-width: 0;
display: grid;
gap: 0.12rem;
border: 0;
border-radius: 0.72rem;
background: transparent;
padding: 0.62rem 0.7rem;
color: var(--nodedc-map-glass-text);
font: inherit;
text-align: left;
cursor: pointer;
}
.catalog-map-search__results > button:hover,
.catalog-map-search__results > button[data-active] {
background: rgb(255 255 255 / 0.2);
}
.catalog-map-search__results > button:focus-visible {
outline: 2px solid var(--nodedc-map-glass-text);
outline-offset: -2px;
}
.catalog-map-search__results > button span {
overflow: hidden;
font-size: var(--nodedc-font-size-sm);
font-weight: 760;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-map-search__results > button small,
.catalog-map-search__empty {
color: var(--nodedc-map-glass-text-muted);
font-size: var(--nodedc-font-size-xs);
}
.catalog-map-search__empty {
padding: 0.72rem;
}
@media (max-width: 640px) {
.catalog-map-fixture__toolbar[data-search-open] {
width: calc(100% - 1rem);
}
.catalog-map-search[data-open] {
flex-basis: 12rem;
}
}
.catalog-map-fixture__objects-menu {