Added accordian style to registration view

background.html

@@ -598,27 +598,27 @@
   </script>
 
   <script type='text/x-tmpl-mustache' id='standalone'>
-    <div class='step'>
+    <div id='standalone' class='step'>
       <div class='inner'>
         <div class='step-body'>
           <div class='header'>Create your Loki Messenger Account</div>
 
-          <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
-
-          <hr>
-          <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false'>
+          <input class='form-control' type='text' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
 
-          <select id='mnemonic-language'></select>
-
-          <div class='clearfix'>
+          <h4 class='section-toggle'>Register using Mnenomic</h4>
+          <div class='standalone-mnemonic section-content'>
+            <div class='standalone-mnemonic-inputs'>
+              <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false' />
+              <select id='mnemonic-language'></select>
+            </div>
             <a class='button' id='register-mnemonic'>Register using mnenomic</a>
+            <div id='error' class='collapse'></div>
+            <div id=status></div>
+          </div>
+          <h4 class='section-toggle section-toggle-visible'>Register</h4>
+          <div class='standalone-register section-content'>
+            <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
           </div>
-          <div id='error' class='collapse'></div>
-          <div id=status></div>
-          <hr>
-        </div>
-        <div class='nav'>
-          <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
         </div>
       </div>
     </div>

js/views/standalone_registration_view.js

@@ -25,6 +25,8 @@
       });
       this.$('#error').hide();
 
+      this.$('.standalone-mnemonic').hide();
+
       window.mnemonic.get_languages().forEach(language => {
         this.$('#mnemonic-language').append(
           $('<option>', {
@@ -42,6 +44,7 @@
       'click #register': 'register',
       'click #register-mnemonic': 'registerWithMnemonic',
       'change #mnemonic': 'onChangeMnemonic',
+      'click .section-toggle': 'toggleSection',
     },
     register() {
       this.accountManager
@@ -121,5 +124,18 @@
         this.$('#number-container').addClass('invalid');
       }
     },
+    toggleSection(e) {
+      // Expand or collapse this panel
+      const $target = this.$(e.target);
+      const $next = $target.next();
+
+      // Toggle section visibility
+      $next.slideToggle('fast');
+      $target.toggleClass('section-toggle-visible');
+
+      // Hide the other sections
+      this.$('.section-toggle').not($target).removeClass('section-toggle-visible')
+      this.$('.section-content').not($next).slideUp('fast');
+    },
   });
 })();

stylesheets/_global.scss

@@ -533,7 +533,7 @@ textarea {
 
   font-size: 10pt;
   input {
-    margin-top: 1em;
+    margin-bottom: 1em;
     font-size: 12pt;
     font-family: roboto-light;
     border: 2px solid $blue;
@@ -647,10 +647,6 @@ textarea {
     max-width: 35em;
   }
 
-  #display-name {
-    margin-bottom: 12px;
-  }
-
   .inner {
     display: flex;
     align-items: center;
@@ -723,9 +719,6 @@ textarea {
     border: none;
     min-width: 300px;
     padding: 0.75em;
-    margin-top: 1em;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
     color: white;
     background: $blue;
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
@@ -806,6 +799,41 @@ textarea {
   }
 }
 
+#standalone {
+  .step-body {
+    width: 80%;
+    min-width: 100px;
+    max-width: none;
+  }
+
+  .section-toggle {
+    background: $color-gray-05;
+  }
+
+  .section-content {
+    padding: 1em 0;
+    background-color: $color-gray-02;
+  }
+
+  #status {
+    margin-top: 12px;
+  }
+
+  .standalone-mnemonic-inputs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 1em 12px;
+    margin-top: 0;
+
+    input {
+      flex: 1;
+      margin: 0;
+      margin-right: 12px;
+    }
+  }
+}
+
 //yellow border fix
 .inbox:focus {
   outline: none;