fix(header): header style and search dropdown (#282)

pogor-dev · Apr 29, 2020 · fa4c567 · fa4c567
1 parent 7affd65
commit fa4c567
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 12 deletions.
diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss
@@ -8,11 +8,18 @@ header {
   }
 
   .logo {
-    min-height: 1.25em;
-    height: 1.25em;
+    min-height: 1.5em;
+    height: 1.5em;
     vertical-align: text-bottom;
+  }
+
+  .logo, .header-title-pre {
     padding-right: .25rem;
   }
+
+  .header-title-post {
+    padding-left: .25rem;
+  }
 }
 
 .header-wrapper {

diff --git a/assets/js/theme.min.js b/assets/js/theme.min.js
diff --git a/assets/js/theme.min.js.map b/assets/js/theme.min.js.map
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -86,6 +86,7 @@ enableEmoji = true
       [[languages.en.menu.main]]
         identifier = "github"
         pre = "<i class='fab fa-github fa-fw'></i>"
+        post = ""
         name = ""
         url = "https://github.com/dillonzq/LoveIt"
         title = "GitHub"
@@ -279,6 +280,7 @@ enableEmoji = true
       [[languages.zh-cn.menu.main]]
         identifier = "github"
         pre = "<i class='fab fa-github fa-fw'></i>"
+        post = ""
         name = ""
         url = "https://github.com/dillonzq/LoveIt"
         title = "GitHub"
@@ -468,6 +470,7 @@ enableEmoji = true
       [[languages.fr.menu.main]]
         identifier = "github"
         pre = "<i class='fab fa-github fa-fw'></i>"
+        post = ""
         name = ""
         url = "https://github.com/dillonzq/LoveIt"
         title = "GitHub"
@@ -636,7 +639,7 @@ enableEmoji = true
       name = "LoveIt"
       # you can add extra information before the name (HTML format is supported), such as icons
       # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
-      pre = "<i class='far fa-kiss-wink-heart fa-fw'></i> "
+      pre = "<i class='far fa-kiss-wink-heart fa-fw'></i>"
       # you can add extra information after the name (HTML format is supported), such as icons
       # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
       post = ""

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -7,7 +7,13 @@
                     {{- with .logo -}}
                         {{- partial "plugin/image.html" (dict "src" . "alt" $.Site.Title "class" "logo") -}}
                     {{- end -}}
-                    {{- .pre | safeHTML }}{{ .name }}{{ .post | safeHTML -}}
+                    {{- with .pre -}}
+                        <span class="header-title-pre">{{ . | safeHTML }}</span>
+                    {{- end -}}
+                    {{- .name -}}
+                    {{- with .post -}}
+                        <span class="header-title-post">{{ . | safeHTML }}</span>
+                    {{- end -}}
                 {{- else -}}
                     {{- .Site.Title -}}
                 {{- end -}}
@@ -79,7 +85,13 @@
                         {{- with .logo -}}
                             {{- partial "plugin/image.html" (dict "src" . "alt" $.Site.Title "class" "logo") -}}
                         {{- end -}}
-                        {{- .pre | safeHTML }}{{ .name }}{{ .post | safeHTML -}}
+                        {{- with .pre -}}
+                            <span class="header-title-pre">{{ . | safeHTML }}</span>
+                        {{- end -}}
+                        {{- .name -}}
+                        {{- with .post -}}
+                            <span class="header-title-post">{{ . | safeHTML }}</span>
+                        {{- end -}}
                     {{- else -}}
                         {{- .Site.Title -}}
                     {{- end -}}

diff --git a/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content b/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content b/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content b/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content
diff --git a/src/js/theme.js b/src/js/theme.js
@@ -161,7 +161,7 @@ class Theme {
                 dropdownMenuContainer: `#search-dropdown-${classSuffix}`,
                 clearOnSelected: true,
                 cssClasses: { noPrefix: true },
-             // debug: true,
+                debug: true,
             }, {
                 name: 'search',
                 source: (query, callback) => {