Procházet zdrojové kódy

fb按鈕樣式修正

jeter20131220 před 3 roky
rodič
revize
8cfc1a4358

+ 83 - 0
desktopB/goto.js

@@ -194,4 +194,87 @@ $(window).scroll(function(){
   }
     
 });
+
+function statusChangeCallback(response) {
+  console.log('statusChangeCallback');
+  console.log(response);
+  // The response object is returned with a status field that lets the
+  // app know the current login status of the persopren.
+  // Full docs on the response object can be found in the documentation
+  // for FB.getLoginStatus().
+  if (response.status === 'connected') {
+    // Logged into your app and Facebook.
+    login(response.authResponse.accessToken);
+  } else if (response.status === 'not_authorized') {
+    // The person is logged into Facebook, but not your app.
+    console.log('The person is logged into Facebook, but not your app');
+  } else {
+    // The person is not logged into Facebook, so we're not sure if
+    // they are logged into this app or not.
+    console.log("The person is not logged into Facebook");
+  }
+}
+// This function is called when someone finishes with the Login
+// Button.  See the onlogin handler attached to it in the sample
+// code below.
+function checkLoginState() {
+  FB.getLoginStatus(function (response) {
+    statusChangeCallback(response);
+  });
+}
+window.fbAsyncInit = function () {
+  FB.init({
+    appId: '1388696554848391',
+    cookie: true,  // enable cookies to allow the server to access 
+    // the session
+    xfbml: true,  // parse social plugins on this page
+    version: 'v11.0' // use version 2.2
+  });
+};
+// Now that we've initialized the JavaScript SDK, we call
+// FB.getLoginStatus().  This function gets the state of the
+// person visiting this page and can return one of three states to
+// the callback you provide.  They can be:
+//
+// 1. Logged into your app ('connected')
+// 2. Logged into Facebook, but not your app ('not_authorized')
+// 3. Not logged into Facebook and can't tell if they are logged into
+//    your app or not.
+//
+// These three cases are handled in the callback function.
+// Load the SDK asynchronously
+(function (d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/sdk.js";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, "script", "facebook-jssdk"));
+// Here we run a very simple test of the Graph API after login is
+// successful.  See statusChangeCallback() for when this call is made.
+function loginNEMI(token) {
+  // 把 access_token 傳至後端再做資料拿取
+  console.log("Welcome!  Fetching your information.... ");
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/login", true);
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+      if (JSON.parse(xhr.responseText).status === "ok")
+        location.href = "/index";
+      else
+        alert("something wrong!");
+    }
+  };
+  xhr.send("token=" + token);
+}
+// custom fb login button
+function fb_login() {
+  // FB 第三方登入,要求公開資料與email
+  FB.login(function (response) {
+    statusChangeCallback(response);
+    console.log(response);
+  }, { scope: 'public_profile,email' });
+}
+
   

binární
desktopB/img/logo/facebook.png


+ 5 - 4
desktopB/index.html

@@ -32,7 +32,7 @@
 </head>
 
 <body id="top">
-    <script>
+    <!-- <script>
         function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
             if (response.status === 'connected') {  // 已登入
                 testAPI();
@@ -72,7 +72,7 @@
                 }
             });
         };
-    </script>
+    </script> -->
     <div class="banner container-fluid" style="padding:0; margin:0 ">
         <!-- <section id="banner"> -->
         <div class="Navigation">
@@ -286,11 +286,12 @@
                     </div>
                     <hr>
                     <div id="form-right">
-                        <div id="fb_login">
+                        <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">|</span>使用fb填入信箱與姓名</p></button>
+                        <!-- <div id="fb_login">
                             <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
                             </fb:login-button>
                             <div id="status"></div>
-                        </div>
+                        </div> -->
                         <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
                         <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
                         <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>

+ 8 - 1
desktopB/style.css

@@ -356,19 +356,26 @@ body .arrow:hover {
   border: 1px solid #3b5998;
   text-align: right;
   padding-right: 50px;
-  line-height: 50px;
+  background-size: 32px 32px;
+  border-radius: 3px;
   background-color: #fff;
   -webkit-transition: 0.3s;
   transition: 0.3s;
   position: relative;
 }
 
+#contact-us #contact-form #form-right #facebook p {
+  line-height: 40px;
+}
+
 #contact-us #contact-form #form-right #facebook img {
   position: absolute;
   left: 50px;
   top: 7px;
   width: 32px;
   height: 32px;
+  -webkit-filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+          filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 }
 
 #contact-us #contact-form #form-right #facebook:hover {

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
desktopB/style.css.map


+ 7 - 4
desktopB/style.scss

@@ -302,25 +302,28 @@ body {
             width: 29vw;
             margin-left: 5vw;
 
-            #facebook {
+            #facebook{
                 margin-top: 12px;
                 width: 29vw;
                 height: 50px;
                 border: 1px solid #3b5998;
                 text-align: right;
                 padding-right: 50px;
-                line-height: 50px;
-                // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
-                // background-size: 32px 32px;
+                background-size: 32px 32px;
+                border-radius: 3px;
                 background-color: #fff;
                 transition: 0.3s;
                 position: relative;
+               p{
+                line-height: 40px;
+               }
                 img {
                     position: absolute;
                     left: 50px;
                     top: 7px;
                     width: 32px;
                     height: 32px;
+                    filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
                 }
                 &:hover {
                     background-color: #2a4f91;

binární
mobileB/img/logo/facebook.png


+ 5 - 4
mobileB/index.html

@@ -34,7 +34,7 @@
 </head>
 
 <body id="top">
-    <script>
+    <!-- <script>
         function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
             if (response.status === 'connected') {  // 已登入
                 testAPI();
@@ -74,7 +74,7 @@
                 }
             });
         };
-    </script>
+    </script> -->
     <div class="container-fluid" style="padding:0;margin:0 ">
 
         <section id="banner-box">
@@ -230,11 +230,12 @@
                     <option class="option" value="type">異國風</option>
                 </select>
                 <input name="prefer_date" type="text" placeholder="預選裝修日期" id="date" required>
-                <div id="fb_login">
+                <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span class="sapn-line">|</span>使用fb填入信箱與姓名</p></button>
+                <!-- <div id="fb_login">
                     <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
                     </fb:login-button>
                     <div id="status"></div>
-                </div>
+                </div> -->
                 <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
                 <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
                 <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>

+ 13 - 3
mobileB/style.css

@@ -428,19 +428,23 @@ body .arrow:hover {
 
 #contact-us #contact-form #facebook p {
   position: absolute;
-  right: 30px;
+  right: 2vw;
   font-weight: normal;
+  color: #000;
 }
 
 @media screen and (max-width: 1024px) {
   #contact-us #contact-form #facebook p {
-    top: 10px;
+    top: 2vw;
+    right: 10vw;
+    font-size: 20px;
   }
 }
 
 @media screen and (max-width: 767px) {
   #contact-us #contact-form #facebook p {
-    top: 15px;
+    top: 4vw;
+    right: 1vw;
   }
 }
 
@@ -450,6 +454,8 @@ body .arrow:hover {
   top: 15px;
   width: 32px;
   height: 32px;
+  -webkit-filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
+          filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 }
 
 #contact-us #contact-form #facebook:hover {
@@ -457,6 +463,10 @@ body .arrow:hover {
   color: #fff;
 }
 
+#contact-us #contact-form #facebook:hover p {
+  color: #fff;
+}
+
 #contact-us #contact-form #facebook:hover img {
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
mobileB/style.css.map


+ 11 - 4
mobileB/style.scss

@@ -333,15 +333,18 @@ body {
             position: relative;
             p {
                 position: absolute;
-                right: 30px;
-
+                right: 2vw;
                 font-weight: normal;
+                color:#000;
                 @media screen and(max-width:$table) {
-                    top: 10px;
+                    top: 2vw;
+                    right: 10vw;
+                    font-size: 20px;
                 }
 
                 @media screen and(max-width:$moblie) {
-                    top: 15px;
+                    top: 4vw;
+                    right: 1vw;
                 }
             }
             img {
@@ -350,10 +353,14 @@ body {
                 top: 15px;
                 width: 32px;
                 height: 32px;
+                filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
             }
             &:hover {
                 background-color: #2a4f91;
                 color: #fff;
+                p{
+                    color:#fff;
+                }
                 img {
                     filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
                 }

Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů