gitea/gitea-docs
1
0
Fork 0
mirror of https://gitea.com/gitea/docs.git synced 2026-06-24 13:15:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use custom api dropdown and fix compatibility for firefox (#39)

Browse Source 
- Used custom api dropdown for changing label dynamically. Used method discussed in [this post](https://github.com/facebook/docusaurus/pull/7231). `ComponentTypes` is ejected safely.

  ![Screen Shot 2023-07-05 at 16.21.43](/attachments/b4bc8ae4-6a8a-406c-98b7-f739b13c32ba)

- Fixed dropdowns missing on chrome docs page

  ![Screen Shot 2023-07-05 at 16.44.08](/attachments/1e5315b4-a057-4325-990f-1cbc35fb475f)

-  Fixed `:has` selector compatibility problem on firefox. After (Screenshots from firefox):

  ![Screen Shot 2023-07-05 at 16.10.23](/attachments/76475fb6-fd58-42ec-b4be-6a774553a887)

  ![Screen Shot 2023-07-05 at 16.10.35](/attachments/956f623a-afdb-4ab4-8aa2-beb9420727fb)

  ![Screen Shot 2023-07-05 at 16.15.35](/attachments/af840f31-def4-4f72-8340-f29b72a748bd)

  ![Screen Shot 2023-07-05 at 16.09.30](/attachments/42fa2394-962d-4594-8ef3-c594d3c1e777)

Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/39
Co-authored-by: HesterG <hestergong@gmail.com>
Co-committed-by: HesterG <hestergong@gmail.com>
This commit is contained in:
HesterG
2023-07-07 09:19:52 +00:00
committed by Lunny Xiao
parent 2086df848a
commit d6ee444476
6 changed files with 96 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/css/custom.css
View File

@@ -63,52 +63,52 @@
top: 70px !important;
height: calc(100vh - 70px) !important;
}
/* The following css is for toggling API version dropdown/menu,
selectors like :first-of-type are for browsers those do not support :has */
/* Do not show doc search on api pages */
body:has(.redocusaurus) [class*='searchBox'],
.plugin-redoc [class*='searchBox'],
.plugin-pages [class*='searchBox'] {
.gt-hidden {
display: none;
}
/* The following css is for toggling API version dropdown/menu,
TODO: need to find a proper way to customize the classname
*/
@supports selector(:has(*)) {
/* Do not show doc search on api pages */
body:has(.redocusaurus) [class*='searchBox'] {
display: none;
}
@media (min-width: 996px) {
/* hide api-dropdown on other pages */
.navbar__item.dropdown:not(:has(.api-dropdown)),
.navbar__item.dropdown:first-of-type {
display: none;
@media (min-width: 996px) {
/* hide other dropdowns except for api dropdown on api pages */
body:has(.redocusaurus) .navbar__item.dropdown:not(:has(.api-dropdown)) {
display: none;
}
}
/* show api-dropdown dropdown and hide other dropdowns on api pages */
body:has(.redocusaurus) .navbar__item.dropdown:not(:has(.api-dropdown)),
.plugin-redoc .navbar__item.dropdown:not(:first-of-type),
.plugin-pages .navbar__item.dropdown:not(:first-of-type) {
display: none;
}
body:has(.redocusaurus) .navbar__item.dropdown:has(.api-dropdown),
.plugin-redoc .navbar__item.dropdown:first-of-type,
.plugin-pages .navbar__item.dropdown:first-of-type {
display: block;
@media (max-width: 996px) {
/* on mobile, dropdown becomes menu list */
/* Hide collapsible menus except for API menu on API pages */
body:has(.redocusaurus) .menu__list-item.menu__list-item--collapsed:not(:has(.api-dropdown)) {
display: none;
}
}
}
/* selectors like :first-of-type are for browsers those do not support :has */
@supports not (selector(:has(*))) {
.plugin-redoc [class*='searchBox'],
.plugin-pages [class*='searchBox'] {
display: none;
}
@media (max-width: 996px) {
/* need to find a way to customize the classname */
/* on mobile, dropdown becomes menu list */
/* Hide api version menu on other pages */
.menu__list-item.menu__list-item--collapsed:has(.api-dropdown),
.menu__list-item.menu__list-item--collapsed:nth-of-type(3) {
display: none;
@media (min-width: 996px) {
.plugin-redoc .navbar__item.dropdown:not(:first-of-type),
.plugin-pages .navbar__item.dropdown:not(:first-of-type) {
display: none;
}
}
/* Hide collapsible menus except for API menu on API pages */
body:has(.redocusaurus) .menu__list-item.menu__list-item--collapsed:not(:has(.api-dropdown)),
.plugin-redoc .menu__list-item.menu__list-item--collapsed:not(:first-of-type),
.plugin-pages .menu__list-item.menu__list-item--collapsed:not(:first-of-type) {
display: none;
}
/* Show collapsible API menu on API pages */
body:has(.redocusaurus) .menu__list-item:has(.api-dropdown),
.plugin-redoc .menu__list-item:nth-of-type(3),
.plugin-pages .menu__list-item:nth-of-type(3) {
display: list-item !important;
@media (max-width: 996px) {
.plugin-redoc .menu__list-item.menu__list-item--collapsed:not(:nth-of-type(3)),
.plugin-pages .menu__list-item.menu__list-item--collapsed:not(:nth-of-type(3)) {
display: none;
}
}
}