From c27d7c2c5e7d1ed33efe8f2baf184f36b04617db Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Thu, 23 Jun 2016 17:42:05 -0300
Subject: [PATCH] Fix create/join/import form UI for switches and wide screen

---
 public/views/create.html    |  26 ++--
 public/views/import.html    | 281 ++++++++++++++++++------------------
 public/views/join.html      |   2 +-
 src/css/ionic-migration.css |   5 +-
 src/sass/main.scss          |   4 +
 5 files changed, 162 insertions(+), 156 deletions(-)

diff --git a/public/views/create.html b/public/views/create.html
index 2a009d75a..1680bb34b 100644
--- a/public/views/create.html
+++ b/public/views/create.html
@@ -8,10 +8,10 @@
 
   <div class="create-tab small-only-text-center" ng-hide="create.hideTabs">
     <div class="row">
-      <div class="tab-container small-6 medium-3 large-2" ng-class="{'selected': totalCopayers == 1}">
+      <div class="tab-container small-6 medium-6 large-6" ng-class="{'selected': totalCopayers == 1}">
         <a href ng-click="create.setTotalCopayers(1)" translate>Personal Wallet</a>
       </div>
-      <div class="tab-container small-6 medium-3 large-2" ng-class="{'selected': totalCopayers != 1}">
+      <div class="tab-container small-6 medium-6 large-6" ng-class="{'selected': totalCopayers != 1}">
         <a href ng-click="create.setTotalCopayers(3)" translate>Shared Wallet</a>
       </div>
     </div>
@@ -58,7 +58,7 @@
         </div>
 
         <div class="m10t oh" ng-init="hideAdv=true">
-          <a class="button outline light-gray expand tiny" ng-click="hideAdv=!hideAdv">
+          <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
             <i class="fi-widget m3r"></i>
             <span translate ng-hide="!hideAdv">Show advanced options</span>
             <span translate ng-hide="hideAdv">Hide advanced options</span>
@@ -134,19 +134,17 @@
               </label>
             </div>
             <div class="oh" ng-show="create.seedSourceId == 'new'">
-              <label for="network-name" class="dbi">
-                <span>Testnet</span>
-                <ion-toggle ng-model="testnetEnabled" toggle-class="toggle-balanced" class="bct">
-                </ion-toggle>
-              </label>
+              <ion-toggle ng-model="testnetEnabled" toggle-class="toggle-balanced" class="bct">
+                <span class="toggle-label">Testnet</span>
+              </ion-toggle>
             </div>
             <div class="oh" ng-show="create.seedSourceId == 'new'">
-              <label for="single-address" class="dbi">
-                <span class="db" translate>Single Address Wallet</span>
-                <small translate>For audit purposes</small>
-                <ion-toggle ng-model="singleAddressEnabled" toggle-class="toggle-balanced" class="bct">
-                </ion-toggle>
-              </label>
+              <ion-toggle ng-model="singleAddressEnabled" toggle-class="toggle-balanced" class="bct">
+                <div class="toggle-label">
+                  <span class="db" translate>Single Address Wallet</span>
+                  <small translate>For audit purposes</small>
+                </div>
+              </ion-toggle>
             </div>
           </div> <!-- columns -->
         </div> <!-- advanced -->
diff --git a/public/views/import.html b/public/views/import.html
index 8bca7f724..5ce29400c 100644
--- a/public/views/import.html
+++ b/public/views/import.html
@@ -21,93 +21,98 @@
 
   <div ng-show="type == '12' ">
 
-  <div class="box-notification m20b" ng-show="import.importErr">
-      <div ng-show="import.importErr" class="text-warning">
-        <div class="m10 text-bold" translate>Could not access the wallet at the server. Please check:</div>
-        <ul class="size-12">
-          <li translate>The password of the recovery phrase (if set)
-          </li>
-          <li translate>The derivation path
-          </li>
-          <li translate>The wallet service URL
-        </ul>
-        <div class="m15l">
-          <span translate>NOTE: To import a wallet from a 3rd party software, please go to Add Wallet &gt; Create Wallet, and specify the Recovery Phrase there.</span><br>
-        </div>
-      </div>
-  </div>
-
-  <div class="box-notification m20b" ng-show="import.error">
-    <div class="text-warning">
-        {{import.error|translate}}
-    </div>
-  </div>
-
-    <div class="row large-12 columns">
-        <form name="importForm12" ng-submit="import.importMnemonic(importForm12)" novalidate>
-
-          <div >
-            <label for="words">
-              <span translate>Type the Recovery Phrase (usually 12 words)</span>:
-            </label>
-            <textarea class="form-control" name="words" ng-model="import.words" rows="2" autocapitalize="off" spellcheck="false"></textarea>
-          </div>
-
-          <div class="m10t oh" ng-init="hideAdv=true">
-            <a class="button outline light-gray expand tiny" ng-click="hideAdv=!hideAdv">
-              <i class="fi-widget m3r"></i>
-              <span translate ng-hide="!hideAdv">Show advanced options</span>
-              <span translate ng-hide="hideAdv">Hide advanced options</span>
-              <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-              <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-            </a>
-          </div>
-          <div ng-hide="hideAdv" class="row">
-            <div class="large-12 columns">
-
-              <label for="passphrase" class="oh"><span translate>Password</span>  <small translate>The Wallet Recovery Phrase could require a password to be imported</small>
-              <div class="input">
-                <input type="password" class="form-control" placeholder="{{'Password'|translate}}"
-                name="passphrase" ng-model="import.passphrase">
-              </div>
-              </label>
-
-              <div>
-                <label class="oh"><span translate>Derivation Path</span> <small translate>BIP32 path for address derivation</small>
-                  <input type="text" class="form-control" name="derivationPath" ng-model="derivationPath">
-                </label>
-              </div>
-
-              <label  for="bws" class="oh">
-                <span>Wallet Service URL</span>
-                <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
-              </label>
-
-              <div class="oh">
-                <label for="network-name" class="dbi">
-                  <span>Testnet</span>
-                  <ion-toggle ng-model="testnetEnabled" ng-change="setDerivationPath()" toggle-class="toggle-balanced" class="bct">
-                  </ion-toggle>
-                </label>
+    <div class="row">
+      <div class="large-12 columns">
+        <div class="box-notification m20b" ng-show="import.importErr">
+            <div ng-show="import.importErr" class="text-warning">
+              <div class="m10 text-bold" translate>Could not access the wallet at the server. Please check:</div>
+              <ul class="size-12">
+                <li translate>The password of the recovery phrase (if set)
+                </li>
+                <li translate>The derivation path
+                </li>
+                <li translate>The wallet service URL
+              </ul>
+              <div class="m15l">
+                <span translate>NOTE: To import a wallet from a 3rd party software, please go to Add Wallet &gt; Create Wallet, and specify the Recovery Phrase there.</span><br>
               </div>
             </div>
-          </div>
+        </div>
 
-          <button translate type="submit" class="button round expand black m10t"
-            ng-disabled="importForm12.$invalid ">
-            Import
-          </button>
-        </form>
+        <div class="box-notification m20b" ng-show="import.error">
+          <div class="text-warning">
+              {{import.error|translate}}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+          <form name="importForm12" ng-submit="import.importMnemonic(importForm12)" novalidate>
+
+            <div >
+              <label for="words">
+                <span translate>Type the Recovery Phrase (usually 12 words)</span>:
+              </label>
+              <textarea class="form-control" name="words" ng-model="import.words" rows="2" autocapitalize="off" spellcheck="false"></textarea>
+            </div>
+
+            <div class="m10t oh" ng-init="hideAdv=true">
+              <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
+                <i class="fi-widget m3r"></i>
+                <span translate ng-hide="!hideAdv">Show advanced options</span>
+                <span translate ng-hide="hideAdv">Hide advanced options</span>
+                <i ng-if="hideAdv" class="icon-arrow-down4"></i>
+                <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
+              </a>
+            </div>
+            <div ng-hide="hideAdv" class="row">
+              <div class="large-12 columns">
+
+                <label for="passphrase" class="oh"><span translate>Password</span>  <small translate>The Wallet Recovery Phrase could require a password to be imported</small>
+                <div class="input">
+                  <input type="password" class="form-control" placeholder="{{'Password'|translate}}"
+                  name="passphrase" ng-model="import.passphrase">
+                </div>
+                </label>
+
+                <div>
+                  <label class="oh"><span translate>Derivation Path</span> <small translate>BIP32 path for address derivation</small>
+                    <input type="text" class="form-control" name="derivationPath" ng-model="derivationPath">
+                  </label>
+                </div>
+
+                <label  for="bws" class="oh">
+                  <span>Wallet Service URL</span>
+                  <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
+                </label>
+
+                <div class="oh">
+                  <ion-toggle ng-model="testnetEnabled" ng-change="setDerivationPath()" toggle-class="toggle-balanced" class="bct">
+                    <span class="toggle-label">Testnet</span>
+                  </ion-toggle>
+                </div>
+              </div>
+            </div>
+
+            <button translate type="submit" class="button round expand black m10t"
+              ng-disabled="importForm12.$invalid ">
+              Import
+            </button>
+          </form>
+      </div>
     </div>
   </div>
 
   <div ng-show="type == 'file' ">
-    <div class="box-notification m20b" ng-show="import.error">
-      <span class="text-warning size-14">
-        {{import.error|translate}}
-      </span>
-    </div>
-    <div class="row large-12 columns">
+    <div class="row">
+      <div class="large-12 columns">
+        <div class="box-notification m20b" ng-show="import.error">
+          <span class="text-warning size-14">
+            {{import.error|translate}}
+          </span>
+        </div>
         <form name="importForm" ng-submit="import.importBlob(importForm)" novalidate>
 
           <div ng-show="!index.isSafari && !index.isCordova" class="line-b m10b">
@@ -133,7 +138,7 @@
           </div>
 
           <div class="m10t oh" ng-init="hideAdv=true">
-            <a class="button outline light-gray expand tiny" ng-click="hideAdv=!hideAdv">
+            <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
               <i class="fi-widget m3r"></i>
               <span translate ng-hide="!hideAdv">Show advanced options</span>
               <span translate ng-hide="hideAdv">Hide advanced options</span>
@@ -156,72 +161,74 @@
             Import backup
           </button>
         </form>
+      </div>
     </div>
   </div>
 
   <div ng-show="type == 'hwWallet'">
-    <div class="box-notification m20b" ng-show="import.error">
-      <span class="text-warning size-14">
-        {{import.error|translate}}
-      </span>
-    </div>
-    <div class="row large-12 columns">
+    <div class="row">
+      <div class="large-12 columns">
+        <div class="box-notification m20b" ng-show="import.error">
+          <span class="text-warning size-14">
+            {{import.error|translate}}
+          </span>
+        </div>
 
-      <form name="importForm3" ng-submit="import.importHW(importForm3)" novalidate>
-        <div class="large-12 columns">
-          <div ng-show="!import.seedOptions[0]">
-            <span translate>No hardware wallets supported on this device</span>
-          </div>
-          <div ng-show="import.seedOptions[0]">
-            <div>
-              <label><span translate>Wallet Recovery Phrase</span>
-              <select class="m10t" ng-model="seedSource"
-                ng-options="seed as seed.label for seed in import.seedOptions"
-                ng-change="import.setSeedSource()">
-              </select>
-              </label>
+        <form name="importForm3" ng-submit="import.importHW(importForm3)" novalidate>
+          <div class="large-12 columns">
+            <div ng-show="!import.seedOptions[0]">
+              <span translate>No hardware wallets supported on this device</span>
             </div>
-
-            <div ng-show="import.seedSourceId == 'trezor' || import.seedSourceId == 'ledger'">
-
-              <label class="oh"><span translate>Account Number</span>
-                <input type="number" id="account" ng-model="account">
-              </label>
-            </div>
-
-            <div ng-show="import.seedSourceId == 'trezor'">
-              <label for="isMultisig" class="oh">
-                <span translate>Shared Wallet</span>
-                <switch id="isMultisig" name="isMultisig" ng-model="isMultisig" class="green right m5t m10b"></switch>
-              </label>
-            </div>
-
-            <div class="m10t oh" ng-init="hideAdv=true">
-              <a class="button outline light-gray expand tiny" ng-click="hideAdv=!hideAdv">
-                <i class="fi-widget m3r"></i>
-                <span translate ng-hide="!hideAdv">Show advanced options</span>
-                <span translate ng-hide="hideAdv">Hide advanced options</span>
-                <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-                <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-              </a>
-            </div>
-            <div ng-hide="hideAdv" class="row">
-              <div class="large-12 columns">
-
-                <label  for="bws" class="oh">
-                  <span>Wallet Service URL</span>
-                  <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
+            <div ng-show="import.seedOptions[0]">
+              <div>
+                <label><span translate>Wallet Recovery Phrase</span>
+                <select class="m10t" ng-model="seedSource"
+                  ng-options="seed as seed.label for seed in import.seedOptions"
+                  ng-change="import.setSeedSource()">
+                </select>
                 </label>
               </div>
-            </div>
+
+              <div ng-show="import.seedSourceId == 'trezor' || import.seedSourceId == 'ledger'">
+
+                <label class="oh"><span translate>Account Number</span>
+                  <input type="number" id="account" ng-model="account">
+                </label>
+              </div>
+
+              <div class="oh" ng-show="import.seedSourceId == 'trezor'">
+                <ion-toggle ng-model="isMultisig" toggle-class="toggle-balanced" class="bct">
+                  <span class="toggle-label" translate>Shared Wallet</span>
+                </ion-toggle>
+              </div>
+
+              <div class="m10t oh" ng-init="hideAdv=true">
+                <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
+                  <i class="fi-widget m3r"></i>
+                  <span translate ng-hide="!hideAdv">Show advanced options</span>
+                  <span translate ng-hide="hideAdv">Hide advanced options</span>
+                  <i ng-if="hideAdv" class="icon-arrow-down4"></i>
+                  <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
+                </a>
+              </div>
+              <div ng-hide="hideAdv" class="row">
+                <div class="large-12 columns">
+
+                  <label  for="bws" class="oh">
+                    <span>Wallet Service URL</span>
+                    <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
+                  </label>
+                </div>
+              </div>
 
 
-            <button translate type="submit" class="button round expand black">
-              Import
-            </button>
-          </div> <!-- seedoptions show -->
-        </div>
-      </form>
+              <button translate type="submit" class="button round expand black">
+                Import
+              </button>
+            </div> <!-- seedoptions show -->
+          </div>
+        </form>
+      </div>
     </div>
   </div>
 </div>
diff --git a/public/views/join.html b/public/views/join.html
index c9e537578..c0b82078e 100644
--- a/public/views/join.html
+++ b/public/views/join.html
@@ -44,7 +44,7 @@
         </div>
 
         <div class="m10t oh" ng-init="hideAdv=true">
-          <a class="button outline light-gray expand tiny" ng-click="hideAdv=!hideAdv">
+          <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
             <i class="fi-widget m3r"></i>
             <span translate ng-hide="!hideAdv">Show advanced options</span>
             <span translate ng-hide="hideAdv">Hide advanced options</span>
diff --git a/src/css/ionic-migration.css b/src/css/ionic-migration.css
index 759829a57..bd311bb26 100644
--- a/src/css/ionic-migration.css
+++ b/src/css/ionic-migration.css
@@ -61,10 +61,7 @@
 
 .bct {
  	background-color: transparent !important;
-	margin-top: -25px;
-  padding-bottom: 30px;
-	right: -24px !important;
-	border-width: 0px;
+  margin-bottom: 15px !important;
 }
 
 .r0 {
diff --git a/src/sass/main.scss b/src/sass/main.scss
index ff27ef318..b72e4d541 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -715,6 +715,10 @@ ul.manage li {
   padding: 10px;
 }
 
+.p10i {
+  padding: 10px !important;
+}
+
 .p10b {
   padding-bottom: 10px;
 }