Merge pull request #547 from 47degrees/feature/search-pattern-theme

Enable Search for Pattern Theme
47degrees · Feb 2, 2021 · 283ccbc · 283ccbc
2 parents c2c2a71 + e79283c
commit 283ccbc
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 47 deletions.
diff --git a/...ources/_sass/light-style/_doc-search.scss → src/main/resources/_sass/_doc-search.scss b/...ources/_sass/light-style/_doc-search.scss → src/main/resources/_sass/_doc-search.scss
@@ -1,4 +1,4 @@
-div[id$='search-dropdown'] {
+#search-dropdown {
   position: relative;
 
   .dropdown {
@@ -9,6 +9,7 @@ div[id$='search-dropdown'] {
 
   label {
     padding-right: 0.3em;
+    font-weight: normal;
 
     i {
       padding-right: 0.2em;
@@ -32,6 +33,7 @@ div[id$='search-dropdown'] {
 
     .dropdown-item {
       width: 100%;
+      text-align: left;
 
       .dropdown-item-link {
         padding: 12px 9px;

diff --git a/src/main/resources/_sass/_docs.scss b/src/main/resources/_sass/_docs.scss
@@ -49,7 +49,6 @@
                 span {
                     margin-left: 10px;
                     font-size: 14px;
-                    text-transform: uppercase;
                 }
             }
         }
@@ -107,6 +106,10 @@
             opacity: 1;
         }
     }
+
+    .to-uppercase {
+        text-transform: uppercase;
+    }
 }
 
 #wrapper.toggled #page-content-wrapper {

diff --git a/src/main/resources/_sass/_home.scss b/src/main/resources/_sass/_home.scss
@@ -52,15 +52,20 @@
                         .fa-file-text {
                             font-size: 17px;
                         }
-                        &:hover,
-                        &:focus,
-                        &.focus {
-                            opacity: 0.5;
-                            text-decoration: none;
+                    }
+
+                    label {
+                        color: #fff;
+                        font-size: 15px;
+                        font-weight: 400;
+                        margin-right: 6px;
+
+                        i {
+                            margin-right: 6px;
                         }
                     }
 
-                    &:first-child {
+                    &:not(:last-child) {
                         margin-right: 50px;
 
                         @media screen and (max-width: $screen-xs-max) {
@@ -73,6 +78,15 @@
     }
 }
 
+a.transparent-on-hover {
+    &:hover,
+    &:focus,
+    &.focus {
+        opacity: 0.5;
+        text-decoration: none;
+    }
+}
+
 .horizontal-nav {
     border:1px solid #ccc;
     border-width:1px 0;

diff --git a/src/main/resources/css/light-style.scss b/src/main/resources/css/light-style.scss
@@ -12,7 +12,7 @@
 @import "light-style/button";
 @import "light-style/masthead";
 @import "light-style/main";
-@import "light-style/doc-search";
+@import "doc-search";
 @import "light-style/doc-versions";
 @import "light-style/footer";
 @import "light-style/light-docs";

diff --git a/src/main/resources/css/pattern-style.scss b/src/main/resources/css/pattern-style.scss
@@ -8,5 +8,6 @@
 @import "bootstrap";
 @import "bootstrap_override";
 @import "docs";
+@import "doc-search";
 @import "home";
 @import "colors";
diff --git a/src/main/resources/js/main.js b/src/main/resources/js/main.js
@@ -53,11 +53,6 @@ function shareSiteTwitter(text) {
   return false;
 }
 
-function shareSiteGoogle() {
-  launchPopup('https://plus.google.com/share?url='+baseURL);
-  return false;
-}
-
 function launchPopup(url) {
   window.open(url, 'Social Share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
 }

diff --git a/src/main/scala/microsites/layouts/DocsLayout.scala b/src/main/scala/microsites/layouts/DocsLayout.scala
@@ -36,10 +36,14 @@ class DocsLayout(config: MicrositeSettings) extends Layout(config) {
     val text = s"${config.identity.name} ${config.identity.description}"
 
     def siteSearch: Seq[TypedTag[String]] = {
+      val classes =
+        if (config.visualSettings.theme == "pattern") "search-nav hidden-xs hidden-sm"
+        else "search-nav"
+
       if (config.searchSettings.searchEnabled) {
         Seq(
           li(
-            cls := "search-nav",
+            cls := classes,
             div(
               id := "search-dropdown",
               label(
@@ -69,7 +73,7 @@ class DocsLayout(config: MicrositeSettings) extends Layout(config) {
         Seq(
           li(
             id := "gh-eyes-item",
-            cls := "hidden-xs",
+            cls := "hidden-xs to-uppercase",
             a(
               href := config.gitSiteUrl,
               target := "_blank",
@@ -80,7 +84,7 @@ class DocsLayout(config: MicrositeSettings) extends Layout(config) {
           ),
           li(
             id := "gh-stars-item",
-            cls := "hidden-xs",
+            cls := "hidden-xs to-uppercase",
             a(
               href := config.gitSiteUrl,
               target := "_blank",
@@ -100,15 +104,14 @@ class DocsLayout(config: MicrositeSettings) extends Layout(config) {
             li(a(href := "#", onclick := s"shareSiteTwitter('$text');", i(cls := "fa fa-twitter"))),
             li(
               a(href := "#", onclick := s"shareSiteFacebook('$text');", i(cls := "fa fa-facebook"))
-            ),
-            li(a(href := "#", onclick := "shareSiteGoogle();", i(cls := "fa fa-google-plus")))
+            )
           )
         } else Seq.empty
       } else Seq.empty
     }
 
     val maybeSearch =
-      if (config.visualSettings.theme != "pattern" && config.searchSettings.searchEnabled) {
+      if (config.searchSettings.searchEnabled) {
         Seq(siteSearch)
       } else Seq.empty
 
@@ -307,7 +310,10 @@ class DocsLayout(config: MicrositeSettings) extends Layout(config) {
     if (config.visualSettings.theme == "pattern") scriptsDocsPattern else scriptsDocsLight
 
   def scriptsDocsPattern: List[TypedTag[String]] =
-    scripts ++ List(script(src := "{{ site.baseurl }}/js/main.js"))
+    scripts ++ List(
+      searchScript,
+      script(src := "{{ site.baseurl }}/js/main.js")
+    )
 
   def scriptsDocsLight: List[TypedTag[String]] =
     scripts ++ List(

diff --git a/src/main/scala/microsites/layouts/HomeLayout.scala b/src/main/scala/microsites/layouts/HomeLayout.scala
@@ -52,14 +52,14 @@ class HomeLayout(config: MicrositeSettings) extends Layout(config) {
           div(
             cls := "row",
             div(
-              cls := "col-xs-6",
+              cls := "col-xs-3",
               a(
                 href := "{{ site.baseurl }}/",
                 cls := "brand",
                 div(cls := "icon-wrapper", span(config.identity.name))
               )
             ),
-            div(cls := "col-xs-6", buildCollapseMenu)
+            div(cls := "col-xs-9", buildCollapseMenu)
           )
         )
       ),

diff --git a/src/main/scala/microsites/layouts/Layout.scala b/src/main/scala/microsites/layouts/Layout.scala
@@ -411,26 +411,63 @@ abstract class Layout(config: MicrositeSettings) {
     )
   }
 
+  def searchBar: Option[TypedTag[String]] = {
+    val classes =
+      if (config.visualSettings.theme == "pattern") "search-nav hidden-xs"
+      else "search-nav"
+
+    if (config.searchSettings.searchEnabled) {
+      Some(
+        li(
+          cls := classes,
+          div(
+            id := "search-dropdown",
+            label(
+              i(cls := "fa fa-search"),
+              "Search"
+            ),
+            input(
+              id := "search-bar",
+              `type` := "text",
+              placeholder := "Enter keywords here...",
+              onclick := "displayToggleSearch(event)"
+            ),
+            ul(
+              id := "search-dropdown-content",
+              cls := "dropdown dropdown-content"
+            )
+          )
+        )
+      )
+    } else Option.empty
+  }
+
   def buildCollapseMenu: TypedTag[String] =
     nav(
       cls := "text-right",
       ul(
         cls := "",
+        searchBar,
         li(
           a(
+            cls := "transparent-on-hover",
             href := config.gitSiteUrl,
             i(cls := s"fa ${config.gitHostingIconClass}"),
             target := "_blank",
             rel := "noopener noreferrer",
-            span(cls := "hidden-xs", config.gitSettings.gitHostingService.name)
+            span(cls := "hidden-sm hidden-xs", config.gitSettings.gitHostingService.name)
           )
         ),
         if (!config.urlSettings.micrositeDocumentationUrl.isEmpty)
           li(
             a(
+              cls := "transparent-on-hover",
               href := s"${config.urlSettings.micrositeDocumentationUrl}",
               i(cls := "fa fa-file-text"),
-              span(cls := "hidden-xs", config.urlSettings.micrositeDocumentationLabelDescription)
+              span(
+                cls := "hidden-sm hidden-xs",
+                config.urlSettings.micrositeDocumentationLabelDescription
+              )
             )
           )
         else ()
@@ -439,28 +476,7 @@ abstract class Layout(config: MicrositeSettings) {
 
   def buildLightCollapseMenu: TypedTag[String] =
     ul(
-      "{% if site.search_enabled %}",
-      li(
-        cls := "search-nav",
-        div(
-          id := "search-dropdown",
-          label(
-            i(cls := "fa fa-search"),
-            "Search"
-          ),
-          input(
-            id := "search-bar",
-            `type` := "text",
-            placeholder := "Enter keywords here...",
-            onclick := "displayToggleSearch(event)"
-          ),
-          ul(
-            id := "search-dropdown-content",
-            cls := "dropdown dropdown-content"
-          )
-        )
-      ),
-      "{% endif %}",
+      searchBar,
       "{% if site.data.versions %}",
       raw("""{% assign own_version = site.data.versions | where: "own", true | first %}"""),
       li(