Merge pull request JetBrains#4170 from JetBrains/announcment

Core API old pages announcement
hltj · May 3, 2024 · d6cb0fd · d6cb0fd
2 parents 83604f6 + 11aad3e
commit d6cb0fd
Show file tree

Hide file tree

Showing 4 changed files with 227 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,175 @@ $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__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;
+}
+
+.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;
+}
+
+.api-docs-to-core-mobile {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 12px;
+    background: linear-gradient(108.46deg, #7F52FF 0%, #A852FF 10.78%, #7F52FF 100%);
+    border-radius: 8px;
+    width: 456px;
+    z-index: 100;
+    color: #fff;
+}
+
+@media (max-width: 479px) {
+    .api-docs-to-core-mobile {
+        left: 12px;
+        right: 12px;
+        transform: none;
+        width: auto;
+    }
+}
+
+.api-docs-to-core-mobile__text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 24px 12px;
+}
+
+.api-docs-to-core-mobile__text::before {
+    display: block;
+    content: '';
+    background: url("/assets/images/core-launch.png") center center no-repeat;
+    background-size: 48px;
+    height: 48px;
+    width: 48px;
+}
+
+.api-docs-to-core-mobile__controls {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    flex-wrap: wrap;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    min-height: 52px;
+}
+
+.api-docs-to-core__text, .api-docs-to-core-mobile__text {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.0015em;
+    text-align: center;
+}
+
+.api-docs-to-core-mobile__link, .api-docs-to-core-mobile__link:hover,
+.api-docs-to-core-mobile__close, .api-docs-to-core-mobile__close:hover {
+    flex: 1 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 8px;
+
+    background-color: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    text-decoration: none;
+
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.0045em;
+}
+
+.api-docs-to-core, .api-docs-to-core-mobile {
+    font-family: "JetBrains Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+    font-feature-settings: 'ss20';
+}
+
+.api-docs-to-core-mobile__link:hover, .api-docs-to-core-mobile__close:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.api-docs-to-core-mobile__close {
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    margin-left: -1px;
+}
+
+.api-docs-to-core-closed {
+    display: none;
+}
+
+@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,54 @@
     <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 the revamped Kotlin docs design&nbsp;→</span>
+        </a>
+        <button type="button" class="api-docs-to-core__close 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>
+    <div class="api-docs-to-core-mobile">
+        <p class="api-docs-to-core-mobile__text">Try the revamped Kotlin docs design!</p>
+        <div class="api-docs-to-core-mobile__controls">
+            <a class="api-docs-to-core-mobile__link" href="{{ newDocsLink }}" target="_blank">Let’s&nbsp;go</a>
+            <button type="button" class="api-docs-to-core-mobile__close api-docs-to-core-close">No&nbsp;thanks</button>
+        </div>
+    </div>
+    <script>
+        (function() {
+            document.querySelectorAll('.api-docs-to-core').forEach(function(node) {
+                node.addEventListener('mouseover', function(e) {
+                    e.currentTarget.classList.add('api-docs-to-core_hover');
+                })
+            });
+            document.querySelectorAll('.api-docs-to-core-close').forEach(function(node) {
+                node.addEventListener('click', function(e) {
+                    var node = e.currentTarget;
+
+                    while (node && !(node.classList.contains('api-docs-to-core') || node.classList.contains('api-docs-to-core-mobile'))) {
+                        node = node.parentNode;
+                    }
+
+                    if (node) {
+                        node.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
+                .querySelectorAll('.api-docs-to-core,.api-docs-to-core-mobile').forEach(function(node) {
+                    node.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">

diff --git a/templates/base.html b/templates/base.html
@@ -23,6 +23,7 @@
     {% set headerDropdownTheme = "light" %}
 {% endif %}
 
+{% block top_banner %}{% endblock %}
 <div class="global-layout">
     {% ktl_component "header" productWebUrl=data.releases.latest.url hasSearch=True dropdownTheme=headerDropdownTheme currentUrl=headerCurrentUrl %}
     {% block page_outer_content %}