yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-29 09:52:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs-website: fix search modal positioning and support smaller screens (#13152)

Browse Source
This commit is contained in:
Shirshanka Das 2025-04-09 08:05:04 -07:00 committed by GitHub
parent 072cd8b30f
commit 2f07dc3fcd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 50 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
docs-website/src/styles/global.scss
View File

@ -551,56 +551,70 @@ body {
} }
} }
/* Algolia Search Modal Z-index & Position - DESKTOP */
.DocSearch-Container {
z-index: 10000 !important;
top: 105px !important; /* Position overlay directly below fixed header+navbar (45px + 60px) */
}
.DocSearch-Modal {
margin-top: 10px !important; /* Add 10px gap between overlay top and modal */
}
/* Media queries for responsive design */ /* Media queries for responsive design */
@media (max-width: 768px) { @media (max-width: 768px) {
div[class^="announcementBar"] { div[class^="announcementBar"] {
div { height: 65px !important; /* Increase height for stacked content */
font-size: 0.8rem; }
.shimmer-banner { div[class^="announcementBar"] .shimmer-banner {
font-size: 0.6rem; flex-direction: column; /* Stack text and button */
flex-direction: column; /* Stack items vertically on very small screens */ padding: 0.3rem 1rem; /* Adjust padding */
justify-content: center; /* Center items vertically */
text-align: center; /* Center text */
gap: 0.5rem; /* Add space BETWEEN flex items */
p { p {
font-size: 0.8rem; font-size: 0.9rem;
} margin-right: 0;
margin-top: 0;
.button { margin-left: 0;
font-size: 0.6rem;
margin-top: 1px;
}
}
} }
.button {
margin-left: 0;
font-size: 0.7rem;
padding: 3px 10px;
}
}
/* Adjust body padding to account for taller announcement bar */
body {
padding-top: calc(65px + var(--ifm-navbar-height));
}
/* Adjust navbar top position */
.navbar {
top: 65px !important;
}
/* Adjust Search Modal position for taller header */
.DocSearch-Container {
top: 125px !important; /* 65px announcement + 60px navbar */
}
.DocSearch-Modal {
margin-top: 10px !important; /* Maintain 10px gap from container top */
} }
} }
/* Extra small screens */ /* Extra small screens */
@media (max-width: 480px) { @media (max-width: 480px) {
div[class^="announcementBar"] { div[class^="announcementBar"] .shimmer-banner p {
div { font-size: 0.8rem; /* Slightly smaller font for very narrow screens */
font-size: 0.6rem;
.shimmer-banner {
font-size: 0.6rem;
justify-content: left;
flex-direction: column; /* Stack items vertically on very small screens */
p {
font-size: 0.6rem;
justify-content: left;
}
.button {
font-size: 0.6rem;
padding: 3px 10px;
}
}
}
} }
/* Other overrides for extra small screens can go here if needed */
} }
@keyframes expand-on-scroll { @keyframes expand-on-scroll {
from { from {
transform: scaleY(0); transform: scaleY(0);