From 21b655b45529a86533cfc736074961a2ac9918b8 Mon Sep 17 00:00:00 2001 From: KimlikDAO-bot Date: Sun, 2 Feb 2025 15:13:03 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A0=20Rework=20carousels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +- components/kpass/KPass.css | 6 +- components/kpass/KPass.jsx | 127 +++++++++--------- components/phone/Phone.css | 23 ++-- components/phone/Phone.jsx | 30 ++--- components/subscribe/Subscribe.jsx | 8 +- .../wallet/ba\304\237lant\304\261lar.jsx" | 2 - landing/hero/Gallery.jsx | 16 +-- landing/network/KPassDemo.jsx | 8 +- lib | 2 +- 10 files changed, 110 insertions(+), 115 deletions(-) diff --git a/README.md b/README.md index 46be742..8d291e6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@

 KimlikDAO dApp

- -# 👋 Introduction +## 👋 Introduction diff --git a/components/kpass/KPass.css b/components/kpass/KPass.css index 0a837c9..6b487fa 100644 --- a/components/kpass/KPass.css +++ b/components/kpass/KPass.css @@ -13,10 +13,7 @@ z-index: 4; } -/** @export */ -.Flipped {} - -#Root.Flipped { +#Root.InfoSide { transform: rotateY(-180deg); } @@ -39,6 +36,7 @@ /** * KPass info side + * @export */ #InfoSide { transform: rotateY(180deg); diff --git a/components/kpass/KPass.jsx b/components/kpass/KPass.jsx index 3f4dbd4..c3afe33 100644 --- a/components/kpass/KPass.jsx +++ b/components/kpass/KPass.jsx @@ -11,30 +11,6 @@ import dom from "/lib/util/dom"; /** @const {!HTMLDivElement} */ const Cards = dom.div(Css.Cards); -/** @const {!HTMLDivElement} */ -const Root = dom.div(Css.Root); -/** @const {!HTMLButtonElement} */ -const LeftButton = dom.button(Css.LeftButton); -/** @const {!HTMLButtonElement} */ -const RightButton = dom.button(Css.RightButton); -/** @const {!HTMLDivElement} */ -const Nav = dom.div(Css.Nav); - -/** @type {number} */ -let Kart = 0; -/** @type {number} */ -let KartSayısı = 3; - -/** - * @param {number} yeniKart - */ -const kartDeğiştir = (yeniKart) => { - /** @const {number} */ - const width = Cards.children[0].getBoundingClientRect().width; - Cards.style.transform = `translate3d(-${yeniKart * width}px,0,0)`; - Kart = yeniKart; - /** @type {!Text} */(Nav.childNodes[1]).data = `${Kart + 1} / ${KartSayısı}`; -} const LeftArrow = () => @@ -46,51 +22,76 @@ const RightArrow = () => ; +const Logo = () => ( + + + + + + +); + +const Nav = () => { + /** @const {!HTMLButtonElement} */ + const LeftButton = dom.button(Css.LeftButton); + /** @const {!HTMLButtonElement} */ + const RightButton = dom.button(Css.RightButton); + /** @type {number} */ + let currentCard = 0; + /** @type {number} */ + let totalCards = 3; + + const nextCard = () => { + currentCard = (currentCard + 1) % totalCards; + dom.slideCard(Cards, currentCard); + /** @type {!Text} */(LeftButton.nextSibling).data = `${currentCard + 1} / ${totalCards}`; + } + const prevCard = () => { + currentCard += totalCards - 2; + nextCard(); + } + return ( +
+ + + + 1 / {totalCards} + + + +
+ ); +} + /** * @param {{ style: string, piggyback: string }=} props * @return {Promise} */ -const KPass = ({ style, piggyback }) => ( - - - -
- - - - - - - - - - - - - - -
- -); +const KPass = ({ style, piggyback }) => { + /** @const {!HTMLDivElement} */ + KPass.Root = dom.div(Css.Root); + return ( + + + +
+ + + + + + + + +
+ + ); +} /** @enum {string} */ KPass.Css = Css; -/** @const {!HTMLDivElement} */ -KPass.Root = Root; - KPass.RightArrow = RightArrow; KPass.LeftArrow = LeftArrow; @@ -98,11 +99,11 @@ KPass.LeftArrow = LeftArrow; /** * @param {boolean} infoSide */ -KPass.showSide = (infoSide) => Root.classList.toggle(Css.Flipped, infoSide); +KPass.showSide = (infoSide) => KPass.Root.classList.toggle(Css.InfoSide, infoSide); /** * @return {boolean} */ -KPass.flip = () => Root.classList.toggle(Css.Flipped); +KPass.flip = () => KPass.Root.classList.toggle(Css.InfoSide); export default KPass; diff --git a/components/phone/Phone.css b/components/phone/Phone.css index da29383..e9fc556 100644 --- a/components/phone/Phone.css +++ b/components/phone/Phone.css @@ -120,18 +120,12 @@ } /** @export */ -.Göster {} +.Show {} -#KPassDialogButton.Göster { - transform: none; +#Kutu.Show { opacity: 1; } -#Kutu.Göster { - opacity: 1; -} - - /** * Bilgi kutusu metni */ @@ -191,10 +185,17 @@ height: 30px; justify-content: center; left: 15px; - opacity: 0; + opacity: 1; position: absolute; transform-style: preserve-3d; - transform: scale(0.5) translate3d(80px, 80px, -250px); transition: transform 1s ease-in-out, opacity 1s ease-in-out; width: 250px; -} \ No newline at end of file +} + +#KPassDialogButton.Hide { + transform: scale(0.5) translate3d(80px, 80px, -250px); + opacity: 0; +} + +/** @export */ +.Hide {} \ No newline at end of file diff --git a/components/phone/Phone.jsx b/components/phone/Phone.jsx index 0a903d4..2ea8a34 100644 --- a/components/phone/Phone.jsx +++ b/components/phone/Phone.jsx @@ -18,8 +18,8 @@ const Evet = dom.div(Css.Evet); /** @enum {string} */ const JointCss = css` - /** @export */ .BüyükGöster {} - #${KPass.Css.Root}.BüyükGöster { + /** @export */ .ShowInWallet {} + #${KPass.Css.Root}.ShowInWallet { transform: translate(65px, 120px) scale(0.5); } #KPassDialog > #${KPass.Css.Root} { @@ -58,7 +58,7 @@ const Phone = ({ withKPass = true, noshow }) => ( {withKPass && } - {{ en: "Hide", tr: "Gizle" }} + {{ en: "Hide", tr: "Gizle" }}
@@ -84,7 +84,7 @@ Phone.showDialog = (prompt, buttonText) => { if (buttonText) Evet.innerText = buttonText; Kutu.style.opacity = ""; Kutu.firstElementChild.innerText = prompt; - Kutu.classList.add(Css.Göster); + Kutu.classList.add(Css.Show); AnaEkran.classList.add(Css.Blurred); KPassDialog.classList.add(Css.Blurred); } @@ -93,7 +93,7 @@ Phone.showDialog = (prompt, buttonText) => { * Closes the dialog box on the phone. */ Phone.closeDialog = () => { - Kutu.classList.remove(Css.Göster); + Kutu.classList.remove(Css.Show); KPassDialog.classList.remove(Css.Blurred); AnaEkran.classList.remove(Css.Blurred); } @@ -101,28 +101,28 @@ Phone.closeDialog = () => { /** * Displays the NFT mock in the phone image. * - * @param {boolean} büyükGöster NFT tek başına kutuda gösterilsin mi. - * @param {boolean} bilgiYüzü NFT'nin bilgi yüzü gösterilsin. + * @param {boolean} showInDialog NFT tek başına kutuda gösterilsin mi. + * @param {boolean} infoSide NFT'nin bilgi yüzü gösterilsin. */ -Phone.nftGöster = (büyükGöster, bilgiYüzü) => { - KPass.showSide(bilgiYüzü); +Phone.showKPass = (showInDialog, infoSide) => { + KPass.showSide(infoSide); const showSide = () => { - KPass.showSide(bilgiYüzü); - KPassDialogButton.innerText = bilgiYüzü + KPass.showSide(infoSide); + KPassDialogButton.innerText = infoSide ? dom.i18n({ tr: "Gizle", en: "Encrypt" }) : dom.i18n({ tr: "Aç", en: "Decrypt" }); } showSide(); - if (büyükGöster) { + if (showInDialog) { KPass.Root.style.opacity = ""; dom.göster(KPassDialogButton); KPassDialogButton.onclick ||= () => { - bilgiYüzü = !bilgiYüzü; + infoSide = !infoSide; showSide(); } } - KPass.Root.classList.toggle(JointCss.BüyükGöster, !büyükGöster); - KPassDialogButton.classList.toggle(Css.Göster, büyükGöster); + KPass.Root.classList.toggle(JointCss.ShowInWallet, !showInDialog); + KPassDialogButton.classList.toggle(Css.Hide, !showInDialog); } /** @enum {string} */ diff --git a/components/subscribe/Subscribe.jsx b/components/subscribe/Subscribe.jsx index 03453b0..0f21ab2 100644 --- a/components/subscribe/Subscribe.jsx +++ b/components/subscribe/Subscribe.jsx @@ -7,14 +7,14 @@ import dom from "/lib/util/dom"; * @return {Promise} */ const Subscribe = ({ id }) => { - /** @type {?string} */ - let subscribeText; /** @const {!HTMLFormElement} */ const Root = dom.form(id); /** @const {!HTMLInputElement} */ const input = /** @type {!HTMLInputElement} */(Root.firstElementChild); /** @const {!Element} */ const button = /** @type {!Element} */(input.nextElementSibling); + /** @type {?string} */ + let subscribeText; /** * @param {boolean} success @@ -29,8 +29,8 @@ const Subscribe = ({ id }) => { } /** - * Email bültene kayıt isteğini gönderir ve sonucu görüntülemek için - * {@link update()}'yi çağırır. + * Sends the email newsletter registration request and calls + * {@link update()} to update the UI. * * @param {Event=} event */ diff --git "a/components/wallet/ba\304\237lant\304\261lar.jsx" "b/components/wallet/ba\304\237lant\304\261lar.jsx" index 31b3556..8ba5587 100644 --- "a/components/wallet/ba\304\237lant\304\261lar.jsx" +++ "b/components/wallet/ba\304\237lant\304\261lar.jsx" @@ -5,8 +5,6 @@ import { ChainId, ChainGroup } from "/lib/crosschain/chains"; import { Provider } from "/lib/crosschain/provider"; import { Image } from "/lib/kastro/image"; - - /** @const {!Object} */ const Bağlantılar = { [BağlantıAdı.Core]: CoreBağlantısı, diff --git a/landing/hero/Gallery.jsx b/landing/hero/Gallery.jsx index ae16a36..2139985 100644 --- a/landing/hero/Gallery.jsx +++ b/landing/hero/Gallery.jsx @@ -1,6 +1,6 @@ import Css from "./Gallery.css"; -import SharedCss from "/components/sharedCss/SharedCss.css"; import Phone from "/components/phone/Phone"; +import SharedCss from "/components/sharedCss/SharedCss.css"; import dom from "/lib/util/dom"; /** @const {!HTMLDivElement} */ @@ -19,11 +19,7 @@ let SlideTimer = 0; * Slides the cards to the correct position based on the `SelectedCard` value. * Uses CSS transform to smoothly animate the horizontal movement. */ -const slideCards = () => { - /** @const {number} */ - const width = CardSlider.firstElementChild.getBoundingClientRect().width; - CardSlider.style.transform = `translate3d(-${SelectedCard * width}px,0,0)`; -} +const slideCards = () => dom.slideCard(CardSlider, SelectedCard); /** * @param {number} newCard @@ -31,7 +27,7 @@ const slideCards = () => { const selectCard = (newCard) => { if (SelectedCard > 2 && newCard == 0) newCard = 4; const newCardModulo = newCard % 4; - Phone.nftGöster(newCardModulo <= 1, !newCardModulo); + Phone.showKPass(newCardModulo <= 1, !newCardModulo); newCardModulo === 3 ? Phone.showDialog(dom.i18n({ en: "The connected app would like to access your contact info section of your KPass.", @@ -81,11 +77,13 @@ const Gallery = () => { startGalleryTimer(); } } - Phone.nftGöster(true, true); // Cüzdan.adresDeğişince((adres) => Telefon.adresGir(adres)); CardSlider.appendChild(CardSlider.firstElementChild.cloneNode(true)); CardSlider.style.width = "500%"; - dom.run(startGalleryTimer); + dom.schedule(() => { + startGalleryTimer(); + Phone.showKPass(true, true); + }, 100); return (
diff --git a/landing/network/KPassDemo.jsx b/landing/network/KPassDemo.jsx index ddcb9c9..9f33dff 100644 --- a/landing/network/KPassDemo.jsx +++ b/landing/network/KPassDemo.jsx @@ -17,10 +17,10 @@ const KPassDemo = () => (
-
{{ tr: "Doğum yeri", en: "City of birth" }}
-
{{ tr: "İstanbul", en: "Palo Alto, CA" }}
-
{{ tr: "Cinsiyet", en: "Gender" }}
-
{{ tr: "K", en: "F" }}
+
{{ en: "City of birth", tr: "Doğum yeri" }}
+
{{ en: "Palo Alto, CA", tr: "İstanbul" }}
+
{{ en: "Gender", tr: "Cinsiyet" }}
+
{{ en: "F", tr: "K" }}
diff --git a/lib b/lib index e19ea08..4f1c51a 160000 --- a/lib +++ b/lib @@ -1 +1 @@ -Subproject commit e19ea08ab519cabce5bea4e5fac00660b41e54ca +Subproject commit 4f1c51a60f3c62d54915269e40453de5692963b3