added latest wmt release which includes updates to search and syntax …

…highlighting
oneops · Apr 6, 2018 · b8a8f2e · b8a8f2e
1 parent 22c85c5
commit b8a8f2e
Show file tree

Hide file tree

Showing 9 changed files with 490 additions and 145 deletions.
diff --git a/_includes/wmt/footer.html b/_includes/wmt/footer.html
@@ -11,6 +11,9 @@
                 2011 - {{ 'now' | date: "%Y" }} &copy;
                 Walmart Inc. All Rights Reserved.
               </p>
+              <p>
+                <a href="{{site.source_url}}" target="_blank">Contribute to the site</a>.
+              </p>
             </div>
             <div class="col-md-4">
               <img src="{{site.context}}/assets/wmt/img/logos/walmart-labs-wht.png" class="img-responsive" width="150px" align="right" style="padding-top:10px;"/>

diff --git a/_includes/wmt/header.html b/_includes/wmt/header.html
@@ -50,9 +50,7 @@
                   </li>
                 {% endfor %}
                 {% if site.display-search-in-header == true %}
-                  <li>
                   {% include wmt/search.html %}
-                  </li>
                 {% endif %}
               </ul>
             </div>

diff --git a/_includes/wmt/html-head.html b/_includes/wmt/html-head.html
@@ -12,7 +12,8 @@
     <meta property="twitter:account_id" content="{{site.twitterId}}" />
     <!--  WMT resources -->
     <link rel="stylesheet" href="{{site.context}}/assets/wmt/plugins/bootstrap/css/bootstrap.css" />
-    <link rel="stylesheet" href="{{site.context}}/assets/wmt/css/syntax.css" />
+    <!--<link rel="stylesheet" href="{{site.context}}/assets/wmt/css/syntax.css" />-->
+    <link rel="stylesheet" href="{{site.context}}/assets/wmt/plugins/prism/prism.css" />
     <link rel="stylesheet" href="{{site.context}}/assets/wmt/css/wmt.css" />
     <link rel="stylesheet" href="{{site.context}}/assets/wmt/plugins/font-awesome/css/font-awesome.css" />
 
@@ -24,6 +25,7 @@
     <script type="text/javascript" src="{{site.context}}/assets/wmt/js/jquery-3.1.1.min.js"></script>
     <script type="text/javascript" src="{{site.context}}/assets/wmt/js/modernizr.custom.js"></script>
     <script type="text/javascript" src="{{site.context}}/assets/wmt/js/atom-read.js"></script>
+    <script type="text/javascript" src="{{site.context}}/assets/wmt/plugins/prism/prism.js"></script>
 
     <!--[if lt IE 9]>
         <script src="{{site.context}}/assets/wmt/js/respond.js"></script>

diff --git a/_includes/wmt/search.html b/_includes/wmt/search.html
@@ -1,16 +1,24 @@
-<div id="search-container">
-  <div id="search-input-bar">
-    <input type="text" id="search-input" placeholder="Search..." />
-    <!--<i class="fa fa-search icon-search"></i>-->
+<li class="dropdown" id="search">
+  <a id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="fa fa-search"></i>
+  </a>
+  <div class="dropdown-menu" aria-labelledby="dropdownSearch">
+    <div id="search-container">
+      <div id="search-input-bar">
+        <input type="text" id="search-input" name="search" placeholder="Search..." />
+        <!--<i class="fa fa-search icon-search"></i>-->
+      </div>
+      <div id="results-container"></div>
+    </div>
   </div>
-  <div id="results-container"></div>
-</div>
+</li>
+
 <script type="text/javascript" src="{{site.context}}/assets/wmt/js/simple-jekyll-search.js"></script>
 <script>
 SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('results-container'),
-  json: '{{site.url}}/search.json',
+  json: '{{site.context}}/search.json',
   limit: 30
 })
 </script>
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -11,51 +11,10 @@
     margin-bottom: 50px;
     padding: 0px; }
 
-    /* ------------------------------ SEARCH STYLES ------------------------------ */
-
-    #search-container { margin-top: 15px; }
-
-#search-input {
-  color: #999;
-  font-size: 14px;
-  height: 36px;
-  outline: none;
-  padding: 0px 10px;
-}
-#search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-  color: #ccc;
-}
-#search-input::-moz-placeholder { /* Firefox 19+ */
-  color: #ccc;
-}
-#search-input:-ms-input-placeholder { /* IE 10+ */
-  color: #ccc;
-}
-#search-input:-moz-placeholder { /* Firefox 18- */
-  color: #ccc;
-}
-
-#results-container {
-  z-index: 200;
-  position: absolute;
-  top: 55px;
-  right: 0px;
-  border: 0px solid #eaeaea ;
-  background: #fff;
-  padding: 0px;
-  width: 100%;
-}
-
-#results-container li { font-size:14px;padding:5px 0px; }
-
-.icon-search {
-  color: #ffc220 ;
-  margin-left: 5px;
+.copyright h3 a {
+  opacity: 0.6;
 }
 
-@media (max-width: 767px) {
-    #search-container {
-        margin-left: 30px;
-    width: 100%;
-    }
+.copyright a {
+  opacity: 0.6;
 }
diff --git a/assets/wmt/css/wmt.css b/assets/wmt/css/wmt.css
@@ -424,54 +424,66 @@ ul.top-nav li a {
     font-weight: 700;
     padding-right: 5px; }
 
-    /* ------------------------------ SEARCH STYLES ------------------------------ */
-
-    #search-container { margin-top: 15px; }
-
-    #search-input {
-    color: #999;
-    font-size: 14px;
-    height: 36px;
-    outline: none;
-    padding: 0px 10px;
-    }
-    #search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: #ccc;
-    }
-    #search-input::-moz-placeholder { /* Firefox 19+ */
-    color: #ccc;
-    }
-    #search-input:-ms-input-placeholder { /* IE 10+ */
-    color: #ccc;
-    }
-    #search-input:-moz-placeholder { /* Firefox 18- */
-    color: #ccc;
-    }
-
-    #results-container {
-    z-index: 200;
-    position: absolute;
-    top: 55px;
-    right: 0px;
-    border: 0px solid #eaeaea;
-    background: #fff;
-    padding: 0px;
-    width: 100%;
-    }
-
-    #results-container li { font-size:14px;padding:5px 0px; }
-
-    .icon-search {
-    color: #ffc220;
-    margin-left: 5px;
-    }
-
-    @media (max-width: 767px) {
-    #search-container {
+.header .navbar-default .navbar-nav > .open > a {
+  background-color: #ffc220;
+  color: #ffffff; }
+
+/* ------------------------------ SEARCH STYLES ------------------------------ */
+
+#search .dropdown-menu {
+  border: 0px;
+  padding: 0px;
+  margin: 0px; }
+
+#search-container {
+  width:250px; }
+
+#search-input {
+  color: #999;
+  font-size: 14px;
+  height: 36px;
+  outline: none;
+  padding: 0px 10px;
+  width:100%; }
+
+#search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  color: #ccc; }
+
+#search-input::-moz-placeholder { /* Firefox 19+ */
+  color: #ccc; }
+
+#search-input:-ms-input-placeholder { /* IE 10+ */
+  color: #ccc; }
+
+#search-input:-moz-placeholder { /* Firefox 18- */
+ color: #ccc; }
+
+#results-container {
+  z-index: 1000;
+  position: absolute;
+  top: 35px;
+  right: 0px;
+  border: 1px solid #eaeaea;
+  background: #fff;
+  padding: 0px;
+  width: 100%;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
+
+#results-container li {
+  font-size:14px;
+  margin-left: 10px;
+  padding:5px 0px; }
+
+.icon-search {
+  color: #ffc220;
+  margin-left: 5px; }
+
+@media (max-width: 767px) {
+  #search-container {
     margin-left: 30px;
-    width: 100%;
-    }
-    }
+    width: 100%; }
+  }
 
 /* ------------------------------ HOMEPAGE STYLES ------------------------------ */
 
@@ -930,78 +942,76 @@ a.list-group-item-success.active:focus {
 /* ------------------------------ FOOTER STYLES ------------------------------ */
 
 .footer {
-    color: #ffffff;
-    opacity: 0.6;
-    margin-top: 40px;
-    padding: 20px 0 30px;
-    background: #2f2951;
-    border-top: 1px solid #2f2951; }
+  color: #ffffff;
+  opacity: 0.6;
+  margin-top: 40px;
+  padding: 20px 0 30px;
+  background: #2f2951;
+  border-top: 1px solid #2f2951; }
 
 .footer h2 {
-    background: none;
-    color: #cccccc;
-    font-weight: normal !important;
-    text-shadow: none; }
+  background: none;
+  color: #cccccc;
+  font-weight: normal !important;
+  text-shadow: none; }
 
 .footer p, .footer a {
-    font-size: 14px;
-    letter-spacing: 0.05em; }
+  font-size: 14px;
+  letter-spacing: 0.05em; }
 
 .footer p,.copyright p {
-    color: #cccccc; }
+  color: #cccccc; }
 
 .footer a {
   color: #ffffff;
-  opacity: 0.6;
-}
+  opacity: 0.6; }
 
 .footer a:hover {
-    color: #ffffff;
-    opacity: 1.0;
-    -webkit-transition: all .4s ease-in-out;
-    -moz-transition: all .4s ease-in-out;
-    -o-transition: all .4s ease-in-out;
-    transition: all .4s ease-in-out; }
+  color: #ffffff;
+  opacity: 1.0;
+  -webkit-transition: all .4s ease-in-out;
+  -moz-transition: all .4s ease-in-out;
+  -o-transition: all .4s ease-in-out;
+  transition: all .4s ease-in-out; }
 
 .footer .headline {
-    border-bottom: 2px solid #ffffff;
-    display: block;
-    margin: 10px 0 25px; }
+  border-bottom: 2px solid #ffffff;
+  display: block;
+  margin: 10px 0 25px; }
 
 .footer .headline h2 {
-    color: #cccccc;
-    margin: 0 0 -2px;
-    padding-bottom: 5px;
-    display: inline-block;
-    border-bottom: 2px solid #ffc220; }
+  color: #cccccc;
+  margin: 0 0 -2px;
+  padding-bottom: 5px;
+  display: inline-block;
+  border-bottom: 2px solid #ffc220; }
 
 .footer .btn-u {
-    background: #ffc220; }
+  background: #ffc220; }
 
 .footer .btn-u:hover {
-    background: #eead00; }
+  background: #eead00; }
 
 .copyright {
-    background: none repeat scroll 0 0 #2f2951;
-    border-top: 1px solid #2f2951;
-    font-size: 12px;
-    padding: 11px 0 7px; }
+  background: none repeat scroll 0 0 #2f2951;
+  border-top: 1px solid #2f2951;
+  font-size: 12px;
+  padding: 11px 0 7px; }
 
 .copyright p.copyright-space {
-    margin-top: 12px; }
+  margin-top: 12px; }
 
 .copyright p {
-    color: #ffffff;
+  color: #ffffff;
   opacity: 0.6; }
 
 .copyright a {
-    margin: 0 5px;
-    color: #fff;
-  opacity: 0.6; }
+  color: #fff;
+  text-decoration: none; }
 
 .copyright a:hover {
-    color: #ffffff;
-  opacity: 1.0;}
+  color: #ffc220;
+  text-decoration: underline; }
 
 /* ------------------------------ STICKY FOOTER ------------------------------ */