refactor: responsive split layout (#762)

ArkEcosystem · Dec 16, 2018 · f13ed13 · f13ed13
1 parent 56eb8f7
commit f13ed13
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 26 deletions.
diff --git a/src/renderer/pages/Contact/ContactNew.vue b/src/renderer/pages/Contact/ContactNew.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="ContactNew relative bg-theme-feature rounded-lg m-r-4">
-    <main class="flex flex-row h-full">
+    <main class="flex flex-col sm:flex-row h-full">
       <div
         :style="`background-image: url('${assets_loadImage(backgroundImages[session_hasDarkTheme][step])}')`"
-        class="ContactNew__instructions flex-grow background-image w-3/5"
+        class="ContactNew__instructions sm:flex-grow background-image sm:w-1/2 lg:w-3/5"
       >
-        <div class="instructions-text">
+        <div class="instructions-text my-8 sm:mt-16 sm:mb-0 mx-8 sm:mx-16 w-auto md:w-1/2">
           <h3 class="mb-2 text-theme-page-instructions-text">
             {{ $t(`PAGES.CONTACT_NEW.STEP${step}.INSTRUCTIONS.HEADER`) }}
           </h3>
@@ -16,7 +16,7 @@
         </div>
       </div>
 
-      <div class="flex-no-grow p-10 w-2/5">
+      <div class="flex-no-grow p-10 sm:w-1/2 lg:w-2/5">
         <MenuStep
           :step="step"
         >

diff --git a/src/renderer/pages/NetworkOverview.vue b/src/renderer/pages/NetworkOverview.vue
@@ -1,19 +1,22 @@
 <template>
   <div class="NetworkOverview relative bg-theme-feature rounded-lg m-r-4">
-    <main class="flex flex-row h-full">
+    <main class="flex flex-col sm:flex-row h-full">
       <div
         :style="`background-image: url('${assets_loadImage(backgroundImage)}')`"
-        class="NetworkOverview__instructions flex-grow background-image w-3/5"
+        class="NetworkOverview__instructions sm:flex-grow background-image sm:w-1/2 lg:w-3/5"
       >
-        <div class="instructions-text">
+        <div class="instructions-text my-8 sm:mt-16 sm:mb-0 mx-8 sm:mx-16 w-auto md:w-1/2">
           <h3 class="mb-2 text-theme-page-instructions-text">
             {{ $t('PAGES.NETWORK_OVERVIEW.INSTRUCTIONS.HEADER') }}
           </h3>
-          {{ $t('PAGES.NETWORK_OVERVIEW.INSTRUCTIONS.TEXT') }}
+
+          <p>
+            {{ $t('PAGES.NETWORK_OVERVIEW.INSTRUCTIONS.TEXT') }}
+          </p>
         </div>
       </div>
 
-      <div class="flex-no-grow p-10 w-2/5 overflow-y-scroll">
+      <div class="flex-no-grow p-10 sm:w-1/2 lg:w-2/5 overflow-y-scroll">
         <div
           class="NetworkOverview__network"
           @click="openAddNetwork()"

diff --git a/src/renderer/pages/Profile/ProfileEdition.vue b/src/renderer/pages/Profile/ProfileEdition.vue
@@ -1,21 +1,22 @@
 <template>
   <div class="ProfileEdition relative bg-theme-feature rounded-lg">
-    <main class="flex flex-row h-full">
+    <main class="flex flex-col sm:flex-row h-full">
       <div
         :style="`background-image: url('${assets_loadImage(backgroundImage)}')`"
-        class="ProfileEdition__instructions w-3/5 background-image"
+        class="ProfileEdition__instructions sm:flex-grow background-image sm:w-1/2 lg:w-3/5"
       >
-        <div class="instructions-text">
+        <div class="instructions-text my-8 sm:mt-16 sm:mb-0 mx-8 sm:mx-16 w-auto md:w-1/2">
           <h3 class="mb-2 text-theme-page-instructions-text">
             {{ $t(`PAGES.PROFILE_EDITION.TAB_${tab.toUpperCase()}.INSTRUCTIONS.HEADER`) }}
           </h3>
+
           <p>
             {{ $t(`PAGES.PROFILE_EDITION.TAB_${tab.toUpperCase()}.INSTRUCTIONS.TEXT`) }}
           </p>
         </div>
       </div>
 
-      <div class="w-2/5">
+      <div class="sm:w-1/2 md:w-2/5">
         <MenuTab :tab="tab">
           <MenuTabItem
             :label="$t('PAGES.PROFILE_EDITION.TAB_PROFILE.TITLE')"

diff --git a/src/renderer/pages/Profile/ProfileNew.vue b/src/renderer/pages/Profile/ProfileNew.vue
@@ -1,21 +1,22 @@
 <template>
   <div class="ProfileNew relative bg-theme-feature rounded-lg">
-    <main class="flex flex-row h-full">
+    <main class="flex flex-col sm:flex-row h-full">
       <div
         :style="`background-image: url('${assets_loadImage(backgroundImages[session_hasDarkTheme][step])}')`"
-        class="ProfileNew__instructions w-2/3 background-image"
+        class="ProfileNew__instructions sm:flex-grow background-image sm:w-1/2 lg:w-3/5"
       >
-        <div class="instructions-text">
+        <div class="instructions-text my-8 sm:mt-16 sm:mb-0 mx-8 sm:mx-16 w-auto md:w-1/2">
           <h3 class="mb-2 text-theme-page-instructions-text">
             {{ $t(`PAGES.PROFILE_NEW.STEP${step}.INSTRUCTIONS.HEADER`) }}
           </h3>
+
           <p>
             {{ $t(`PAGES.PROFILE_NEW.STEP${step}.INSTRUCTIONS.TEXT`) }}
           </p>
         </div>
       </div>
 
-      <div class="w-1/3 p-10">
+      <div class="flex-no-grow p-10 sm:w-1/2 lg:w-2/5">
         <MenuStep
           v-model="step"
         >
@@ -60,7 +61,7 @@
                   :items="bip39Languages"
                   :label="$t('COMMON.BIP39_LANGUAGE')"
                   name="bip39-language"
-                  class="flex-1 mr-2"
+                  class="flex-1"
                 />
               </div>
 

diff --git a/src/renderer/pages/Wallet/WalletImport.vue b/src/renderer/pages/Wallet/WalletImport.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="WalletImport relative bg-theme-feature rounded-lg m-r-4">
-    <main class="flex flex-row h-full">
+    <main class="flex flex-col sm:flex-row h-full">
       <div
         :style="`background-image: url('${assets_loadImage(backgroundImages[session_hasDarkTheme][step])}')`"
-        class="WalletImport__instructions flex-grow background-image w-3/5"
+        class="WalletImport__instructions sm:flex-grow background-image sm:w-1/2 lg:w-3/5"
       >
-        <div class="instructions-text">
+        <div class="instructions-text my-8 sm:mt-16 sm:mb-0 mx-8 sm:mx-16 w-auto md:w-1/2">
           <h3 class="mb-2 text-theme-page-instructions-text">
             {{ $t(`PAGES.WALLET_IMPORT.STEP${step}.INSTRUCTIONS.HEADER`) }}
           </h3>
@@ -16,7 +16,7 @@
         </div>
       </div>
 
-      <div class="flex-no-grow p-10 w-2/5">
+      <div class="flex-no-grow p-10 sm:w-1/2 lg:w-2/5">
         <MenuStep
           :step="step"
         >

diff --git a/src/renderer/pages/Wallet/WalletNew.vue b/src/renderer/pages/Wallet/WalletNew.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="WalletNew relative bg-theme-feature rounded-lg m-r-4">
-    <main class="flex flex-row h-full">
+    <main class="flex flex-col sm:flex-row h-full">
       <div
         :style="`background-image: url('${assets_loadImage(backgroundImages[session_hasDarkTheme][step])}')`"
-        class="WalletNew__instructions flex-grow background-image w-3/5"
+        class="WalletNew__instructions sm:flex-grow background-image sm:w-1/2 lg:w-3/5"
       >
-        <div class="instructions-text">
+        <div class="instructions-text my-8 sm:mt-16 sm:mb-0 mx-8 sm:mx-16 w-auto md:w-1/2">
           <h3 class="mb-2 text-theme-page-instructions-text">
             {{ $t(`PAGES.WALLET_NEW.STEP${step}.INSTRUCTIONS.HEADER`) }}
           </h3>
@@ -29,7 +29,7 @@
         </div>
       </div>
 
-      <div class="flex-no-grow p-10 w-2/5">
+      <div class="flex-no-grow p-10 sm:w-1/2 lg:w-2/5">
         <MenuStep
           :step="step"
         >