feat(core): show vip tooltip at home page

#20

modules/core/client/app/trans-string-en.js

@@ -102,8 +102,11 @@
       TITLE_SEARCH: 'Torrents and forum global search',
       MORE_HELP_RULES: 'More rules and help contents',
       MORE_GO_FORUM: 'Go to forum home',
+      MORE_VIP_RULES_AND_RIGHT: 'more vip rules and right here',
       SEARCH_TYPE_TORRENTS: 'Torrents',
-      SEARCH_TYPE_FORUM: 'Forum'
+      SEARCH_TYPE_FORUM: 'Forum',
+      BTN_JOIN_VIP: 'Join as vip »',
+      VIP_TOOLTIP: ' - Full free download, higher upload ratio. \n - Exempt from regular system assessment tasks. \n - Exclusive resource download area. \n - Exclusive forum discussion area. \n - H&R download warning immunity.'
     },
 
     //element title/alt

modules/core/client/app/trans-string-zh.js

@@ -102,8 +102,11 @@
       TITLE_SEARCH: '种子以及论坛关键字搜索',
       MORE_HELP_RULES: '更多规则以及帮助内容',
       MORE_GO_FORUM: '去论坛逛一下',
+      MORE_VIP_RULES_AND_RIGHT: '更多 vip 规则及权益请看这里',
       SEARCH_TYPE_TORRENTS: '搜索种子',
-      SEARCH_TYPE_FORUM: '搜索论坛'
+      SEARCH_TYPE_FORUM: '搜索论坛',
+      BTN_JOIN_VIP: '加入 vip 会员 »',
+      VIP_TOOLTIP: ' - 全免费下载以及更高的上传加成. \n - 免于定期的系统考评任务. \n - 专属的资源下载区域. \n - 专属的论坛讨论区. \n - 对 H&R 下载警告免疫.'
     },
 
     //element title/alt

modules/core/client/controllers/home.client.controller.js

@@ -123,7 +123,17 @@
           vm.homeNewestTorrents = items.rows;
         }
       });
-
     };
+
+    /**
+     * getVipTooltip
+     * @returns {*}
+     */
+    vm.getVipTooltip = function () {
+      var ts = $translate.instant('HOME.VIP_TOOLTIP');
+
+      return marked(ts, {sanitize: true});
+    };
+
   }
 }());

modules/core/client/less/btn-size.less

@@ -131,6 +131,27 @@
     }
 }
 
+.btn-mt-o-success-light {
+    color: @brand-success;
+    border: solid 1px @brand-success;
+    &:focus {
+        color: @brand-success;
+        border-color: @brand-success;
+    }
+}
+
+.btn-mt-success-light {
+    color: #fff;
+    background-color: @brand-success;
+    border: solid 1px @brand-success;
+    &:hover,
+    &:focus {
+        color: #333;
+        background-color: @brand-success;
+        border-color: @brand-success;
+    }
+}
+
 .btn-mt-o-primary {
     color: @brand-primary;
     border: solid 1px @brand-primary;

modules/core/client/less/home.less

@@ -4,18 +4,19 @@
     margin: 20px 0;
     color: #4d4e53;
     .list-items {
-        background-color: #fafbfc;
-        box-shadow: 2px 2px 2px rgba(0, 0, 0, .075);
+        //background-color: #fafbfc;
+        //box-shadow: 2px 2px 2px rgba(0, 0, 0, .075);
         margin-top: -25px;
         padding: 20px 10px;
         border-top: solid 2px @mt-base-color;
         p {
-            &:before {
-                content: '+';
-                display: inline-block;
-                color: #ff6600;
-                margin-right: 2px;
-            }
+            margin: 0 0 5px;
+            //&:before {
+            //    content: '+';
+            //    display: inline-block;
+            //    color: #ff6600;
+            //    margin-right: 2px;
+            //}
             &:last-child {
                 margin-bottom: 1px !important;
             }
@@ -47,29 +48,95 @@
 }
 
 .home_vip_info {
-    padding: 20px;
-    min-height: 300px;
     background-color: #f7f7f7;
+    .vip-content {
+        @media (min-width: @screen-sm-min) {
+            display: table;
+            width: 100%;
+        }
+        .vip-left {
+            position: relative;
+            overflow: hidden;
+            @media (min-width: @screen-sm-min) {
+                display: table-cell;
+                float: none;
+                vertical-align: bottom;
+            }
+            @media (max-width: @screen-xs-max) {
+                display: none;
+            }
+            .vip-img {
+                max-width: 250px;
+                position: absolute;
+                bottom: -40px;
+                left: 60px;
+                transform: rotateZ(15deg);
+            }
+        }
+        .vip-right {
+            padding-bottom: 20px;
+            .vip-title {
+                color: @brand-success;
+                margin-bottom: 20px;
+                small {
+                    color: @brand-success;
+                }
+            }
+            .vip-tooltip {
+                color: #343231;
+                ul {
+                    @media (max-width: @screen-xs-max) {
+                        margin-bottom: 20px !important;
+                    }
+                    padding-left: 0;
+                    li {
+                        padding-left: 0;
+                        list-style: none;
+                        &:before {
+                            content: '+';
+                            display: inline-block;
+                            color: @brand-success;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+            .vip-more {
+                a {
+                    color: @brand-success;
+                    &:hover {
+                        color: @state-success-text;
+                    }
+                }
+            }
+            @media (min-width: @screen-sm-min) {
+                display: table-cell;
+                float: none;
+                vertical-align: bottom;
+            }
+        }
+    }
 }
 
 .home_global_search {
     min-height: 150px;
+    background-color: #f7f7f7;
     background-image: url("/modules/core/client/img/default-background.jpg");
-    background-position: 0 center;
+    background-position: 0 -200px;
     background-repeat: no-repeat;
     background-size: cover;
     .search-panel {
         min-height: 150px;
         padding: 20px;
         background-color: #666;
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: rgba(0, 0, 0, 0.4);
 
         color: #eee;
         text-shadow: 1px 1px 3px rgba(0, 1, 0, 0.5), 0 0 9px rgba(0, 1, 0, 0.2);
 
         .search-title {
             font-size: 2.2em;
-            font-weight: 300;
+            font-weight: 400;
         }
         .search-group {
             max-width: 40em;

modules/core/client/views/home.client.view.html

@@ -26,7 +26,7 @@
                         </button>
                     </div>
                 </div>
-                <div class="search-type text-center margin-top-20">
+                <div class="search-type text-center margin-top-10">
                     <label class="radio-inline">
                         <input type="radio" name="inlineRadioOptions" id="inlineRadio_torrents" value="torrents"
                                ng-model="vm.searchType"> {{'HOME.SEARCH_TYPE_TORRENTS' | translate}}
@@ -83,8 +83,25 @@
     </div>
 
     <div class="home_vip_info">
-        <div class="container text-center">
-            <div class="">
+        <div class="container">
+            <div class="row vip-content">
+                <div class="col-sm-6 col-md-5 col-md-offset-1 vip-left">
+                    <img class="vip-img img-thumbnail img-responsive" src="http://image.tmdb.org/t/p/w500/rsZmANIzl7Ut27uBFWGz1tgPWVs.jpg">
+                </div>
+                <div class="col-sm-6 col-md-5 col-md-offset-1 vip-right">
+                    <div class="vip-title">
+                        <h3>{{'VIP.VIP_TITLE' | translate}}
+                            <small>{{'VIP.VIP_SUB_TITLE' | translate}}</small>
+                        </h3>
+                    </div>
+                    <div class="vip-tooltip" ng-bind-html="vm.getVipTooltip();"></div>
+                    <div class="vip-more margin-bottom-10">
+                        <a ui-sref="vip.rules">{{'HOME.MORE_VIP_RULES_AND_RIGHT' | translate}}</a>
+                    </div>
+                    <a ui-sref="vip.donate" class="btn btn-width-150 btn-mt-success-light" mt-scale-by-mouse="{scale: 1.2, duration: '.5s'}">
+                        {{'HOME.BTN_JOIN_VIP' | translate}}
+                    </a>
+                </div>
             </div>
         </div>
     </div>