Merge pull request #15 from chriskyfung/glitch

Improved Layout and CSS styles
fumikr · Oct 29, 2018 · 7e37050 · 7e37050
2 parents c0ac4f2 + d92f594
commit 7e37050
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "//2": "https://docs.npmjs.com/files/package.json",
   "//3": "updating this file will download and update your packages",
   "name": "coxoapp",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "A web-application for 達人圈子 members to streamline facebook-slack like clicking workflow.",
   "main": "server.js",
   "scripts": {

diff --git a/public/fb-slack-crosscheck.js b/public/fb-slack-crosscheck.js
@@ -47,7 +47,11 @@ $(document).ready(function() {
                 nLiked++;
               }
             }
-            $container.html('<h2>Found ' + objLendth + ' posts (' + nLiked + ' already liked)</h2>'+ output);
+        var hideBtn = '<!-- HIDE BUTTON --><button id="hide" value="false"></button>';
+        var h2Html = '<h2>找到 ' + objLendth + ' Fb Posts (&nbsp;' + nLiked + ' 已讚好 ' + hideBtn + ' )</h2>' ;            
+        var fbLoginBtn = '<!-- FACEBOOK LOGIN BUTTON --><div class="fb-login-button" data-max-rows="1" data-size="small" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true" onlogin="checkLoginState();"></div>';
+
+            $container.html(fbLoginBtn + h2Html + output);
             if (hasLoadedFjs) {
               FB.XFBML.parse();
             } else {
@@ -113,8 +117,8 @@ function embedFB_ui(i, url, ts, isliked) {
 
   var encodedUrl = encodeURIComponent(url);
 
-  if (isliked) { htmltxt += '<div class="fb-post liked-post">'; }
-  else { htmltxt += '<div class="fb-post">'; }
+  if (isliked) { htmltxt += '<div class="post-shell liked-post">'; }
+  else { htmltxt += '<div class="post-shell">'; }
 
   // Embed each facebook post
   var dataWidth = 500;
@@ -126,11 +130,11 @@ function embedFB_ui(i, url, ts, isliked) {
   //htmltxt += '<button class="enlarge" value="fb-iframe_' + i + '" type="submit">+</button>';
 
   // Display URL as caption
-  htmltxt += '<br><a href="' + url + '" target="_blank">在Facebook開啟</a>&nbsp;&nbsp;&nbsp;';
+  htmltxt += '<div class="shell-menu"><a href="' + url + '" target="_blank">在Facebook開啟</a>&nbsp;&nbsp;&nbsp;';
   // Display a correspending button
   htmltxt += '<button class="marks" id="markbtn' + i + '" type="submit" value="' + ts + '">標記到<i class="fa fa-slack"></i>slack</button>';
   if (isliked){ htmltxt += ' <i class="fa fa-check-circle" style="color:green"></i>'; }
-  htmltxt += '</div>';
+  htmltxt += '</div></div>';
   return htmltxt;
 };
 
@@ -168,8 +172,7 @@ $(document).on("click", "#hide", function(e){
     if ($(this).val() == 'false') {
       $('.liked-post').hide();
       $(this).val('true');
-      $(this).html('顯示Liked');
-      $(this).after(' <i class="fa fa-eye-slash"></i>');
+      $(this).html('<i class="fa fa-eye-slash"></i>');
     }
     else {
       showHideBtn();
@@ -180,6 +183,5 @@ function showHideBtn() {
   $('.liked-post').show();
   var x = $('#hide');
   x.val('false');
-  x.html('隱藏Liked');
-  x.next('i').remove();
+  x.html('<i class="fa fa-eye">');
 };
diff --git a/public/style.css b/public/style.css
@@ -58,13 +58,11 @@ button:active {
 }
 
 button#hide {
-  margin-bottom: 10px;
   padding: 5px;
   border: 1px solid lightgrey;
   font-size: 16px;
   border-radius:  20px; 
   vertical-align: bottom;
-  min-width: 112px;
 }
 
 a.button {
@@ -98,9 +96,19 @@ div.group {
   max-width: 290px;
 }
 
+div#page-description {
+  max-width: 420px; 
+}
+
+.fb-login-button {
+  margin-top: 20px;
+  top: 10px
+}
+
 form#FetchForm {
   display:inline-flex;
   background: aliceblue;
+  width:100%;
 }
 
 form#FetchForm span {
@@ -124,12 +132,19 @@ img {
 
 select#group {
   height: 31px;
-  max-width: 100px;
+  max-width: 200px;
+  width: 100%;
   min-width: 75px;
 }
 
-.fb-post { padding: 10px 0px; margin: 1.5em ; text-align: center; }
+select#num_of_days {
+   height: 31px;
+   max-width: 100px;
+}
+
+.post-shell { padding: 10px 0px; margin: 1.5em ; text-align: center; border: 1px solid #e5e5e5;}
 .liked-post { background-color: #e5e5e5; }
+.shell-menu { padding-top: 10px; }
 .fb_iframe_widget span { background-color: white; }
 
 #top-right li {
@@ -155,7 +170,7 @@ select#group {
   float: right;
   top: -55px;
   padding: 15px;
-  margin: 10px;
+  margin: 20px 10px -30px 10px;
   position:  relative;
   border: 4px solid #40d3ff;
   border-radius:  15px;
@@ -214,10 +229,14 @@ div#content {
   .fb-post { margin: 1.5em 0 ; }
   .fb_iframe_widget { margin: 0 ; }
   body { margin : 0; }
-  div#header { text-align : center;  }
+  div#header h1 { 
+    max-width: 75%;
+    text-align-last: right;
+  }
   #news-banner {
     float: unset;
     top: unset;
+    margin: -25px auto 20px auto;
   }
 
   table#HistoryTable #col1 {

diff --git a/views/changelog.html b/views/changelog.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-hk">
   <head>
-    <title>達人專用 - 品牌修煉 Click Like 助手</title>
-          <meta name="description" content="品牌修煉 Click Like 助手">
+    <title>達人專用 - 品牌修煉助手</title>
+          <meta name="description" content="達人專用 - 品牌修煉助手">
           <link rel="shortcut icon" type="image/png" href="https://cdn.glitch.com/a3976d00-9d54-4c1e-afee-614347c571f1%2Flike_1.png?1532738313140"/>
           <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

diff --git a/views/history.html b/views/history.html
@@ -10,8 +10,8 @@
 <!DOCTYPE html>
 <html lang="zh-hk">
   <head>
-    <title>達人專用 - 品牌修煉 Click Like 助手</title>
-      <meta name="description" content="品牌修煉 Click Like 助手">
+    <title>品牌修煉 粉絲分析助手</title>
+      <meta name="description" content="達人專用 - 品牌修煉 粉絲分析助手">
       <link rel="shortcut icon" type="image/png" href="https://cdn.glitch.com/a3976d00-9d54-4c1e-afee-614347c571f1%2Flike_1.png?1532738313140"/>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -66,7 +66,7 @@
       </div>
       <h1><a name="top"></a><a href="/" id="icon">
         <img src="https://cdn.glitch.com/a3976d00-9d54-4c1e-afee-614347c571f1%2Flike_1.png?1532738313140" height="64"></a>
-        品牌修煉粉絲分析助手
+        品牌修煉 - 粉絲分析助手
       </h1>
     </div>
     <!-- END OF HEADER -->
@@ -87,13 +87,13 @@ <h1><a name="top"></a><a href="/" id="icon">
      <!-- RELOAD FORM -->
     <form id="FetchForm" action="/getHistory" method="get" style="float: right;">
       <span>從&nbsp;</span>
-        <select id="group" name="group"></select>
-      <select id="num_of_days" name="num_of_days" style="height: 30px;">
+      <select id="group" name="group"></select>
+      <select id="num_of_days" name="num_of_days">
         <option value="30">過去30天</option>
         <option value="14">過去14天</option>
         <option value="7" selected>過去7天</option>
         <option value="1">過去1天</option>
-      </select>
+      </select>&nbsp;
       <input id="reload" type="submit" value="取得分析">
     </form>
     <!-- END RELOAD FORM -->

diff --git a/views/how-to-use.html b/views/how-to-use.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-hk">
   <head>
-    <title>達人專用 - 品牌修煉 Click Like 助手</title>
-          <meta name="description" content="品牌修煉 Click Like 助手">
+    <title>達人專用 - 品牌修煉助手</title>
+          <meta name="description" content="達人專用 - 品牌修煉助手">
           <link rel="shortcut icon" type="image/png" href="https://cdn.glitch.com/a3976d00-9d54-4c1e-afee-614347c571f1%2Flike_1.png?1532738313140"/>
           <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

diff --git a/views/index.html b/views/index.html
@@ -11,7 +11,7 @@
 <html lang="zh-hk">
   <head>
     <title>達人專用 - 品牌修煉助手</title>
-      <meta name="description" content="品牌修煉 Click Like 助手">
+      <meta name="description" content="達人專用 - 品牌修煉助手">
       <link rel="shortcut icon" type="image/png" href="https://cdn.glitch.com/a3976d00-9d54-4c1e-afee-614347c571f1%2Flike_1.png?1532738313140"/>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -76,7 +76,7 @@ <h1><a name="top"></a><a href="/" id="icon">
 
     <!-- SLACK CONNECT BUTTON -->
     <div id="slack" class="group">
-      <p>2. Authorize Slack App</p> 
+      <p>登入並授權連接到Slack</p> 
       <a href="https://slack.com/oauth/authorize?scope=identity.basic,identity.team&client_id=277002982913.390998994337&state=aabbCCddeeFF"><img alt="# with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x" /></a>
      <!-- <a href="/auth/slack"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" /></a>    -->    
     </div>

diff --git a/views/main.html b/views/main.html
@@ -10,8 +10,8 @@
 <!DOCTYPE html>
 <html lang="zh-hk">
   <head>
-    <title>達人專用 - 品牌修煉 Click Like 助手</title>
-      <meta name="description" content="品牌修煉 Click Like 助手">
+    <title>品牌修煉 讚好助手</title>
+      <meta name="description" content="達人專用 - 品牌修煉 讚好助手">
       <link rel="shortcut icon" type="image/png" href="https://cdn.glitch.com/a3976d00-9d54-4c1e-afee-614347c571f1%2Flike_1.png?1532738313140"/>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -62,7 +62,7 @@
       </div>
       <h1><a name="top"></a><a href="/" id="icon">
         <img src="https://cdn.glitch.com/a3976d00-9d54-4c1e-afee-614347c571f1%2Flike_1.png?1532738313140" height="64"></a>
-        品牌修煉 Click LIKE助手
+        品牌修煉 - 讚好助手
       </h1>
     </div>
     <!-- END OF HEADER -->
@@ -74,7 +74,7 @@ <h1><a name="top"></a><a href="/" id="icon">
 
 
     <!-- START BREADCRUMB -->
-    <table cellpadding="0" cellspacing="0" border="0" style="width:50%">
+    <table cellpadding="0" cellspacing="0" border="0">
       <tr>
         <td id="breadcrumb">
           <b>讚好助手</b> &nbsp;|&nbsp; <a href="/history" id="goHistory">粉絲分析助手</a>
@@ -85,7 +85,7 @@ <h1><a name="top"></a><a href="/" id="icon">
 
      <!-- RELOAD FORM -->
 
-    <br><p>品牌修煉是達人圈子專為修畢品牌修煉的成員而設的頻道，<br>張貼Facebook「個人」account的posts，互相給Like而設。</p><br>
+    <div id="page-description"><p>品牌修煉是達人圈子專為修畢品牌修煉的成員而設的頻道，張貼Facebook「個人」account的posts，互相給Like而設。</p></div>
 
     <div>
       <form id="FetchForm" action="/exec" method="get" >
@@ -97,13 +97,8 @@ <h1><a name="top"></a><a href="/" id="icon">
         <input id="reload" type="submit" value="確定">
       </form>
       <!-- END RELOAD FORM -->    
-
-      <!-- HIDE BUTTON -->
-      <button id="hide" value="false">隱藏Liked</button>
     </div>
-    <!-- FACEBOOK LOGIN BUTTON -->
-    <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true" onlogin="checkLoginState();"></div>
-
+
     <!-- OUTPUT AREA -->
     <div id="container"></div>