UI update
-- added collapsing header to rooms UX improvement -- added ESC key binding to exit rooms
This commit is contained in:
sairaj mote
parent
f6a5e24448
commit
2f730fe61a
@ -78,13 +78,8 @@
|
||||
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="h2 weight-700 margin-bottom-1r">Bitcoin Bonds</h2>
|
||||
<p class="margin-bottom-1-5r">
|
||||
<!-- What is a Bitcoin Bond? -->
|
||||
A Bitcoin Bond is an investment package whereby the investor <Rohit sir has to complete this sentence>
|
||||
|
||||
</p>
|
||||
<h4>How does it work?</h4>
|
||||
<h2 class="h2 weight-700 margin-bottom-2r">Bitcoin Bonds</h2>
|
||||
<h4 class="margin-bottom-1r">How does it work?</h4>
|
||||
<p class="margin-bottom-3r">
|
||||
Bondholders get a minimum guarantee of 13% interest per annum during the lock-in period or 50% of all Bitcoin price gains whichever is higher.
|
||||
It offers full capital protection if Bitcoin prices fall below acquisition price.
|
||||
@ -115,9 +110,10 @@
|
||||
<header class="room-container__header">
|
||||
<button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
|
||||
<h3 class="room-title"></h3>
|
||||
<h3 id="room_title" class="hide-completely"></h3>
|
||||
</button>
|
||||
</header>
|
||||
<h1 id="hero_title"></h1>
|
||||
<section id="performance_room" class="grid room">
|
||||
<div id="bit_bond_series__container" class="grid series-container"></div>
|
||||
</section>
|
||||
|
||||
@ -113,9 +113,10 @@
|
||||
<header class="room-container__header">
|
||||
<button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
|
||||
<h3 class="room-title"></h3>
|
||||
<h3 id="room_title" class="hide-completely"></h3>
|
||||
</button>
|
||||
</header>
|
||||
<h1 id="hero_title"></h1>
|
||||
<section id="performance_room" class="grid room">
|
||||
<div id="bob_fund_investors__container" class="grid series-container series-container--bobs-fund"></div>
|
||||
</section>
|
||||
@ -150,6 +151,10 @@
|
||||
<section id="purchase_room" class="grid room">
|
||||
<sm-button variant="primary">Buy here</sm-button>
|
||||
</section>
|
||||
<footer class="room-container__footer">
|
||||
<h4>Related rooms</h4>
|
||||
<div id="room_switcher"></div>
|
||||
</footer>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
35
css/main.css
35
css/main.css
@ -826,22 +826,6 @@ ol[type="1"] {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
sm-carousel {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem 1.5rem 4rem 1.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
--arrow-left: 1.5rem;
|
||||
--arrow-right: 1.5rem;
|
||||
--arrow-fill: rgba(var(--text-color), 1);
|
||||
--arrow-background: transparent;
|
||||
--arrow-box-shadow: none;
|
||||
--arrow-bottom: -3.5rem;
|
||||
--indicator-bottom: -2.5rem;
|
||||
--active-indicator-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.bit-bond-series__row,
|
||||
.bob-fund__row,
|
||||
.person-card {
|
||||
@ -1092,11 +1076,6 @@ scroll-tab-panels > [active] {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
#ico_page__carousel {
|
||||
width: min(36rem, 100%);
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.progress-bar__circle,
|
||||
.progress-bar__line {
|
||||
position: absolute;
|
||||
@ -1156,9 +1135,6 @@ scroll-tab-panels > [active] {
|
||||
.room-tile:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.room-tile:focus-visible {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
#expanding_tile {
|
||||
position: fixed;
|
||||
@ -1185,8 +1161,6 @@ scroll-tab-panels > [active] {
|
||||
|
||||
.room-container__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
@ -1194,6 +1168,11 @@ scroll-tab-panels > [active] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
#hero_title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.room-container__footer {
|
||||
position: sticky;
|
||||
display: grid;
|
||||
@ -1384,10 +1363,6 @@ scroll-tab-panels > [active] {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.outlet-preview__carousel {
|
||||
padding: 2rem 2rem 5rem 2rem;
|
||||
}
|
||||
|
||||
#outlet_switcher {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -735,22 +735,6 @@ ol[type="1"]{
|
||||
}
|
||||
}
|
||||
|
||||
sm-carousel{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem 1.5rem 4rem 1.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
--arrow-left: 1.5rem;
|
||||
--arrow-right: 1.5rem;
|
||||
--arrow-fill: rgba(var(--text-color), 1);
|
||||
--arrow-background: transparent;
|
||||
--arrow-box-shadow: none;
|
||||
--arrow-bottom: -3.5rem;
|
||||
--indicator-bottom: -2.5rem;
|
||||
--active-indicator-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.bit-bond-series__row,
|
||||
.bob-fund__row,
|
||||
.person-card{
|
||||
@ -981,10 +965,6 @@ scroll-tab-panels{
|
||||
|
||||
}
|
||||
|
||||
#ico_page__carousel{
|
||||
width: min(36rem ,100%);
|
||||
height: max-content;
|
||||
}
|
||||
.progress-bar__circle,
|
||||
.progress-bar__line{
|
||||
position: absolute;
|
||||
@ -1040,9 +1020,6 @@ scroll-tab-panels{
|
||||
&:active{
|
||||
transform: scale(0.95);
|
||||
}
|
||||
&:focus-visible{
|
||||
outline: auto;
|
||||
}
|
||||
}
|
||||
#expanding_tile{
|
||||
position: fixed;
|
||||
@ -1068,14 +1045,16 @@ scroll-tab-panels{
|
||||
|
||||
.room-container__header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background-color: inherit;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
#hero_title{
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.room-container__footer{
|
||||
position: sticky;
|
||||
@ -1253,9 +1232,6 @@ scroll-tab-panels{
|
||||
.bit-bond-series__row{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.outlet-preview__carousel{
|
||||
padding: 2rem 2rem 5rem 2rem;
|
||||
}
|
||||
#outlet_switcher{
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
45
js/index.js
45
js/index.js
@ -158,7 +158,12 @@ function getFormatedTime(time, relative) {
|
||||
window.addEventListener("load", () => {
|
||||
document.addEventListener("keyup", (e) => {
|
||||
if (e.code === "Escape") {
|
||||
hideSiteMap();
|
||||
if (isSiteMapOpen) {
|
||||
hideSiteMap();
|
||||
}
|
||||
else if (isRoomOpen) {
|
||||
hideRoom()
|
||||
}
|
||||
}
|
||||
});
|
||||
document.addEventListener("pointerdown", (e) => {
|
||||
@ -356,7 +361,7 @@ bitBondRowTemplate.innerHTML = `
|
||||
</div>
|
||||
<div class="grid justify-right text-align-right">
|
||||
<h5 class="label color-0-8 weight-500">Current value</h5>
|
||||
<h3 class="value current-value"></h3>
|
||||
<h3 class="value current-value" style="color: var(--green)"></h3>
|
||||
<div class="flex align-center">
|
||||
<svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
|
||||
<span class="percent-gain"></span>
|
||||
@ -831,8 +836,8 @@ const animeOutOption = {
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', e => {
|
||||
showRoom(window.location.hash, true)
|
||||
if (allRooms.length) {
|
||||
showRoom(window.location.hash, true)
|
||||
renderRoomShorcuts()
|
||||
}
|
||||
})
|
||||
@ -872,15 +877,19 @@ function showRoom(roomId, animate = false) {
|
||||
const roomContainer = document.querySelector('.room-container')
|
||||
roomContainer.querySelectorAll('.room').forEach(child => child.classList.add('hide-completely'))
|
||||
document.querySelector(roomId).classList.remove('hide-completely')
|
||||
document.querySelector('.room-title').textContent = tile.querySelector('.room-tile__title').textContent
|
||||
getRef('room_title').textContent = tile.querySelector('.room-tile__title').textContent
|
||||
getRef('hero_title').textContent = tile.querySelector('.room-tile__title').textContent
|
||||
roomContainer.classList.remove('hide-completely')
|
||||
if (animate && !isRoomOpen) {
|
||||
roomContainer.animate(slideInDown, animeInOptions)
|
||||
.onfinish = () => {
|
||||
getRef('expanding_tile').classList.add('hide-completely')
|
||||
isRoomOpen = true
|
||||
}
|
||||
}
|
||||
isRoomOpen = true
|
||||
else {
|
||||
isRoomOpen = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -929,4 +938,30 @@ function renderRoomShorcuts() {
|
||||
|
||||
if (allRooms.length) {
|
||||
renderRoomShorcuts()
|
||||
}
|
||||
|
||||
const heroTitleObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
getRef('room_title').animate(slideOutDown, animeInOptions)
|
||||
.onfinish = () => {
|
||||
getRef('room_title').classList.add('hide-completely')
|
||||
}
|
||||
// getRef('hero_title').animate(slideInDown, animeOutOption)
|
||||
}
|
||||
else {
|
||||
if (isRoomOpen)
|
||||
getRef('room_title').classList.remove('hide-completely')
|
||||
getRef('room_title').animate(slideInUp, animeInOptions)
|
||||
// getRef('hero_title').animate(slideOutDown, animeOutOption)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
threshold: 1
|
||||
}
|
||||
)
|
||||
|
||||
if (getRef('hero_title')) {
|
||||
heroTitleObserver.observe(getRef('hero_title'))
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user