adjust login page OAuth buttons

lib/views/login.html

@@ -146,51 +146,73 @@
         {% endif %}
 
         {% if passportGoogleLoginEnabled() || passportGitHubLoginEnabled() || passportFacebookLoginEnabled() || passportTwitterLoginEnabled() %}
-        <hr>
-        <div class="input-group m-t-15 m-b-10 mx-auto d-flex flex-row justify-content-around flex-wrap">
-          {% if passportGoogleLoginEnabled() %}
-          <form role="form" action="/passport/google" method="get">
-            <button type="submit" class="fcbtn btn btn-1b btn-login-oauth" id="google">
-              <span class="btn-label"><i class="fa fa-google"></i></span>
-              {{ t('Sign in') }}
-            </button>
-            <div class="small text-right">by Google Account</div>
-          </form>
-          {% endif %}
-          {% if passportGitHubLoginEnabled() %}
-          <form role="form" action="/passport/github" method="get">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="fcbtn btn btn-1b btn-login-oauth" id="github">
-              <span class="btn-label"><i class="fa fa-github"></i></span>
-              {{ t('Sign in') }}
-            </button>
-            <div class="small text-right">by Github Account</div>
-          </form>
-          {% endif %}
-          {% if passportFacebookLoginEnabled() %}
-          <form role="form" action="/passport/facebook" method="get">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="fcbtn btn btn-1b btn-login-oauth" id="facebook">
-              <span class="btn-label"><i class="fa fa-facebook"></i></span>
-              {{ t('Sign in') }}
-            </button>
-            <div class="small text-right">by Facebook Account</div>
-          </form>
-          {% endif %}
-          {% if passportTwitterLoginEnabled() %}
-          <form role="form" action="/passport/twitter" method="get">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="fcbtn btn btn-1b btn-login-oauth" id="twitter">
-              <span class="btn-label"><i class="fa fa-twitter"></i></span>
-              {{ t('Sign in') }}
-            </button>
-            <div class="small text-right">by Twitter Account</div>
-          </form>
-          {% endif %}
+        <hr class="mb-1">
+        <div class="collapse collapse-oauth">
+          <div class="spacer"></div>
+          <div class="collapse-anchor d-flex flex-row justify-content-between flex-wrap">
+            {% if passportGoogleLoginEnabled() %}
+            <form role="form" action="/passport/google" class="d-inline-flex flex-column">
+              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-flex" id="google">
+                <span class="btn-label"><i class="fa fa-google"></i></span>
+                <span class="btn-label-text">{{ t('Sign in') }}</span>
+              </button>
+              <div class="small text-right">by Google Account</div>
+            </form>
+            {% endif %}
+            {% if passportGitHubLoginEnabled() %}
+            <form role="form" action="/passport/github" class="d-inline-flex flex-column">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-inline-flex" id="github">
+                <span class="btn-label"><i class="fa fa-github"></i></span>
+                <span class="btn-label-text">{{ t('Sign in') }}</span>
+              </button>
+              <div class="small text-right">by Github Account</div>
+            </form>
+            {% endif %}
+            {% if passportFacebookLoginEnabled() %}
+            <form role="form" action="/passport/facebook" class="d-inline-flex flex-column">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-inline-flex" id="facebook">
+                <span class="btn-label"><i class="fa fa-facebook"></i></span>
+                <span class="btn-label-text">{{ t('Sign in') }}</span>
+              </button>
+              <div class="small text-right">by Facebook Account</div>
+            </form>
+            {% endif %}
+            {% if passportTwitterLoginEnabled() %}
+            <form role="form" action="/passport/twitter" class="d-inline-flex flex-column">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-inline-flex" id="twitter">
+                <span class="btn-label"><i class="fa fa-twitter"></i></span>
+                <span class="btn-label-text">{{ t('Sign in') }}</span>
+              </button>
+              <div class="small text-right">by Twitter Account</div>
+            </form>
+            {% endif %}
+          </div>{# ./d-flex flex-row flex-wrap #}
+          <div class="spacer"></div>
+        </div>
+        <hr class="mt-2 mb-0">
+        <div class="text-center">
+          <button class="collapse-anchor btn btn-xs btn-collapse-oauth mb-3" data-toggle="collapse" data-parent="#accordion" href="#collapse-oauth" aria-expanded="true" aria-controls="collapseOne">
+            OAuth
+          </button>
         </div>
+        {% else %}
+        <hr>
         {% endif %}
 
-        <hr>
+
+        <script>
+          $(".collapse-anchor").hover(
+            function() {
+              $('.collapse-oauth').collapse('show');
+            },
+            function() {
+              $('.collapse-oauth').collapse('hide');
+            }
+          );
+        </script>
 
         <div class="row">
           <div class="col-xs-12 text-right">

resource/styles/scss/_login.scss

@@ -98,8 +98,26 @@
     }
   }
 
+  .collapse-oauth {
+    overflow: hidden;
+    &:not(.in) {
+      height: 0;
+      padding: 0 !important;
+    }
+
+    form {
+      flex: 1;
+      @media(min-width: 350px) {
+        flex: 0.49;
+      }
+    }
+    .spacer {
+      height: 10px;
+    }
+  }
+
   // button style
-  .btn-login.fcbtn, .btn-register.fcbtn, .btn-login-oauth.fcbtn {
+  .btn-login.fcbtn, .btn-register.fcbtn, .btn-login-oauth.fcbtn, .btn-collapse-oauth {
     border: none;
     color: white;
     background-color: rgba(lighten(black, 20%), 0.4);
@@ -112,6 +130,12 @@
       border: none;
     }
   }
+  .btn-login-oauth {
+    flex: 1;
+    .btn-label-text {
+      flex: 1;
+    }
+  }
   .btn-login.fcbtn {
     .btn-label {
       background-color: rgba($brand-danger, 0.4);