Jordan/mobile

changes/jordan_mobile

@@ -0,0 +1 @@
+[Fixed] [#2766](https://github.com/cosmos/lunie/issues/2766) mobile improvements for session flow @jbibla

src/ActionModal/components/ActionModal.vue

@@ -96,8 +96,8 @@
             }}
           </div>
           <div v-else>
-            Please use Chrome, Brave, or Opera. Ledger is not supported in your
-            current browser.
+            Please use Chrome, Brave, or Opera. Ledger is not supported in this
+            browser.
           </div>
         </HardwareState>
         <form
@@ -577,6 +577,12 @@ export default {
   opacity: 0;
 }
 
+@media screen and (max-width: 767px) {
+  .tm-form-group__field {
+    width: 100%;
+  }
+}
+
 @media screen and (max-width: 1023px) {
   .row {
     flex-direction: column;

src/components/common/AppHeader.vue

@@ -88,7 +88,6 @@ export default {
   flex: 1;
   display: flex;
   flex-flow: column nowrap;
-  position: fixed;
 }
 
 .app-header .header-item {
@@ -106,15 +105,11 @@ export default {
 
 @media screen and (max-width: 1023px) {
   .app-header {
-    position: fixed;
-    top: 0;
-    left: 0;
     width: 100%;
     min-height: 0;
   }
 
   .container {
-    width: 100%;
     background: var(--app-nav);
   }
 
@@ -128,7 +123,7 @@ export default {
   }
 
   .header-item-logo {
-    height: 2rem;
+    height: 2.5rem;
   }
 }
 </style>

src/components/common/AppMenu.vue

@@ -66,15 +66,17 @@
       </router-link>
       <a
         v-if="session.signedIn"
-        class="app-menu-item sign-out-btn"
+        class="button app-menu-item"
         @click="signOut()"
       >
-        <h2 class="app-menu-title">
-          Sign out
-        </h2>
-        <i class="material-icons">
-          exit_to_app
-        </i>
+        Sign out
+      </a>
+      <a
+        v-if="!session.signedIn"
+        class="button app-menu-item"
+        @click="signIn()"
+      >
+        Sign in
       </a>
     </div>
     <ConnectedNetwork />
@@ -106,7 +108,12 @@ export default {
       noScroll.off()
     },
     signOut() {
+      this.$emit(`close`)
       this.$store.dispatch(`signOut`)
+    },
+    signIn() {
+      this.$emit(`close`)
+      this.$store.commit(`toggleSessionModal`, true)
     }
   }
 }
@@ -172,6 +179,11 @@ export default {
   font-weight: 500;
 }
 
+.app-menu .button {
+  color: var(--link);
+  font-size: var(--lg);
+}
+
 @media screen and (max-width: 1023px) {
   .app-menu {
     background: var(--app-nav);
@@ -196,7 +208,7 @@ export default {
     width: var(--width-side);
   }
 
-  .app-menu .sign-out-btn {
+  .app-menu .button {
     display: none;
   }
 }

src/components/common/TmBalance.vue

@@ -8,23 +8,25 @@
         </h2>
         <Bech32 :address="session.address || ''" />
       </div>
-      <div class="unbonded-atoms top-section">
-        <h3>Available {{ num.viewDenom(bondDenom) }}</h3>
-        <h2>{{ unbondedAtoms }}</h2>
-      </div>
-      <div v-if="rewards" class="top-section">
-        <h3>Rewards</h3>
-        <h2>{{ rewards }}</h2>
-        <TmBtn
-          id="withdraw-btn"
-          :disabled="!readyToWithdraw"
-          class="withdraw-rewards"
-          :value="connected ? 'Withdraw' : 'Connecting...'"
-          :to="''"
-          type="anchor"
-          size="sm"
-          @click.native="readyToWithdraw && onWithdrawal()"
-        />
+      <div class="second-row">
+        <div class="unbonded-atoms top-section">
+          <h3>Liquid {{ num.viewDenom(bondDenom) }}</h3>
+          <h2>{{ unbondedAtoms }}</h2>
+        </div>
+        <div v-if="rewards" class="top-section">
+          <h3>Available Rewards</h3>
+          <h2>{{ rewards }}</h2>
+          <TmBtn
+            id="withdraw-btn"
+            :disabled="!readyToWithdraw"
+            class="withdraw-rewards"
+            :value="'Withdraw'"
+            :to="''"
+            type="anchor"
+            size="sm"
+            @click.native="readyToWithdraw && onWithdrawal()"
+          />
+        </div>
       </div>
     </div>
     <slot />
@@ -132,10 +134,6 @@ export default {
   padding: 1rem 0 2.5rem 1rem;
 }
 
-.bech32-address {
-  position: absolute;
-}
-
 .total-atoms.top-section {
   padding-left: 0;
 }
@@ -146,15 +144,10 @@ export default {
 }
 
 .top-section {
-  border-right: var(--bc-dim) 2px solid;
   position: relative;
   padding: 0 2rem;
 }
 
-.top-section:last-of-type {
-  border-right: none;
-}
-
 .header-balance .top h3 {
   font-size: 14px;
   margin: 0;
@@ -171,26 +164,32 @@ export default {
 
 .withdraw-rewards {
   font-size: var(--sm);
-  position: absolute;
   font-weight: 500;
 }
 
-@media screen and (max-width: 767px) {
+.second-row {
+  flex-direction: row;
+  display: flex;
+}
+
+/* TODO fix scaling on medium sized screens and pick proper break point */
+@media screen and (max-width: 550px) {
   .header-balance {
-    padding: 0 0 1.5rem 0;
+    padding: 0;
   }
 
   .top-section {
     padding: 0.5rem 0 1rem;
-    border-right: none;
   }
 
-  .top-section:not(:first-child) {
-    margin-left: 2rem;
+  .header-balance .top {
+    flex-direction: column;
+    width: 100%;
   }
 
-  .top-section:nth-child(2) {
-    display: none;
+  .second-row {
+    width: 100%;
+    justify-content: space-between;
   }
 }
 </style>

src/components/common/TmBtn.vue

@@ -88,7 +88,6 @@ export default {
   border: none;
   background: transparent;
   text-decoration: none !important;
-  margin: 0;
   display: inline-block;
   font-size: 16px;
   height: 100%;
@@ -175,4 +174,10 @@ a {
   font-weight: normal;
   padding: 0 1rem;
 }
+
+@media screen and (max-width: 1023px) {
+  .tm-btn .tm-btn__container {
+    width: 100%;
+  }
+}
 </style>

src/components/common/TmConnectedNetwork.vue

@@ -38,7 +38,7 @@
         tm-connected-network__string--connecting
       "
     >
-      Connecting to {{ lastHeader.chain_id }}…
+      Connecting…
     </div>
   </div>
 </template>
@@ -57,9 +57,7 @@ export default {
       if (connected) {
         return `You're connected to ${lastHeader.chain_id} via ${nodeUrl}.`
       }
-      return `We're pinging nodes to try to connect you to ${
-        lastHeader.chain_id
-      }.`
+      return `Seeking connection`
     },
     blockHeight({ num, lastHeader } = this) {
       return `#` + num.prettyInt(lastHeader.height)

src/components/common/TmFormGroup.vue

@@ -49,7 +49,7 @@ export default {
 
 <style>
 .tm-form-group {
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 0;
   position: relative;
 }
 

src/components/common/TmFormMsg.vue

@@ -109,7 +109,7 @@ export default {
 
 <style>
 .tm-form-msg {
-  padding: 0.25rem 0 0;
+  padding: 0;
   display: flex;
   margin: 0 !important;
 }