v0.12.8

UI - Increased room height and spacing between to make them distinct

components.js

@@ -2484,7 +2484,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
 
     handleIndicatorClick = (e) => {
         if (e.target.closest('.dot')) {
-            const slideNum = parseInt(e.target.closest('.dot').getAttribute('rank'))
+            const slideNum = parseInt(e.target.closest('.dot').dataset.rank)
             if (this.activeSlideNum !== slideNum) {
                 this.showSlide(slideNum)
             }
@@ -2533,7 +2533,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
         const allElementsObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (this.showIndicator) {                    
-                    const activeRank = parseInt(entry.target.attributes.rank.textContent)
+                    const activeRank = parseInt(entry.target.dataset.rank)
                     if (entry.isIntersecting) {
                         this.indicators[activeRank].classList.add('active')
                         this.activeSlideNum = activeRank
@@ -2585,16 +2585,13 @@ customElements.define('sm-carousel', class extends HTMLElement {
                 this.carouselItems.forEach((item, index) => {
                     let dot = document.createElement('div')
                     dot.classList.add('dot')
-                    dot.setAttribute('rank', index)
+                    dot.dataset.rank = index
                     frag.append(dot)
-                    item.setAttribute('rank', index)
+                    item.dataset.rank = index
                 })
                 this.indicatorsContainer.append(frag)
                 this.indicators = this.indicatorsContainer.children
             }
-            if (this.hasAttribute('autoplay')) {
-                this.autoPlay()
-            }
         })
 
         this.addEventListener('keyup', e => {
@@ -2619,11 +2616,10 @@ customElements.define('sm-carousel', class extends HTMLElement {
                 }
             if (name === 'autoplay') {
                 if (this.hasAttribute('autoplay')) {
-                    if(this.carouselSlot.assignedElements().length > 1)
+                    this.initialTimeout = setTimeout(() => {
-                        this.initialTimeout = setTimeout(() => {
+                        this.isAutoPlaying = true
-                            this.isAutoPlaying = true
+                        this.autoPlay()
-                                this.autoPlay()
+                    }, this.autoPlayInterval);
-                        }, this.autoPlayInterval);
                 }
                 else {
                     this.isAutoPlaying = false
@@ -3408,7 +3404,7 @@ customElements.define('sm-tab-header', class extends HTMLElement {
                 bubbles: true,
                 detail: {
                     target: this.target,
-                    rank: parseInt(element.getAttribute('rank'))
+                    rank: parseInt(element.dataset.rank)
                 }
             })
         )
@@ -3435,7 +3431,7 @@ customElements.define('sm-tab-header', class extends HTMLElement {
 
         this.tabSlot.addEventListener('slotchange', () => {
             this.tabSlot.assignedElements().forEach((tab, index) => {
-                tab.setAttribute('rank', index)
+                tab.dataset.rank = index
             })
         })
         this.allTabs = this.tabSlot.assignedElements();
@@ -3783,7 +3779,7 @@ scrollTabPanels.innerHTML = `
             }
         }
     </style>
-    <div class="tab-panels">
+    <div part="tab-panels" class="tab-panels">
         <slot></slot>
     </div>
 `
@@ -3834,8 +3830,7 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
             })
         },
             {
-                threshold: 0.8,
+                threshold: 0.8
-                root: this.tabPanels
         })
         this.tabPanels.addEventListener('slotchange', e => {
             this._assignedElements = this.tabPanelsSlot.assignedElements()

css/main.css

@@ -36,6 +36,9 @@ body[data-theme=dark] .outlet-preview {
 body[data-theme=dark] .outlet-preview sm-carousel {
   border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
 }
+body[data-theme=dark] #theme_switcher {
+  justify-self: flex-end;
+}
 
 .full-bleed {
   grid-column: 1/4;
@@ -733,6 +736,10 @@ scroll-tab-panels {
   -ms-scroll-chaining: none;
       overscroll-behavior: contain;
 }
+scroll-tab-panels > * {
+  min-height: max(24rem, 50vh);
+  margin-bottom: 6rem;
+}
 
 .auto-grid-layout {
   -webkit-box-pack: start;
@@ -784,6 +791,9 @@ table {
 
 #ico_page__carousel {
   width: min(36rem, 100%);
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
 }
 
 .phase {

css/main.scss

@@ -33,6 +33,9 @@ body[data-theme='dark']{
             border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
         }
     }
+    #theme_switcher{
+        justify-self: flex-end;
+    }
 }
 
 .full-bleed{
@@ -593,6 +596,10 @@ scroll-tab-panels{
     --gap: 4rem;
     --background: transparent;
     overscroll-behavior: contain;
+    & > *{
+        min-height: max(24rem, 50vh);
+        margin-bottom: 6rem;
+    }
 }
 .auto-grid-layout{
     justify-content: flex-start;
@@ -636,6 +643,7 @@ table{
 
 #ico_page__carousel{
     width: min(36rem ,100%);
+    height: max-content;
 }
 
 

index.html

@@ -275,7 +275,7 @@
         </section>
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
         <div class="grid auto-grid-layout">
-            <scroll-tab-header data-target="bit_bond_page_group">
+            <scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
                 <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"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>
                     <span class="button__label">
@@ -341,7 +341,7 @@
         </section>
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
         <div class="grid auto-grid-layout">
-            <scroll-tab-header data-target="bob_fund_page_group">
+            <scroll-tab-header data-target="bob_fund_page_group" class="margin-bottom-1r">
                 <button class="room-button">
                     <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
                     <span class="button__label">
@@ -359,7 +359,6 @@
                 <div>
                     <!-- <sm-carousel id="bob_fund_page__carousel" indicator autoplay></sm-carousel> -->
                     <h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
-                    <h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
                 </div>
                 <div>
                     <p id="bob_fund_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere officiis eius iusto quibusdam tenetur illo blanditiis asperiores et corporis!</p>
@@ -380,7 +379,7 @@
         </section>
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
         <div class="grid auto-grid-layout">
-            <scroll-tab-header data-target="ico_page_group">
+            <scroll-tab-header data-target="ico_page_group" class="margin-bottom-1r">
                 <button class="room-button" title="Investors">
                     <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
                     <span class="button__label">
@@ -395,7 +394,9 @@
                 </button>
             </scroll-tab-header>
             <scroll-tab-panels id="ico_page_group">
-                <sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
+                <div class="grid carousel-container">
+                    <sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
+                </div>
                 <ul id="ico_phase_list"></ul>
             </scroll-tab-panels>
         </div>