0.0.32

components.js

@@ -442,6 +442,7 @@ customElements.define('sm-input',
             if (oldValue !== newValue) {
                 if (name === 'placeholder')
                     this.shadowRoot.querySelector('.label').textContent = newValue;
+                    this.setAttribute('aria-label', newValue);
             }
         }
     })
@@ -1673,6 +1674,7 @@ smPopup.innerHTML = `
     box-sizing: border-box;
 } 
 :host{
+    position: fixed;
     display: grid;
 }
 .popup-container{
@@ -1684,8 +1686,8 @@ smPopup.innerHTML = `
     right: 0;
     place-items: center;
     background: rgba(0, 0, 0, 0.6);
-    z-index: 10;
     transition: opacity 0.3s ease;
+    z-index: 10;
 }
 :host(.stacked) .popup{
     transform: scale(0.9) translateY(-2rem) !important;
@@ -1944,41 +1946,41 @@ const smCarousel = document.createElement('template')
 smCarousel.innerHTML = `
 <style>
 *{
-padding: 0;
+    padding: 0;
-margin: 0;
+    margin: 0;
-box-sizing: border-box;
+    box-sizing: border-box;
 } 
 :host{
-display: flex;
+    display: flex;
 }
 .icon {
-position: absolute;
+    position: absolute;
-display: flex;
+    display: flex;
-fill: none;
+    fill: none;
-height: 2.6rem;
+    height: 2.6rem;
-width: 2.6rem;
+    width: 2.6rem;
-border-radius: 3rem;
+    border-radius: 3rem;
-padding: 0.9rem;
+    padding: 0.9rem;
-stroke: rgba(var(--foreground-color), 0.8);
+    stroke: rgba(var(--foreground-color), 0.8);
-stroke-width: 14;
+    stroke-width: 14;
-overflow: visible;
+    overflow: visible;
-stroke-linecap: round;
+    stroke-linecap: round;
-stroke-linejoin: round;
+    stroke-linejoin: round;
-cursor: pointer;
+    cursor: pointer;
-min-width: 0;
+    min-width: 0;
-background: rgba(var(--text-color), 1);
+    background: rgba(var(--text-color), 1);
-box-shadow: 0 0.2rem 0.2rem #00000020, 
+    box-shadow: 0 0.2rem 0.2rem #00000020, 
-            0 0.5rem 1rem #00000040; 
+                0 0.5rem 1rem #00000040; 
--webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
-transform: scale(0);
+    transform: scale(0);
-z-index: 1;
+    z-index: 1;
 }
 .hide{
-pointer-events: none;
+    pointer-events: none;
-opacity: 0;
+    opacity: 0;
 }
 .expand{
-transform: scale(1)
+    transform: scale(1)
 }
 .previous-item{
     left: 1rem;
@@ -1986,41 +1988,46 @@ transform: scale(1)
 .next-item{
     right: 1rem;
 }
-.left,.right{
-    pointer-events: none;
-    position: absolute;
-    width: 3rem;
-    height: 100%; 
-    transition: opacity 0.3s;
-    z-index: 1;
-}
-.left{
-    background: radial-gradient(closest-corner circle at -50%, rgba(var(--text-color), 0.3), transparent);
-}
-.right{
-    right: 0;
-    background: radial-gradient(farthest-side circle at 150%, rgba(var(--text-color), 0.3), transparent);
-}
 .carousel-container{
-position: relative;
+    position: relative;
-display: flex;
+    display: flex;
-width: 100%;
+    width: 100%;
-align-items: center;
+    align-items: center;
 }
 .carousel{
-display: flex;
+    display: flex;
-max-width: 100%;
+    max-width: 100%;
-overflow: auto hidden;
+    width: 100%;
-scroll-snap-type: x mandatory;
+    overflow: auto hidden;
+    scroll-snap-type: x mandatory;
+}
+.indicators{
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: -1rem;
+    gap: 1rem;
+    width: 100%;
+}
+.dot{
+    position: relative;
+    padding: 0.2rem;
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+    transition: 0.2s;
+}
+.dot.active{
+    transform: scale(1.5);
+    background: var(--accent-color);
 }
 slot::slotted(*){
-scroll-snap-align: center;
+    scroll-snap-align: center;
 }
 :host([align-items="start"]) slot::slotted(*){
-scroll-snap-align: start;
+    scroll-snap-align: start;
 }
 :host([align-items="center"]) slot::slotted(*){
-scroll-snap-align: center;
+    scroll-snap-align: center;
 }
 :host([align-items="end"]) slot::slotted(*){
 scroll-snap-align: end;
@@ -2054,19 +2061,18 @@ scroll-snap-align: end;
 }
 </style>
 <div class="carousel-container">
-<div class="left"></div>
+    <svg class="icon previous-item" viewBox="4 0 64 64">
-<svg class="icon previous-item" viewBox="4 0 64 64">
+    <title>Previous</title>
-<title>Previous</title>
+    <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-<polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
+    </svg>
-</svg>
+    <div part="carousel" class="carousel">
-<div part="carousel" class="carousel">
+    <slot></slot>
-<slot></slot>
+    </div>
-</div>
+    <svg class="icon next-item" viewBox="-6 0 64 64">
-<svg class="icon next-item" viewBox="-6 0 64 64">
+    <title>Next</title>
-<title>Next</title>
+    <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-<polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
+    </svg>
-</svg>
+    <div class="indicators"></div>
-<div class="right"></div>
 </div>
 `;
 
@@ -2076,6 +2082,10 @@ customElements.define('sm-carousel', class extends HTMLElement {
         this.attachShadow({ mode: 'open' }).append(smCarousel.content.cloneNode(true))
     }
 
+    static get observedAttributes() {
+        return ['indicator']
+    }
+
     scrollLeft = () => {
         this.carousel.scrollBy({
             top: 0,
@@ -2098,32 +2108,50 @@ customElements.define('sm-carousel', class extends HTMLElement {
         this.carouselSlot = this.shadowRoot.querySelector('slot')
         this.nextArrow = this.shadowRoot.querySelector('.next-item')
         this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
+        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
         this.carouselItems
+        this.indicators
+        this.showIndicator = false
         this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-        const firstElementObserver = new IntersectionObserver(entries => {
+        let frag = document.createDocumentFragment();
-            if (entries[0].isIntersecting) {
+        if (this.hasAttribute('indicator'))
-                this.previousArrow.classList.remove('expand')
+            this.showIndicator = true
-                this.previousGradient.classList.add('hide')
+        
-            }
+        
-            else {
+        let firstVisible = false,
-                this.previousArrow.classList.add('expand')
+            lastVisible = false
-                this.previousGradient.classList.remove('hide')
+        const allElementsObserver = new IntersectionObserver(entries => {
-            }
+            entries.forEach(entry => {
-        }, {
+                if(this.showIndicator)
-            root: this.carouselContainer,
+                    if (entry.isIntersecting) {
-            threshold: 0.9
+                        this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
-        })
+                    }
-        const lastElementObserver = new IntersectionObserver(entries => {
+                    else
-            if (entries[0].isIntersecting) {
+                        this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
-                this.nextArrow.classList.remove('expand')
+                if (!entry.target.previousElementSibling)
-                this.nextGradient.classList.add('hide')
+                    if(entry.isIntersecting) {
-            }
+                        this.previousArrow.classList.remove('expand')
-            else {
+                        firstVisible = true
-                this.nextArrow.classList.add('expand')
+                    }
-                this.nextGradient.classList.remove('hide')
+                    else {
-            }
+                        this.previousArrow.classList.add('expand')
+                        firstVisible = false
+                    }
+                if (!entry.target.nextElementSibling)
+                    if(entry.isIntersecting) {
+                        this.nextArrow.classList.remove('expand')
+                        lastVisible = true
+                    }
+                    else {
+                        this.nextArrow.classList.add('expand')
+
+                        lastVisible = false
+                    }
+                if (firstVisible && lastVisible)
+                    this.indicatorsContainer.classList.add('hide')
+                else
+                    this.indicatorsContainer.classList.remove('hide')
+            })
         }, {
             root: this.carouselContainer,
             threshold: 0.9
@@ -2139,8 +2167,18 @@ customElements.define('sm-carousel', class extends HTMLElement {
 
         this.carouselSlot.addEventListener('slotchange', e => {
             this.carouselItems = this.carouselSlot.assignedElements()
-            firstElementObserver.observe(this.carouselItems[0])
+            this.carouselItems.forEach(item => allElementsObserver.observe(item))
-            lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])
+            if(this.showIndicator){
+                this.indicatorsContainer.innerHTML = ``
+                this.carouselItems.forEach((item, index) => {
+                    let dot = document.createElement('div')
+                    dot.classList.add('dot')
+                    frag.append(dot)
+                    item.setAttribute('rank', index)
+                })
+                this.indicatorsContainer.append(frag)
+                this.indicators = this.indicatorsContainer.children
+            }
         })
 
         this.addEventListener('keyup', e => {
@@ -2154,6 +2192,15 @@ customElements.define('sm-carousel', class extends HTMLElement {
         this.previousArrow.addEventListener('click', this.scrollLeft)
     }
 
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'indicator') {
+            if (this.hasAttribute('indicator'))
+                this.showIndicator = true
+            else
+                this.showIndicator = false
+        }
+    }
+
     disconnectedCallback() {
         this.nextArrow.removeEventListener('click', this.scrollRight)
         this.previousArrow.removeEventListener('click', this.scrollLeft)

css/main.css

@@ -568,7 +568,6 @@ details p {
 #home_page .left {
   padding: 1.5rem 0;
   width: auto;
-  background: rgba(var(--text-color), 0.06);
   border-radius: 0.6rem;
 }
 #home_page .left h3, #home_page .left h4, #home_page .left p {
@@ -578,9 +577,6 @@ details p {
   font-size: 2rem;
   margin-bottom: 1rem;
 }
-#home_page sm-carousel::part(carousel) {
-  padding: 0 1.5rem;
-}
 #home_page .user-panel {
   margin: 0 1.5rem;
 }
@@ -638,6 +634,12 @@ details p {
 .options-tab {
   margin: 1rem 0;
 }
+.options-tab > .grid {
+  min-width: 100vw;
+  padding: 0 1.5rem;
+  grid-auto-flow: column;
+  gap: 0.2rem;
+}
 .options-tab .option {
   position: relative;
   display: flex;
@@ -645,12 +647,12 @@ details p {
   align-items: center;
   text-align: center;
   border-radius: 0.4rem;
-  margin-right: 1rem;
   margin-bottom: 1rem;
   width: 5rem;
   min-width: 5rem;
   text-transform: capitalize;
   transition: transform 0.3s;
+  -webkit-tap-highlight-color: transparent;
   cursor: pointer;
 }
 .options-tab .option .icon {
@@ -1007,6 +1009,7 @@ sm-panel {
   }
   #home_page .left, #deposit .left {
     grid-area: left;
+    background: rgba(var(--text-color), 0.06);
   }
 
   sm-select {
@@ -1077,6 +1080,17 @@ sm-panel {
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 24rem;
   }
+
+  .options-tab > .grid {
+    gap: 1rem;
+    min-width: auto;
+  }
+  .options-tab .grid:first-of-type {
+    padding-right: 0;
+  }
+  .options-tab .grid:last-of-type {
+    padding-left: 0;
+  }
 }
 @media only screen and (min-width: 800px) {
   .complaint {

css/main.scss

@@ -598,7 +598,6 @@ details{
     .left {
         padding: 1.5rem 0;
         width: auto;
-        background: rgba(var(--text-color), 0.06);
         border-radius: 0.6rem;
         h3, h4, p {
             padding: 0 1.5rem;
@@ -608,10 +607,6 @@ details{
             margin-bottom: 1rem;
         }
     }
-
-    sm-carousel::part(carousel) {
-        padding: 0 1.5rem;
-    }
     .user-panel{
         margin: 0 1.5rem;
     }
@@ -668,6 +663,12 @@ details{
 
 .options-tab {      
     margin: 1rem 0;
+    & > .grid{  
+        min-width: 100vw;
+        padding: 0 1.5rem;
+        grid-auto-flow: column;
+        gap: 0.2rem;
+    }
     .option {
         position: relative;
         display: flex;
@@ -675,12 +676,12 @@ details{
         align-items: center;
         text-align: center;
         border-radius: 0.4rem;
-        margin-right: 1rem;
         margin-bottom: 1rem;
         width: 5rem;
         min-width: 5rem;
         text-transform: capitalize;
         transition: transform 0.3s;
+        -webkit-tap-highlight-color: transparent;
         cursor: pointer;
         .icon {
             height: 3rem;
@@ -1082,6 +1083,7 @@ sm-panel{
         grid-template-columns: minmax(0, 1fr);
         .left {
             grid-area: left;
+            background: rgba(var(--text-color), 0.06);
         }
     }
 
@@ -1156,6 +1158,18 @@ sm-panel{
         gap: 1.5rem;
         grid-template-columns: minmax(0, 1fr) 24rem;
     }
+    .options-tab{
+        & > .grid{
+            gap: 1rem;
+            min-width: auto;
+        }
+        .grid:first-of-type{
+            padding-right: 0;
+        }
+        .grid:last-of-type{
+            padding-left: 0;
+        }
+    }
 }
 
 @media only screen and (min-width: 800px) {

index.html

@@ -363,55 +363,59 @@
         <section class="page hide-completely" id="home_page">
             <div class="left">
                 <h4>Rupee actions</h4>
-                <sm-carousel class="options-tab">
+                <sm-carousel class="options-tab" indicator>
-                    <div class="option" onclick="showPopup('cash_transfer')">
+                    <div class="grid">
-                        <svg class="icon" viewBox="0 0 64 64">
+                        <div class="option" onclick="showPopup('cash_transfer')">
-                            <path
+                            <svg class="icon" viewBox="0 0 64 64">
-                                d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
+                                <path
-                        </svg>
+                                    d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
-                        <h4>Send</h4>
+                            </svg>
+                            <h4>Send</h4>
+                        </div>
+                        <div class="option" onclick="showPopup('deposit_rupee')">
+                            <svg class="icon" viewBox="0 0 64 64">
+                                <title>deposit</title>
+                                <path d="M29.58,35.76V60.47H5.13A4.63,4.63,0,0,1,.5,55.83V9.63" />
+                                <path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H42.16" />
+                                <path
+                                    d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
+                                <path
+                                    d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
+                                <polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
+                            </svg>
+                            <h4>deposit</h4>
+                        </div>
+                        <div class="option" onclick="showPopup('withdraw_rupee')">
+                            <svg class="icon" viewBox="0 0 64 64">
+                                <title>withdraw</title>
+                                <path d="M15.18,60.47h-10A4.63,4.63,0,0,1,.5,55.83V9.63" />
+                                <line x1="29.42" y1="59.04" x2="29.42" y2="34.34" />
+                                <path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H43.62" />
+                                <path
+                                    d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
+                                <path
+                                    d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
+                                <polyline points="20.39 50.69 29.45 59.76 38.61 50.6" />
+                            </svg>
+                            <h4>Withdraw</h4>
+                        </div>
+                        <div class="option" onclick="showPopup('request_rupee')">
+                            <svg class="icon request-icon" viewBox="0 0 64 64">
+                                <path
+                                    d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
+                            </svg>
+                            <h4>Request</h4>
+                        </div>
                     </div>
-                    <div class="option" onclick="showPopup('deposit_rupee')">
+                    <div class="grid">
-                        <svg class="icon" viewBox="0 0 64 64">
+                        <div class="option" onclick="showPopup('pay_anyone')">
-                            <title>deposit</title>
+                            <svg class="icon" viewBox="0 0 64 64">
-                            <path d="M29.58,35.76V60.47H5.13A4.63,4.63,0,0,1,.5,55.83V9.63" />
+                                <path d="M32,37.75A10.19,10.19,0,1,0,21.81,27.44V46.62" />
-                            <path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H42.16" />
+                                <rect height="64" width="64" rx="8"></rect>
-                            <path
+                            </svg>
-                                d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
+                            <h4>pay through cashier</h4>
-                            <path
+                            </a>
-                                d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
+                        </div>
-                            <polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
-                        </svg>
-                        <h4>deposit</h4>
-                    </div>
-                    <div class="option" onclick="showPopup('withdraw_rupee')">
-                        <svg class="icon" viewBox="0 0 64 64">
-                            <title>withdraw</title>
-                            <path d="M15.18,60.47h-10A4.63,4.63,0,0,1,.5,55.83V9.63" />
-                            <line x1="29.42" y1="59.04" x2="29.42" y2="34.34" />
-                            <path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H43.62" />
-                            <path
-                                d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
-                            <path
-                                d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
-                            <polyline points="20.39 50.69 29.45 59.76 38.61 50.6" />
-                        </svg>
-                        <h4>Withdraw</h4>
-                    </div>
-                    <div class="option" onclick="showPopup('request_rupee')">
-                        <svg class="icon request-icon" viewBox="0 0 64 64">
-                            <path
-                                d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
-                        </svg>
-                        <h4>Request</h4>
-                    </div>
-                    <div class="option" onclick="showPopup('pay_anyone')">
-                        <svg class="icon" viewBox="0 0 64 64">
-                            <path d="M32,37.75A10.19,10.19,0,1,0,21.81,27.44V46.62" />
-                            <rect height="64" width="64" rx="8"></rect>
-                        </svg>
-                        <h4>pay through cashier</h4>
-                        </a>
                     </div>
                 </sm-carousel>
             </div>
@@ -1269,7 +1273,6 @@
             zIndex = 10;
 
         function showPopup(popup, permission) {
-            console.log(popupStack)
             let thisPopup = document.getElementById(popup);
             zIndex++
             thisPopup.setAttribute('style', `z-index: ${zIndex}`)
@@ -12123,7 +12126,7 @@
                 }
             
                 const user_withdraw_upi = document.getElementById('user_withdraw_upi'); 
-                user_withdraw_upi.value = get_user_payment_details();
+                //user_withdraw_upi.value = get_user_payment_details();
 
             } catch (error) {
                 throw new Error(error)