UI update
-- Adding new room layout
This commit is contained in:
sairaj mote
parent
681a2e9cb2
commit
32bc0b94d9
@ -100,7 +100,7 @@
|
||||
</section>
|
||||
<div class="rooms__header">
|
||||
<h4 class="room__label">Rooms</h4>
|
||||
<scroll-tab-header data-target="bit_bond_page_group">
|
||||
<scroll-tab-header data-target="bit_bond_page_group" class="hide-completely">
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
@ -144,7 +144,25 @@
|
||||
</button>
|
||||
</scroll-tab-header>
|
||||
</div>
|
||||
<scroll-tab-panels id="bit_bond_page_group">
|
||||
<section class="rooms-layout">
|
||||
<div id="expanding_tile" class="hide-completely"></div>
|
||||
<div class="room-tile room-tile--main">
|
||||
<div class="tile-content">
|
||||
<h4 class="room-tile__title">Performance</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-tile">
|
||||
<div class="tile-content">
|
||||
<h4 class="room-tile__title">Product</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-tile">
|
||||
<div class="tile-content">
|
||||
<h4 class="room-tile__title">Purchase</h4>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<scroll-tab-panels id="bit_bond_page_group" class="hide-completely">
|
||||
<section class="grid">
|
||||
<h3 class="h3 margin-bottom-1-5r">Performance</h3>
|
||||
<div id="bit_bond_series__container" class="grid series-container"></div>
|
||||
@ -279,6 +297,39 @@
|
||||
getRef('bit_bond_series__container').append(frag)
|
||||
}
|
||||
renderAllSeries()
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
if(e.target.closest('.room-tile')){
|
||||
const tile = e.target.closest('.room-tile')
|
||||
const tileParent = tile.parentNode
|
||||
const tileDimensions = tile.getBoundingClientRect()
|
||||
const tileParentDimensions = tileParent.getBoundingClientRect()
|
||||
getRef('expanding_tile').classList.remove('hide-completely')
|
||||
getRef('expanding_tile').animate([
|
||||
{
|
||||
height: `${tileDimensions.height}px`,
|
||||
width: `${tileDimensions.width}px`,
|
||||
transform: `translate(${tileDimensions.left - tileParentDimensions.left}px, ${tileDimensions.top - tileParentDimensions.top - window.pageYOffset}px)`
|
||||
},
|
||||
{
|
||||
height: `${window.innerHeight}px`,
|
||||
width: `${document.querySelector('main').getBoundingClientRect().width}px`,
|
||||
transform: `translate(${- tileParentDimensions.left}px, ${- tileParentDimensions.top - window.pageYOffset}px)`
|
||||
},
|
||||
],
|
||||
{
|
||||
duration: 300,
|
||||
fill: 'forwards',
|
||||
easing: 'ease'
|
||||
})
|
||||
.onfinish = () => {
|
||||
setTimeout(() => {
|
||||
getRef('expanding_tile').classList.add('hide-completely')
|
||||
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
56
css/main.css
56
css/main.css
@ -420,13 +420,15 @@ ol[type="1"] {
|
||||
.banner {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 0.2rem 1rem;
|
||||
padding: 0.2rem 0 0.2rem 1rem;
|
||||
align-items: center;
|
||||
background-color: #1E88E5;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
.banner .close-icon {
|
||||
fill: white;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
}
|
||||
|
||||
.banner__text {
|
||||
@ -1180,6 +1182,43 @@ scroll-tab-panels > [active] {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.rooms-layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.room-tile {
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.room-tile--main {
|
||||
padding-top: 100%;
|
||||
grid-row: span 2;
|
||||
}
|
||||
.room-tile--main .tile-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.room-tile .tile-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
.room-tile:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
#expanding_tile {
|
||||
position: fixed;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
@ -1222,6 +1261,17 @@ scroll-tab-panels > [active] {
|
||||
.rooms__header scroll-tab-header {
|
||||
width: calc(100vw - 2rem);
|
||||
}
|
||||
|
||||
.room-tile {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.room-tile--main {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.room-tile .tile-content {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
#home_page, .page {
|
||||
@ -1363,6 +1413,10 @@ scroll-tab-panels > [active] {
|
||||
columns: 3;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.rooms-layout {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
#home_page, .page {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -351,12 +351,14 @@ ol[type="1"]{
|
||||
.banner{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 0.2rem 1rem;
|
||||
padding: 0.2rem 0 0.2rem 1rem;
|
||||
align-items: center;
|
||||
background-color: #1E88E5;
|
||||
grid-template-columns: 1fr auto;
|
||||
.close-icon{
|
||||
fill: white;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
}
|
||||
}
|
||||
.banner__text{
|
||||
@ -1077,6 +1079,41 @@ scroll-tab-panels{
|
||||
}
|
||||
}
|
||||
|
||||
.rooms-layout{
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.room-tile{
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
transition: transform 0.3s;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
&--main{
|
||||
padding-top: 100%;
|
||||
grid-row: span 2;
|
||||
.tile-content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.tile-content{
|
||||
padding: 1rem;
|
||||
}
|
||||
&:active{
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
#expanding_tile{
|
||||
position: fixed;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-mobile{
|
||||
display: none;
|
||||
@ -1113,6 +1150,16 @@ scroll-tab-panels{
|
||||
width: calc(100vw - 2rem);
|
||||
}
|
||||
}
|
||||
.room-tile{
|
||||
padding-top: 100%;
|
||||
&--main{
|
||||
grid-column: span 2;
|
||||
}
|
||||
.tile-content{
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
#home_page,.page{
|
||||
@ -1245,6 +1292,9 @@ scroll-tab-panels{
|
||||
columns: 3;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
.rooms-layout{
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
#home_page, .page{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user