From 117eeb6373be9f093a667f91dd24347b6fcd5d5f Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 15 Oct 2020 02:28:47 +0530 Subject: [PATCH 01/12] 0.0.1 --- components.js | 3593 +++++++++++++ css/banner-bg1.svg | 1 + css/banner-bg2.svg | 1 + css/card-bg1.svg | 1 + css/card-bg2.svg | 1 + css/main.css | 752 +++ css/main.min.css | 1 + css/main.scss | 735 +++ index.html | 11825 +++++++++++++++++++++---------------------- old.html | 10895 +++++++++++++++++++++++++++++++++++++++ 10 files changed, 21680 insertions(+), 6125 deletions(-) create mode 100644 components.js create mode 100644 css/banner-bg1.svg create mode 100644 css/banner-bg2.svg create mode 100644 css/card-bg1.svg create mode 100644 css/card-bg2.svg create mode 100644 css/main.css create mode 100644 css/main.min.css create mode 100644 css/main.scss create mode 100644 old.html diff --git a/components.js b/components.js new file mode 100644 index 0000000..e3e47c8 --- /dev/null +++ b/components.js @@ -0,0 +1,3593 @@ +//Button +const smButton = document.createElement('template') +smButton.innerHTML = ` + +
+ +
`; +customElements.define('sm-button', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)) + } + + get disabled() { + return this.isDisabled + } + + set disabled(value) { + if (value && !this.isDisabled) { + this.isDisabled = true + this.setAttribute('disabled', '') + this.button.removeAttribute('tabindex') + } else if (!value && this.isDisabled) { + this.isDisabled = false + this.removeAttribute('disabled') + } + } + + dispatch() { + if (this.isDisabled) { + this.dispatchEvent(new CustomEvent('disabled', { + bubbles: true, + composed: true + })) + } else { + this.dispatchEvent(new CustomEvent('clicked', { + bubbles: true, + composed: true + })) + } + } + + connectedCallback() { + this.isDisabled = false + this.button = this.shadowRoot.querySelector('.button') + if (this.hasAttribute('disabled') && !this.isDisabled) + this.isDisabled = true + this.addEventListener('click', (e) => { + this.dispatch() + }) + this.addEventListener('keyup', (e) => { + if (e.code === "Enter" || e.code === "Space") + this.dispatch() + }) + } + }) + +//Input +const smInput = document.createElement('template') +smInput.innerHTML = ` + +
+ + +
+`; +customElements.define('sm-input', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)) + } + static get observedAttributes() { + return ['placeholder'] + } + + get value() { + return this.shadowRoot.querySelector('input').value + } + + set value(val) { + this.shadowRoot.querySelector('input').value = val; + this.checkInput() + this.fireEvent() + } + + get placeholder() { + return this.getAttribute('placeholder') + } + + set placeholder(val) { + this.setAttribute('placeholder', val) + } + + get type() { + return this.getAttribute('type') + } + + get isValid() { + return this.shadowRoot.querySelector('input').checkValidity() + } + + get validity() { + return this.shadowRoot.querySelector('input').validity + } + + set disabled(value) { + if (value) + this.shadowRoot.querySelector('.input').classList.add('disabled') + else + this.shadowRoot.querySelector('.input').classList.remove('disabled') + } + set readOnly(value) { + if (value) { + this.shadowRoot.querySelector('input').setAttribute('readonly', '') + this.shadowRoot.querySelector('.input').classList.add('readonly') + } else { + this.shadowRoot.querySelector('input').removeAttribute('readonly') + this.shadowRoot.querySelector('.input').classList.remove('readonly') + } + } + + setValidity = (message) => { + this.feedbackText.textContent = message + } + + showValidity = () => { + this.feedbackText.classList.remove('hide-completely') + } + + hideValidity = () => { + this.feedbackText.classList.add('hide-completely') + } + + focusIn = () => { + this.input.focus() + } + + focusOut = () => { + this.input.blur() + } + + fireEvent = () => { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput = (e) => { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; + if (this.input.value !== '') { + if (this.animate) + this.inputParent.classList.add('animate-label') + else + this.label.classList.add('hide') + if (!this.readonly) + this.clearBtn.classList.remove('hide') + } else { + if (this.animate) + this.inputParent.classList.remove('animate-label') + else + this.label.classList.remove('hide') + if (!this.readonly) + this.clearBtn.classList.add('hide') + } + } + + + connectedCallback() { + this.inputParent = this.shadowRoot.querySelector('.input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.feedbackText = this.shadowRoot.querySelector('.feedback-text') + this.valueChanged = false; + this.readonly = false + this.isNumeric = false + this.min + this.max + this.animate = this.hasAttribute('animate') + this.input = this.shadowRoot.querySelector('input') + this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') + if (this.hasAttribute('value')) { + this.input.value = this.getAttribute('value') + this.checkInput(e) + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('min')) { + let minValue = this.getAttribute('min') + this.input.setAttribute('min', minValue) + this.min = parseInt(minValue) + } + if (this.hasAttribute('max')) { + let maxValue = this.getAttribute('max') + this.input.setAttribute('max', maxValue) + this.max = parseInt(maxValue) + } + if (this.hasAttribute('minlength')) { + let minValue = this.getAttribute('minlength') + this.input.setAttribute('minlength', minValue) + } + if (this.hasAttribute('maxlength')) { + let maxValue = this.getAttribute('maxlength') + this.input.setAttribute('maxlength', maxValue) + } + if (this.hasAttribute('pattern')) { + this.input.setAttribute('pattern', this.getAttribute('pattern')) + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + this.readonly = true + } + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled') + } + if (this.hasAttribute('error-text')) { + this.feedbackText.textContent = this.getAttribute('error-text') + } + if (this.hasAttribute('type')) { + if (this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric') + this.input.setAttribute('type', 'number') + this.isNumeric = true + } else + this.input.setAttribute('type', this.getAttribute('type')) + } else + this.input.setAttribute('type', 'text') + this.input.addEventListener('input', e => { + this.checkInput(e) + }) + this.clearBtn.addEventListener('click', e => { + this.value = '' + }) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'placeholder') { + this.shadowRoot.querySelector('.label').textContent = newValue; + this.setAttribute('aria-label', newValue); + } + } + } + }) + +//textarea +const smTextarea = document.createElement('template') +smTextarea.innerHTML = ` + + +`; +customElements.define('sm-textarea', + class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) + } + static get observedAttributes() { + return ['placeholder'] + } + + get value() { + return this.shadowRoot.querySelector('textarea').value + } + + set value(val) { + this.shadowRoot.querySelector('textarea').value = val; + this.checkInput() + this.fireEvent() + } + + get placeholder() { + return this.getAttribute('placeholder') + } + + set placeholder(val) { + this.setAttribute('placeholder', val) + } + + fireEvent() { + let event = new Event('input', { + bubbles: true, + cancelable: true, + composed: true + }); + this.dispatchEvent(event); + } + + checkInput() { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') + return; + if (this.input.value !== '') { + this.clearBtn.classList.remove('hide') + if (this.animate) + this.inputParent.classList.add('animate-label') + else + this.label.classList.add('hide') + } else { + this.clearBtn.classList.add('hide') + if (this.animate) + this.inputParent.classList.remove('animate-label') + else + this.label.classList.remove('hide') + } + + this.input.style.height = 'auto' + this.input.style.height = (this.input.scrollHeight) + 'px'; + } + + + connectedCallback() { + this.inputParent = this.shadowRoot.querySelector('.input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.valueChanged = false; + this.animate = this.hasAttribute('animate') + this.input = this.shadowRoot.querySelector('textarea') + this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') + + this.input.setAttribute('style', 'height:' + (this.input.scrollHeight) + 'px;overflow-y:hidden;'); + + if (this.hasAttribute('value')) { + this.input.value = this.getAttribute('value') + this.checkInput() + } + if (this.hasAttribute('required')) { + this.input.setAttribute('required', '') + } + if (this.hasAttribute('readonly')) { + this.input.setAttribute('readonly', '') + } + this.input.addEventListener('input', e => { + this.checkInput() + }) + this.clearBtn.addEventListener('click', e => { + this.value = '' + }) + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'placeholder') + this.shadowRoot.querySelector('.label').textContent = newValue; + } + } + }) + +// tab +const smTab = document.createElement('template') +smTab.innerHTML = ` + +
+ +
+`; + +customElements.define('sm-tab', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) + } +}) + +//chcekbox + +const smCheckbox = document.createElement('template') +smCheckbox.innerHTML = ` + +` +customElements.define('sm-checkbox', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCheckbox.content.cloneNode(true)) + + this.checkbox = this.shadowRoot.querySelector('.checkbox'); + this.input = this.shadowRoot.querySelector('input') + + this.isChecked = false + this.isDisabled = false + } + + static get observedAttributes() { + return ['disabled', 'checked'] + } + + get disabled() { + return this.getAttribute('disabled') + } + + set disabled(val) { + this.setAttribute('disabled', val) + } + + get checked() { + return this.getAttribute('checked') + } + + set checked(value) { + this.setAttribute('checked', value) + } + + dispatch() { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { + this.isChecked = !this.isChecked + this.setAttribute('checked', this.isChecked) + } + }) + } + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + if (name === 'disabled') { + if (newValue === 'true') { + this.checkbox.classList.add('disabled') + this.isDisabled = true + } else { + this.checkbox.classList.remove('disabled') + this.isDisabled = false + } + } + if (name === 'checked') { + if (newValue == 'true') { + this.isChecked = true + this.input.checked = true + this.dispatch() + } else { + this.isChecked = false + this.input.checked = false + this.dispatch() + } + } + } + } + +}) + +//switch + +const smSwitch = document.createElement('template') +smSwitch.innerHTML = ` + +` + +customElements.define('sm-switch', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSwitch.content.cloneNode(true)) + this.switch = this.shadowRoot.querySelector('.switch'); + this.input = this.shadowRoot.querySelector('input') + this.isChecked = false + this.isDisabled = false + } + + get disabled() { + return this.getAttribute('disabled') + } + + set disabled(val) { + if (val) { + this.disabled = true + this.setAttribute('disabled', '') + this.switch.classList.add('disabled') + } else { + this.disabled = false + this.removeAttribute('disabled') + this.switch.classList.remove('disabled') + + } + } + + get checked() { + return this.isChecked + } + + set checked(value) { + if (value) { + this.setAttribute('checked', '') + this.isChecked = true + this.input.checked = true + } else { + this.removeAttribute('checked') + this.isChecked = false + this.input.checked = false + } + } + + dispatch = () => { + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + } + + connectedCallback() { + if (this.hasAttribute('disabled')) + this.switch.classList.add('disabled') + this.addEventListener('keyup', e => { + if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) { + this.input.click() + } + }) + this.input.addEventListener('click', e => { + if (this.input.checked) + this.checked = true + else + this.checked = false + this.dispatch() + }) + } +}) + +// select +const smSelect = document.createElement('template') +smSelect.innerHTML = ` + +
+
+
+ + + +
+
+ +
+
`; +customElements.define('sm-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smSelect.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + + collapse() { + this.optionList.animate(this.slideUp, this.animationOptions) + this.optionList.classList.add('hide') + this.chevron.classList.remove('rotate') + this.open = false + } + connectedCallback() { + this.availableOptions + this.optionList = this.shadowRoot.querySelector('.options') + this.chevron = this.shadowRoot.querySelector('.toggle') + let slot = this.shadowRoot.querySelector('.options slot'), + selection = this.shadowRoot.querySelector('.selection'), + previousOption + this.open = false; + this.slideDown = [{ + transform: `translateY(-0.5rem)` + }, + { + transform: `translateY(0)` + } + ], + this.slideUp = [{ + transform: `translateY(0)` + }, + { + transform: `translateY(-0.5rem)` + } + ], + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: 'ease' + } + selection.addEventListener('click', e => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + selection.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.animate(this.slideDown, this.animationOptions) + this.chevron.classList.add('rotate') + this.open = true + } else { + this.collapse() + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.addEventListener('optionSelected', e => { + if (previousOption !== e.target) { + this.setAttribute('value', e.detail.value) + this.shadowRoot.querySelector('.option-text').textContent = e.detail.text; + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + if (previousOption) { + previousOption.classList.remove('check-selected') + } + previousOption = e.target; + } + if (!e.detail.switching) + this.collapse() + + e.target.classList.add('check-selected') + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + if (this.availableOptions[0]) { + let firstElement = this.availableOptions[0]; + previousOption = firstElement; + firstElement.classList.add('check-selected') + this.setAttribute('value', firstElement.getAttribute('value')) + this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent + this.availableOptions.forEach((element, index) => { + element.setAttribute('data-rank', index + 1); + element.setAttribute('tabindex', "0"); + }) + } + }); + document.addEventListener('mousedown', e => { + if (!this.contains(e.target) && this.open) { + this.collapse() + } + }) + } +}) + +// option +const smOption = document.createElement('template') +smOption.innerHTML = ` + +
+ + + + +
`; +customElements.define('sm-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smOption.content.cloneNode(true)) + } + + sendDetails(switching) { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value'), + switching: switching + } + }) + this.dispatchEvent(optionSelected) + } + + connectedCallback() { + let validKey = [ + 'ArrowUp', + 'ArrowDown', + 'ArrowLeft', + 'ArrowRight' + ] + this.addEventListener('click', e => { + this.sendDetails() + }) + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.sendDetails(false) + } + if (validKey.includes(e.code)) { + e.preventDefault() + this.sendDetails(true) + } + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + this.sendDetails() + }, 0); + } + } +}) + +// select +const smStripSelect = document.createElement('template') +smStripSelect.innerHTML = ` + +
+
+ + Previous + + +
+ +
+ + Next + + +
+
`; +customElements.define('sm-strip-select', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smStripSelect.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + scrollLeft = () => { + this.select.scrollBy({ + top: 0, + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.select.scrollBy({ + top: 0, + left: this.scrollDistance, + behavior: 'smooth' + }) + } + connectedCallback() { + let previousOption, + slot = this.shadowRoot.querySelector('slot'); + this.selectContainer = this.shadowRoot.querySelector('.select-container') + this.select = this.shadowRoot.querySelector('.select') + this.nextArrow = this.shadowRoot.querySelector('.next-item') + this.previousArrow = this.shadowRoot.querySelector('.previous-item') + this.nextGradient = this.shadowRoot.querySelector('.right') + this.previousGradient = this.shadowRoot.querySelector('.left') + this.selectOptions + this.scrollDistance = this.selectContainer.getBoundingClientRect().width + const firstElementObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.previousArrow.classList.add('hide') + this.previousGradient.classList.add('hide') + } else { + this.previousArrow.classList.remove('hide') + this.previousGradient.classList.remove('hide') + } + }, { + root: this.selectContainer, + threshold: 0.95 + }) + const lastElementObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.nextArrow.classList.add('hide') + this.nextGradient.classList.add('hide') + } else { + this.nextArrow.classList.remove('hide') + this.nextGradient.classList.remove('hide') + } + }, { + root: this.selectContainer, + threshold: 0.95 + }) + + const selectObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.scrollDistance = this.selectContainer.getBoundingClientRect().width + } + }) + + selectObserver.observe(this.selectContainer) + this.addEventListener('optionSelected', e => { + if (previousOption === e.target) return; + if (previousOption) + previousOption.classList.remove('active') + e.target.classList.add('active') + e.target.scrollIntoView({ + behavior: 'smooth', + inline: 'center', + block: 'nearest' + }) + this.setAttribute('value', e.detail.value) + this.dispatchEvent(new CustomEvent('change', { + bubbles: true, + composed: true + })) + previousOption = e.target; + }) + slot.addEventListener('slotchange', e => { + this.selectOptions = slot.assignedElements() + firstElementObserver.observe(this.selectOptions[0]) + lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1]) + if (this.selectOptions[0]) { + let firstElement = this.selectOptions[0]; + this.setAttribute('value', firstElement.getAttribute('value')) + firstElement.classList.add('active') + previousOption = firstElement; + } + }); + this.nextArrow.addEventListener('click', this.scrollRight) + this.previousArrow.addEventListener('click', this.scrollLeft) + } + + disconnectedCallback() { + this.nextArrow.removeEventListener('click', this.scrollRight) + this.previousArrow.removeEventListener('click', this.scrollLeft) + } +}) + +// option +const smStripOption = document.createElement('template') +smStripOption.innerHTML = ` + +
+ +
`; +customElements.define('sm-strip-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smStripOption.content.cloneNode(true)) + } + sendDetails() { + let optionSelected = new CustomEvent('optionSelected', { + bubbles: true, + composed: true, + detail: { + text: this.textContent, + value: this.getAttribute('value') + } + }) + this.dispatchEvent(optionSelected) + } + + connectedCallback() { + this.addEventListener('click', e => { + this.sendDetails() + }) + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.sendDetails(false) + } + }) + if (this.hasAttribute('default')) { + setTimeout(() => { + this.sendDetails() + }, 0); + } + } +}) + +//popup +const smPopup = document.createElement('template') +smPopup.innerHTML = ` + + +`; +customElements.define('sm-popup', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smPopup.content.cloneNode(true)) + + this.allowClosing = false + } + + resumeScrolling = () => { + const scrollY = document.body.style.top; + window.scrollTo(0, parseInt(scrollY || '0') * -1); + setTimeout(() => { + document.body.setAttribute('style', `overflow: auto; top: initial`) + }, 300); + } + + show = (pinned, popupStack) => { + if (popupStack) + this.popupStack = popupStack + if (this.popupStack && !this.hasAttribute('open')) { + this.popupStack.push({ + popup: this, + permission: pinned + }) + if (this.popupStack.items.length > 1) { + this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked') + } + this.dispatchEvent( + new CustomEvent("popupopened", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + this.setAttribute('open', '') + this.pinned = pinned + } + this.popupContainer.classList.remove('hide') + this.popup.style.transform = 'translateY(0)'; + document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) + return this.popupStack + } + hide = () => { + if (window.innerWidth < 640) + this.popup.style.transform = 'translateY(100%)'; + else + this.popup.style.transform = 'translateY(1rem)'; + this.popupContainer.classList.add('hide') + this.removeAttribute('open') + if (typeof this.popupStack !== 'undefined') { + this.popupStack.pop() + if (this.popupStack.items.length) { + this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked') + } else { + this.resumeScrolling() + } + } else { + this.resumeScrolling() + } + + if (this.inputFields.length) { + setTimeout(() => { + this.inputFields.forEach(field => { + if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX') + field.checked = false + if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA') + field.value = '' + }) + }, 300); + } + this.dispatchEvent( + new CustomEvent("popupclosed", { + bubbles: true, + detail: { + popup: this, + popupStack: this.popupStack + } + }) + ) + } + + handleTouchStart = (e) => { + this.touchStartY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.1s' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + e.preventDefault() + if (this.touchStartY < e.changedTouches[0].clientY) { + this.offset = e.changedTouches[0].clientY - this.touchStartY; + this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup()) + } + /*else { + this.offset = this.touchStartY - e.changedTouches[0].clientY; + this.popup.style.transform = `translateY(-${this.offset}px)` + }*/ + } + + handleTouchEnd = (e) => { + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndY = e.changedTouches[0].clientY + this.popup.style.transition = 'transform 0.3s' + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndY - this.touchStartY > this.threshold) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } else { + this.show() + } + } else { + if (this.touchEndY > this.touchStartY) + if (this.pinned) { + this.show() + return + } + else + this.hide() + } + } + + movePopup = () => { + this.popup.style.transform = `translateY(${this.offset}px)` + } + + connectedCallback() { + this.pinned = false + this.popupStack + this.popupContainer = this.shadowRoot.querySelector('.popup-container') + this.popup = this.shadowRoot.querySelector('.popup') + this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot') + this.offset + this.popupHeader = this.shadowRoot.querySelector('.popup-top') + this.touchStartY = 0 + this.touchEndY = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.touchEndAnimataion; + this.threshold + + if (this.hasAttribute('open')) + this.show() + this.popupContainer.addEventListener('mousedown', e => { + if (e.target === this.popupContainer && !this.pinned) { + if (this.pinned) { + this.show() + return + } else + this.hide() + } + }) + + this.popupBodySlot.addEventListener('slotchange', () => { + setTimeout(() => { + this.threshold = this.popup.getBoundingClientRect().height * 0.3 + }, 200); + this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio') + }) + + this.popupHeader.addEventListener('touchstart', (e) => { + this.handleTouchStart(e) + }) + this.popupHeader.addEventListener('touchmove', (e) => { + this.handleTouchMove(e) + }) + this.popupHeader.addEventListener('touchend', (e) => { + this.handleTouchEnd(e) + }) + } + disconnectedCallback() { + this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) + this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) + this.popupHeader.removeEventListener('touchend', this.handleTouchEnd) + } +}) + +//carousel + +const smCarousel = document.createElement('template') +smCarousel.innerHTML = ` + +
+ + Previous + + +
+ +
+ + Next + + +
+
+`; + +customElements.define('sm-carousel', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smCarousel.content.cloneNode(true)) + } + + static get observedAttributes() { + return ['indicator'] + } + + scrollLeft = () => { + this.carousel.scrollBy({ + top: 0, + left: -this.scrollDistance, + behavior: 'smooth' + }) + } + + scrollRight = () => { + this.carousel.scrollBy({ + top: 0, + left: this.scrollDistance, + behavior: 'smooth' + }) + } + + connectedCallback() { + this.carousel = this.shadowRoot.querySelector('.carousel') + this.carouselContainer = this.shadowRoot.querySelector('.carousel-container') + this.carouselSlot = this.shadowRoot.querySelector('slot') + this.nextArrow = this.shadowRoot.querySelector('.next-item') + this.previousArrow = this.shadowRoot.querySelector('.previous-item') + this.indicatorsContainer = this.shadowRoot.querySelector('.indicators') + this.carouselItems + this.indicators + this.showIndicator = false + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + let frag = document.createDocumentFragment(); + if (this.hasAttribute('indicator')) + this.showIndicator = true + + + let firstVisible = false, + lastVisible = false + const allElementsObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (this.showIndicator) + if (entry.isIntersecting) { + this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active') + } + else + this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active') + if (!entry.target.previousElementSibling) + if (entry.isIntersecting) { + this.previousArrow.classList.remove('expand') + firstVisible = true + } + 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 + }) + + const carouselObserver = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3 + } + }) + + carouselObserver.observe(this.carouselContainer) + + this.carouselSlot.addEventListener('slotchange', e => { + this.carouselItems = this.carouselSlot.assignedElements() + this.carouselItems.forEach(item => allElementsObserver.observe(item)) + 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 => { + if (e.code === 'ArrowLeft') + this.scrollRight() + else + this.scrollRight() + }) + + this.nextArrow.addEventListener('click', this.scrollRight) + 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) + } +}) + +//notifications + +const smNotifications = document.createElement('template') +smNotifications.innerHTML = ` + +
+
+` + +customElements.define('sm-notifications', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smNotifications.content.cloneNode(true)) + } + + handleTouchStart = (e) => { + this.notification = e.target.closest('.notification') + this.touchStartX = e.changedTouches[0].clientX + this.notification.style.transition = 'initial' + this.touchStartTime = e.timeStamp + } + + handleTouchMove = (e) => { + e.preventDefault() + if (this.touchStartX < e.changedTouches[0].clientX) { + this.offset = e.changedTouches[0].clientX - this.touchStartX; + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } else { + this.offset = -(this.touchStartX - e.changedTouches[0].clientX); + this.touchEndAnimataion = requestAnimationFrame(this.movePopup) + } + } + + handleTouchEnd = (e) => { + this.notification.style.transition = 'transform 0.3s, opacity 0.3s' + this.touchEndTime = e.timeStamp + cancelAnimationFrame(this.touchEndAnimataion) + this.touchEndX = e.changedTouches[0].clientX + if (this.touchEndTime - this.touchStartTime > 200) { + if (this.touchEndX - this.touchStartX > this.threshold) { + this.removeNotification(this.notification) + } else if (this.touchStartX - this.touchEndX > this.threshold) { + this.removeNotification(this.notification, true) + } else { + this.resetPosition() + } + } else { + if (this.touchEndX > this.touchStartX) { + this.removeNotification(this.notification) + } else { + this.removeNotification(this.notification, true) + } + } + } + + movePopup = () => { + this.notification.style.transform = `translateX(${this.offset}px)` + } + + resetPosition = () => { + this.notification.style.transform = `translateX(0)` + } + + push = (messageBody, type, pinned) => { + let notification = document.createElement('div'), + composition = `` + notification.classList.add('notification') + if (pinned) + notification.classList.add('pinned') + if (type === 'error') { + composition += ` + + + + + ` + } else if (type === 'success') { + composition += ` + + + ` + } + composition += ` +

${messageBody}

+ + Close + + + ` + notification.innerHTML = composition + this.notificationPanel.prepend(notification) + if (window.innerWidth > 640) { + notification.animate([{ + transform: `translateX(1rem)`, + opacity: '0' + }, + { + transform: 'translateX(0)', + opacity: '1' + } + ], this.animationOptions).onfinish = () => { + notification.setAttribute('style', `transform: none;`); + } + } else { + notification.setAttribute('style', `transform: translateY(0); opacity: 1`) + } + notification.addEventListener('touchstart', this.handleTouchStart) + notification.addEventListener('touchmove', this.handleTouchMove) + notification.addEventListener('touchend', this.handleTouchEnd) + } + + removeNotification = (notification, toLeft) => { + if (!this.offset) + this.offset = 0; + + if (toLeft) + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(-100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + else { + notification.animate([{ + transform: `translateX(${this.offset}px)`, + opacity: '1' + }, + { + transform: `translateX(100%)`, + opacity: '0' + } + ], this.animationOptions).onfinish = () => { + notification.remove() + } + } + } + + clearAll = () => { + Array.from(this.notificationPanel.children).forEach(child => { + this.removeNotification(child) + }) + } + + connectedCallback() { + this.notificationPanel = this.shadowRoot.querySelector('.notification-panel') + this.animationOptions = { + duration: 300, + fill: "forwards", + easing: "ease" + } + this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) + this.notification + this.offset + this.touchStartX = 0 + this.touchEndX = 0 + this.touchStartTime = 0 + this.touchEndTime = 0 + this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3 + this.touchEndAnimataion; + + this.notificationPanel.addEventListener('click', e => { + if (e.target.closest('.close'))( + this.removeNotification(e.target.closest('.notification')) + ) + }) + + const observer = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + if (!mutation.addedNodes[0].classList.contains('pinned')) + setTimeout(() => { + this.removeNotification(mutation.addedNodes[0]) + }, 5000); + if (window.innerWidth > 640) + this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem'; + else + this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem'; + } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) { + this.notificationPanel.style.padding = 0; + } + } + }) + }) + observer.observe(this.notificationPanel, { + attributes: true, + childList: true, + subtree: true + }) + } +}) + + +// sm-menu +const smMenu = document.createElement('template') +smMenu.innerHTML = ` + +
+
+ + options + + + + +
+
+ +
+
`; +customElements.define('sm-menu', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenu.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + expand = () => { + if (!this.open) { + this.optionList.classList.remove('hide') + this.optionList.classList.add('no-transformations') + this.open = true + this.icon.classList.add('focused') + } + } + collapse() { + if (this.open) { + this.open = false + this.icon.classList.remove('focused') + this.optionList.classList.add('hide') + this.optionList.classList.remove('no-transformations') + } + } + connectedCallback() { + this.availableOptions + this.containerDimensions + this.optionList = this.shadowRoot.querySelector('.options') + let slot = this.shadowRoot.querySelector('.options slot'), + menu = this.shadowRoot.querySelector('.menu') + this.icon = this.shadowRoot.querySelector('.icon') + this.open = false; + menu.addEventListener('click', e => { + if (!this.open) { + this.expand() + } else { + this.collapse() + } + }) + menu.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + if (!this.open) { + this.expand() + } else { + this.collapse() + } + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.optionList.addEventListener('click', e => { + this.collapse() + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + this.containerDimensions = this.optionList.getBoundingClientRect() + this.menuDimensions = menu.getBoundingClientRect() + }); + window.addEventListener('mousedown', e => { + if (!this.contains(e.target) && e.button !== 2) { + this.collapse() + } + }) + if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') { + this.parentNode.setAttribute('oncontextmenu', 'return false') + this.parentNode.addEventListener('mouseup', e => { + if (e.button === 2) { + this.expand() + } + }) + } + } +}) + +// option +const smMenuOption = document.createElement('template') +smMenuOption.innerHTML = ` + +
+ +
`; +customElements.define('sm-menu-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smMenuOption.content.cloneNode(true)) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.click() + } + }) + this.setAttribute('tabindex', '0') + } +}) + +// tab-header + +const smTabHeader = document.createElement('template') +smTabHeader.innerHTML = ` + +
+
+ +
+
+
+`; + +customElements.define('sm-tab-header', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabHeader.content.cloneNode(true)) + + this.indicator = this.shadowRoot.querySelector('.indicator'); + this.tabSlot = this.shadowRoot.querySelector('slot'); + this.tabHeader = this.shadowRoot.querySelector('.tab-header'); + } + + sendDetails(element) { + this.dispatchEvent( + new CustomEvent("switchtab", { + bubbles: true, + detail: { + target: this.target, + rank: parseInt(element.getAttribute('rank')) + } + }) + ) + } + + moveIndiactor(tabDimensions) { + //if(this.isTab) + this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + //else + //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`) + } + + connectedCallback() { + if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return; + this.prevTab + this.allTabs + this.activeTab + this.isTab = false + this.target = this.getAttribute('target') + + if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') { + this.isTab = true + } + + this.tabSlot.addEventListener('slotchange', () => { + this.tabSlot.assignedElements().forEach((tab, index) => { + tab.setAttribute('rank', index) + }) + }) + this.allTabs = this.tabSlot.assignedElements(); + + this.tabSlot.addEventListener('click', e => { + if (e.target === this.prevTab || !e.target.closest('sm-tab')) + return + if (this.prevTab) + this.prevTab.classList.remove('active') + e.target.classList.add('active') + + e.target.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'center' + }) + this.moveIndiactor(e.target.getBoundingClientRect()) + this.sendDetails(e.target) + this.prevTab = e.target; + this.activeTab = e.target; + }) + let resizeObserver = new ResizeObserver(entries => { + entries.forEach((entry) => { + if (this.prevTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } + }) + }) + resizeObserver.observe(this) + let observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.indicator.style.transition = 'none' + if (this.activeTab) { + let tabDimensions = this.activeTab.getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + } else { + this.allTabs[0].classList.add('active') + let tabDimensions = this.allTabs[0].getBoundingClientRect(); + this.moveIndiactor(tabDimensions) + this.sendDetails(this.allTabs[0]) + this.prevTab = this.tabSlot.assignedElements()[0]; + this.activeTab = this.prevTab; + } + } + }) + }, { + threshold: 1.0 + }) + observer.observe(this) + } +}) + +// tab-panels + +const smTabPanels = document.createElement('template') +smTabPanels.innerHTML = ` + +
+ Nothing to see here. +
+`; + +customElements.define('sm-tab-panels', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(smTabPanels.content.cloneNode(true)) + this.panelSlot = this.shadowRoot.querySelector('slot'); + } + connectedCallback() { + + //animations + let flyInLeft = [{ + opacity: 0, + transform: 'translateX(-1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyInRight = [{ + opacity: 0, + transform: 'translateX(1rem)' + }, + { + opacity: 1, + transform: 'none' + } + ], + flyOutLeft = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(-1rem)' + } + ], + flyOutRight = [{ + opacity: 1, + transform: 'none' + }, + { + opacity: 0, + transform: 'translateX(1rem)' + } + ], + animationOptions = { + duration: 300, + fill: 'forwards', + easing: 'ease' + } + this.prevPanel + this.allPanels + this.previousRank + + this.panelSlot.addEventListener('slotchange', () => { + this.panelSlot.assignedElements().forEach((panel) => { + panel.classList.add('hide-completely') + }) + }) + this.allPanels = this.panelSlot.assignedElements() + this._targetBodyFlyRight = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInRight, animationOptions) + } + this._targetBodyFlyLeft = (targetBody) => { + targetBody.classList.remove('hide-completely') + targetBody.animate(flyInLeft, animationOptions) + } + document.addEventListener('switchtab', e => { + if (e.detail.target !== this.id) + return + + if (this.prevPanel) { + let targetBody = this.allPanels[e.detail.rank], + currentBody = this.prevPanel; + if (this.previousRank < e.detail.rank) { + if (currentBody && !targetBody) + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyRight(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyRight(targetBody) + } + } + } else { + if (currentBody && !targetBody) + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + } + else if (targetBody && !currentBody) { + this._targetBodyFlyLeft(targetBody) + } else if (currentBody && targetBody) { + currentBody.animate(flyOutRight, animationOptions).onfinish = () => { + currentBody.classList.add('hide-completely') + this._targetBodyFlyLeft(targetBody) + } + } + } + } else { + this.allPanels[e.detail.rank].classList.remove('hide-completely') + } + this.previousRank = e.detail.rank + this.prevPanel = this.allPanels[e.detail.rank]; + }) + } +}) + + +const slidingSection = document.createElement('template') +slidingSection.innerHTML = ` + +
+ +
+` + +customElements.define('sm-sliding-section', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(slidingSection.content.cloneNode(true)) + } + connectedCallback() { + + } +}) + +const section = document.createElement('template') +section.innerHTML = ` + +
+ +
+` + +customElements.define('sm-section', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ + mode: 'open' + }).append(section.content.cloneNode(true)) + } +}) \ No newline at end of file diff --git a/css/banner-bg1.svg b/css/banner-bg1.svg new file mode 100644 index 0000000..9c3b621 --- /dev/null +++ b/css/banner-bg1.svg @@ -0,0 +1 @@ +banner-bg1 \ No newline at end of file diff --git a/css/banner-bg2.svg b/css/banner-bg2.svg new file mode 100644 index 0000000..6e4a185 --- /dev/null +++ b/css/banner-bg2.svg @@ -0,0 +1 @@ +spreadsheets \ No newline at end of file diff --git a/css/card-bg1.svg b/css/card-bg1.svg new file mode 100644 index 0000000..c0585a5 --- /dev/null +++ b/css/card-bg1.svg @@ -0,0 +1 @@ +card-bg1 \ No newline at end of file diff --git a/css/card-bg2.svg b/css/card-bg2.svg new file mode 100644 index 0000000..9d0233b --- /dev/null +++ b/css/card-bg2.svg @@ -0,0 +1 @@ +card-bg2 \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..c21243a --- /dev/null +++ b/css/main.css @@ -0,0 +1,752 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: "Roboto", sans-serif; +} + +body { + --accent-color:#169685; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f8f8f8; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background: var(--dark-shade); + background-size: cover; +} + +body[data-theme=dark] { + --accent-color: #00BFA6; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #080808; + --hue: 255; + --saturation: 39%; + --lightness: 70%; +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: "Poppins", sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 65ch; + color: rgba(var(--text-color), 0.9); +} + +strong { + font-weight: 500; +} + +::-moz-focus-inner { + border: none; +} + +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right { + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.overflow-ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.separator { + padding: 0.1em; +} + +.no-transformations { + transform: none !important; +} + +.capitalize { + text-transform: capitalize; +} + +.icon { + height: 1.2rem; + width: 1.2rem; + overflow: visible; + stroke: rgba(var(--text-color), 1); + opacity: 0.8; + fill: none; + stroke-width: 6; + stroke-linejoin: round; + stroke-linecap: round; +} + +sm-popup sm-input:not(:last-of-type) { + margin-bottom: 1rem; +} +sm-popup sm-textarea { + margin-top: 1rem; +} +sm-popup sm-textarea::part(textarea) { + border-radius: 0.4rem; +} +sm-popup p { + margin-block-end: 1rem; +} + +.popup-header { + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; +} +.popup-header .icon { + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; +} +.popup-header sm-button { + width: auto; + margin-left: auto; +} + +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: "Poppins", sans-serif; +} +button:focus { + outline: thin solid rgba(var(--text-color-light), 0.4); +} +button:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); +} + +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} + +#confirmation { + flex-direction: column; +} +#confirmation h4 { + font-weight: 500; + margin-bottom: 1.5rem; +} +#confirmation .flex sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; +} + +#sign_in_popup::part(background) { + background: rgba(var(--foreground-color), 1); +} +#sign_in_popup h3 { + margin-top: 2rem; +} +#sign_in_popup h4 { + font-weight: 500; + margin-bottom: 3rem; +} +#sign_in_popup button { + margin: 1rem 0; +} +#sign_in_popup p { + margin-top: 1rem; + margin-bottom: 0 !important; +} + +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; +} +.copy-row h4 { + margin-bottom: 0; + font-weight: 400; +} +.copy-row .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; +} +.copy-row .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; +} +#main_loader sm-button { + margin-left: 0; + margin-top: 1rem; + width: max-content; + justify-self: center; +} +#main_loader svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; +} +#main_loader h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -210; + } +} +#main_header { + padding: 1rem; + box-shadow: 0 0.1rem 0.2rem #00000010; + background: rgba(var(--foreground-color), 1); +} +#main_header h5 { + font-weight: 500; + font-family: "Roboto", sans-serif; + opacity: 0.8; +} +#main_header h4 { + font-size: 1.2rem; +} + +#home_page { + padding: 1rem 1.5rem; +} + +.section-header { + position: sticky; + top: 0; + z-index: 1; + background: var(--dark-shade); + padding: 1rem 0; + margin-bottom: 1rem; +} +.section-header h4 { + font-size: 1.2rem; + opacity: 0.8; + font-weight: 500; +} + +#user_icon { + width: 2.4rem; + height: 2.4rem; + padding: 0.6rem; + cursor: pointer; + background: rgba(var(--text-color), 0.1); + border-radius: 2rem; +} + +sm-input::part(input) { + border-radius: 0.4rem; +} + +#sheets_container { + gap: 2rem 1.5rem; + grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); + margin-bottom: 3rem; + animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +@keyframes slide-up { + from { + transform: translateY(2rem); + } + to { + transform: none; + } +} +#add_new_sheet .icon { + height: 2rem; + width: 2rem; + stroke-width: 10; + stroke: #fff; + stroke-linecap: square; + opacity: 1; + top: 50%; + transform: translateY(-50%); + position: absolute; +} +#add_new_sheet .card { + display: flex; + align-items: center; + justify-content: center; + position: relative; + background: url(card-bg1.svg), #A7003E; + background-size: cover; +} + +.sheet-card { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; +} +.sheet-card:active .card { + transform: scale(0.95); +} +.sheet-card .card { + border-radius: 0.8rem; + background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06); + background-size: contain; + padding: 1rem; + padding-top: 66%; + width: 100%; + transition: box-shadow 0.3s, transform 0.3s; +} +.sheet-card h4 { + font-family: "Roboto", sans-serif; + font-weight: 400; + opacity: 0.9; + margin-top: 0.8rem; + text-align: center; + max-width: 90%; +} + +#sheet_page { + width: 100vw; + height: 100vh; + overflow-x: hidden; +} + +#sheet_heading { + font-weight: 600; + opacity: 0.9; +} + +#sheet_description { + margin-top: 0.8rem; + opacity: 0.8; +} + +#sheet_editors { + gap: 0.5rem; + flex-wrap: wrap; + color: rgba(var(--text-color), 0.7); + font-size: 0.9rem; +} +#sheet_editors .editor { + padding: 0.4rem 0.6rem; + border-radius: 0.4rem; + background: rgba(var(--text-color), 0.06); +} + +#toggle_details, #go_to_home { + height: 2.4rem; + width: 2.4rem; + padding: 0.7rem; + cursor: pointer; +} + +#go_to_home, #go_to_home + h5 { + transform: translateX(-1rem); + cursor: pointer; +} + +#go_to_home + h5 { + font-weight: 500; + opacity: 0.9; +} + +#toggle_details { + transform: rotateX(180deg); + transition: transform 0.3s; +} + +#sheet_details { + padding: 1rem; + margin-bottom: 1rem; +} +#sheet_details .flex:first-of-type { + margin-bottom: 1rem; +} +#sheet_details .flex:not(:first-of-type) { + margin-bottom: 0.3rem; +} +#sheet_details.collapse { + padding: 0.5rem 1rem; + margin-bottom: 0; +} +#sheet_details.collapse .flex { + margin-bottom: 0; +} +#sheet_details.collapse #toggle_details { + transform: none; +} +#sheet_details.collapse #sheet_heading { + font-size: 1.2rem; + font-weight: 600; + opacity: 0.9; +} +#sheet_details.collapse #sheet_description, +#sheet_details.collapse #sheet_editors { + display: none; +} + +#sheet_container { + position: relative; + overflow: auto; + max-height: 100%; + bottom: 0; + max-width: 100%; +} + +table { + position: relative; +} +table input { + padding: 0.4rem; + border: thin solid rgba(var(--text-color), 0.3); + font-size: 1rem; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); +} +table input:disabled { + border: transparent; +} + +thead { + background-color: rgba(var(--text-color), 0.1); +} + +th { + position: sticky; + top: 0; + background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1); + text-align: left; + line-height: 1; + font-weight: 500; + z-index: 1; + padding: 1rem 0.8rem; + white-space: nowrap; + box-shadow: 0 0.2rem 0.4rem #00000020; +} + +tr:nth-of-type(2n) { + background-color: rgba(var(--text-color), 0.04); +} + +td { + padding: 0.4rem 0.8rem; + opacity: 0.9; +} + +.grade-input { + width: 10ch; +} + +#side_bar { + position: fixed; + transform: translateX(-100%); + background: var(--dark-shade); +} +#side_bar .section-header { + padding: 1rem; + margin-bottom: 0; + background: inherit; +} + +#right { + position: relative; + display: flex; + flex-direction: column; + overflow: auto; + max-height: 100vh; + background: rgba(var(--foreground-color), 1); + animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +@keyframes slide-right { + from { + transform: translateX(-2rem); + } + to { + transform: translateX(0); + } +} +#people_container { + overflow: auto; + max-height: calc(100vh - 3.6rem); + gap: 1.5rem; +} + +.person-card { + display: grid; + align-items: center; + grid-template-columns: auto 1fr; + grid-template-areas: "initials ." "initials ."; + cursor: pointer; + padding: 0 1rem; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; +} +.person-card:active { + transform: scale(0.95); +} +.person-card:first-of-type { + margin-top: 1.5rem; +} +.person-card:last-of-type { + margin-bottom: 2rem; +} + +.person-initials { + grid-area: initials; + display: flex; + justify-content: center; + height: 2.6rem; + width: 2.6rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-right: 1rem; + text-transform: uppercase; + opacity: 1 !important; + color: var(--accent-color); + background: rgba(var(--text-color), 0.06); +} + +.person-name { + font-size: 0.9rem; + opacity: 0.9; + font-weight: 500; + text-transform: capitalize; +} + +.person-flo-id { + opacity: 0.7; + font-weight: 400; +} + +@media screen and (min-width: 640px) { + sm-popup::part(popup) { + width: 24rem; + } + + #main_header { + padding: 1.2rem 3rem; + } + + #home_page, #main_header { + grid-template-columns: 1fr 80vw 1fr; + grid-template-areas: ". main ."; + } + + #main_section, +#main_header > div { + grid-area: main; + } + + #sheets_container { + gap: 2rem; + grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); + } + + #sheet_page { + grid-template-columns: 19rem 1fr; + } + + #side_bar { + position: relative; + transform: none; + } +} +@media (any-hover: hover) { + :root { + scrollbar-width: thin; + } + + ::-webkit-scrollbar { + width: 0.7rem; + height: 0.7rem; + } + + ::-webkit-scrollbar-track { + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb { + border-radius: 10px; + background: rgba(var(--text-color), 0.2); + } + ::-webkit-scrollbar-thumb:hover { + background: rgba(var(--text-color), 0.4); + } + + #people_container::-webkit-scrollbar { + width: 0.4rem; + } + + #right { + z-index: 1; + box-shadow: -0.5rem 0 0.5rem #00000010; + } +} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css new file mode 100644 index 0000000..b92784d --- /dev/null +++ b/css/main.min.css @@ -0,0 +1 @@ +a,h1,h2,h3,h4,h5{font-weight:600}.align-center,.popup-header{align-items:center}.capitalize,button{text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}#confirmation h4,.bottom-margin{margin-bottom:1.5rem}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}.person-initials,button{color:var(--accent-color)}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}#main_header h4,.section-header h4{font-size:1.2rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}sm-input::part(input),sm-popup sm-textarea::part(textarea){border-radius:.4rem}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}#main_header h5,.section-header h4{opacity:.8;font-weight:500}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup sm-textarea{margin-top:1rem}sm-popup p{margin-block-end:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;transition:transform .3s;border:none;background:rgba(var(--text-color),.1);-webkit-tap-highlight-color:transparent}#main_header h5,.sheet-card h4{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;margin-top:1rem;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card,#right,#sheet_container,.sheet-card,table{position:relative}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{border-radius:.8rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_heading{font-weight:600;opacity:.9}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem}table input:disabled{border:transparent}thead{background-color:rgba(var(--text-color),.1)}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;font-weight:500;z-index:1;padding:1rem .8rem;white-space:nowrap;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar .section-header{padding:1rem;margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s;-webkit-tap-highlight-color:transparent}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}@media screen and (min-width:640px){sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page{grid-template-columns:19rem 1fr}#side_bar{position:relative;transform:none}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..ef9e5cf --- /dev/null +++ b/css/main.scss @@ -0,0 +1,735 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Roboto', sans-serif; +} +body { + --accent-color:#169685; + --text-color: 17, 17, 17; + --text-color-light: 85, 85, 85; + --foreground-color: 255, 255, 255; + --background-color: rgba(var(--foreground-color), 1); + --dark-shade: #f8f8f8; + --hue: 255; + --saturation: 61%; + --lightness: 39%; + color: rgba(var(--text-color), 1); + font-size: 16px; + background: var(--dark-shade); + background-size: cover; +} +body[data-theme="dark"]{ + --accent-color: #00BFA6; + --text-color: 238, 238, 238; + --text-color-light: 170, 170, 170; + --foreground-color: 26, 26, 26; + --background-color: #111; + --dark-shade: #080808; + --hue: 255; + --saturation: 39%; + --lightness: 70%; +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); +} + +.dark-text { + color: #111; +} + +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +h4 { + font-size: 1rem; +} + +h5 { + font-size: 0.8rem; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} + +p { + line-height: 1.5; + max-width: 65ch; + color: rgba(var(--text-color), 0.9); +} +strong{ + font-weight: 500; +} +::-moz-focus-inner { + border: none; +} +.bottom-padding { + padding-bottom: 1.5rem; +} + +.top-padding { + padding-top: 1em; +} + +.bottom-margin { + margin-bottom: 1.5rem; +} + +.top-margin { + margin-top: 1.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.grid-2 { + grid-template-columns: auto auto; + gap: 1em; +} + +.align-center { + align-items: center; +} + +.direction-column { + flex-direction: column; +} + +.justify-right{ + margin-left: auto; +} + +.space-between { + justify-content: space-between; +} + +.label { + margin-bottom: 0.4rem; +} + +.light-text { + opacity: 0.7; +} + +.hide { + opacity: 0; + pointer-events: none; +} + +.hide-completely { + display: none !important; +} + +.breakable { + word-break: break-all; +} + +.overflow-ellipsis{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.separator { + padding: .1em; +} + +.no-transformations { + transform: none !important; +} +.capitalize{ + text-transform: capitalize; +} + +.icon{ + height: 1.2rem; + width: 1.2rem; + overflow: visible; + stroke: rgba(var(--text-color), 1); + opacity: 0.8; + fill: none; + stroke-width: 6; + stroke-linejoin: round; + stroke-linecap: round; +} + +sm-popup{ + sm-input:not(:last-of-type) { + margin-bottom: 1rem; + } + sm-textarea{ + margin-top: 1rem; + &::part(textarea){ + border-radius: 0.4rem; + } + } + p{ + margin-block-end: 1rem; + } +} + +.popup-header{ + padding: 1.5rem; + padding-bottom: 0; + display: flex; + align-items: center; + width: 100%; + .icon{ + margin-right: 1rem; + padding: 0.2rem; + stroke-width: 10; + cursor: pointer; + } + sm-button{ + width: auto; + margin-left: auto; + } +} +button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: capitalize; + padding: 0.6rem 1.2rem; + font-weight: 600; + cursor: pointer; + border-radius: 0.3rem; + color: var(--accent-color); + transition: transform 0.3s; + border: none; + background: rgba(var(--text-color), 0.1); + -webkit-tap-highlight-color: transparent; + font-family: 'Poppins', sans-serif; + &:focus { + outline: thin solid rgba(var(--text-color-light), .4); + } + &:disabled { + cursor: default; + background: rgba(var(--text-color), 0.4); + } +} +.primary-btn { + background: var(--accent-color); + justify-content: center; + color: rgba(var(--foreground-color), 1); +} +#confirmation{ + flex-direction: column; + h4 { + font-weight: 500; + margin-bottom: 1.5rem; + } + + .flex { + sm-button:first-of-type { + margin-right: 0.6em; + margin-left: auto; + } + } +} +#sign_in_popup { + &::part(background){ + background: rgba(var(--foreground-color), 1); + } + h3 { + margin-top: 2rem; + } + + h4 { + font-weight: 500; + margin-bottom: 3rem; + } + + button { + margin: 1rem 0; + } + + p { + margin-top: 1rem; + margin-bottom: 0 !important; + } +} +.copy-row { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 0.5rem; + width: auto; + h4 { + margin-bottom: 0; + font-weight: 400; + } + + .icon { + cursor: pointer; + padding: 0.4rem; + height: 1.8rem; + width: 1.8rem; + } + + .copy { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +#main_loader { + text-align: center; + place-content: center; + height: 100vh; + width: 100vw; + position: fixed; + left: 0; + sm-button { + margin-left: 0; + margin-top: 1rem; + width: max-content; + justify-self: center; + } + + svg { + height: 2rem; + width: 2rem; + stroke: var(--accent-color); + stroke-width: 6; + fill: none; + overflow: visible; + stroke-linecap: round; + stroke-dashoffset: 210; + stroke-dasharray: 210; + justify-self: center; + align-self: center; + margin-bottom: 2rem; + } + + h3 { + width: 100%; + font-weight: 400; + word-spacing: 0.16em; + } +} + +.loader { + fill: none; + stroke-width: 10; + stroke: var(--accent-color); + height: 2rem; + width: 2rem; + overflow: visible; + stroke-dashoffset: 230; + stroke-dasharray: 230; + padding: 2px; + justify-self: center; +} + +.animate-loader { + animation: load 2.6s infinite, rotate 1s infinite linear; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes load { + 50% { + stroke-dashoffset: 0; + } + + 100% { + stroke-dashoffset: -210; + } +} + +#main_header{ + padding: 1rem; + box-shadow: 0 0.1rem 0.2rem #00000010; + background: rgba(var(--foreground-color), 1); + h5{ + font-weight: 500; + font-family: 'Roboto', sans-serif; + opacity: 0.8; + } + h4{ + font-size: 1.2rem; + } +} +#home_page{ + padding: 1rem 1.5rem; +} +.section-header{ + position: sticky; + top: 0; + z-index: 1; + background: var(--dark-shade); + padding: 1rem 0; + margin-bottom: 1rem; + h4{ + font-size: 1.2rem; + opacity: 0.8; + font-weight: 500; + } +} + +#user_icon{ + width: 2.4rem; + height: 2.4rem; + padding: 0.6rem; + cursor: pointer; + background: rgba(var(--text-color), 0.1); + border-radius: 2rem; +} + +sm-input::part(input){ + border-radius: 0.4rem; +} + +#sheets_container{ + gap: 2rem 1.5rem; + grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); + margin-bottom: 3rem; + animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +@keyframes slide-up{ + from{ + transform: translateY(2rem); + } + to{ + transform: none; + } +} + +#add_new_sheet{ + .icon{ + height: 2rem; + width: 2rem; + stroke-width: 10; + stroke: #fff; + stroke-linecap: square; + opacity: 1; + top: 50%; + transform: translateY(-50%); + position: absolute; + } + .card{ + display: flex; + align-items: center; + justify-content: center; + position: relative; + background: url(card-bg1.svg), #A7003E; + background-size: cover; + } +} + +.sheet-card{ + position: relative; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + &:active .card{ + transform: scale(0.95); + } + .card{ + border-radius: 0.8rem; + background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06); + background-size: contain; + padding: 1rem; + padding-top: 66%; + width: 100%; + transition: box-shadow 0.3s, transform 0.3s; + } + h4{ + font-family: 'Roboto', sans-serif; + font-weight: 400; + opacity: 0.9; + margin-top: 0.8rem; + text-align: center; + max-width: 90%; + } +} + +#sheet_page{ + width: 100vw; + height: 100vh; + overflow-x: hidden; +} +#sheet_heading{ + font-weight: 600; + opacity: 0.9; +} +#sheet_description{ + margin-top: 0.8rem; + opacity: 0.8; +} +#sheet_editors{ + gap: 0.5rem; + flex-wrap: wrap; + color: rgba(var(--text-color), 0.7); + font-size: 0.9rem; + .editor{ + padding: 0.4rem 0.6rem; + border-radius: 0.4rem; + background: rgba(var(--text-color), 0.06); + } +} +#toggle_details, #go_to_home{ + height: 2.4rem; + width: 2.4rem; + padding: 0.7rem; + cursor: pointer; +} +#go_to_home, #go_to_home + h5{ + transform: translateX(-1rem); + cursor: pointer; +} +#go_to_home + h5{ + font-weight: 500; + opacity: 0.9; +} +#toggle_details{ + transform: rotateX(180deg); + transition: transform 0.3s; +} +#sheet_details{ + padding: 1rem; + margin-bottom: 1rem; + .flex:first-of-type{ + margin-bottom: 1rem; + } + .flex:not(:first-of-type){ + margin-bottom: 0.3rem; + } + &.collapse{ + padding: 0.5rem 1rem; + margin-bottom: 0; + .flex{ + margin-bottom: 0; + } + #toggle_details{ + transform: none; + } + #sheet_heading{ + font-size: 1.2rem; + font-weight: 600; + opacity: 0.9; + } + #sheet_description, + #sheet_editors{ + display: none; + } + } +} +#sheet_container{ + position: relative; + overflow: auto; + max-height: 100%; + bottom: 0; + max-width: 100%; +} +table{ + position: relative; + input{ + padding: 0.4rem; + border: thin solid rgba(var(--text-color), 0.3); + font-size: 1rem; + width: 100%; + border-radius: 0.3rem; + background: rgba(var(--text-color), 0.06); + &:disabled{ + border: transparent; + } + } +} +thead{ + background-color: rgba(var(--text-color), 0.1); +} +th{ + position: sticky; + top: 0; + background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1); + text-align: left; + line-height: 1; + font-weight: 500; + z-index: 1; + padding: 1rem 0.8rem; + white-space: nowrap; + box-shadow: 0 0.2rem 0.4rem #00000020; +} +tr{ + &:nth-of-type(2n){ + background-color: rgba(var(--text-color), 0.04); + } +} +td{ + padding: 0.4rem 0.8rem; + opacity: 0.9; +} +.grade-input{ + width: 10ch; +} + +#side_bar{ + position: fixed; + transform: translateX(-100%); + background: var(--dark-shade); + .section-header{ + padding: 1rem; + margin-bottom: 0; + background: inherit; + } +} +#right{ + position: relative; + display: flex; + flex-direction: column; + overflow: auto; + max-height: 100vh; + background: rgba(var(--foreground-color), 1); + animation: slide-right 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +@keyframes slide-right{ + from{ + transform: translateX(-2rem); + } + to{ + transform: translateX(0); + } +} + +#people_container{ + overflow: auto; + max-height: calc(100vh - 3.6rem); + gap: 1.5rem; +} + +.person-card{ + display: grid; + align-items: center; + grid-template-columns: auto 1fr; + grid-template-areas: 'initials .' 'initials .'; + cursor: pointer; + padding: 0 1rem; + transition: transform 0.3s; + -webkit-tap-highlight-color: transparent; + &:active{ + transform: scale(0.95); + } + &:first-of-type{ + margin-top: 1.5rem; + } + &:last-of-type{ + margin-bottom: 2rem; + } +} +.person-initials{ + grid-area: initials; + display: flex; + justify-content: center; + height: 2.6rem; + width: 2.6rem; + font-size: 1.2rem !important; + font-weight: 500; + align-items: center; + border-radius: 2rem; + margin-right: 1rem; + text-transform: uppercase; + opacity: 1 !important; + color: var(--accent-color); + background: rgba(var(--text-color), 0.06); +} +.person-name{ + font-size: 0.9rem; + opacity: 0.9; + font-weight: 500; + text-transform: capitalize; +} +.person-flo-id{ + opacity: 0.7; + font-weight: 400; +} + +@media screen and (min-width: 640px){ + sm-popup::part(popup){ + width: 24rem; + } + #main_header{ + padding: 1.2rem 3rem; + } + #home_page, #main_header{ + grid-template-columns: 1fr 80vw 1fr; + grid-template-areas: '. main .'; + } + #main_section, + #main_header > div{ + grid-area: main; + } + + #sheets_container{ + gap: 2rem; + grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); + } + #sheet_page{ + grid-template-columns: 19rem 1fr; + } + #side_bar{ + position: relative; + transform: none; + } +} +@media (any-hover: hover){ + :root{ + scrollbar-width: thin; + } + ::-webkit-scrollbar { + width: 0.7rem; + height: 0.7rem; + } + + ::-webkit-scrollbar-track { + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb { + border-radius: 10px; + background: rgba(var(--text-color), 0.2); + &:hover{ + background: rgba(var(--text-color), 0.4); + } + } + #people_container::-webkit-scrollbar{ + width: 0.4rem; + } + #right{ + z-index: 1; + box-shadow: -0.5rem 0 0.5rem #00000010; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 7266b9e..5b13841 100644 --- a/index.html +++ b/index.html @@ -1,1058 +1,643 @@ - + + + FLO LogSheet - - - - - + + document.getElementById("user_flo_id").textContent = myFloID + reactor.dispatchEvent("startUpSuccessLog", `Downloading objectData! Please Wait...`) + //request object data from Supernode + logSheet.init().then(result => { + console.log(result) + //Render the personList and sheetList + renderPersonList(logSheet.listPersons()) + renderSheetList(logSheet.listSheets()) + //hide loading screen + hideLoader() + //display add buttons if subAdmin, else hide + if (floGlobals.subAdmins.includes(myFloID)) { + document.querySelectorAll('sub-admin-option').forEach(option => option.classList.remove('hide-completely')) + } else { + document.querySelectorAll('sub-admin-option').forEach(option => option.classList.add('hide-completely')) + } + }).catch(error => { + reactor.dispatchEvent("startUpErrorLog", `Failed to download objectData`) + notify(error, "error") + }) + }).catch(error => notify(error, "error")) + } + - - -
-

l

-

ogSheet

- - - -
- -
-
-

l

-

ogSheet

+ + + +

+
+ Cancel + OK
-
-
-
-
- SIGN IN -
-
-
-
+ + +

Some input required

+ +
+ Cancel + OK
-
-
- -
-
-
-
- - -
-
-
- -
-
-
- Add Person -
-
-
-
-
- - - -
- *Required -
- - -
-
-
-
- -
-
-
- New Sheet -
-
-
-
-
- *Required
**(Blank field) = Default subAdmin, ('Public') = Public sheet -
- - -
-
-
-
- -
-
-
Group Title By
-
- -
-
-
-
- -
- Changes needs to be saved! -
-
- Message -
- -
- -
-
-
- 👥  Persons - -
-
-
-
- -
- -
-
-

-
-

- -
*Press ENTER to save your edit.
-
-
- - -
-
- + + + +
+ + Loader + + +

Loading RanchiMall FLO LogSheet

+ Sign Out
- + + +
+

Sign In

+
+

Welcome to RanchiMall Pay.
Please enter your FLO private key to + continue.

+ + + + + +
+ + close + + + +

+ Settings +

+
+
+

My FLO address

+
+

+ + Copy + + + +
+
+ + Sign out + + +
+ + close + + + +

+ Create new sheet +

+ Create +
+ + + + +
Group Title By
+
+ +
+
+ +
+
+
+
+
RanchiMall
+

FLO LogSheet

+
+ + user + + + +
+
+
+
+
+

Recent Sheets

+ +
+
+
+
+
+ + +
+
+ + + })(); + + - + - + - + + + + - - - - - + - + + \ No newline at end of file diff --git a/old.html b/old.html new file mode 100644 index 0000000..5d4bce8 --- /dev/null +++ b/old.html @@ -0,0 +1,10895 @@ + + + + + FLO LogSheet + + + + + + + + + +
+

l

+

ogSheet

+ + + +
+ +
+
+

l

+

ogSheet

+
+
+
+
+
+ SIGN IN +
+
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+ +
+
+
+ Add Person +
+
+
+
+
+ + + +
+ *Required +
+ + +
+
+
+
+ +
+
+
+ New Sheet +
+
+
+
+
+ *Required
**(Blank field) = Default subAdmin, ('Public') = Public sheet +
+ + +
+
+
+
+ +
+
+
Group Title By
+
+ +
+
+
+
+ +
+ Changes needs to be saved! +
+
+ Message +
+ +
+ +
+
+
+ 👥  Persons + +
+
+
+
+ +
+ +
+
+

+
+

+ +
*Press ENTER to save your edit.
+
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + + From 739b3999635c979a2b68421d8c0e745efe85a645 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 17 Oct 2020 00:53:31 +0530 Subject: [PATCH 02/12] 0.0.2 --- css/main.css | 13 ++- css/main.min.css | 2 +- css/main.scss | 15 ++- index.html | 244 ++++++++++++++++++++++++++++------------------- 4 files changed, 174 insertions(+), 100 deletions(-) diff --git a/css/main.css b/css/main.css index c21243a..9155eb9 100644 --- a/css/main.css +++ b/css/main.css @@ -529,6 +529,11 @@ sm-input::part(input) { #sheet_details .flex:not(:first-of-type) { margin-bottom: 0.3rem; } +#sheet_details .flex:not(:first-of-type) .icon { + cursor: pointer; + margin-right: 1rem; + height: 100%; +} #sheet_details.collapse { padding: 0.5rem 1rem; margin-bottom: 0; @@ -567,6 +572,7 @@ table input { width: 100%; border-radius: 0.3rem; background: rgba(var(--text-color), 0.06); + color: inherit; } table input:disabled { border: transparent; @@ -710,9 +716,14 @@ td { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } - #sheet_page { + #sheet_page.toggle-side-bar { grid-template-columns: 19rem 1fr; } + #sheet_page:not(.toggle-side-bar) #side_bar { + grid-template-columns: 1fr; + position: fixed; + transform: translateX(-100%); + } #side_bar { position: relative; diff --git a/css/main.min.css b/css/main.min.css index b92784d..e0d002a 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -a,h1,h2,h3,h4,h5{font-weight:600}.align-center,.popup-header{align-items:center}.capitalize,button{text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}#confirmation h4,.bottom-margin{margin-bottom:1.5rem}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}.person-initials,button{color:var(--accent-color)}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}#main_header h4,.section-header h4{font-size:1.2rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}sm-input::part(input),sm-popup sm-textarea::part(textarea){border-radius:.4rem}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}#main_header h5,.section-header h4{opacity:.8;font-weight:500}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup sm-textarea{margin-top:1rem}sm-popup p{margin-block-end:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;transition:transform .3s;border:none;background:rgba(var(--text-color),.1);-webkit-tap-highlight-color:transparent}#main_header h5,.sheet-card h4{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;margin-top:1rem;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card,#right,#sheet_container,.sheet-card,table{position:relative}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{border-radius:.8rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_heading{font-weight:600;opacity:.9}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem}table input:disabled{border:transparent}thead{background-color:rgba(var(--text-color),.1)}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;font-weight:500;z-index:1;padding:1rem .8rem;white-space:nowrap;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar .section-header{padding:1rem;margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s;-webkit-tap-highlight-color:transparent}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}@media screen and (min-width:640px){sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page{grid-template-columns:19rem 1fr}#side_bar{position:relative;transform:none}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}} \ No newline at end of file +a,h1,h2,h3,h4,h5{font-weight:600}.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap}.copy-row .copy,.overflow-ellipsis,th{white-space:nowrap}.person-card,button{-webkit-tap-highlight-color:transparent}.capitalize,button{text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}#confirmation h4,.bottom-margin{margin-bottom:1.5rem}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}#main_header h4,.section-header h4{font-size:1.2rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}sm-input::part(input),sm-popup sm-textarea::part(textarea){border-radius:.4rem}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}#main_header h5,.section-header h4{opacity:.8;font-weight:500}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{overflow:hidden}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup sm-textarea{margin-top:1rem}sm-popup p{margin-block-end:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}#main_header h5,.sheet-card h4{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;margin-top:1rem;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card,#right,#sheet_container,.sheet-card,table{position:relative}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{border-radius:.8rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_heading{font-weight:600;opacity:.9}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}thead{background-color:rgba(var(--text-color),.1)}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;font-weight:500;z-index:1;padding:1rem .8rem;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar .section-header{padding:1rem;margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;color:var(--accent-color);background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}@media screen and (min-width:640px){sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index ef9e5cf..d7eed49 100644 --- a/css/main.scss +++ b/css/main.scss @@ -526,6 +526,11 @@ sm-input::part(input){ } .flex:not(:first-of-type){ margin-bottom: 0.3rem; + .icon{ + cursor: pointer; + margin-right: 1rem; + height: 100%; + } } &.collapse{ padding: 0.5rem 1rem; @@ -563,6 +568,7 @@ table{ width: 100%; border-radius: 0.3rem; background: rgba(var(--text-color), 0.06); + color: inherit; &:disabled{ border: transparent; } @@ -698,7 +704,14 @@ td{ grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } #sheet_page{ - grid-template-columns: 19rem 1fr; + &.toggle-side-bar{ + grid-template-columns: 19rem 1fr; + } + &:not(.toggle-side-bar) #side_bar{ + grid-template-columns: 1fr; + position: fixed; + transform: translateX(-100%); + } } #side_bar{ position: relative; diff --git a/index.html b/index.html index 5b13841..460dcf9 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,9 @@ vectorClock: {}, appObjects: {}, generalData: {}, - generalVC: {} + generalVC: {}, + // for storing signle log sheet data + currentSheet: {} }