flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated search header.

Browse source
This commit is contained in:
flash 2019-05-01 22:19:04 +02:00
parent 0cfa891bab
commit 2298617ee3
8 changed files with 118 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/less/search/anchor.less Normal file
View file

@ -0,0 +1,4 @@
.search__anchor {
position: absolute;
top: -100px;
}

3
assets/less/search/categories.less Normal file
View file

@ -0,0 +1,3 @@
.search__categories {
display: flex;
}

36
assets/less/search/category.less Normal file
View file

@ -0,0 +1,36 @@
.search__category {
display: block;
color: inherit;
text-decoration: none;
background-color: var(--accent-colour);
box-shadow: 0 1px 2px #000A;
text-shadow: 0 1px 4px #000;
overflow: hidden;
border: 1px solid transparent;
border-radius: 5px;
font-size: 1.1em;
margin: 1px 1px 1px 0;
&__background {
background-color: var(--background-colour-translucent-9);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: background-color .2s;
}
&:hover &__background,
&:focus &__background {
background-color: var(--background-colour-translucent-8);
}
&:active &__background {
background-color: var(--background-colour-translucent-7);
}
&__content {
padding: 2px 5px;
}
}

3
assets/less/search/container.less Normal file
View file

@ -0,0 +1,3 @@
.search__container {
margin: 5px 0;
}

7
assets/less/search/header.less Normal file
View file

@ -0,0 +1,7 @@
.search__header {
padding: 1em;
position: sticky;
top: 0;
z-index: 100;
background-color: var(--background-colour);
}

3
assets/less/search/input.less
View file

@ -6,7 +6,6 @@
border: 1px solid transparent;
border-radius: 5px;
font-size: 1.5em;
margin: 2px 0;
&__background {
background-color: var(--background-colour-translucent-9);
@ -34,13 +33,13 @@
&__button {
flex: 0 0 auto;
border: 0;
background-color: transparent;
color: #fff;
border-radius: 4px;
width: 40px;
height: 40px;
font-size: inherit;
cursor: pointer;
background-color: transparent;
transition: background-color .2s;
&:hover,

5
assets/less/search/search.less
View file

@ -1 +1,6 @@
@import "anchor";
@import "categories";
@import "category";
@import "container";
@import "header";
@import "input";

80
templates/home/search.twig
View file

@ -7,24 +7,58 @@
{% set canonical_url = url('search-query', {'query': search_query}) %}
{% block content %}
<form class="search__input" method="get" action="{{ url('search-index') }}">
<div class="search__input__background"></div>
<div class="search__input__container">
{{ input_text('q', 'search__input__text', search_query, 'text', 'What are you looking for?', false, null, 1, true, true) }}
<button class="search__input__button" tabindex="2"><i class="fas fa-search fa-fw"></i></button>
</div>
</form>
<div class="search__header">
<form class="search__input" method="get" action="{{ url('search-index') }}">
<div class="search__input__background"></div>
<div class="search__input__container">
{{ input_text('q', 'search__input__text', search_query, 'text', 'What are you looking for?', false, null, 1, true, true) }}
<button class="search__input__button" tabindex="2"><i class="fas fa-search fa-fw"></i></button>
</div>
</form>
{% if forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0 %}
<div class="container container--lazy">
{{ container_title('<i class="fas fa-folder fa-fw"></i> Categories') }}
{% if forum_topics|length > 0 %}<a href="#topics" class="link">Topics ({{ forum_topics|length|number_format }})</a>{% endif %}
{% if forum_posts|length > 0 %}<a href="#posts" class="link">Posts ({{ forum_posts|length|number_format }})</a>{% endif %}
{% if users|length > 0 %}<a href="#users" class="link">Users ({{ users|length|number_format }})</a>{% endif %}
{% if news_posts|length > 0 %}<a href="#news" class="link">News ({{ news_posts|length|number_format }})</a>{% endif %}
</div>
{% elseif search_query|length > 0 %}
<div class="container container--lazy">
{% if forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0 %}
<div class="search__categories">
{% if forum_topics|length > 0 %}
<a href="#topics" class="search__category">
<div class="search__category__background"></div>
<div class="search__category__content">
Topics ({{ forum_topics|length|number_format }})
</div>
</a>
{% endif %}
{% if forum_posts|length > 0 %}
<a href="#posts" class="search__category">
<div class="search__category__background"></div>
<div class="search__category__content">
Posts ({{ forum_posts|length|number_format }})
</div>
</a>
{% endif %}
{% if users|length > 0 %}
<a href="#users" class="search__category">
<div class="search__category__background"></div>
<div class="search__category__content">
Users ({{ users|length|number_format }})
</div>
</a>
{% endif %}
{% if news_posts|length > 0 %}
<a href="#news" class="search__category">
<div class="search__category__background"></div>
<div class="search__category__content">
News ({{ news_posts|length|number_format }})
</div>
</a>
{% endif %}
</div>
{% endif %}
</div>
{% if not (forum_topics|length > 0 or forum_posts|length > 0 or users|length > 0 or news_posts|length > 0) %}
<div class="container search__container">
{{ container_title('<i class="fas fa-search-minus fa-fw"></i> Nothing found!') }}
<div class="container__content">
@ -34,7 +68,8 @@
{% endif %}
{% if forum_topics|length > 0 %}
<div id="topics" class="container container--lazy">
<div class="container search__container">
<div class="search__anchor" id="topics"></div>
{{ container_title('<i class="fas fa-comments fa-fw"></i> Topics (%s)'|format(forum_topics|length|number_format)) }}
{% for topic in forum_topics %}
<a href="{{ url('forum-topic', {'topic': topic.topic_id}) }}" class="link">
@ -45,7 +80,8 @@
{% endif %}
{% if forum_posts|length > 0 %}
<div id="posts" class="container container--lazy">
<div class="container search__container">
<div class="search__anchor" id="posts"></div>
{{ container_title('<i class="fas fa-comment fa-fw"></i> Posts (%s)'|format(forum_posts|length|number_format)) }}
{% for post in forum_posts %}
@ -57,7 +93,8 @@
{% endif %}
{% if users|length > 0 %}
<div id="users" class="container container--lazy">
<div class="container search__container">
<div class="search__anchor" id="users"></div>
{{ container_title('<i class="fas fa-users fa-fw"></i> Users (%s)'|format(users|length|number_format)) }}
<div class="userlist">
@ -71,7 +108,8 @@
{% endif %}
{% if news_posts|length > 0 %}
<div id="news" class="container container--lazy">
<div class="container search__container">
<div class="search__anchor" id="news"></div>
{{ container_title('<i class="fas fa-newspaper fa-fw"></i> News (%s)'|format(news_posts|length|number_format)) }}
{% for post in news_posts %}
<a href="{{ url('news-post', {'post': post.post_id}) }}" class="link">