From ebec2c053728b7f18bbbb1c5b80e180f1a17a26b Mon Sep 17 00:00:00 2001
From: Raccoon <raccoon@hackmd.io>
Date: Tue, 19 May 2020 14:42:47 +0800
Subject: [PATCH] fix: replace btn-social with btn-login-method

avoid to use btn-social, some AD block will delete
the DOM with btn-social class.

fixed #1491

Signed-off-by: Raccoon <raccoon@hackmd.io>
---
 public/css/cover.css                 | 20 ++++++++++++++++++--
 public/views/shared/signin-modal.ejs | 20 ++++++++++----------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/public/css/cover.css b/public/css/cover.css
index 4693c9c3..ca9fa866 100644
--- a/public/css/cover.css
+++ b/public/css/cover.css
@@ -397,7 +397,23 @@ select {
     color: #fff;
 }
 
-a.btn.btn-social > i.oauth-icon {
+/* add btn-login-method replaced of btn-social, to avoid ad block delete the login button */
+.btn-login-method {
+  padding-left: 61px;
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.btn-login-method.btn-lg :first-child {
+  line-height:45px;
+  width:45px;
+  font-size:1.8em;
+}
+.btn-login-method>:first-child {position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
+
+a.btn.btn-login-method > i.oauth-icon {
     display: inline-flex;
     height: 45px;
     width: 45px;
@@ -405,7 +421,7 @@ a.btn.btn-social > i.oauth-icon {
     padding: 6px;
 }
 
-a.btn.btn-social > i.oauth-icon > img {
+a.btn.btn-login-method > i.oauth-icon > img {
     width: 100%;
     height: 100%;
     line-height: inherit;
diff --git a/public/views/shared/signin-modal.ejs b/public/views/shared/signin-modal.ejs
index c088209d..c209ef43 100644
--- a/public/views/shared/signin-modal.ejs
+++ b/public/views/shared/signin-modal.ejs
@@ -9,52 +9,52 @@
             </div>
             <div class="modal-body" style="text-align: center;">
                 <% if (authProviders.facebook) { %>
-                <a href="<%- serverURL %>/auth/facebook" class="btn btn-lg btn-block btn-social btn-facebook">
+                <a href="<%- serverURL %>/auth/facebook" class="btn btn-lg btn-block btn-login-method btn-facebook">
                     <i class="fa fa-facebook"></i> <%= __('Sign in via %s', 'Facebook') %>
                 </a>
                 <% } %>
                 <% if (authProviders.twitter) { %>
-                <a href="<%- serverURL %>/auth/twitter" class="btn btn-lg btn-block btn-social btn-twitter">
+                <a href="<%- serverURL %>/auth/twitter" class="btn btn-lg btn-block btn-login-method btn-twitter">
                     <i class="fa fa-twitter"></i> <%= __('Sign in via %s', 'Twitter') %>
                 </a>
                 <% } %>
                 <% if (authProviders.github) { %>
-                <a href="<%- serverURL %>/auth/github" class="btn btn-lg btn-block btn-social btn-github">
+                <a href="<%- serverURL %>/auth/github" class="btn btn-lg btn-block btn-login-method btn-github">
                     <i class="fa fa-github"></i> <%= __('Sign in via %s', 'GitHub') %>
                 </a>
                 <% } %>
                 <% if (authProviders.bitbucket) { %>
-                <a href="<%- serverURL %>/auth/bitbucket" class="btn btn-lg btn-block btn-social btn-bitbucket">
+                <a href="<%- serverURL %>/auth/bitbucket" class="btn btn-lg btn-block btn-login-method btn-bitbucket">
                     <i class="fa fa-bitbucket"></i> <%= __('Sign in via %s', 'Bitbucket') %>
                 </a>
                 <% } %>
                 <% if (authProviders.gitlab) { %>
-                <a href="<%- serverURL %>/auth/gitlab" class="btn btn-lg btn-block btn-social btn-gitlab">
+                <a href="<%- serverURL %>/auth/gitlab" class="btn btn-lg btn-block btn-login-method btn-gitlab">
                     <i class="fa fa-gitlab"></i> <%= __('Sign in via %s', 'GitLab') %>
                 </a>
                 <% } %>
                 <% if (authProviders.mattermost) { %>
-                <a href="<%- serverURL %>/auth/mattermost" class="btn btn-lg btn-block btn-social btn-mattermost">
+                <a href="<%- serverURL %>/auth/mattermost" class="btn btn-lg btn-block btn-login-method btn-mattermost">
                     <i class="oauth-icon"><img alt="mattermost-logo" src="<%- serverURL %>/images/mattermost-logo.svg" /></i> <%= __('Sign in via %s', 'Mattermost') %>
                 </a>
                 <% } %>
                 <% if (authProviders.dropbox) { %>
-                <a href="<%- serverURL %>/auth/dropbox" class="btn btn-lg btn-block btn-social btn-dropbox">
+                <a href="<%- serverURL %>/auth/dropbox" class="btn btn-lg btn-block btn-login-method btn-dropbox">
                     <i class="fa fa-dropbox"></i> <%= __('Sign in via %s', 'Dropbox') %>
                 </a>
                 <% } %>
                 <% if (authProviders.google) { %>
-                <a href="<%- serverURL %>/auth/google" class="btn btn-lg btn-block btn-social btn-google">
+                <a href="<%- serverURL %>/auth/google" class="btn btn-lg btn-block btn-login-method btn-google">
                     <i class="fa fa-google"></i> <%= __('Sign in via %s', 'Google') %>
                 </a>
                 <% } %>
                 <% if (authProviders.saml) { %>
-                <a href="<%- serverURL %>/auth/saml" class="btn btn-lg btn-block btn-social btn-success">
+                <a href="<%- serverURL %>/auth/saml" class="btn btn-lg btn-block btn-login-method btn-success">
                     <i class="fa fa-users"></i> <%= __('Sign in via %s', 'SAML') %>
                 </a>
                 <% } %>
                 <% if (authProviders.oauth2) { %>
-                <a href="<%- serverURL %>/auth/oauth2" class="btn btn-lg btn-block btn-social btn-soundcloud">
+                <a href="<%- serverURL %>/auth/oauth2" class="btn btn-lg btn-block btn-login-method btn-soundcloud">
                     <i class="fa fa-mail-forward"></i> <%= __('Sign in via %s', authProviders.oauth2ProviderName || 'OAuth2') %>
                 </a>
                 <% } %>