feat: reworked footer

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/footer/index.ts

@@ -0,0 +1,4 @@
+/*
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+import './styles.scss';

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/footer/styles.scss

@@ -0,0 +1,83 @@
+/*!
+ * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../_tokens/index';
+
+.footer {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  min-height: var(--footer-height);
+  margin-top: auto;
+
+  padding: 0 var(--size-m3);
+
+  letter-spacing: 0.15px;
+
+  color: var(--color-text-light);
+  background-color: var(--footer-background);
+
+  font: var(--font-text-s);
+
+  &--button {
+    z-index: 0;
+
+    display: inline-flex;
+    align-items: center;
+
+    flex-shrink: 0;
+    justify-content: center;
+
+    width: 40px;
+    height: 40px;
+    padding: 0;
+
+    cursor: pointer;
+
+    border: none;
+    border-radius: var(--size-s1);
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: 24px 24px;
+
+    font-size: 0;
+    line-height: 0;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-b08);
+      }
+    }
+
+    &:active {
+      background-color: var(--color-w10);
+    }
+
+    &:focus-visible {
+      outline: var(--focus-outline);
+    }
+
+    @media (width < $breakpoint-desktop-min) {
+      width: 52px;
+      height: 52px;
+    }
+
+    &_go-to-top {
+      background-image: url('../_assets/go-to-top-icon.svg');
+    }
+  }
+
+  &--link {
+    color: inherit;
+
+    border-bottom: 1px solid var(--color-text-light);
+  }
+
+  &--content {
+    text-align: right;
+  }
+}

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

@@ -5,6 +5,7 @@ import * as button from './button/index';
 import * as checkbox from './checkbox/index';
 import * as dropdown from './dropdown/index';
 import * as filterSection from './filter-section/index';
+import * as footer from './footer/index';
 import * as icon from './icon/index';
 import * as libraryName from './library-name/index';
 import * as libraryVersion from './library-version/index';
@@ -23,6 +24,7 @@ export {
   checkbox,
   dropdown,
   filterSection,
+  footer,
   icon,
   libraryName,
   libraryVersion,

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss

@@ -85,3 +85,7 @@
 
   background-image: url('../_assets/burger.svg');
 }
+
+.navigation-controls--btn_go-to-top {
+  background-image: url('../_assets/go-to-top-icon.svg');
+}

dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt

@@ -123,6 +123,7 @@ public object AssetsInstaller : PageTransformer {
         "ui-kit/assets/field-variable.svg",
         "ui-kit/assets/filter.svg",
         "ui-kit/assets/function.svg",
+        "ui-kit/assets/go-to-top-icon.svg",
         "ui-kit/assets/homepage.svg",
         "ui-kit/assets/interface-kotlin.svg",
         "ui-kit/assets/interface.svg",
@@ -135,8 +136,6 @@ public object AssetsInstaller : PageTransformer {
         "images/anchor-copy-button.svg",
         "images/copy-icon.svg",
         "images/copy-successful-icon.svg",
-        "images/footer-go-to-link.svg",
-        "images/go-to-top-icon.svg",
         "images/logo-icon.svg",
     )
 

dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css

@@ -872,66 +872,3 @@ Just in case of possible performance degradation it excluding tabs with briefs o
 div.runnablesample {
     height: fit-content;
 }
-
-/* --- footer --- */
-.footer {
-    clear: both;
-    display: flex;
-    align-items: center;
-    position: relative;
-    min-height: var(--footer-height);
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.2px;
-    color: var(--footer-font-color);
-    margin-top: auto;
-    background-color: var(--footer-background);
-}
-
-.footer--button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: var(--footer-go-to-top-color);
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    padding: 0;
-    border: none;
-    cursor: pointer;
-    font-size: 0;
-    line-height: 0;
-    transition: background-color 200ms ease-in-out;
-    will-change: background-color;
-}
-
-.footer--button:hover {
-    opacity: 0.9;
-}
-
-.footer--button_go-to-top {
-    background-image: url("../images/go-to-top-icon.svg");
-    margin-left: var(--horizontal-spacing-for-content);
-    margin-right: 8px;
-}
-
-.footer--link {
-    display: inline-flex;
-    align-items: center;
-    color: var(--breadcrumb-font-color);
-}
-
-.footer--link_external:after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    margin-left: 4px;
-    margin-right: var(--horizontal-spacing-for-content);
-    background-image: url("../images/footer-go-to-link.svg");
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-}
-
-/* /--- footer --- */

dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/footer.ftl

@@ -1,12 +1,12 @@
 <#macro display>
     <div class="footer">
         <a href="#content" id="go-to-top-link" class="footer--button footer--button_go-to-top"></a>
-        <span>${footerMessage}</span>
-        <span class="pull-right">
+        <div class="footer--content">
             <span>Generated by </span>
             <a class="footer--link footer--link_external" href="https://github.com/Kotlin/dokka">
-                <span>dokka</span>
+                Dokka
             </a>
-        </span>
+            <div>${footerMessage}</div>
+        </div>
     </div>
 </#macro>

dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl

@@ -4,7 +4,7 @@
         <@template_cmd name="pathToRoot">
             <a class="library-name--link" href="${pathToRoot}index.html">
                 <@template_cmd name="projectName">
-                    ${projectName}
+                    ${projectName} project name with a very long text
                 </@template_cmd>
             </a>
         </@template_cmd>