feat(ktl-1396); desktop banner announcement

hltj · May 3, 2024 · a29b7ae · a29b7ae
1 parent 83604f6
commit a29b7ae
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 7 deletions.
diff --git a/assets/images/core-launch.png b/assets/images/core-launch.png
diff --git a/static/js/page/api/api.scss b/static/js/page/api/api.scss
@@ -322,4 +322,85 @@ $jvm-enrichment: JRE7, JRE8, JUnit, JUnit5, TestNG;
 
 .tags__tag.kotlin-version.hidden-version {
   visibility: hidden;
-}
+}
+
+/* ====== */
+#optimize-banner { display: none!important; }
+
+.api-docs-to-core {
+    position: relative;
+    padding: 0;
+}
+
+.api-docs-to-core_closed { display: none; }
+
+.api-docs-to-core__link {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    min-height: 52px;
+
+    background: linear-gradient(90.12deg, #7F52FF 23%, #A952FF 34.23%, #9952FF 44.65%, #8952FF 100%);
+}
+
+.api-docs-to-core__link, .api-docs-to-core__link:hover {
+    color: #fff;
+    text-decoration: none;
+}
+
+.api-docs-to-core__text {
+    display: inline-flex;
+    align-items: center;
+    background: url("/assets/images/core-launch.png") 24px 2px no-repeat;
+    background-size: 48px;
+    padding: 0 2px 0 calc(24px + 48px + 8px);
+    margin-left: -24px;
+
+    animation-duration: 300ms, 300ms;
+    animation-delay: 0s, 300ms;
+    animation-timing-function: ease-in, ease-out;
+}
+@keyframes rocket-in {
+    from {
+        background-position: 24px 2px;
+    }
+
+    to {
+        background-position: calc(24px + 48px) -52px;
+    }
+}
+@keyframes rocket-out {
+    from {
+        background-position: calc(24px - 48px) 52px;
+    }
+
+    to {
+        background-position: 24px 2px;
+    }
+}
+.api-docs-to-core_hover .api-docs-to-core__text {
+    animation-name: rocket-in, rocket-out;
+}
+.page_js_no .api-docs-to-core__close {
+    display: none;
+}
+
+.api-docs-to-core__close {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    height: 52px;
+    width: 52px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 704px) { .api-docs-to-core { display: none; } }
+@media (min-width: 705px) { .api-docs-to-core-mobile { display: none; } }
diff --git a/templates/api.html b/templates/api.html
@@ -1,5 +1,13 @@
 {% extends 'base.html' %}
 
+{% set docsNavBack={
+    "url": "/docs/home.html",
+    "text": "Kotlin Docs"
+} %}
+
+{% set newDocsLink = site.data["core"].get(request.path) %}
+{% if not newDocsLink %}{% set newDocsLink="/api/core/"%}{% endif %}
+
 {% block scripts %}
     <script src="{{ url_for('static', filename='api.js')|autoversion }}"></script>
 {% endblock %}
@@ -8,14 +16,34 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='api.css')|autoversion }}">
 {% endblock %}
 
-{% set docsNavBack={
-    "url": "/docs/home.html",
-    "text": "Kotlin Docs"
-} %}
+{% block top_banner %}
+    <p class="api-docs-to-core">
+        <a class="api-docs-to-core__link" href="{{ newDocsLink }}" target="_blank">
+            <span class="api-docs-to-core__text">Try docs with the new design →</span>
+        </a>
+        <button type="button" class="api-docs-to-core__close">
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.61589 23.0428L14.0137 15.6461L21.4115 23.0428L23.0554 21.399L15.6576 14.0023L23.0554 6.60444L21.4115 4.96061L14.0137 12.3584L6.61589 4.95947L4.97205 6.6033L12.3699 14.0023L4.97322 21.399L6.61589 23.0428Z" fill="white"/>
+            </svg>
+        </button>
+    </p>
+    <script>
+        (function() {
+            document.querySelector('.api-docs-to-core').addEventListener('mouseover', function(e) {
+                e.currentTarget.classList.add('api-docs-to-core_hover');
+            });
+            document.querySelector('.api-docs-to-core__close').addEventListener('click', function(e) {
+                e.currentTarget.parentNode.classList.add('api-docs-to-core_closed');
+                window.localStorage.setItem('api-docs-to-core', 'yes');
+            });
+            if(window.localStorage.getItem('api-docs-to-core') === 'yes') document
+                .querySelector('.api-docs-to-core').classList
+                    .add('api-docs-to-core_closed');
+        })();
+    </script>
+{% endblock %}
 
 {% block content %}
-    {% set newDocsLink = site.data["core"].get(request.path) %}
-    {% if not newDocsLink %}{% set newDocsLink="/api/core/"%}{% endif %}
     <div class="g-grid">
         <div class="api-layout">
             <div class="api-layout_button-box">