Merge pull request #116 from TalaoDAO/screen_size

add altme + talo part for screen

docs/wallet/wallet-screen/display-screen.md → docs/wallet/wallet-screen/altme-display-screen.md

@@ -1,12 +1,12 @@
-# Discover
+# Altme - Discover
 
 Updated the 14th of October 2024.
 
-<div style={{ display: 'flex', alignItems: 'stretch', marginBottom: '20px' }}>
-  <div style={{ flex: '0 0 30%' }}>
-    <img src="/img/ssi_screen/talao_discover.png" alt="Talao Discover Screen" style={{ width: '100%', marginLeft: '50px', height: 'auto' }} />
+<div class="responsive-container">
+  <div class="responsive-image-display">
+    <img src="/img/ssi_screen/altme_discover.png" alt="Altme Discover Screen" style={{ width: '100%', height: 'auto' }} />
   </div>
-  <div style={{ flex: '0 0 70%', height: '100%', marginLeft: '150px' }}>
+  <div class="responsive-text-display">
     <p>This is the Discover screen of the wallet to access issuers.</p>
     <ol>
       <li>My Wallet: to access the main screen of the wallet with all verifiable credentials represented as cards.</li>

docs/wallet/wallet-screen/altme-settings-menu-screen.md

@@ -0,0 +1,24 @@
+# Altme - Settings
+
+Updated the 14th of October 2024.
+
+<div class="responsive-container">
+  <div class="responsive-image-setting">
+    <img src="/img/ssi_screen/altme_settings.png" alt="Talao Settings Screen" style={{ width: '100%', height: 'auto' }} />
+  </div>
+  <div class="responsive-text-setting">
+    <p>This is the Settings menu of the wallet.</p>
+    <ol>
+      <li>Wallet Profiles: allows you to select one of the embedded ecosystem profiles.</li>
+      <li>Wallet Security: allows you to change the PIN code, use biometrics, show the wallet recovery phrase, manage user consent, backup, and restore features.</li>
+      <li>Wallet Settings: allows you to change the language and themes.</li>
+      <li>Blockchain Settings : allows you to manage accounts, connected dApps & Networks</li>
+      <li>Self-Sovereign identity (SSI) : allows you to manage your Decentralized ID, backup or rester credentials</li>
+      <li>Developer Mode: allows advanced users to access raw data and protocol requests and responses.</li>
+      <li>Help center: access to the help center and FAQs</li>
+      <li>About: access the terms and conditions document.</li>
+      <li>Reset: resets the wallet, deleting all credentials and private keys with no option to undo if no backup is available.</li>
+    </ol>
+    <p>The menu may vary depending on the configuration of the wallet.</p>
+  </div>
+</div>

docs/wallet/wallet-screen/wallet-screen.md → docs/wallet/wallet-screen/altme-wallet-screen.md

@@ -1,12 +1,12 @@
-# My wallet
+# Altme - My wallet
 
 Updated the 14th of October 2024.
 
-<div style={{ display: 'flex', alignItems: 'stretch', marginBottom: '20px' }}>
-  <div style={{ flex: '0 0 30%' }}>
-    <img src="/img/ssi_screen/altme_wallet.png" alt="Altme Wallet Main Screen" style={{ width: '100%', marginLeft: '50px', height: 'auto' }} />
+<div class="responsive-container">
+  <div class="responsive-image-wallet">
+    <img src="/img/ssi_screen/altme_wallet.png" alt="Altme Wallet Main Screen" style={{ width: '100%', height: 'auto' }} />
   </div>
-  <div style={{ flex: '0 0 70%', height: '100%', marginLeft: '150px' }}>
+  <div class="responsive-text-wallet">
     <p>This is the main screen of the wallet where all verifiable credentials stored in the wallet are displayed.</p>
     <ol>
       <li>My Wallet: to access the main screen of the wallet (this screen) with all verifiable credentials represented as cards.</li>

docs/wallet/wallet-screen/talao-display-screen.md

@@ -0,0 +1,24 @@
+# Talao - Discover
+
+Updated the 14th of October 2024.
+
+<div class="responsive-container">
+  <div class="responsive-image-wallet-talao">
+    <img src="/img/ssi_screen/talao_discover.png" alt="Talao Discover Screen" style={{ width: '100%', height: 'auto' }} />
+  </div>
+  <div class="responsive-text-wallet-talao">
+    <p>This is the Discover screen of the wallet to access issuers.</p>
+    <ol>
+      <li>My Wallet: to access the main screen of the wallet with all verifiable credentials represented as cards.</li>
+      <li>Discover: to access the issuer marketplace of the wallet to get all the issuer links.</li>
+      <li>Scan: to open the wallet scanner.</li>
+      <li>Search: to search any cards from the discover</li>
+      <li>Settings: to access the settings menu.</li>
+      <li>Issuer links.</li>
+      <li>Issuer links.</li>
+      <li>Issuer links.</li>
+      <li>Settings: to access the settings menu.</li>
+    </ol>
+    <p>The issuer links depend on the configuration of the wallet.</p>
+  </div>
+</div>

docs/wallet/wallet-screen/settings-menu-screen.md → docs/wallet/wallet-screen/talao-settings-menu-screen.md

@@ -1,12 +1,12 @@
-# Settings
+# Talao - Settings
 
 Updated the 14th of October 2024.
 
-<div style={{ display: 'flex', alignItems: 'stretch', marginBottom: '20px' }}>
-  <div style={{ flex: '0 0 30%' }}>
-    <img src="/img/ssi_screen/talao_settings.png" alt="Talao Settings Screen" style={{ width: '100%', marginLeft: '50px', height: 'auto' }} />
+<div class="responsive-container">
+  <div class="responsive-image-setting">
+    <img src="/img/ssi_screen/talao_settings.png" alt="Talao Settings Screen" style={{ width: '100%', height: 'auto' }} />
   </div>
-  <div style={{ flex: '0 0 70%', height: '100%', marginLeft: '150px' }}>
+  <div class="responsive-text-setting">
     <p>This is the Settings menu of the wallet.</p>
     <ol>
       <li>Wallet Profiles: allows you to select one of the embedded ecosystem profiles.</li>

docs/wallet/wallet-screen/talao-wallet-screen.md

@@ -0,0 +1,23 @@
+# Talao - My wallet
+
+Updated the 14th of October 2024.
+
+<div class="responsive-container">
+  <div class="responsive-image-wallet-talao">
+    <img src="/img/ssi_screen/talao_wallet.png" alt="Altme Wallet Main Screen" style={{ width: '100%', height: 'auto' }} />
+  </div>
+  <div class="responsive-text-wallet-talao">
+    <p>This is the main screen of the wallet where all verifiable credentials stored in the wallet are displayed.</p>
+    <ol>
+      <li>My Wallet: to access the main screen of the wallet (this screen) with all verifiable credentials represented as cards.</li>
+      <li>Discover: to access the issuer marketplace of the wallet to get all the issuer links.</li>
+      <li>Scan button.</li>
+      <li>Search: to search any cards from the discover</li>
+      <li>Settings: to access the settings menu.</li>
+      <li>Your contact information</li>
+      <li>Add cards: to access the issuer marketplace.</li>
+      <li>Add cards: to access the issuer marketplace.</li>
+      <li>Settings: to access the settings menu.</li>
+    </ol>
+  </div>
+</div>

sidebars.ts

@@ -22,9 +22,12 @@ const sidebars: SidebarsConfig = {
           type: 'category',
           label: 'Wallet Screens',
           items: [
-            'wallet/wallet-screen/wallet-screen',
-            'wallet/wallet-screen/display-screen',
-            'wallet/wallet-screen/settings-menu-screen',
+            'wallet/wallet-screen/altme-wallet-screen', // add nft + coins
+            'wallet/wallet-screen/altme-display-screen',
+            'wallet/wallet-screen/altme-settings-menu-screen', 
+            'wallet/wallet-screen/talao-wallet-screen',
+            'wallet/wallet-screen/talao-display-screen',
+            'wallet/wallet-screen/talao-settings-menu-screen',
           ],
         },
         'wallet/wallet-profiles',

src/css/custom.css

@@ -28,3 +28,146 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* Custom responsive styles for wallet screens */
+.responsive-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  /* flex-direction: row-reverse; */
+}
+
+/* DIsplay screen */
+
+.responsive-image-display {
+  flex: 0 0 30%;
+  margin-left: 20px;
+  margin-bottom: 80px;
+}
+
+.responsive-text-display {
+  flex: 0 0 70%;
+  margin-left: 20px;
+}
+
+/* Mobile: 50% image, 50% text */
+@media (max-width: 768px) {
+  .responsive-image-display {
+    flex: 0 0 60%;
+    margin-left: -5px;
+    margin-bottom: 900px;
+  }
+
+  .responsive-text-display {
+    flex: 0 0 40%;
+    margin-left: 10px;
+  }
+}
+
+/* Settings screen */
+
+.responsive-image-setting {
+  flex: 0 0 30%;
+  margin-left: 20px;
+  margin-bottom: -55px;
+}
+
+.responsive-text-setting {
+  flex: 0 0 70%;
+  margin-left: 20px;
+}
+
+/* Mobile: 50% image, 50% text */
+@media (max-width: 768px) {
+  .responsive-image-setting {
+    flex: 0 0 60%;
+    margin-left: -5px;
+    margin-bottom: 1340px;
+  }
+
+  .responsive-text-setting {
+    flex: 0 0 40%;
+    margin-left: 10px;
+  }
+}
+
+/* Wallet screen */
+
+.responsive-image-wallet {
+  flex: 0 0 30%;
+  /* margin-left: 20px; */
+  margin-bottom: 170px;
+}
+
+.responsive-text-wallet {
+  flex: 0 0 70%;
+  margin-left: 20px;
+}
+
+/* Mobile: 50% image, 50% text */
+@media (max-width: 768px) {
+  .responsive-image-wallet {
+    flex: 0 0 60%;
+    margin-left: -5px;
+    margin-bottom: 1600px;
+  }
+
+  .responsive-text-wallet {
+    flex: 0 0 40%;
+    margin-left: 7px;
+  }
+}
+
+/* Talao discover  */
+
+.responsive-image-display-talao {
+  flex: 0 0 30%;
+  margin-left: 20px;
+  margin-bottom: -20px;
+}
+
+.responsive-text-display-talao {
+  flex: 0 0 70%;
+  margin-left: 20px;
+}
+
+/* Mobile: 50% image, 50% text */
+@media (max-width: 768px) {
+  .responsive-image-display-talao {
+    flex: 0 0 60%;
+    margin-left: -5px;
+    margin-bottom: 650px;
+  }
+
+  .responsive-text-display-talao {
+    flex: 0 0 40%;
+    margin-left: 10px;
+  }
+}
+
+/* Talao wallet  */
+
+.responsive-image-wallet-talao {
+  flex: 0 0 30%;
+  margin-left: 20px;
+  margin-bottom: -20px;
+}
+
+.responsive-text-wallet-talao {
+  flex: 0 0 70%;
+  margin-left: 20px;
+}
+
+/* Mobile: 50% image, 50% text */
+@media (max-width: 768px) {
+  .responsive-image-wallet-talao {
+    flex: 0 0 60%;
+    margin-left: -5px;
+    margin-bottom: 750px;
+  }
+
+  .responsive-text-wallet-talao {
+    flex: 0 0 40%;
+    margin-left: 10px;
+  }
+}