fix: reuse dropdown for versions

Kotlin · Sep 20, 2024 · 0d1ed0b · 0d1ed0b
1 parent 2e6dace
commit 0d1ed0b
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 113 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss
@@ -105,9 +105,4 @@
       filter: invert(0);
     }
   }
-
-  @media (width < $breakpoint-desktop-min) {
-    width: 52px;
-    height: 52px;
-  }
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts
@@ -39,7 +39,7 @@ function toggleDropdownList(list: Element | null): void {
 
 function handleOutsideClick(event: MouseEvent): void {
   const target = event.target as HTMLElement;
-  if (!hasAncestorWithClass(target, 'dropdown') || target.id === 'filter-section-overlay') {
+  if (!hasAncestorWithClass(target, 'dropdown') || target.className === 'dropdown--overlay') {
     const dropdowns = document.querySelectorAll('.button_dropdown');
     dropdowns.forEach((dropdown) => {
       dropdown.classList.remove('button_dropdown_active');

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss
@@ -108,4 +108,53 @@
       pointer-events: none;
     }
   }
+
+  &--overlay {
+    position: absolute;
+    z-index: 1;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: none;
+
+    width: 100vw;
+    height: 100vh;
+
+    content: '';
+
+    background-color: rgba(137, 137, 137, 0.5);
+
+    .dropdown--list_expanded + & {
+      display: block;
+
+      @media (width >= $breakpoint-desktop-min) {
+        display: none;
+      }
+    }
+  }
+
+  &--header {
+    position: sticky;
+    z-index: 2;
+    top: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-left: var(--size-s3);
+
+    color: var(--color-w70);
+
+    border-bottom: 1px solid lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt
+
+    background-color: var(--color-background-nav-dt);
+
+    @media (width >= $breakpoint-desktop-min) {
+      display: none;
+    }
+  }
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss
@@ -57,55 +57,6 @@
       }
     }
   }
-
-  &--header {
-    position: sticky;
-    z-index: 2;
-    top: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    padding-left: var(--size-s3);
-
-    color: var(--color-w70);
-
-    border-bottom: 1px solid lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt
-
-    background-color: var(--color-background-nav-dt);
-
-    @media (width >= $breakpoint-desktop-min) {
-      display: none;
-    }
-  }
-
-  &--overlay {
-    position: absolute;
-    z-index: 1;
-
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    display: none;
-
-    width: 100vw;
-    height: 100vh;
-
-    content: '';
-
-    background-color: rgba(137, 137, 137, 0.5);
-
-    .dropdown--list_expanded + & {
-      display: block;
-
-      @media (width >= $breakpoint-desktop-min) {
-        display: none;
-      }
-    }
-  }
 }
 
 .no-js .filter-section {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss
@@ -27,4 +27,11 @@
   .theme-dark & {
     background-color: var(--color-background-nav-dt);
   }
+
+  & .button {
+    @media (width < $breakpoint-desktop-min) {
+      min-width: 52px;
+      height: 52px;
+    }
+  }
 }
diff --git a/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl b/...bprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl
@@ -14,7 +14,7 @@
                         aria-label="Toggle source sets"
                 ></button>
                 <ul role="listbox" id="platform-tags-listbox" class="dropdown--list" data-role="dropdown-listbox">
-                    <div class="filter-section--header"><span>Platform filter</span>
+                    <div class="dropdown--header"><span>Platform filter</span>
                         <button class="button" data-role="dropdown-toggle" aria-label="Close platform filter">
                             <i class="ui-kit-icon ui-kit-icon_cross"></i>
                         </button>
@@ -30,7 +30,7 @@
                         </li>
                     </#list>
                 </ul>
-                <div class="filter-section--overlay" id="filter-section-overlay"></div>
+                <div class="dropdown--overlay"></div>
             </div>
         </div>
     </#if>

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
@@ -178,13 +178,6 @@
   transform: rotate(-180deg);
   filter: invert(0);
 }
-
-@media (width < 900px) {
-  .button {
-    width: 52px;
-    height: 52px;
-  }
-}
 /*!
  * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */ /*!
@@ -489,6 +482,48 @@
 .dropdown--option .checkbox {
   pointer-events: none;
 }
+
+.dropdown--overlay {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  content: "";
+  background-color: rgba(137, 137, 137, 0.5);
+}
+
+.dropdown--list_expanded + .dropdown--overlay {
+  display: block;
+}
+
+@media (width >= 900px) {
+  .dropdown--list_expanded + .dropdown--overlay {
+    display: none;
+  }
+}
+.dropdown--header {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: var(--size-s3);
+  color: var(--color-w70);
+  border-bottom: 1px solid #56565f;
+  background-color: var(--color-background-nav-dt);
+}
+
+@media (width >= 900px) {
+  .dropdown--header {
+    display: none;
+  }
+}
 /*!
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */ /*!
@@ -628,47 +663,6 @@
     display: none;
   }
 }
-.filter-section--header {
-  position: sticky;
-  z-index: 2;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: var(--size-s3);
-  color: var(--color-w70);
-  border-bottom: 1px solid #56565f;
-  background-color: var(--color-background-nav-dt);
-}
-
-@media (width >= 900px) {
-  .filter-section--header {
-    display: none;
-  }
-}
-.filter-section--overlay {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: none;
-  width: 100vw;
-  height: 100vh;
-  content: "";
-  background-color: rgba(137, 137, 137, 0.5);
-}
-
-.dropdown--list_expanded + .filter-section--overlay {
-  display: block;
-}
-
-@media (width >= 900px) {
-  .dropdown--list_expanded + .filter-section--overlay {
-    display: none;
-  }
-}
 .no-js .filter-section {
   display: none;
 }
@@ -1131,6 +1125,13 @@
 .theme-dark .navigation {
   background-color: var(--color-background-nav-dt);
 }
+
+@media (width < 900px) {
+  .navigation .button {
+    min-width: 52px;
+    height: 52px;
+  }
+}
 /*!
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */ /*!