You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kylin.apache.org by bo...@apache.org on 2019/04/18 06:22:46 UTC
[kylin] branch document updated: add search box in header
This is an automated email from the ASF dual-hosted git repository.
boblu pushed a commit to branch document
in repository https://gitbox.apache.org/repos/asf/kylin.git
The following commit(s) were added to refs/heads/document by this push:
new c3ee473 add search box in header
c3ee473 is described below
commit c3ee473886be08bcf98bedcb16c0030d8b5d7aa3
Author: luguosheng1314 <55...@qq.com>
AuthorDate: Thu Apr 18 14:20:33 2019 +0800
add search box in header
---
website/_includes/header.cn.html | 12 +++++
website/_includes/header.html | 12 +++++
website/_includes/home_header.cn.html | 12 +++++
website/_includes/home_header.html | 12 +++++
website/assets/css/styles.css | 88 +++++++++++++++++++++++++++++++++++
5 files changed, 136 insertions(+)
diff --git a/website/_includes/header.cn.html b/website/_includes/header.cn.html
index 278bd11..9f5224c 100644
--- a/website/_includes/header.cn.html
+++ b/website/_includes/header.cn.html
@@ -31,6 +31,18 @@
<span class="icon-bar"></span>
</button>
<ul class="nav icon-navbar">
+ <li class="li-search">
+ <div>
+ <form target="_blank" autocomplete="false" action="https://sematext.com/opensee/big-data">
+ <input type="hidden" name="project" value="kylin">
+ <div class="form-group search-container">
+ <input type="text" autocomplete="false" class="form-control" name="q" placeholder="搜索...">
+ <div class="search fa fa-search fa-lg"></div>
+ </div>
+ </form>
+ </div>
+ <!-- <a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-search fa-lg" title="Search: @ApacheKylin" ></a> -->
+ </li>
<li><a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-twitter fa-lg" title="Twitter: @ApacheKylin" ></a></li>
<li><a href="https://github.com/apache/kylin" target="_blank" class="fa fa-github-alt fa-lg" title="Github: apache/kylin" ></a></li>
<li><a href="https://www.facebook.com/kylinio" target="_blank" class="fa fa-facebook fa-lg" title="Facebook: kylin.io" ></a></li>
diff --git a/website/_includes/header.html b/website/_includes/header.html
index 557fe12..280c2b8 100644
--- a/website/_includes/header.html
+++ b/website/_includes/header.html
@@ -34,6 +34,18 @@
<span class="icon-bar"></span>
</button>
<ul class="nav icon-navbar">
+ <li class="li-search">
+ <div>
+ <form target="_blank" autocomplete="false" action="https://sematext.com/opensee/big-data">
+ <input type="hidden" name="project" value="kylin">
+ <div class="form-group search-container">
+ <input type="text" autocomplete="false" class="form-control" name="q" placeholder="Search...">
+ <div class="search fa fa-search fa-lg"></div>
+ </div>
+ </form>
+ </div>
+ <!-- <a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-search fa-lg" title="Search: @ApacheKylin" ></a> -->
+ </li>
<li><a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-twitter fa-lg" title="Twitter: @ApacheKylin" ></a></li>
<li><a href="https://github.com/apache/kylin" target="_blank" class="fa fa-github-alt fa-lg" title="Github: apache/kylin" ></a></li>
<li><a href="https://www.facebook.com/kylinio" target="_blank" class="fa fa-facebook fa-lg" title="Facebook: kylin.io" ></a></li>
diff --git a/website/_includes/home_header.cn.html b/website/_includes/home_header.cn.html
index b5db6cc..d2ef1c4 100644
--- a/website/_includes/home_header.cn.html
+++ b/website/_includes/home_header.cn.html
@@ -30,6 +30,18 @@
<span class="icon-bar"></span>
</button>
<ul class="nav icon-navbar">
+ <li class="li-search">
+ <div>
+ <form target="_blank" autocomplete="false" action="https://sematext.com/opensee/big-data">
+ <input type="hidden" name="project" value="kylin">
+ <div class="form-group search-container">
+ <input type="text" autocomplete="false" class="form-control" name="q" placeholder="搜索...">
+ <div class="search fa fa-search fa-lg"></div>
+ </div>
+ </form>
+ </div>
+ <!-- <a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-search fa-lg" title="Search: @ApacheKylin" ></a> -->
+ </li>
<li><a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-twitter fa-lg" title="Twitter: @ApacheKylin" ></a></li>
<li><a href="https://github.com/apache/kylin" target="_blank" class="fa fa-github-alt fa-lg" title="Github: apache/kylin" ></a></li>
<li><a href="https://www.facebook.com/kylinio" target="_blank" class="fa fa-facebook fa-lg" title="Facebook: kylin.io" ></a></li>
diff --git a/website/_includes/home_header.html b/website/_includes/home_header.html
index 3025039..942a899 100644
--- a/website/_includes/home_header.html
+++ b/website/_includes/home_header.html
@@ -34,6 +34,18 @@
<span class="icon-bar"></span>
</button>
<ul class="nav icon-navbar">
+ <li class="li-search">
+ <div>
+ <form target="_blank" autocomplete="false" action="https://sematext.com/opensee/big-data">
+ <input type="hidden" name="project" value="kylin">
+ <div class="form-group search-container">
+ <input type="text" autocomplete="false" class="form-control" name="q" placeholder="Search...">
+ <div class="search fa fa-search fa-lg"></div>
+ </div>
+ </form>
+ </div>
+ <!-- <a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-search fa-lg" title="Search: @ApacheKylin" ></a> -->
+ </li>
<li><a href="https://twitter.com/apachekylin" target="_blank" class="fa fa-twitter fa-lg" title="Twitter: @ApacheKylin" ></a></li>
<li><a href="https://github.com/apache/kylin" target="_blank" class="fa fa-github-alt fa-lg" title="Github: apache/kylin" ></a></li>
<li><a href="https://www.facebook.com/kylinio" target="_blank" class="fa fa-facebook fa-lg" title="Facebook: kylin.io" ></a></li>
diff --git a/website/assets/css/styles.css b/website/assets/css/styles.css
index e75b74a3..752cb67 100644
--- a/website/assets/css/styles.css
+++ b/website/assets/css/styles.css
@@ -228,6 +228,7 @@ a:hover, a:focus {
**********************************************************************/
+
.navbar {
/*
background: #f4f4f4 url(../images/data.png) top center;
@@ -246,6 +247,90 @@ a:hover, a:focus {
margin: 0px;
}
+/* search input */
+.icon-navbar li.li-search {
+ width: auto;
+ height: 32px;
+ position: relative;
+ background:none;
+}
+.icon-navbar li.li-search:hover {
+ background:none;
+}
+.search-container {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+.search-container .form-control {
+ padding:0;
+}
+.search-container .form-control:focus {
+ padding:0 0 0 36px;
+}
+.search-container .search {
+ position: absolute;
+ /*float: left;*/
+ margin: auto;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 32px;
+ height: 32px;
+ background: #0988DE;
+ border-radius: 50%;
+ transition: all 1s;
+ z-index: 4;
+ line-height: 32px;
+ text-align: center;
+ color:#fff;
+}
+.search-container .search:hover {
+ cursor: pointer;
+}
+.search-container input {
+ position: relative;
+ margin: auto;
+ width: 32px;
+ height: 32px;
+ border-radius: 16px;
+ transition: all 0.5s;
+ opacity: 0;
+ box-shadow: none!important;
+ z-index: 5;
+ letter-spacing: 0.1em;
+ border:solid 1px #cfd8dc!important;
+}
+.search-container input:hover {
+ cursor: pointer;
+}
+.search-container input:focus {
+ width: 134px;
+ opacity: 1;
+ cursor: text;
+}
+.search-container input:focus ~ .search {
+ right: 250px;
+ background: #F3982A;
+ z-index: 6;
+}
+.search-container input:focus ~ .search::before {
+ top: 0;
+ left: 0;
+ width: 25px;
+}
+.search-container input:focus ~ .search::after {
+ top: 0;
+ left: 0;
+ width: 25px;
+ height: 2px;
+ border: none;
+ border-radius: 0%;
+}
+/* end */
+
.navbar.stick {
position: fixed;
top: 0;
@@ -1033,6 +1118,9 @@ ol.none-icon li{
.icon-navbar {
right: 80px;
}
+ ul.icon-navbar li {
+ margin-right: 2px;
+ }
.header-apache div {
margin-top: 255px;
}