Merge pull request #339 from mpourismaiel/fix/search/fix-styles

Fix background and text color of search in search and nav fragments
okkur · Sep 4, 2018 · 2a58d86 · 2a58d86
2 parents 783000e + 7cbad75
commit 2a58d86
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 9 deletions.
diff --git a/exampleSite/content/fragments/list/code-list-tiled.md b/exampleSite/content/fragments/list/code-list-tiled.md
@@ -9,6 +9,7 @@ weight = 121
 fragment = "list"
 weight = 150
 
+background = "secondary"
 count = 5 # Default value is 10
 section = "dev/blog" # Default value is current section
 #summary = false # Default value is true

diff --git a/exampleSite/content/fragments/list/code-list.md b/exampleSite/content/fragments/list/code-list.md
@@ -9,6 +9,7 @@ weight = 111
 fragment = "list"
 weight = 150
 
+background = "secondary"
 count = 5 # Default value is 10
 section = "dev/blog" # Default value is current section
 #summary = false # Default value is true

diff --git a/exampleSite/content/fragments/list/list-tiled.md b/exampleSite/content/fragments/list/list-tiled.md
@@ -2,6 +2,7 @@
 fragment = "list"
 weight = 120
 
+background = "secondary"
 count = 5 # Default value is 10
 section = "dev/blog" # Default value is current section
 #summary = false # Default value is true

diff --git a/exampleSite/content/fragments/list/list.md b/exampleSite/content/fragments/list/list.md
@@ -2,6 +2,7 @@
 fragment = "list"
 weight = 110
 
+background = "secondary"
 count = 5 # Default value is 10
 section = "dev/blog" # Default value is current section
 #summary = false # Default value is true

diff --git a/exampleSite/content/fragments/search/search.md b/exampleSite/content/fragments/search/search.md
@@ -2,5 +2,5 @@
 fragment = "search"
 weight = 110
 title = "Search"
-background = "light"
+background = "secondary"
 +++
diff --git a/layouts/partials/fragments/nav.html b/layouts/partials/fragments/nav.html
@@ -107,7 +107,7 @@
   {{- end -}}
 </div>
 {{- if .Params.search }}
-{{ partial "helpers/search-result-template.html" (dict "name" .Name "message_class" "p-2") }}
+{{ partial "helpers/search-result-template.html" (dict "name" .Name "message_class" "p-2" "background" $bg) }}
 <script>
   (window.syna.search || (window.syna.search = [])).push({
     searchInput: '#search-query-{{ .Name }}',

diff --git a/layouts/partials/fragments/search.html b/layouts/partials/fragments/search.html
@@ -40,7 +40,7 @@ <h6>
       </div>
     {{- end }}
     <div class="row w-100 justify-content-center mx-0">
-      <form action="{{ "search" | absURL }}" class="my-0">
+      <form action="{{ "search" | absURL }}" class="mt-0">
         <div class="input-group my-0">
           <input type="text" class="form-control py-1" id="search-query-{{ .Name }}" name="s" placeholder="{{- i18n "navbar.search" | default "Search..." -}}">
           <div class="input-group-append">
@@ -51,13 +51,18 @@ <h6>
     </div>
     <div class="search-results-full-container row">
       <div class="col px-0">
-        <div id="search-results-{{ .Name }}" class="col px-0">
+        <div id="search-results-{{ .Name }}" class="col px-0
+        {{- if or (eq $bg "secondary") (eq $bg "primary") -}}
+          {{- printf " text-%s" "dark" -}}
+        {{- else -}}
+          {{- printf " text-muted text-%s" "secondary" -}}
+        {{- end -}}">
         </div>
       </div>
     </div>
   </div>
 </section>
-{{ partial "helpers/search-result-template.html" (dict "name" .Name "message_class" "text-center mt-4") }}
+{{ partial "helpers/search-result-template.html" (dict "name" .Name "message_class" "text-center mt-4" "background" $bg) }}
 {{ partial "helpers/search-result-template.html" . }}
 <script>
   (window.syna.search || (window.syna.search = [])).push({

diff --git a/layouts/partials/helpers/search-result-template.html b/layouts/partials/helpers/search-result-template.html
@@ -1,3 +1,4 @@
+{{- $bg := .background | default "dark" -}}
 <!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
 <script id="search-empty-template-{{ .name }}" type="text/x-js-template">
   <p class="{{ .message_class }}">{{- i18n "search.empty" | default "Please enter a word or phrase above" -}}</p>
@@ -9,7 +10,12 @@
   <a href="${link}" id="summary-${key}" class="result">
     <div class="p-2">
       <h5>${title}</h5>
-      <p class="m-0">${snippet}</p>
+      <p class="m-0 
+      {{- if or (eq $bg "secondary") (eq $bg "primary") -}}
+        {{- printf " text-%s" "dark" -}}
+      {{- else -}}
+        {{- printf " text-muted text-%s" "secondary" -}}
+      {{- end -}}">${snippet}</p>
       ${ isset tags }<p>Tags: ${tags}</p>${ end }
       ${ isset categories }<p>Categories: ${categories}</p>${ end }
     </div>

diff --git a/static-main/styles/_search.scss b/static-main/styles/_search.scss
@@ -25,7 +25,6 @@
 
     p {
       text-decoration: none !important;
-      color: $secondary !important;
     }
 
     div {

diff --git a/static/syna-main.css b/static/syna-main.css
@@ -9746,8 +9746,7 @@ body.modal-open {
   cursor: pointer;
   text-decoration: inherit; }
   .search-results-container .result p, .search-results-full-container .result p {
-    text-decoration: none !important;
-    color: #868e96 !important; }
+    text-decoration: none !important; }
   .search-results-container .result div:hover, .search-results-full-container .result div:hover {
     background-color: rgba(0, 131, 143, 0.2); }
     .search-results-container .result div:hover h5, .search-results-full-container .result div:hover h5 {