Skip to content

GitLab

Commit 190725b1 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files
Options

Suchleiste an das neue Design angepasst 

Außerdem habe ich die Ergebnisoptionen umformatiert, sodass diese auf allen Displays und ohne JS gut zu benutzen sind.
parent 995e9dbd
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 80 deletions
resources/assets/less/metager/quicktips.less
View file @ 190725b1
......@@ -9,10 +9,10 @@
}
.quicktip {
margin: 10px 0px;
padding: 10px 0px 10px 10px;
padding: 10px 10px 10px 10px;
width: 100%;
border: 1px solid #ccc;
border-left: 3px solid #fb0;
background-color: white;
@media(max-width: @screen-xs-max) {
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
......@@ -27,7 +27,6 @@
h1 {
margin: 0px 0px 5px 0px;
font-size: 18px;
font-weight: bold;
display: flex;
justify-content: space-between;
.quicktip-extender {
......@@ -73,6 +72,7 @@
&[type=spendenaufruf] {
border: none;
color: #ff8000;
background-color: inherit;
.quicktip-summary {
display: flex;
justify-content: space-between;
......
resources/assets/less/metager/result-page.less
View file @ 190725b1
......@@ -350,6 +350,7 @@ p.mg-logo {
#header-logo {
z-index: 0;
padding-right: 10px;
a h1 {
margin: 0px;
}
......
resources/assets/less/metager/result.less
View file @ 190725b1
......@@ -8,6 +8,7 @@
padding: 15px;
width: 100%;
border: 1px solid #ccc;
background-color: white;
@media(max-width: @screen-xs-max) {
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
......@@ -30,6 +31,7 @@
}
}
.result-link {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -48,6 +50,7 @@
margin-top: 20px;
.result-description {
margin-bottom: 3px;
word-break: break-word;
color: @result-description-color;
font-size: @result-font-medium;
line-height: 1.3;
......@@ -80,6 +83,7 @@
margin-top: 25px;
display: flex;
flex-wrap: wrap;
overflow: auto;
&>*:not(:first-child) {
margin-left: 20px;
}
......@@ -102,6 +106,12 @@
font-size: @result-font-small;
text-decoration: none;
}
margin-left: 25px;
}
@media (max-width: 499px) {
.result-open-newtab {
display: none;
}
}
.result-open-proxy {
&,
......@@ -114,45 +124,18 @@
text-decoration: none;
}
white-space: nowrap;
margin-left: 25px;
img {
margin-bottom: 0px;
margin-right: 2px
}
}
.result-options {
margin-left: auto;
.option-opener-icon {
display: block;
font-size: @result-font-small;
color: black;
}
.option-content {
background-color: white;
z-index: 1000;
position: absolute;
border: grey solid 1px;
color: black;
font-size: 16px;
border-radius: 5px;
hr {
margin: 5px;
}
li {
padding: 5px
}
li:not(.option-title):hover {
background-color: #e0e0e0;
}
a,
a:active,
a:hover,
a:focus,
a:visited {
color: black;
display: block;
}
}
.open-result-options {
font-weight: normal;
flex-grow: 1;
text-align: right;
}
}
&.ad .ad-label {
&,
......@@ -170,4 +153,30 @@
text-align: right;
color: #777;
}
}
\ No newline at end of file
&>.result-options {
&>.options {
width: 100%;
text-align: right;
overflow: hidden;
max-height: 0px;
transition: max-height 1.0s;
-webkit-transition: max-height 1.0s;
}
&>.result-toggle:checked + .options {
max-height: 150px;
}
li {
font-size: 14px;
text-transform: uppercase;
margin: 10px 0;
}
li > a {
color: black;
}
}
}
resources/assets/less/metager/searchbar.less
View file @ 190725b1
......@@ -140,7 +140,9 @@
flex-grow: 1;
input {
border: none;
border-bottom: 1px solid #ccc;
height: 40px;
box-shadow: none;
&:focus {
outline-color: rgb(255, 128, 0);
-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
......@@ -186,13 +188,13 @@ div:hover>.searchbar-tooltip {
.startpage-searchbar {
>* {
border: 1px solid #aaa;
border: 1px solid #a2a2a2;
&:not(:first-child) {
border-left: none;
}
}
.search-input-submit {
border-radius: 0px 5px 5px 0px;
border-radius: 5px;
}
.search-submit {
border-left: 1px solid #aaa;
......@@ -220,21 +222,15 @@ div:hover>.searchbar-tooltip {
.resultpage-searchbar {
padding: 5px;
:first-child {
border-left: none;
}
@media (max-width: @screen-xs-max) {
.search-focus-selector {
border: 1px solid #aaa;
border-top: none;
border-radius: 5px;
}
.search-input-submit {
border: 1px solid #aaa;
border-radius: 5px;
}
>* {
border: 1px solid #aaa;
border-radius: 5px;
min-height: 40px;
&:not(:first-child) {
......@@ -276,18 +272,36 @@ div:hover>.searchbar-tooltip {
}
}
#research-bar {
header {
margin-left: 50px;
padding-top: 10px;
display:flex;
position: fixed;
z-index: 100;
width: 100%;
padding: 10px 60px 0px 10px;
max-width: 700px;
width:100%;
background-color: #FAFAFA;
@media (max-width: 799px) {
margin-left: 0px;
-webkit-box-pack: center;
justify-content: center;
max-width: 799px;
}
}
#research-bar {
max-width: 700px;
width:100%;
padding: 0px 30px 0px 10px;
background-color: white;
border: 1px solid #ccc;
border-bottom: 2px solid rgb(255, 128, 0);
display: flex;
justify-content: center;
@media (max-width: @screen-xs-max) {
flex-direction: column;
padding-right: 10px;
align-items: center;
justify-content: center;
@media (max-width: 799px) {
margin: 0px 8px;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
}
......@@ -295,6 +309,6 @@ div:hover>.searchbar-tooltip {
width: 100%;
height: 60px;
@media (max-width: @screen-xs-max) {
height: 100px;
height: 65px;
}
}
\ No newline at end of file
resources/assets/less/metager/sidebar.less
View file @ 190725b1
......@@ -146,8 +146,8 @@ input#sideBarToggle:checked {
label#openSidebar {
position: fixed;
top: 15px;
right: 20px;
top: 23px;
right: 25px;
z-index: 998;
font-size: 36px;
line-height: 23px;
......
resources/assets/less/metager/start-page.less
View file @ 190725b1
......@@ -2,7 +2,7 @@
@search-bar-width: 1000px;
#mglogo {
font-size: 90px;
font-size: 75px;
@media(max-width: @screen-xs-max) {
font-size: 50px;
}
......@@ -20,7 +20,7 @@
width: @search-bar-width;
}
#mglogo {
margin: 0px 0px 30px 0px;
margin: 0px 0px 45px 0px;
}
.settings-modal-buttons {
padding: 5px;
......
resources/assets/less/metager/variables.less
View file @ 190725b1
......@@ -21,7 +21,7 @@ Helvetica,
Arial,
sans-serif;
// Global textual link color.
@link-color: #2A2ADE;
@link-color: rgb(255,128,0);
// static-pages.less
@static-pages-color-white: @color-white;
@static-pages-color-almost-white: @color-almost-white;
......@@ -45,7 +45,7 @@ sans-serif;
//
@result-page-body-background-color: @background-color;
@result-page-a-hover-color: red;
@result-page-a-visited-color: #792ea1;
@result-page-a-visited-color: rgb(255,128,0);
@result-page-product-shop-color: green;
// start-page.less
@focus-hover-focus-edit-background-color: #e3e3e3;
......
resources/lang/de/result.php
View file @ 190725b1
......@@ -3,7 +3,7 @@
return [
'options.headline' => 'Optionen',
'options.savetab' => 'Ergebnis in Tab speichern.',
'options.1' => 'Suche auf dieser Domain neu starten',
'options.1' => 'Auf dieser Domain neu suchen',
'options.2' => ':host ausblenden',
'options.3' => '*.:domain ausblenden',
'options.4' => 'Partnershop',
......
resources/views/layouts/ad.blade.php
View file @ 190725b1
......@@ -17,5 +17,13 @@
{{ $ad->descr }}
</div>
</div>
<div class="result-footer">
<a class="result-open" href="{{ $ad->link }}" target="_self" rel="noopener">
ÖFFNEN
</a>
<a class="result-open-newtab" href="{{ $ad->link }}" target="_blank" rel="noopener">
IN NEUEM TAB
</a>
</div>
</div>
@endif
resources/views/layouts/researchandtabs.blade.php
View file @ 190725b1
......@@ -8,12 +8,15 @@
</div>
</div>
@endif
<header id="research-bar">
<div id="header-logo">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
</div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
<header>
<div id="research-bar">
<div id="header-logo">
<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
<a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">M</h1></a>
</div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
</div>
</header>
<div id="research-bar-placeholder"></div>
......
resources/views/layouts/result.blade.php
View file @ 190725b1
......@@ -50,19 +50,16 @@
IN NEUEM TAB
</a>
<a class="result-open-proxy" onmouseover="$(this).popover('show');" onmouseout="$(this).popover('hide');" data-toggle="popover" data-placement="auto right" data-container="body" data-content="@lang('result.proxytext')" href="{{ $result->proxyLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">
<img src="/img/proxyicon.png" alt="" />
ANONYM ÖFFNEN
</a>
<div class="result-options">
<a class="dropdown-opener" href="javascript:void(0);">
<i class="fa fa-chevron-down option-opener-icon" aria-hidden="true"></i>
</a>
<div class="dropdown-content option-content">
<label class="open-result-options" for="result-toggle-{{$result->number}}" role="button">
MEHR
</label>
</div>
<div class="result-options">
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="options">
<ul class="option-list list-unstyled small">
<li class="option-title">
<i class="fa fa-cog"></i> {!! trans('result.options.headline') !!}
</li>
<hr>
<li class="js-only">
<a href="javascript:resultSaver({{ $result->number }});" class="saver">
<i class="fa fa-floppy-o"></i> {!! trans('result.options.savetab') !!}
......@@ -88,7 +85,6 @@
</li>
@endif
</ul>
</div>
</div>
</div>
</div>
resources/views/parts/searchbar.blade.php
View file @ 190725b1
......@@ -2,7 +2,7 @@
{{-- Don't forget <script type="text/javascript" src="{{ elixir('js/searchbar.js') }}"></script> --}}
<fieldset>
<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
<div class="searchbar {{$class or ''}}">
<div class="searchbar {{$class or ''}}"><!--
<div class="search-focus-selector">
<button type="button" id="toggleOptBtn" class="js-only" data-mode="o">
<i class="fa fa-sliders"></i>
......@@ -75,10 +75,10 @@
</div>
</div>
</div>
</div>
</div>-->
<div class="search-input-submit">
<div class="search-input">
<input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete or 'off'}}" class="form-control"placeholder="{{ trans('index.placeholder') }}">
<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" autocomplete="{{$autocomplete or 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
</div>
<div class="search-submit" id="submit-inputgroup">
<button type="submit">
......
Markdown is supported
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