Skip to content

Commit

Permalink
feat(ktl-1396); mobile banner announcement
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoobestik
zoobestik committed May 3, 2024
1 parent a29b7ae commit 1848db6
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 14 deletions.
Binary file modified assets/images/core-launch.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 94 additions & 5 deletions static/js/page/api/api.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,8 +332,6 @@ $jvm-enrichment: JRE7, JRE8, JUnit, JUnit5, TestNG;
padding: 0;
}

.api-docs-to-core_closed { display: none; }

.api-docs-to-core__link {
display: flex;
align-items: stretch;
Expand Down Expand Up @@ -381,9 +379,6 @@ $jvm-enrichment: JRE7, JRE8, JUnit, JUnit5, TestNG;
.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;
Expand All @@ -402,5 +397,99 @@ $jvm-enrichment: JRE7, JRE8, JUnit, JUnit5, TestNG;
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
}

.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; } }
38 changes: 29 additions & 9 deletions templates/api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,46 @@
{% 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>
<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">
<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.querySelector('.api-docs-to-core').addEventListener('mouseover', function(e) {
e.currentTarget.classList.add('api-docs-to-core_hover');
document.querySelectorAll('.api-docs-to-core').forEach(function(node) {
node.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');
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
.querySelector('.api-docs-to-core').classList
.add('api-docs-to-core_closed');
.querySelectorAll('.api-docs-to-core,.api-docs-to-core-mobile').forEach(function(node) {
node.classList.add('api-docs-to-core-closed');
});
})();
</script>
{% endblock %}
Expand Down

0 comments on commit 1848db6

Please sign in to comment.