Skip to content
Snippets Groups Projects
Commit 323bfb25 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

added basic markup for suggestions

parent bc31c8f3
No related branches found
No related tags found
2 merge requests!2122Development,!2121Resolve "Add Autosuggest Module"
Hide whitespace changes
Inline Side-by-side
Showing
with 211 additions and 83 deletions
build/nginx/configuration/nginx-default-dev.conf
+ 2
− 2
View file @ 323bfb25
...@@ -29,7 +29,7 @@ server { ...@@ -29,7 +29,7 @@ server {
location / { location / {
try_files $uri $uri/ /index.php?$query_string; try_files $uri $uri/ /index.php?$query_string;
add_header "Content-Security-Policy" $csp; #add_header "Content-Security-Policy" $csp;
} }
location ~ \.php$ { location ~ \.php$ {
...@@ -43,7 +43,7 @@ server { ...@@ -43,7 +43,7 @@ server {
fastcgi_read_timeout 900; fastcgi_read_timeout 900;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params; include fastcgi_params;
add_header "Content-Security-Policy" $csp; #add_header "Content-Security-Policy" $csp;
} }
#error_page 404 /404.html; #error_page 404 /404.html;
......
metager/resources/less/metager/general/base.less
+ 1
− 0
View file @ 323bfb25
...@@ -183,6 +183,7 @@ i.fa { ...@@ -183,6 +183,7 @@ i.fa {
width: fit-content; width: fit-content;
text-decoration: none; text-decoration: none;
font-size: 2.7em; font-size: 2.7em;
line-height: 1;
@media (max-width: @screen-mobile) { @media (max-width: @screen-mobile) {
font-size: 2em; font-size: 2em;
......
metager/resources/less/metager/pages/startpage/startpage.less
+ 46
− 41
View file @ 323bfb25
...@@ -36,7 +36,9 @@ div.startpage { ...@@ -36,7 +36,9 @@ div.startpage {
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1.5rem; padding-block: 1.5rem;
padding: 2dvh 1.5rem;
margin: 0;
font-size: clamp(0.7rem, 3vw, 1rem); font-size: clamp(0.7rem, 3vw, 1rem);
> li { > li {
> a { > a {
...@@ -51,62 +53,65 @@ div.startpage { ...@@ -51,62 +53,65 @@ div.startpage {
> div#search-wrapper { > div#search-wrapper {
flex-grow: 1; flex-grow: 1;
display: grid; display: grid;
grid-template-rows: 10dvh max-content max-content max-content 1fr;
grid-template-areas: "." "logo" "search" "quicklinks" ".";
grid-template-columns: 1fr; grid-template-columns: 1fr;
place-content: center; place-content: center;
> #search-block { > #startpage-quicklinks {
padding-bottom: 15vh; grid-area: quicklinks;
@media (max-height: 500px) { display: flex;
padding-bottom: 0; justify-content: center;
gap: 1rem;
@supports not (selector(:first-child)) {
gap: 0;
> *:not(:nth-child(1)) {
padding: 0 0.5rem;
}
} }
> #startpage-quicklinks { flex-wrap: wrap;
padding: 1rem;
> .metager-key {
color: inherit;
display: flex; display: flex;
justify-content: center; align-items: center;
gap: 1rem; gap: 0.5rem;
@supports not (selector(:first-child)) { @supports not (selector(:first-child)) {
gap: 0; gap: 0;
> *:not(:nth-child(1)) { > * {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
flex-wrap: wrap; > img {
padding: 1rem; height: 1em;
> .metager-key { rotate: -90deg;
color: inherit; filter: brightness(@searchbar-key-brightness);
display: flex;
align-items: center;
gap: 0.5rem;
@supports not (selector(:first-child)) {
gap: 0;
> * {
padding: 0 0.5rem;
}
}
> img {
height: 1em;
rotate: -90deg;
filter: brightness(@searchbar-key-brightness);
}
&.no-key {
> img {
rotate: 0deg;
}
}
} }
#plugin-btn {
color: @text-color;
display: flex;
align-items: center;
&.no-key {
> img { > img {
// sets the size for the plugin button rotate: 0deg;
max-width: 15px;
max-height: 15px;
margin-right: 8px;
} }
} }
} }
#plugin-btn {
color: @text-color;
display: flex;
align-items: center;
> img {
// sets the size for the plugin button
max-width: 15px;
max-height: 15px;
margin-right: 8px;
}
}
}
> #startpage-logo {
grid-area: logo;
}
> fieldset {
grid-area: search;
} }
} }
......
metager/resources/less/metager/parts/searchbar.less
+ 93
− 37
View file @ 323bfb25
...@@ -2,48 +2,28 @@ ...@@ -2,48 +2,28 @@
@searchbar-border-color-light: #777777; @searchbar-border-color-light: #777777;
.searchbar { .searchbar {
display: -webkit-box; display: grid;
display: -moz-box; grid-template-rows: max-content 0fr;
display: -ms-flexbox; transition: 300ms;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 1em; font-size: 1em;
background-color: transparent; background-color: transparent;
color: #333; color: #333;
width: 100%;
width: calc(100% - 16px);
max-width: 600px;
margin: 0 auto;
&[data-suggest="active"]:focus-within {
grid-template-rows: max-content 1fr;
> .suggestions {
border: 1px solid @searchbar-border-color;
border-top: 0;
}
}
.search-input-submit { .search-input-submit {
width: 100%;
width: calc(100% - 16px);
max-width: 600px;
background-color: @searchbar-background-color; background-color: @searchbar-background-color;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
...@@ -141,6 +121,68 @@ ...@@ -141,6 +121,68 @@
} }
} }
> .suggestions {
--highlight-color: @highlight-color;
display: grid;
overflow: hidden;
border-left: initial;
border-top: 0;
border: 0;
color: @text-color;
background-color: @body-background-color;
> .partners {
display: flex;
gap: 1rem;
background-color: var(--highlight-color);
padding-inline: 0.5rem;
> .partner {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
padding-block: 1rem;
color: inherit;
> img {
height: 1em;
filter: invert(@icon-color);
}
> div {
> .description {
font-size: 0.7rem;
}
}
}
}
> .suggestion {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.25rem 0.5rem;
color: inherit;
> img {
height: 1rem;
filter: invert(@icon-color);
}
&:hover {
background-color: var(--highlight-color);
}
}
> .partner {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.25rem 0.5rem;
color: inherit;
> img {
width: 16px;
}
&:hover {
background-color: var(--highlight-color);
}
}
}
.search-hidden { .search-hidden {
display: none; display: none;
} }
...@@ -154,14 +196,13 @@ ...@@ -154,14 +196,13 @@
> * { > * {
border: 1px solid @searchbar-border-color; border: 1px solid @searchbar-border-color;
&:not(:first-child) { &:not(:first-child):not(.suggestions) {
border-left: none; border-left: none;
} }
} }
.search-input-submit { .search-input-submit {
border-radius: 5px; border-radius: 5px;
margin: 0 8px;
@media (max-width: @screen-mobile) { @media (max-width: @screen-mobile) {
max-width: initial; max-width: initial;
...@@ -193,6 +234,7 @@ ...@@ -193,6 +234,7 @@
} }
.resultpage-searchbar { .resultpage-searchbar {
grid-template-rows: max-content;
.search-input-submit { .search-input-submit {
padding: 0 0.5rem; padding: 0 0.5rem;
margin-right: 2rem; margin-right: 2rem;
...@@ -203,6 +245,20 @@ ...@@ -203,6 +245,20 @@
} }
} }
} }
> .suggestions {
display: none;
position: absolute;
top: 3.8rem;
width: 100%;
left: 0;
right: 0;
}
&:focus-within {
> .suggestions {
display: grid;
}
}
} }
#research-bar-placeholder { #research-bar-placeholder {
......
metager/resources/less/metager/variables-dark.less
+ 1
− 0
View file @ 323bfb25
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
@background-color-mobile: @color-almost-black; @background-color-mobile: @color-almost-black;
// General text color. // General text color.
@text-color: @color-almost-white; @text-color: @color-almost-white;
@highlight-color: #626262;
// Default textual link color. // Default textual link color.
@link-color: #fd8307; @link-color: #fd8307;
// Sidebar styles // Sidebar styles
......
metager/resources/less/metager/variables.less
+ 1
− 0
View file @ 323bfb25
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
sans-serif; sans-serif;
// General text color. // General text color.
@text-color: @color-black; @text-color: @color-black;
@highlight-color: #f7f7fa;
// Default textual link color. // Default textual link color.
@link-color: #06c; @link-color: #06c;
// Default Mini-Padding // Default Mini-Padding
......
metager/resources/views/index.blade.php
+ 0
− 2
View file @ 323bfb25
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
@endforeach @endforeach
</ul> </ul>
<div id="search-wrapper"> <div id="search-wrapper">
<div id="search-block">
<h1 id="startpage-logo"> <h1 id="startpage-logo">
<a class="logo" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), '/') }}"> <a class="logo" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), '/') }}">
<img src="/img/metager.svg" alt="MetaGer" /> <img src="/img/metager.svg" alt="MetaGer" />
...@@ -49,7 +48,6 @@ ...@@ -49,7 +48,6 @@
@else @else
<a id="plugin-btn" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), '/plugin') }}" title="{{ trans('index.plugin-title') }}"><img src="/img/plug-in.svg" alt="+"> {{ trans('index.plugin') }}</a> <a id="plugin-btn" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), '/plugin') }}" title="{{ trans('index.plugin-title') }}"><img src="/img/plug-in.svg" alt="+"> {{ trans('index.plugin') }}</a>
@endif @endif
</div>
</div> </div>
</div> </div>
<div id="language"> <div id="language">
......
metager/resources/views/parts/searchbar.blade.php
+ 67
− 1
View file @ 323bfb25
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</a> </a>
</div> </div>
<div class="search-input @if(!\Request::is('/')) search-delete-js-only @endif"> <div class="search-input @if(!\Request::is('/')) search-delete-js-only @endif">
<input type="search" name="eingabe" value="@if(Request::filled("eingabe")){{Request::input("eingabe")}}@endif" @if(\Request::is('/') && !\Request::filled('mgapp')) autofocus @endif autocomplete="off" class="form-control" placeholder="{{ trans('index.placeholder') }}" > <input type="search" name="eingabe" value="@if(Request::filled("eingabe")){{Request::input("eingabe")}}@endif" @if(\Request::is('/') && !\Request::filled('mgapp')) autofocus @endif autocomplete="off" class="form-control" placeholder="{{ trans('index.placeholder') }}">
<button id="search-delete-btn" name="delete-search-input" type="reset" tabindex="-1"> <button id="search-delete-btn" name="delete-search-input" type="reset" tabindex="-1">
&#xd7; &#xd7;
</button> </button>
...@@ -23,6 +23,72 @@ ...@@ -23,6 +23,72 @@
</button> </button>
</div> </div>
</div> </div>
<div class="suggestions" data-suggest="{{Crypt::encrypt(now()->addMinutes(2))}}">
<div class="partners">
<a href="" class="partner">
<img src="" alt="">
<div>
<div class="title"></div>
<div class="description"></div>
</div>
</a>
<a href="" class="partner">
<img src="" alt="">
<div>
<div class="title"></div>
<div class="description"></div>
</div>
</a>
</div>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="partner">
<img src="" alt="">
<div class="title"></div>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="partner">
<img src="" alt="">
<div class="title"></div>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
<a href="" class="suggestion">
<img src="/img/icon-lupe.svg" alt="search">
<span></span>
</a>
</div>
<div class="search-hidden"> <div class="search-hidden">
@if(Request::filled("token")) @if(Request::filled("token"))
<input type="hidden" name="token" value={{ Request::input("token") }}> <input type="hidden" name="token" value={{ Request::input("token") }}>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment