v0.12.8

UI - Increased room height and spacing between to make them distinct
2021-04-07 19:46:00 +05:30 · 2021-04-07 19:46:00 +05:30 · 8a065e48de
commit 8a065e48de
parent ec53d1380d
5 changed files with 37 additions and 23 deletions
--- a/components.js
+++ b/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.isAutoPlaying = true
-                                this.autoPlay()
-                        }, this.autoPlayInterval);
+                    this.initialTimeout = setTimeout(() => {
+                        this.isAutoPlaying = true
+                        this.autoPlay()
+                    }, 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,
-                root: this.tabPanels
+                threshold: 0.8
        })
        this.tabPanels.addEventListener('slotchange', e => {
            this._assignedElements = this.tabPanelsSlot.assignedElements()
--- a/css/main.css
+++ b/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 {
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/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;
 }


--- a/index.html
+++ b/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>