diff --git a/2 b/2 new file mode 100644 index 0000000..3c880e4 --- /dev/null +++ b/2 @@ -0,0 +1,279 @@ +.pageContainer { + margin: 5% 20% 5% 20%; +} +@media (max-width: 1100px) { + .pageContainer { + margin: 2%; + } +} +/*input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +}*/ +.contactBox { + color: grey; +} +#container { + margin-top: 5%; + margin-bottom: 5%; +} +.tabText { + font-size: 2rem; +} +.mb-1 { + margin-bottom: 1rem; +} +.mb-half { + margin-bottom: 0.5rem; +} +.pb-1 { + padding-bottom: 1rem; +} +.pl-1 { + padding-left: 1rem; +} +.mr-1 { + margin-right: 1rem; +} +.ml-1 { + margin-left: 1rem; +} +.mb-2 { + margin-bottom: 2rem; +} +.mt-half { + margin-top: 0.5rem; +} +.inv-codearea { + /*width: 40%;*/ +} +.al { + text-align: left; +} +.inline-block { + display: inline-block; +} +.ar { + text-align: right; +} +.monospace { + background-color: inherit; +} +.mt-half { + margin-top: 0.5rem; +} +.table-header { + padding-left: 0.5rem; + padding-bottom: 0.2rem; +} +.inv { + overflow: hidden; +} +.inv-header { + display: flex; + justify-content: space-between; +} +.button-input { + display: flex; + justify-content: space-between; +} +/*.inv-details { + display: flex; + justify-content: space-between; +}*/ +/*.invites { + transition: max-height 1s cubic-bezier(0.550, 0.055, 0.675, 0.190); +}*/ +.inv-details { +} +.inv-row { + display: flex; + justify-content: space-between; + align-items: top; +} +/*.inv-profilearea { + align-items: top; +}*/ +.ib { + display: inline-block; +} +.inv-profileselect { + min-width: 100%; +} +.inv-table { + font-size: 0.8rem; +} +.no-lp { + padding-left: 0px; +} +.block { display: block; } +.hiding { + animation: slide-out 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards; +} +.hidden { + display: none; +} +.visible { + display: block; + /*animation: fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;*/ +} +@keyframes fade-in { + from { + opacity: 0; + visibility: hidden; + } + to { + opacity: 1; + visibility: visible; + } +} +@keyframes slide-out { + from { + opacity: 1; + visibility: visible; + } + to { + opacity: 0; + visibility: hidden; + } +} +.toggle-details { + display: none; +} +.rotated { + transform: rotate(180deg); +-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92); +-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */ +} + +.not-rotated { + transform: rotate(0deg); +-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92); +-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */ +} +.row { + display: flex; + flex-wrap: wrap; +} +.col { + flex: 1; + margin: 0.5rem; +} +@media screen and (max-width: 400px) { + .row { + flex-direction: column; + } + .col { + flex: 45%; + } +} +.input { + box-sizing: border-box; +} +.button-lg { + height: 3rem; +} +.full-width { + box-sizing: border-box; + width: 100%; + justify-content: center; +} +.unfocused { + display: none; +} +.fr { + float: right; +} +.stealth-input-hidden { + border-style: none; + --fallback-box-shadow: none; + --field-hover-box-shadow: none; + --field-focus-box-shadow: none; + padding-top: 0.1rem; + padding-bottom: 0.1rem; +} +.stealth-input { + font-size: 1rem; + padding-top: 0.1rem; + padding-bottom: 0.1rem; + margin-left: 0.5rem; + margin-right: 1rem; + max-width: 50%; + +} +.settings-section-button { + box-sizing: border-box; + width: 100%; + height: 2.5rem; + --button-filter-brightness: 90%; +} +.settings-section-button.selected { + --button-filter-brightness: 85%; + filter: brightness(85%); +} +.text-critical { + color: var(--color-critical-normal-content); +} +.aside.small { + font-size: 0.8rem; + padding: 0.8rem; +} +.setting { + margin-bottom: 0.25rem; +} +.support.large { + font-size: 1rem; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,40%); +} + +.shown { + display: block; +} + + +@keyframes modal-show { + from { + top: -5rem; + opacity: 0; + } + to { + top: 0; + opacity: 1; + } +} + +.modal-content { + position: relative; + margin: 10% auto; + width: 60%; +} + +.shown .modal-content { + animation: modal-show 0.5s cubic-bezier(.41,.47,0,.91); +} + +@media screen and (max-width: 400px) { + .modal-content { + width: 90%; + } +} diff --git a/README.md b/README.md index 97920e0..46911cf 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,17 @@ This branch is for experimenting with [a17t](https://a17t.miles.land/) to possib * [x] invites tab mockup (partially complete) * [x] accounts tab mockup * [x] settings tab mockup -* [ ] modals (may not use them at all, who knows) +* [x] modal implementation +* [ ] modal content * [ ] animations +* [ ] JS to TS, utilities +* [ ] Integration with existing code #### screenshots

invites accounts settings + settings

diff --git a/base.css b/base.css new file mode 100644 index 0000000..1d467b7 --- /dev/null +++ b/base.css @@ -0,0 +1,293 @@ +.pageContainer { + margin: 5% 20% 5% 20%; +} +@media (max-width: 1100px) { + .pageContainer { + margin: 2%; + } +} +/*input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type=number] { + -moz-appearance: textfield; +}*/ +.contactBox { + color: grey; +} +#container { + margin-top: 5%; + margin-bottom: 5%; +} +.tabText { + font-size: 2rem; +} +.mb-1 { + margin-bottom: 1rem; +} +.mb-half { + margin-bottom: 0.5rem; +} +.pb-1 { + padding-bottom: 1rem; +} +.pl-1 { + padding-left: 1rem; +} +.mr-1 { + margin-right: 1rem; +} +.ml-1 { + margin-left: 1rem; +} +.mb-2 { + margin-bottom: 2rem; +} +.mt-half { + margin-top: 0.5rem; +} +.inv-codearea { + /*width: 40%;*/ +} +.al { + text-align: left; +} +.inline-block { + display: inline-block; +} +.ar { + text-align: right; +} +.monospace { + background-color: inherit; +} +.mt-half { + margin-top: 0.5rem; +} +.table-header { + padding-left: 0.5rem; + padding-bottom: 0.2rem; +} +.inv { + overflow: hidden; +} +.inv-header { + display: flex; + justify-content: space-between; +} +.button-input { + display: flex; + justify-content: space-between; +} +/*.inv-details { + display: flex; + justify-content: space-between; +}*/ +/*.invites { + transition: max-height 1s cubic-bezier(0.550, 0.055, 0.675, 0.190); +}*/ +.inv-details { +} +.inv-row { + display: flex; + justify-content: space-between; + align-items: top; +} +/*.inv-profilearea { + align-items: top; +}*/ +.ib { + display: inline-block; +} +.inv-profileselect { + min-width: 100%; +} +.inv-table { + font-size: 0.8rem; +} +.no-lp { + padding-left: 0px; +} +.block { display: block; } +.hiding { + animation: slide-out 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards; +} +.hidden { + display: none; +} +.visible { + display: block; + /*animation: fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;*/ +} +@keyframes fade-in { + from { + opacity: 0; + visibility: hidden; + } + to { + opacity: 1; + visibility: visible; + } +} +@keyframes slide-out { + from { + opacity: 1; + visibility: visible; + } + to { + opacity: 0; + visibility: hidden; + } +} +.toggle-details { + display: none; +} +.rotated { + transform: rotate(180deg); +-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92); +-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */ +} + +.not-rotated { + transform: rotate(0deg); +-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92); +-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92); + transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */ +} +.row { + display: flex; + flex-wrap: wrap; +} +.col { + flex: 1; + margin: 0.5rem; +} +@media screen and (max-width: 400px) { + .row { + flex-direction: column; + } + .col { + flex: 45%; + } +} +.input { + box-sizing: border-box; +} + +.submit { + border: none; + outline: none; +} + +.button-lg { + height: 3rem; +} +.full-width { + box-sizing: border-box; + width: 100%; + justify-content: center; +} +.unfocused { + display: none; +} +.fr { + float: right; +} +.stealth-input-hidden { + border-style: none; + --fallback-box-shadow: none; + --field-hover-box-shadow: none; + --field-focus-box-shadow: none; + padding-top: 0.1rem; + padding-bottom: 0.1rem; +} +.stealth-input { + font-size: 1rem; + padding-top: 0.1rem; + padding-bottom: 0.1rem; + margin-left: 0.5rem; + margin-right: 1rem; + max-width: 50%; + +} +.settings-section-button { + box-sizing: border-box; + width: 100%; + height: 2.5rem; + --button-filter-brightness: 90%; +} +.settings-section-button.selected { + --button-filter-brightness: 85%; + filter: brightness(85%); +} +.text-critical { + color: var(--color-critical-normal-content); +} +.aside.small { + font-size: 0.8rem; + padding: 0.8rem; +} +.setting { + margin-bottom: 0.25rem; +} +.support.large { + font-size: 1rem; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,40%); +} + +.modal-shown { + display: block; +} + +@keyframes modal-hide { + from { opacity: 1; } + to { opacity: 0; } +} + +.modal-hiding { + animation: modal-hide 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +@keyframes modal-content-show { + from { + opacity: 0; + top: -6rem; + } + to { + opacity: 1; + top: 0; + } +} + +.modal-content { + position: relative; + margin: 10% auto; + width: 30%; +} + +.modal-shown .modal-content { + animation: modal-content-show 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +@media screen and (max-width: 400px) { + .modal-content { + width: 90%; + } +} diff --git a/images/accounts.png b/images/accounts.png index 8f70135..4fea3b4 100644 Binary files a/images/accounts.png and b/images/accounts.png differ diff --git a/images/invites.png b/images/invites.png index 299f537..ad8f28c 100644 Binary files a/images/invites.png and b/images/invites.png differ diff --git a/images/login-modal.png b/images/login-modal.png new file mode 100644 index 0000000..d82dd2c Binary files /dev/null and b/images/login-modal.png differ diff --git a/images/settings.png b/images/settings.png index e4efc90..5014922 100644 Binary files a/images/settings.png and b/images/settings.png differ diff --git a/index.html b/index.html index ff8630c..2b41dfd 100644 --- a/index.html +++ b/index.html @@ -3,247 +3,18 @@ - - {{ .lang.pageTitle }} + + jfa-no +
@@ -258,6 +29,7 @@
Logout Theme + modalTest
@@ -570,6 +342,24 @@ } } } + function modalToggle(modal) { + if (modal.classList.contains('modal-shown')) { + modal.classList.add('modal-hiding'); + let listenerFunc = function () { + modal.classList.remove('modal-shown'); + modal.classList.remove('modal-hiding'); + modal.removeEventListener(transitionEnd, listenerFunc); + }; + modal.addEventListener(transitionEnd, listenerFunc, false); + } else { + modal.classList.add('modal-shown'); + } + } + document.getElementById('modalButton').onclick = () => { modalToggle(document.getElementById('login-modal')); }; + document.getElementById('login-form').addEventListener('submit', ev => { + ev.preventDefault(); + modalToggle(document.getElementById('login-modal')); + });