yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-29 01:42:08 +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 (max-width: 768px) {
div[class^="announcementBar"] {
div {
font-size: 0.8rem;
height: 65px !important; /* Increase height for stacked content */
}
.shimmer-banner {
font-size: 0.6rem;
flex-direction: column; /* Stack items vertically on very small screens */
div[class^="announcementBar"] .shimmer-banner {
flex-direction: column; /* Stack text and button */
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 {
font-size: 0.8rem;
}
.button {
font-size: 0.6rem;
margin-top: 1px;
}
}
p {
font-size: 0.9rem;
margin-right: 0;
margin-top: 0;
margin-left: 0;
}
.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 */
@media (max-width: 480px) {
div[class^="announcementBar"] {
div {
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;
}
}
}
div[class^="announcementBar"] .shimmer-banner p {
font-size: 0.8rem; /* Slightly smaller font for very narrow screens */
}
/* Other overrides for extra small screens can go here if needed */
}
@keyframes expand-on-scroll {
from {
transform: scaleY(0);