Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-06-18 20:13:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

revert change with search widget

Browse Source
This commit is contained in:
Jimmy Cai 2022-03-03 22:02:33 +00:00 committed by GitHub
parent 86dad4e307
commit 22d371f55e
3 changed files with 35 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/scss/partials/layout/search.scss
View File

@ -1,63 +1,65 @@
.search-form { .search-form {
margin-bottom: var(--section-separation);
position: relative; position: relative;
border-radius: var(--card-border-radius);
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
color: var(--card-text-color-main);
width: 100%;
--button-size: 80px; --button-size: 80px;
display: flex;
overflow: hidden;
flex-direction: row;
justify-content: stretch;
gap: 0;
&.widget { &.widget {
--button-size: 60px; --button-size: 60px;
label { label {
font-size: 1.3rem; font-size: 1.3rem;
top: 10px;
} }
input { input {
font-size: 1.5rem; font-size: 1.5rem;
} padding: 30px 20px 15px 20px;
.input-wrapper {
padding: 10px 20px 15px 20px;
} }
} }
.input-wrapper { p {
display: flex; position: relative;
flex-direction: column; margin: 0;
flex-grow: 1;
gap: 5px;
padding: 15px 20px 20px 20px;
} }
label { label {
position: absolute;
top: 15px;
left: 20px;
font-size: 1.4rem; font-size: 1.4rem;
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
} }
input { input {
padding: 40px 20px 20px;
border-radius: var(--card-border-radius);
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
color: var(--card-text-color-main);
width: 100%;
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;
transition: box-shadow 0.3s ease;
font-size: 1.8rem; font-size: 1.8rem;
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: var(--shadow-l2);
} }
} }
button { button {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: var(--button-size); width: var(--button-size);
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
padding: 0 10px; padding: 0 10px;
&:focus { &:focus {
@ -77,4 +79,4 @@
height: 20px; height: 20px;
} }
} }
} }

10
layouts/page/search.html
View File

@ -6,20 +6,18 @@
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
<form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}> <form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
<div class="input-wrapper"> <p>
<label>{{ T "search.title" }}</label> <label>{{ T "search.title" }}</label>
<input name="keyword" placeholder="{{ T `search.placeholder` }}" /> <input name="keyword" placeholder="{{ T `search.placeholder` }}" />
</div> </p>
<button title="{{ T `search.title` }}"> <button title="{{ T `search.title` }}">
{{ partial "helper/icon" "search" }} {{ partial "helper/icon" "search" }}
</button> </button>
</form> </form>
<div class="search-result"> <h3 class="search-result--title section-title"></h3>
<h3 class="search-result--title section-title"></h3> <div class="search-result--list article-list--compact"></div>
<div class="search-result--list article-list--compact"></div>
</div>
<script> <script>
window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}" window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"

13
layouts/partials/widget/search.html
View File

@ -2,13 +2,14 @@
{{- if $query -}} {{- if $query -}}
{{- $searchPage := index $query 0 -}} {{- $searchPage := index $query 0 -}}
<form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}> <form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
<div class="input-wrapper"> <p>
<label>{{ T "search.title" }}</label> <label>{{ T "search.title" }}</label>
<input name="keyword" required placeholder="{{ T `search.placeholder` }}" /> <input name="keyword" required placeholder="{{ T `search.placeholder` }}" />
</div>
<button title="{{ T `search.title` }}"> <button title="{{ T `search.title` }}">
{{ partial "helper/icon" "search" }} {{ partial "helper/icon" "search" }}
</button> </button>
</p>
</form> </form>
{{- else -}} {{- else -}}
{{- warnf "Search page not found. Create a page with layout: search." -}} {{- warnf "Search page not found. Create a page with layout: search." -}}